/* ==========================================================================
   site-mobile.css — Mobil & Tablet override-ok (Site.css után töltsd be)
   Cél: a mobil hamburgermenü egy JOBBRA IGAZÍTOTT, LEFELÉ NYÍLÓ PANELLEL nyíljon,
        a hamburger gomb látható maradjon, és ne csússzon a hero mögé.
   Nem hozunk be új osztályt; csak meglévőkhöz adunk reszponzív override-ot.
   ========================================================================== */

/* --- Desktop alap: hamburger elemek rejtve -------------------------------- */
#navToggle,
label[for="navToggle"] {
    display: none;
}

/* === Tablet (<= 1024px) =================================================== */
@media (max-width: 1024px) {
    .container {
        max-width: 100%;
        padding-inline: 16px;
    }

    .hero {
        min-height: 720px;
        padding-block: 88px 64px;
        background-attachment: scroll;
    }

    .title {
        font-size: 76px;
    }

    .subtitle {
        font-size: 18px;
        line-height: 28px;
    }

    .events .event-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .media {
        grid-template-columns: 1fr;
    }
}

/* === Kisebb laptop / nagy tablet (<= 900px) =============================== */
@media (max-width: 900px) {
    .navbar {
        height: 72px;
    }
    /* a te Site.css-edhez igazítva */
    .section {
        padding-block: 60px;
    }
}

/* === Mobil (<= 768px) ====================================================== */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip; /* vagy hidden, de a clip szebb scroll viselkedést ad */
    }
    /* biztos ami biztos – semmi ne lógjon túl */
    img, video, iframe, table {
        max-width: 100%;
        height: auto;
    }
    /* ---------- Hamburger alapok ------------------------------------------- */
    #navToggle {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        border: 0;
        white-space: nowrap;
        display: block; /* desktop rejtést felülírjuk */
    }

    label[for="navToggle"] {
        display: inline-flex;
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 3000;
        width: 44px;
        height: 40px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        label[for="navToggle"] .b {
            position: relative;
            width: 22px;
            height: 2px;
            background: currentColor;
        }

            label[for="navToggle"] .b::before,
            label[for="navToggle"] .b::after {
                content: "";
                position: absolute;
                left: 0;
                width: 22px;
                height: 2px;
                background: currentColor;
            }

            label[for="navToggle"] .b::before {
                top: -7px;
            }

            label[for="navToggle"] .b::after {
                top: 7px;
            }

    /* Ha nincs hamburger markup, a főmenü vízszintesen görgethető marad */
    .navbar .nav-links {
        gap: 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

        .nav-links::-webkit-scrollbar {
            display: none;
        }

    /* Alap: a nav rejtve mobilon */
    .navbar nav.nav-links {
        display: none;
    }

    /* === NYITOTT ÁLLAPOT: JOBBRA IGAZÍTOTT PANELES MENÜ ===================== */
    /* A panel a hamburger ALÁ és BALRA nyílik: a viewporthoz képest jobbra igazított fixed elem. */
    #navToggle:checked ~ nav.nav-links {
        display: flex;
        position: fixed;
        top: 72px; /* a navbar magassága — nem takarja a hamburgert */
        right: 12px; /* igazítás a hamburger alá */
        width: min(92vw, 360px); /* max panelszélesség */
        max-height: calc(100vh - 84px);
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
        background: rgba(10, 12, 16, 0.98);
        border-radius: 12px;
        box-shadow: 0 12px 40px rgba(0,0,0,.45);
        z-index: 2500; /* a hero és a navbar fölött */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        white-space: normal;
        overscroll-behavior: contain;
    }

        /* Linkek jól látható színnel, teljes szélességen */
        #navToggle:checked ~ nav.nav-links a,
        #navToggle:checked ~ nav.nav-links .nav-dd-label {
            display: block;
            width: 100%;
            color: var(--text, #EAF2FF);
            opacity: 1;
        }

        /* ---------- DROPDOWN: alapból ZÁRT ------------------------------------- */
        #navToggle:checked ~ nav.nav-links .nav-dd {
            display: block;
            position: static;
            width: 100%;
        }

        #navToggle:checked ~ nav.nav-links .nav-dd-menu {
            position: static;
            display: none;
            visibility: visible;
            opacity: 1;
            transform: none;
            margin: 6px 0 10px;
            padding: 0;
            min-width: 0;
            width: 100%;
            background: transparent;
            border: 0;
            box-shadow: none;
        }
        /* Kinyitás: fókusz vagy hover a lenyíló soron (a címke legyen tabindex="0") */
        #navToggle:checked ~ nav.nav-links .nav-dd:focus-within .nav-dd-menu,
        #navToggle:checked ~ nav.nav-links .nav-dd:hover .nav-dd-menu {
            display: block;
        }

    /* Helyspórolás: brand felirat elhagyása kis kijelzőn (ikon marad) */
    .brand span {
        display: none;
    }

    /* ---------- Egyéb mobil finomhangolások -------------------------------- */
    .hero {
        min-height: 620px;
        padding-block: 72px 52px;
    }

    .title {
        font-size: 56px;
    }

    .subtitle {
        font-size: 17px;
        line-height: 26px;
    }

    .section {
        padding-block: 56px;
    }

    .section-title {
        font-size: 36px;
        margin-bottom: 18px;
    }

    .pill-row {
        gap: 10px;
    }

    .events .event-grid {
        grid-template-columns: 1fr;
    }

    .evt-grid {
        grid-template-columns: 1fr;
    }

    .gallery {
        grid-template-columns: 1fr 1fr;
    }

    .event-meta {
        grid-template-columns: 1fr;
    }

    .event-title {
        font-size: 20px;
    }

    .event-desc {
        font-size: 13px;
    }

    .cta-row {
        gap: 10px;
    }

    .btn, .btn-ghost, .btn-neon, .btn-primary, .btn-sub {
        height: 44px;
        width: 100%;
    }

    .input {
        height: 44px;
    }

    .form-card {
        margin: 16px auto 0;
        padding: 16px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .foot {
        grid-template-columns: 1fr 1fr;
    }

    .newsletter .row {
        flex-direction: column;
        gap: 8px;
    }

    .sub {
        text-align: center;
    }

    .pl-item {
        grid-template-columns: 88px 1fr 44px;
        gap: 8px;
    }

    .pl-time {
        text-align: left;
    }

    .playlist .pl-ctrl .btn {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* === Kis mobil (<= 480px) ================================================= */
@media (max-width: 480px) {
    .container {
        padding-inline: 12px;
    }

    .navbar {
        height: 56px;
    }

    label[for="navToggle"] {
        top: 8px;
        right: 8px;
        width: 40px;
        height: 36px;
    }

    /* A panel teteje is menjen lejjebb a kisebb nav-hoz igazodva */
    #navToggle:checked ~ nav.nav-links {
        top: 56px;
        max-height: calc(100vh - 68px);
    }

    .brand .brand-logo {
        width: 24px;
        height: 24px;
    }

    .title {
        font-size: 44px;
    }

    .subtitle {
        font-size: 15px;
        line-height: 22px;
    }

    .gallery {
        grid-template-columns: 1fr;
    }

    .foot {
        grid-template-columns: 1fr;
    }

    .pl-item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pl-thumb {
        aspect-ratio: 16/9;
    }

    .pl-time {
        text-align: left;
    }

    .pill {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* === Tap-célok mobilon (érintőbarát) ====================================== */
@media (hover: none) and (pointer: coarse) {
    .nav-dd-menu a, .drop-logout {
        padding: 12px 14px;
    }

    .nav-links a, .nav-dd-label {
        height: 44px;
    }
}

/* === Apró finomhangolások ================================================= */
@media (max-width: 640px) {
    #lightboxImg {
        max-width: 92vw;
        max-height: 86vh;
    }
}

@media (max-width: 768px) {
    .table-hscroll {
        margin: 0 -4px;
        padding: 0 4px;
    }

    .table th, .table td,
    table.tbl th, table.tbl td {
        padding: 8px 10px;
    }
}

@media (max-width: 640px) {
    .input-with-icon {
        padding: 0 8px;
    }
}

/* === Admin / Felhasznalok / Regisztraciok — mobil nézet ================== */
/* Toolbar egymás alá, kényelmes érintőmérettel */
@media (max-width: 768px) {
    .page.container--narrow {
        padding-inline: 12px;
    }

    .toolbar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
    }

        .toolbar .input {
            width: 100%;
        }

        .toolbar .chk-wrap {
            order: 2;
        }

        .toolbar .btn {
            order: 3;
            width: 100%;
        }

    /* Tábla: vízszintes görgetés a kártyán belül, a tábla ne törjön szét */
    .page.container--narrow .card {
        overflow-x: auto;
    }

        .page.container--narrow .card .table {
            min-width: 680px;
        }
    /* oszlopszélesség megtartása */

    /* Műveletgombsor: 2 oszlopos elrendezés, kompakt gombméret */
    .btnline {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: stretch;
    }
        /* FELÜLÍRJA a globális .btn { width:100% } szabályt */
        .btnline .btn,
        .btnline button,
        .btnline a {
            width: calc(50% - 4px); /* 2 gomb egymás mellett */
            min-width: 140px; /* ne legyen túl keskeny */
            white-space: nowrap;
            line-height: 1.15;
            padding: .42rem .6rem;
            border-radius: .5rem;
        }
}

@media (max-width: 480px) {
    /* Nagyon kis kijelzőn inkább egymás alá menjenek a gombok */
    .btnline .btn,
    .btnline button,
    .btnline a {
        width: 100%;
        min-width: 0;
    }

    .page.container--narrow .card .table {
        min-width: 600px;
    }
}
/* === Admin / Felhasznalok / Regisztraciok – stacked table mobilon === */
@media (max-width: 768px) {
    /* Fejléc elrejtése, table -> kártyás blokkok */
    .table.stacked thead {
        display: none;
    }

    .table.stacked tbody {
        display: block;
    }

    .table.stacked tr {
        display: block;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 12px;
        padding: 8px 10px;
        margin: 10px 0 14px;
    }

    .table.stacked td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 6px;
        border-bottom: 1px dashed rgba(255,255,255,.18);
    }

        .table.stacked td:last-child {
            border-bottom: 0;
        }

        /* Bal oldali címkék (a data-label tartalma) */
        .table.stacked td::before {
            content: attr(data-label);
            font-weight: 600;
            opacity: .85;
            flex: 0 0 48%;
            max-width: 48%;
        }
        /* Értékek jobb oldalt törés nélkül (ahol lehet) */
        .table.stacked td > *:not(.btnline) {
            flex: 1 1 auto;
            text-align: right;
            word-break: break-word; /* hosszú e-mailek is törhetnek */
        }

        /* Műveletek: címke külön sorban, alatta a gombok rácsban */
        .table.stacked td[data-label="Műveletek"] {
            display: block;
        }

            .table.stacked td[data-label="Műveletek"]::before {
                display: block;
                margin-bottom: 6px;
            }

            .table.stacked td[data-label="Műveletek"] .btnline {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                align-items: stretch;
            }

                .table.stacked td[data-label="Műveletek"] .btnline .btn,
                .table.stacked td[data-label="Műveletek"] .btnline button,
                .table.stacked td[data-label="Műveletek"] .btnline a {
                    width: 100%; /* itt ne legyen 50% – rács oszlop kezeli */
                    min-width: 0;
                    text-align: center;
                }

        /* E-mail oszlop kifejezetten törhető legyen */
        .table.stacked td[data-label="E-mail"] {
            word-break: break-all;
        }
}

@media (max-width: 480px) {
    .table.stacked td[data-label="Műveletek"] .btnline {
        grid-template-columns: 1fr; /* nagyon kicsin 1 oszlop */
    }
}

/* === Regisztraciok – scroll megszüntetése stacked módban === */
@media (max-width: 768px) {
    /* Ne legyen vízszintes scroll a kártyán */
    .page.container--narrow .card {
        overflow-x: visible;
    }

        /* A stacked táblát ne kényszerítsük szélesebbre */
        .page.container--narrow .card .table.stacked {
            min-width: 0 !important;
            width: 100%;
            table-layout: fixed; /* ne számítson nagyobb intrinszik szélességet */
        }

    /* Tördelés biztosítása, hosszú e-mailek miatt se lógjon ki */
    .table.stacked td {
        word-break: break-word;
    }

        .table.stacked td[data-label="E-mail"] {
            word-break: break-all;
        }
}

/* ===== Cookie Banner (mobile) ===== */
@media (max-width: 768px) {
    #cookie-banner .cookie-banner__inner.container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    #cookie-banner .cookie-banner__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #cookie-banner .cookie-banner__title {
        font-size: 15px;
    }

    #cookie-banner .cookie-banner__text {
        font-size: 13px;
        line-height: 1.45;
    }

    #cookie-banner .cookie-banner__actions {
        justify-content: flex-end;
    }

    #cookie-banner .btn {
        width: auto; /* ha teljes szélességet szeretnél: 100% */
    }
}
/* ===== Cookie Preferences Modal (mobile) ===== */
@media (max-width: 768px) {
    .cookie-modal__dialog {
        width: 92vw;
    }

    .cookie-modal__title {
        font-size: 17px;
    }

    .cookie-toggle__text {
        font-size: 13px;
    }

    .cookie-modal__footer {
        flex-wrap: wrap;
    }
}