/* 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) */
    }
}

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

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

.accommodation-hero__copy {
    --acc-hero-header-clearance: 4.75rem;
    --acc-hero-copy-gap: 1.75rem;
    flex: 0 0 auto;
    padding-top: calc(var(--acc-hero-header-clearance) + var(--acc-hero-copy-gap));
    padding-bottom: 0.75rem;
}

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

@media (min-width: 768px) and (max-width: 1149px) {
    .accommodation-hero__copy {
        --acc-hero-header-clearance: 5rem;
        --acc-hero-copy-gap: 2.25rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 1150px) {
    .accommodation-hero__copy {
        --acc-hero-header-clearance: 5.75rem;
        --acc-hero-copy-gap: 4.5rem;
        padding-bottom: 0.5rem;
    }
}

.accommodation-hero__search {
    position: relative;
    z-index: 35;
    width: 100%;
    margin-top: auto;
    padding-bottom: 1.25rem;
    overflow: visible;
}

.accommodation-hero__search .sys-booking-search-widget {
    position: relative;
    z-index: 35;
    pointer-events: auto;
}

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

/* 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%;
    }
}

/* 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;
    }
}