/* =========================================================================
   RESPONSIVE.CSS
   Alle breakpoints voor de nieuwe design. Altijd als laatste laden.
   Schaal: 1024px (tablet landscape), 768px (tablet/mobile menu),
   480px (mobile compact).
   ========================================================================= */


/* ------- 1024px ------- */
@media (max-width: 1024px) {
    .primary-nav { gap: 24px; }
    .primary-nav a { font-size: 0.78rem; letter-spacing: 1.5px; }
    #navEvenementenBtn { font-size: 0.78rem; letter-spacing: 1.5px; }
}


/* ------- 768px ------- */
@media (max-width: 768px) {
    /* Toasts: bovenaan in plaats van rechtsonder. Onderaan zit de duim, de
       browserbalk en op iOS het toetsenbord dat over vaste elementen heen
       schuift (de kassa heeft bijna altijd een gefocust zoekveld). Nieuwste
       melding bovenaan, volle breedte, schuift van boven in. */
    .toast-stack {
        top: 12px;
        bottom: auto;
        left: 12px;
        right: 12px;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
    }
    .toast { max-width: none; transform: translateY(-10px); }
    .toast.is-visible { transform: none; }

    /* Header & navigatie */
    .site-header .wrapper { gap: 16px; }
    .primary-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--dark);
        padding: 20px 32px 28px;
        gap: 18px;
        border-top: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 16px 24px -12px rgba(0,0,0,0.35);
    }
    .primary-nav.open { display: flex; }
    .primary-nav a { font-size: 0.95rem; letter-spacing: 1.5px; padding: 12px 0; }
    .primary-nav a.active::after { display: none; }
    .nav-login {
        display: block;
        margin-top: 6px;
        padding-top: 18px;
        border-top: 1px dashed rgba(242, 238, 227, 0.18);
        color: var(--accent);
        font-weight: 600;
    }
    .mobile-toggle { display: inline-block; }

    /* User-menu verborgen (mobile → .nav-login in hamburger) */
    #navUserMenu { display: none; }

    /* Evenementen-dropdown inline in hamburger-menu */
    #navEvenementenMenu { width: 100%; position: static; }
    #navEvenementenBtn {
        width: 100%;
        font-size: 0.95rem;
        letter-spacing: 1.5px;
        padding: 12px 0;
        justify-content: center;
    }
    #navEvenementenDropdown {
        position: static;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--accent);
        border-radius: 0;
        background: rgba(255, 255, 255, 0.05);
        margin: 6px 0 6px 12px;
        padding: 4px 0;
        min-width: 0;
        width: auto;
    }
    #navEvenementenDropdown .nav-dropdown-link {
        color: var(--bg);
        opacity: 0.85;
        padding: 8px 12px;
    }
    #navEvenementenDropdown .nav-dropdown-link:hover {
        background: rgba(255, 255, 255, 0.08);
        color: var(--bg);
        opacity: 1;
    }
    #navEvenementenDropdown .nav-dropdown-scheiding {
        border-top-color: rgba(255, 255, 255, 0.15);
    }

    /* Mobiel profiel-dropdown */
    .nav-profiel-menu { width: 100%; position: static; }
    #navMobileProfielBtn {
        background: none;
        border: none;
        color: var(--bg);
        font-family: 'General Sans', sans-serif;
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        opacity: 0.78;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        padding: 12px 0;
    }
    .nav-profiel-menu.open #navMobileProfielBtn { opacity: 1; }
    .nav-profiel-menu.open .nav-pijl { transform: rotate(180deg); }
    #navMobileProfielDropdown {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--accent);
        border-radius: 0;
        background: rgba(255, 255, 255, 0.05);
        margin: 6px 0 6px 12px;
        padding: 4px 0;
        min-width: 0;
    }
    .nav-profiel-menu.open #navMobileProfielDropdown { display: block; }
    #navMobileProfielDropdown .nav-dropdown-link { color: var(--bg); opacity: 0.85; padding: 8px 12px; }
    #navMobileProfielDropdown .nav-dropdown-link:hover { background: rgba(255,255,255,0.08); opacity: 1; }

    /* Taalwisselaar in hamburger-menu */
    .taal-toggle { width: 100%; display: flex; justify-content: center; padding-top: 4px; border-top: 1px dashed rgba(255,255,255,0.15); }
    .taal-btn { font-size: 1.4rem; padding: 6px 12px; opacity: 0.45; }
    .taal-btn--actief { opacity: 1; }

    /* Breadcrumb & page header */
    .breadcrumb { padding-top: 22px; flex-wrap: wrap; }
    .page-header { padding: 30px 0 30px; }
    .page-header h1 { font-size: clamp(2rem, 8vw, 3.6rem); }

    /* Hero */
    .hero { padding: 70px 0 70px; }
    .hero h1 { font-size: clamp(3rem, 14vw, 6rem); }
    .accent-block { padding: 0 16px 4px; box-shadow: 4px 6px 0 var(--dark); }

    /* Section bar & day-group */
    .section-bar { padding: 40px 0 16px; margin-bottom: 28px; }
    .day-header { flex-direction: column; align-items: flex-start; gap: 28px; }
    .day-group { padding: 28px 22px 32px; }
    .tafel-section { padding: 20px 18px 22px; }
    .tafel-section-title { align-items: flex-start; flex-direction: column; margin-bottom: 36px; }
    .tijdslot-info { align-items: flex-start; flex-direction: column; gap: 6px; }
    .tijdslot-stats { margin-left: 0; }

    /* Settings */
    .settings-card { padding: 28px 26px; }
    .settings-row { flex-direction: column; align-items: flex-start; gap: 14px; }
    .logo-row { align-items: flex-start; }
    .logo-display { width: 100%; justify-content: space-between; }

    /* Card grid */
    .card-grid { grid-template-columns: 1fr; }
    .description-card--cta { grid-template-columns: 1fr; gap: 24px; }

    /* Description card */
    .description-card { padding: 36px 30px; }
    .description-card::before { display: none; }
    .description-edit-btn { position: static; margin-top: 18px; }

    /* Events toolbar */
    .events-toolbar { flex-direction: column; align-items: flex-start; gap: 16px; }
    .events-toolbar .btn-primary { width: 100%; text-align: center; }

    /* Tabel naar kaartlayout */
    .styled-table { border: none; box-shadow: none; background: transparent; border-radius: 0; }
    .styled-table thead { display: none; }
    .styled-table tbody tr {
        display: block;
        background: var(--paper);
        border: 1.5px solid var(--dark);
        border-radius: var(--radius-md);
        padding: 18px 20px;
        margin-bottom: 16px;
        box-shadow: 0 18px 28px -18px rgba(31, 40, 32, 0.4);
    }
    /* In kaartweergave heeft ook de laatste kaart een onderrand nodig; de
       regel voor de tabelweergave haalt die juist weg. */
    .styled-table tbody tr:last-child { border-bottom: 1.5px solid var(--dark); }
    .styled-table tbody tr:hover { background: var(--paper); }
    .styled-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border: none;
        border-bottom: 1px dashed var(--line);
        gap: 18px;
        text-align: right;
    }
    .styled-table td:last-child { border-bottom: none; padding-top: 14px; }
    .styled-table td::before {
        content: attr(data-label);
        font-family: 'Clash Display', sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 1.6px;
        opacity: 0.6;
        flex-shrink: 0;
    }
    .styled-table td[data-label="Naam"] {
        padding-top: 0;
        padding-bottom: 14px;
        border-bottom: 1.5px solid var(--dark);
    }
    .styled-table td[data-label="Naam"]::before { display: none; }
    .styled-table td[data-label="Naam"] .tabel-naam-link { font-size: 1.15rem; }
    .status-stack { align-items: flex-end; }
    .action-group { justify-content: flex-end; flex-wrap: wrap; }

    /* Event feature */
    .event-feature { grid-template-columns: 1fr; gap: 22px; padding: 28px; text-align: left; }
    .event-date { align-self: flex-start; padding: 18px 22px; }
    .event-date .day-num { font-size: 2.2rem; }
    .event-date .year { font-size: 0.9rem; margin-top: 8px; }
    .event-info .event-meta { gap: 14px; font-size: 0.85rem; }
    .btn-ghost--sm { align-self: flex-start; }

    /* Steps */
    .steps-grid { grid-template-columns: 1fr; gap: 28px; }
    .step-card:nth-child(n) { transform: none; margin-left: 0; }
    .step-card { box-shadow: 5px 5px 0 var(--dark); }

    /* CTA */
    .cta-card { grid-template-columns: 1fr; gap: 36px; padding: 50px 30px; }
    .cta-card::before { display: none; }
    .cta-card h2 { margin-bottom: 16px; }

    /* Summary card */
    .summary-card { grid-template-columns: 1fr 1fr; margin-bottom: 24px; }
    .summary-cell { padding: 12px 16px; }
    .summary-cell:nth-child(2n) { border-right: none; }
    .summary-cell:nth-child(-n+2) { border-bottom: 1.5px dashed var(--line); }

    /* Forms */
    .form-card { padding: 36px 28px; border-radius: var(--radius-md); }
    .form-card::before { display: none; }
    .form-section-title { margin: 36px 0 22px; font-size: 1.25rem; }
    .form-row { grid-template-columns: 1fr; row-gap: 22px; }
    .form-row > .form-field { margin-bottom: 0; }
    .dag-toggle { display: flex; width: 100%; }
    .dag-toggle-btn { flex: 1; text-align: center; }

    /* Org public page hero */
    /* Logo klein rechtsboven naast de titel, zoals op de evenementpagina */
    .org-page-hero { gap: 14px; align-items: flex-start; }
    .org-page-hero .organizer-logo--lg { width: 84px; height: 56px; margin-top: 30px; }
    /* Naast het logo loopt een lange naam over twee regels, woorden blijven heel */
    .org-page-hero .page-header h1 { white-space: normal; text-wrap: balance; }

    /* Banner aspect ratio */
    .banner-image,
    .banner-card > img { aspect-ratio: 3 / 1; }

    /* Expand button touch target */
    .expand-btn { padding: 10px 14px; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding-bottom: 50px;
    }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ------- 480px ------- */
@media (max-width: 480px) {
    .wrapper { width: min(1240px, 90%); }
    .site-header { padding: 14px 0; }
    .brand-mark { font-size: 0.95rem; letter-spacing: 3px; }
    .stat-getal { font-size: 1.6rem; }

    .breadcrumb { font-size: 0.7rem; gap: 8px; }
    .breadcrumb a:not(.crumb-current) { display: none; }
    .breadcrumb .crumb-sep:not(:last-of-type) { display: none; }

    .page-header { padding: 24px 0 26px; }
    .page-overline { font-size: 0.74rem; gap: 10px; margin-bottom: 14px; }
    .page-sub { font-size: 1rem; }

    .hero { padding: 60px 0 60px; }
    .hero h1,
    .page-header h1 { font-size: clamp(2.2rem, 11vw, 4.6rem); line-height: 0.9; }
    .hero-strapline { margin-top: 22px; font-size: 1.15rem; }
    .hero-sub { font-size: 1.05rem; margin-top: 18px; }
    .hero-cta-row { margin-top: 30px; gap: 12px; }
    .btn-primary,
    .btn-ghost { width: 100%; text-align: center; padding: 15px 22px; }

    .section-bar h2 { font-size: 1.7rem; }

    .tafel-grid { grid-template-columns: 1fr; gap: 60px; }

    .settings-card { padding: 24px 20px; }
    .settings-card-header { padding-bottom: 18px; }
    .settings-row { padding: 18px 0; }
    .toggle-label { min-width: 0; }

    .description-card { padding: 28px 24px; }
    .description-content p { font-size: 0.96rem; }
    .events-toolbar .btn-primary { width: 100%; text-align: center; }

    .styled-table tbody tr { padding: 16px 18px; }
    .styled-table td { padding: 9px 0; gap: 12px; font-size: 0.88rem; }

    .event-feature { padding: 22px; gap: 18px; }
    .event-info h3 { font-size: 1.5rem; margin-bottom: 12px; }
    .event-info .event-meta { font-size: 0.8rem; gap: 10px 14px; letter-spacing: 1.2px; }
    .event-info .event-meta span { gap: 8px; }
    .events-footer-link { padding: 12px 0 40px; }
    .events-footer-link .btn-ghost { width: 100%; text-align: center; }

    .step-card { padding: 24px 22px 26px; }
    .step-num { font-size: 3.4rem; }
    .step-title { font-size: 1.35rem; }
    .step-desc { font-size: 0.98rem; }

    .organizer-card { padding: 22px 20px; gap: 14px; }
    .organizer-logo { width: 48px; height: 48px; font-size: 1.2rem; }

    .cta-section { padding: 50px 0 80px; }
    .cta-card { padding: 40px 24px; }
    .cta-card p { font-size: 1.02rem; }
    .cta-action .btn-primary,
    .cta-action .btn-ghost { width: 100%; text-align: center; }

    .summary-card { grid-template-columns: 1fr; }
    .summary-cell {
        padding: 12px 16px;
        border-right: none !important;
        border-bottom: 1.5px dashed var(--line);
    }
    .summary-cell:last-child { border-bottom: none; }

    .form-card { padding: 28px 22px; }
    .form-section-title { font-size: 1.15rem; padding-bottom: 12px; margin: 32px 0 20px; }
    .form-field input,
    .form-field select,
    .form-field textarea { padding: 13px 14px; font-size: 0.98rem; }
    .checkbox-label { padding: 14px 16px; font-size: 0.9rem; gap: 12px; }
    .expand-panel { padding: 18px 18px; }
    .form-login-prompt { padding: 14px 18px; }
    .form-login-prompt .prompt-text { font-size: 0.86rem; }
    .btn-primary--block { padding: 16px 22px; font-size: 0.78rem; letter-spacing: 1.8px; }

    /* Banner aspect ratio on small phones */
    .banner-image,
    .banner-card > img { aspect-ratio: 2 / 1; }

    .site-footer { padding: 60px 0 24px; margin-top: 60px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }
    .footer-brand { font-size: 2.2rem; }
}

/* Bring & Buy: spel-rijen mogen op smalle schermen wel omlopen */
@media (max-width: 640px) {
    #bb-kavels .tijdblok-velden { flex-wrap: wrap; }
    #bb-kavels .form-field-inline,
    #bb-kavels .form-field-inline:nth-child(2) { flex: 1 1 100%; }
    /* Elk spel een eigen kader met genummerde kop; de prullenbak rechtsboven */
    #bb-kavels { counter-reset: spel; }
    #bb-kavels .tijdblok-rij {
        position: relative;
        margin-bottom: 14px;
        padding: 14px;
        border: 1.5px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--paper-soft);
    }
    #bb-kavels .tijdblok-rij[data-kop]::before {
        counter-increment: spel;
        content: attr(data-kop) " " counter(spel);
        display: block;
        margin-bottom: 10px;
        font-family: 'Clash Display', sans-serif;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--dark);
    }
    #bb-kavels [data-kavel-verwijder] { position: absolute; top: 8px; right: 8px; }
}

/* Tabletbreedte: de kaart in de evenementenlijst heeft drie kolommen (datum, titel,
   knop). Tussen 769 en 1024 px is de titelkolom zo smal dat lange namen midden in
   een woord afbreken. Dan de knop op een eigen rij, zodat de titel de breedte krijgt. */
@media (min-width: 769px) and (max-width: 1024px) {
    .event-feature { grid-template-columns: auto minmax(0, 1fr); gap: 24px 32px; padding: 28px 32px; }
    .event-feature > .btn-ghost { grid-column: 1 / -1; justify-self: start; }
    .event-info h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
}