/* SYS listing pages — empty states, mobile filters, stacking safety */

/* ---- Stacking: page chrome stays below mobile nav ---- */
.sys-booking-search-widget {
    z-index: 35;
}

.sys-booking-search-widget [style*="z-index: 999998"],
.sys-booking-search-widget [style*="z-index: 999999"] {
    z-index: 35 !important;
}

body.mobile-nav-open #siteNav {
    z-index: 200 !important;
}

body.mobile-nav-open {
    overflow: hidden;
    touch-action: none;
}

body.mobile-nav-open #languageDropdownMobile {
    visibility: hidden;
    pointer-events: none;
}

body.listing-filters-open {
    overflow: hidden;
}

/* ---- Mobile / tablet filter drawer (below lg = 1024px) ---- */
.listing-filters-trigger-wrap {
    display: none;
}

@media (max-width: 1023px) {
    .listing-filters-trigger-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .listing-filters-aside {
        position: fixed;
        inset: 0;
        z-index: 160;
        display: block;
        pointer-events: none;
        visibility: hidden;
        /* Collapse grid contribution so the listing isn't pushed down */
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .listing-filters-aside.is-open {
        pointer-events: auto;
        visibility: visible;
        width: 100% !important;
        height: 100% !important;
    }

    .listing-filters-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .listing-filters-aside.is-open .listing-filters-backdrop {
        opacity: 1;
    }

    .listing-filters-panel {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: min(100vw, 22rem);
        max-width: 100vw;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--creme, #f5f0e6);
        border-right: 1px solid #d4d4d4;
        padding: 1rem;
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        border-radius: 0 !important;
    }

    .listing-filters-aside.is-open .listing-filters-panel {
        transform: translateX(0);
    }

    .listing-filters-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .listing-filters-panel .listing-filters-desktop-heading {
        display: none;
    }
}

@media (min-width: 1024px) {
    .listing-filters-backdrop,
    .listing-filters-panel-header {
        display: none !important;
    }

    .listing-filters-aside {
        position: static;
        inset: auto;
        visibility: visible;
        pointer-events: auto;
        display: block;
    }

    .listing-filters-panel {
        position: static !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        /* keep blade card styles (border/bg/padding) */
    }
}

/* ---------------------------------------------------------------------------
   Room / package listing cards — durable geometry
   Vite/Tailwind arbitrary utilities (aspect-[4/5], min-h-[380px], …) can be
   missing from a stale build. Without these rules the card collapses to 0px
   height (absolute media + overlay contribute no flow height) while the
   "N Room" count still renders — matching client screenshot evidence.
--------------------------------------------------------------------------- */
.sys-room-card,
.sys-package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    min-height: 380px;
    max-height: 460px;
    width: 100%;
}

.sys-room-card__media,
.sys-package-card__media {
    z-index: 0;
}

.sys-room-card img,
.sys-package-card img {
    display: block;
}

/* Accommodation listing hero with in-hero search — taller balanced frame.
   Desktop ~620–680px (cap ~700px); tablet ~520–580px.
   CLOSURE-86D.4: mobile no longer forces a viewport-relative floor — see
   closure-86d3's audit. A large min-height combined with .accommodation-hero__copy's
   old flex-grow + align-items:center produced a large elastic empty zone between
   the breadcrumb and the search panel that no amount of padding could fix, since
   the gap scaled with viewport height, not with content. Mobile hero height is now
   content-driven (title + breadcrumb + search, normal flow). Tablet (>=768px) and
   desktop (>=1024px, >=1400px) min-height rules below are unchanged. */
.page-hero--balanced {
    min-height: auto; /* mobile: content-driven, see CLOSURE-86D.4 note above */
}

@media (min-width: 768px) {
    .page-hero--balanced {
        min-height: clamp(32.5rem, 55vh, 36.25rem); /* ~520–580px tablet */
    }
}

@media (min-width: 1024px) {
    .page-hero--balanced {
        min-height: clamp(38.75rem, 58vh, 42.5rem); /* ~620–680px desktop */
    }
}

@media (min-width: 1400px) {
    .page-hero--balanced {
        min-height: clamp(40rem, 52vh, 43.75rem); /* cap ~700px large desktop */
    }
}

.page-hero--compact {
    min-height: 200px;
}

@media (min-width: 640px) {
    .page-hero--compact {
        min-height: 240px;
    }
}

@media (min-width: 1024px) {
    .page-hero--compact {
        min-height: 300px;
    }
}

/* Opt-in fixed hero height (About, Accommodation, Contact, Special Packages, Dayout).
   Other page-hero callers are unaffected — they never receive this class.
   Desktop/tablet (≥768px): exact 400px bounding box (border-box). */
.page-hero--fixed-400 {
    box-sizing: border-box;
    height: auto;
    min-height: 14rem; /* mobile: safer crop */
    max-height: none;
}

@media (min-width: 768px) {
    .page-hero.page-hero--fixed-400 {
        box-sizing: border-box !important;
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        overflow: hidden !important;
    }

    .page-hero.page-hero--fixed-400 > *:not(.page-hero__bg) {
        flex-shrink: 1;
        min-height: 0;
    }

    /*
     * Accommodation-only: title/breadcrumb must clear the absolute #siteNav
     * (measured ~108px on desktop). The earlier fixed-500 tighten used
     * padding-top: 1.25rem and vertically centered the copy, which pulled
     * the title under the logo. Keep search anchored to the bottom via
     * margin-top: auto without redistributing title upward.
     */
    .page-hero.page-hero--fixed-400.accommodation-hero .accommodation-hero__copy {
        flex: 0 0 auto;
        display: block;
        align-items: stretch;
        padding-top: 8.5rem; /* clear absolute navbar/logo (~108px) + breathing room */
        padding-bottom: 0.35rem;
    }

    .page-hero.page-hero--fixed-400.accommodation-hero .accommodation-hero__search {
        margin-top: auto;
        padding-top: 0.25rem;
        padding-bottom: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .page-hero.page-hero--fixed-400.accommodation-hero .accommodation-hero__copy {
        padding-top: 8.75rem;
    }
}

.page-hero__search {
    max-width: 100%;
}

/* Accommodation hero owns search placement (shared widget unchanged). */
.accommodation-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.accommodation-hero .page-hero__bg img {
    object-fit: cover;
    object-position: center center;
}

.accommodation-hero__bg {
    z-index: 0;
}

/* CLOSURE-86D.4: mobile uses NORMAL FLOW, not a flex-growing centered region.
   The previous `flex: 1 1 auto; display: flex; align-items: center;` (from
   NORMAL-ACCOMMODATION-SEARCH-UX-VISUAL-QA-CLOSURE-53), combined with
   .page-hero--balanced's viewport-relative min-height and
   .accommodation-hero__search's `margin-top: auto`, forced this block to grow
   to fill all leftover height in the hero and then centered its (short)
   content within that oversized box — producing a large elastic empty zone
   between the breadcrumb and the search panel that scaled with viewport
   height. See docs/closure-86d3-accommodation-hero-structure-comparison-audit.md
   for the full trace. On mobile this block is now a plain, non-growing block:
   its height is simply its own content's height, so there is no space left
   for anything to redistribute. The `flex: 1 1 auto; display: flex;
   align-items: center;` behavior is restored at >=768px below, unchanged. */
.accommodation-hero__copy {
    flex: none;
    display: block;
    /* CLOSURE-86B: #siteNav (layouts/app.blade.php) is `position: absolute;
       top: 0; z-index: 40` — it overlays the page rather than pushing content
       down, so every hero is individually responsible for reserving enough
       top clearance to avoid sitting under the logo/hamburger/language row.
       This value is unrelated to the elastic-gap bug fixed in CLOSURE-86D.4
       above and is left unchanged. */
    padding-top: 3.5rem;
    /* CLOSURE-86D.4: single, intentional gap before the search panel (Part D,
       Option A) replacing the stacked 1.75rem copy padding-bottom + 1.5rem
       breadcrumb margin-bottom that were both compensating for the old
       elastic-centering bug above. Now that mobile is normal flow, one small
       value is enough — the breadcrumb's own margin-bottom is 0 (see
       .accommodation-hero__copy nav below). */
    padding-bottom: 1rem;
}

.accommodation-hero__copy .main-width {
    width: 100%;
    text-align: left;
}

/* CLOSURE-86D.4: the previous 1.5rem breadcrumb margin-bottom (CLOSURE-86D.2)
   was a targeted workaround for align-items:center's free-space
   redistribution, which no longer applies now that .accommodation-hero__copy
   is normal flow on mobile. The single intentional gap now lives on
   .accommodation-hero__copy's own padding-bottom above (Option A). */
.accommodation-hero__copy nav {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .accommodation-hero__copy {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        padding-top: 1.5rem;
        padding-bottom: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .accommodation-hero__copy {
        padding-top: 1.75rem;
        padding-bottom: 1rem;
    }
}

.accommodation-hero__copy h1 {
    margin-bottom: 0.65rem;
}

/* Glass search: lower third, balanced left/right, not glued to the bottom edge.
   CLOSURE-86D.4: mobile no longer uses `margin-top: auto` — that rule is what
   pinned this panel to the bottom of .page-hero--balanced's large min-height
   floor, forcing .accommodation-hero__copy to grow and absorb the leftover
   space above it (see closure-86d3's audit). With .accommodation-hero__copy
   now normal flow and the balanced min-height floor removed on mobile, this
   panel is now in normal flow immediately after the copy block, with a small
   fixed gap. `margin-top: auto` is restored at >=768px below, unchanged. */
.accommodation-hero__search {
    position: relative;
    z-index: 35;
    width: 100%;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    padding-bottom: 1.5rem;
    overflow: visible;
}

.accommodation-hero__search .sys-booking-search-widget {
    position: relative;
    z-index: 35;
    pointer-events: auto;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .accommodation-hero__search {
        margin-top: auto;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .accommodation-hero__search {
        padding-top: 1.25rem;
        padding-bottom: 2.25rem;
    }
}

/* Board option rows — details | guest capacity | rate | book CTA. */
.acc-board-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem 1.25rem;
    align-items: start;
}

.acc-board-row__capacity {
    display: flex;
    align-items: center;
}

.acc-board-row__capacity-inner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 3.25rem;
}

.acc-board-row__guest-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.acc-board-row__guest-count {
    min-width: 1ch;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.acc-board-row__price {
    text-align: left;
}

.acc-board-row__cta-mobile {
    display: block;
}

.acc-board-row__cta-desktop {
    display: none;
}

@media (min-width: 768px) {
    .acc-board-row {
        grid-template-columns: minmax(0, 1fr) 4.75rem 9rem 15.75rem;
        gap: 1.25rem 1.75rem;
        align-items: center;
        padding: 1.35rem 1.5rem;
    }

    .acc-board-row__capacity {
        justify-content: center;
        width: 100%;
    }

    .acc-board-row__capacity-inner {
        justify-content: center;
        width: 100%;
    }

    .acc-board-row__price {
        text-align: right;
    }

    .acc-board-row__cta {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .acc-board-row__cta-mobile {
        display: none;
    }

    .acc-board-row__cta-desktop {
        display: inline-flex;
    }
}

/* Legacy wrapper — no longer used on Accommodation; keep harmless if present */
@media (max-width: 1023px) {
    .sys-booking-search-widget {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sys-booking-search-widget form {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   NORMAL-ACCOMMODATION-SINGLE-VS-MULTIROOM-SEARCH-DETAILS-UX-IMPLEMENTATION-51
   CLOSURE-89D.8: the Quick View dialog's structural markup (root/backdrop/
   panel/close-button/body) was rebuilt in index.blade.php to use the exact
   same Tailwind utility classes as the approved accommodations/{id} popup
   (#roomDetailsModal in show.blade.php) — a single scrolling panel holding
   both the close button and the content, centered via a flex wrapper, with
   normal responsive reflow (no bottom-sheet-on-mobile transform). The old
   structural rules for that shell, and the scoped-override layer added on
   top of them by a later closure, have both been removed: this shell now
   has exactly one consumer sitewide (the selected-room "More Details"
   trigger, since Closure-89C removed the search-card trigger), so there is
   nothing left for those class-based rules to style. Only the scroll-lock
   class toggled directly on <body> remains needed.
--------------------------------------------------------------------------- */
body.room-quickview-open {
    overflow: hidden;
}

/* Package grids: avoid squashed half-columns at tablet */
@media (max-width: 639px) {
    #packagesContainer,
    #packagesGrid {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    #packagesContainer,
    #packagesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}