/* Meniul „Mai multe” este încărcat la cerere într-un drawer. Ruta dedicată
   rămâne fallback funcțional pentru navigarea fără JavaScript. */
.header-more-menu-trigger {
    display: inline-flex;
}

/* Primul interval desktop al proiectului este 992–1279,98px. Hamburgerul
   rămâne disponibil aici și dispare abia din layoutul desktop larg. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .public-header--homepage .header-hamburger-btn.header-more-menu-trigger {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1;
    }
}

@media (min-width: 1280px) {
    .header-more-menu-trigger:not(.header-more-menu-trigger--all-desktop) {
        display: none !important;
    }
}

.header-more-menu-trigger--all-desktop {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .header-more-menu-trigger--desktop-only {
        display: none !important;
    }
}

.more-menu-drawer {
    --bs-offcanvas-width: min(470px, 100vw);
    border-right: 1px solid rgba(99, 102, 241, 0.14) !important;
    background: #f2f2f7;
    box-shadow: 18px 0 48px rgba(30, 41, 59, 0.16);
}

.more-menu-drawer-header {
    min-height: 76px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(100, 116, 139, 0.14);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.more-menu-drawer-eyebrow {
    margin-bottom: 1px;
    color: #6d5dfc;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.more-menu-drawer .offcanvas-title {
    color: #18172a;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.15;
}

.more-menu-drawer-close {
    width: 38px;
    height: 38px;
    margin: 0 !important;
    padding: 0;
    border: 1px solid rgba(100, 116, 139, 0.16);
    border-radius: 50%;
    background-color: #fff;
    background-size: 13px;
    box-shadow: 0 5px 16px rgba(30, 41, 59, 0.08);
    opacity: 1;
}

.more-menu-drawer-body {
    padding: 0;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.more-menu-drawer-body .more-app-menu-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 16px calc(30px + env(safe-area-inset-bottom)) !important;
}

/* Drawerul folosește pe desktop spațiul disponibil al suprafeței, nu lățimea
   de telefon a offcanvasului Bootstrap. Fragmentul păstrează aceeași ordine
   semantică, iar CSS Columns îl distribuie natural pe verticală: două
   coloane pe desktopul compact și trei pe desktopul larg. Grupurile nu sunt
   despărțite între coloane, deci fiecare titlu rămâne lipit de cardul său. */
@media (min-width: 992px) {
    .more-menu-drawer {
        --bs-offcanvas-width: min(940px, var(--more-menu-width, calc(100vw - var(--more-menu-left, 0px) - 16px)));
    }

    .more-menu-drawer-body .more-app-menu-container {
        padding: 16px 16px calc(24px + env(safe-area-inset-bottom)) !important;
    }

    .more-menu-fragment .more-desktop-grid {
        display: block;
        column-count: 2;
        column-gap: 16px;
        column-fill: balance;
    }

    .more-menu-fragment .more-desktop-column {
        display: contents;
    }

    .more-menu-fragment .app-menu-group,
    .more-menu-fragment .more-desktop-column > .app-menu-card,
    .more-menu-fragment .more-desktop-column > .d-flex {
        display: inline-block;
        width: 100%;
        margin-bottom: 16px;
        break-inside: avoid-column;
        page-break-inside: avoid;
    }

    .more-menu-fragment .app-menu-group-title {
        margin-left: 6px;
    }

    .more-menu-fragment .app-menu-row {
        padding: 0.75rem 0.875rem;
    }
}

@media (min-width: 1280px) {
    .more-menu-drawer {
        --bs-offcanvas-width: min(1100px, var(--more-menu-width, calc(100vw - var(--more-menu-left, 0px) - 16px)));
    }

    .more-menu-fragment .more-desktop-grid {
        column-count: 3;
    }
}

.more-menu-drawer-loading,
.more-menu-drawer-error {
    min-height: 180px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #64748b;
    font-size: 0.875rem;
    text-align: center;
}

.more-menu-drawer-error {
    flex-direction: column;
}

@media (max-width: 575.98px) {
    .more-menu-drawer {
        --bs-offcanvas-width: 100vw;
        border-right: 0 !important;
    }

    .more-menu-drawer-body .more-app-menu-container {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

/* Până la desktopul larg controlul rămâne în locul în care omul a deschis meniul:
   hamburgerul din header devine X. Drawerul începe exact sub acel header,
   iar întreg spațiul rămas este scrollportul meniului. Valoarea exactă a
   marginii de sus este măsurată de controller, nu aproximată în CSS. */
@media (max-width: 1279.98px) {
    .more-menu-drawer {
        top: 0;
        bottom: 0;
        height: auto;
        max-height: none;
        overflow: hidden;
    }

    .more-menu-drawer-header {
        display: none;
    }

    .more-menu-drawer-body {
        min-height: 0;
        margin-top: var(--more-menu-top, var(--home-header-height, 76px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        scroll-padding-top: 18px;
        scroll-padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    }

    body.more-menu-is-open .header-hamburger-btn[data-more-menu-trigger] {
        color: inherit;
        background: transparent !important;
    }

    body.more-menu-is-open .header-hamburger-btn[data-more-menu-trigger] .lucide,
    body.more-menu-is-open .header-hamburger-btn[data-more-menu-trigger] svg {
        color: #1e293b;
        stroke: #1e293b;
    }

    /* Drawerul înlocuiește temporar navigația principală. Pastila rămasă
       deasupra lui crea o bandă întunecată și tăia ultimul rând al meniului. */
    .mobile-nav-bar {
        transition: opacity 160ms ease, transform 180ms ease, visibility 160ms ease;
    }

    body.more-menu-is-open .mobile-nav-bar {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(16px);
    }
}

/* Varianta pilot Evenimente păstrează aceeași interacțiune și pe desktopul
   larg: hamburgerul rămâne X, iar headerul intern redundant nu apare. */
.more-menu-drawer--all-desktop {
    top: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
}

.more-menu-drawer--all-desktop .more-menu-drawer-header {
    display: none;
}

.more-menu-drawer--all-desktop .more-menu-drawer-body {
    min-height: 0;
    margin-top: var(--more-menu-top, 70px);
}

body.more-menu-is-open .header-more-menu-trigger--all-desktop {
    color: inherit;
    background: transparent !important;
}

body.more-menu-is-open .header-more-menu-trigger--all-desktop .lucide,
body.more-menu-is-open .header-more-menu-trigger--all-desktop svg {
    color: #1e293b;
    stroke: #1e293b;
}

/* Paginile individuale nu folosesc shellul listărilor, deci nu moșteneau
   masca albă pe care Acasă o afișează deasupra backdropului. Stratul rămâne
   sub navbar (1050), dar peste drawer/backdrop, exact ca în shellul comun. */
@media (min-width: 992px) {
    body.event-page.more-menu-is-open::before,
    body.place-page.more-menu-is-open::before {
        content: "";
        position: fixed;
        z-index: 1048;
        top: 0;
        right: 0;
        left: 0;
        height: 72px;
        pointer-events: none;
        background: #f6f7fb;
    }
}

@media (min-width: 768px) {
    .more-menu-drawer {
        left: var(--more-menu-left, 0) !important;
        border-radius: 0 24px 24px 0;
    }
}

/* Tabletă + desktop: toate paginile folosesc aceeași materializare verticală,
   din muchia headerului în jos. Poziția rămâne ancorată la coloana principală
   prin --more-menu-left atunci când pagina expune o astfel de coloană. */
@media (min-width: 768px) {
    body .more-menu-drawer.offcanvas.offcanvas-start {
        transform: none !important;
        transform-origin: top center;
        clip-path: inset(0 0 100% 0) !important;
        opacity: 0;
        will-change: clip-path, opacity;
        transition:
            clip-path 320ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 160ms ease,
            visibility 320ms ease !important;
    }

    body .more-menu-drawer.offcanvas.offcanvas-start.showing,
    body .more-menu-drawer.offcanvas.offcanvas-start.show:not(.hiding) {
        transform: none !important;
        clip-path: inset(0 0 0 0) !important;
        opacity: 1;
    }

    body .more-menu-drawer.offcanvas.offcanvas-start.hiding {
        transform: none !important;
        clip-path: inset(0 0 100% 0) !important;
        opacity: 0;
    }
}

/* Sub 768px rămâne intenționat animația Bootstrap `offcanvas-start`, adică
   meniul intră lateral din stânga, la fel ca pe pagina index. */

@media (prefers-reduced-motion: reduce) {
    body .more-menu-drawer.offcanvas.offcanvas-start {
        transition: none !important;
    }
}

[data-bs-theme="dark"] .more-menu-drawer {
    border-right-color: rgba(255, 255, 255, 0.1) !important;
    background: #000;
}

[data-bs-theme="dark"] .more-menu-drawer-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: rgba(28, 28, 30, 0.94);
}

[data-bs-theme="dark"] .more-menu-drawer .offcanvas-title {
    color: #f8fafc;
}