/*------------------------------------*\
	    responsive
\*------------------------------------*/


.hamburger-menu {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 1200; 
}

.hamburger-menu .line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--clr-dark);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- TABLET BREAKPOINT (max 1024px) --- */
@media (max-width: 1024px) {
    /* Kolommen breken naar helft of full-width */
    .col-4, .col-3 {
        grid-column: span 6;
    }

    .balloon-wrapper .tb-container {

            max-width: calc(50vw - (var(--marge) * 4)) !important; 


    }
}

/* --- MOBILE BREAKPOINT (max 768px) --- */
@media (max-width: 768px) {
  
    
    :root {
    --marge: 1em; 
        /* --btn-height: 2.8rem; */
    }
    /* Activeer Hamburger */
    .hamburger-menu {
        display: flex;
    }

    /* Verberg en stijl het menu full-screen */
    .nav-primary {
        position: fixed;
        inset: 0;
        background-color: var(--clr-bg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1100;
    }

    /* Menu Open Status (Gestuurd door JS) */
    body[data-menu-open="true"] .nav-primary {
        opacity: 1;
        pointer-events: auto;
    }

    /* Hamburger Animatie (Jouw code, iets gestroomlijnd) */
    body[data-menu-open="true"] .hamburger-menu .line-top {
        transform: translateY(8px) rotate(45deg);
    }
    body[data-menu-open="true"] .hamburger-menu .line-middle {
        opacity: 0;
    }
    body[data-menu-open="true"] .hamburger-menu .line-bottom {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Grid Stacking op Mobiel */
    .grid {
        grid-template-columns: 1fr;
    }
    /* Laat alle classes 100% breedte pakken op mobiel */
    .col-12, .col-8, .col-6, .col-4, .col-3 {
        grid-column: span 1;
    }

.pricing-grid {

        padding: 0 var(--marge); 
        flex-direction: column; 
    }

    .pricing-card {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0; 
    }

    .referenties-track {
        grid-template-columns: 1fr;
    }
    .referenties-carousel-wrapper {
        padding: 0 3.5em;
    }    
    .referentie-card {
        flex: 0 0 calc(90vw - var(--btn-height) * 4.5); 
    }


    .tb-container { max-width: 80vw; }
    .tb-text { font-size: calc(var(--font-size) * 1); }
    .content-split { flex-direction: column; gap: 2rem; padding: 0 10%; }
    .content-left,
    .content-right,
    .tarieven-text { font-size: calc(var(--font-size) * 1); }

    .carousel-thumb { width: 50px; height: 35px; }
    
    /* Mobiele Hero Textballon Override */
    .balloon-wrapper {
        top: 0 !important; left: 0 !important;
        width: 100%; height: 100%;
        transform: none !important;
    }
    .balloon-wrapper .hexagons {
        display: none; /* Geen stipjes/hexagons meer */
    }
    .balloon-wrapper .tb-container {
        top: auto !important;
        bottom: var(--marge) !important;
        left: var(--marge) !important;
        right: auto !important;
        max-width: none !important;
        width: calc(100% - (var(--marge) * 2)) !important; /* Volle breedte met marge behouden */
        transform-origin: center bottom !important;
    }



    #contact {
        & .content-left { padding-right: 0; };

        & .content-right { transform: translateX(0); };
    }

}