/* ==========================================================================
   Ivory Lake Hotel — Responsive Styles
   Mobile-first; breakpoints in px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet — max 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ilh-about__grid,
    .ilh-why__grid,
    .ilh-mission__grid,
    .ilh-contact__grid,
    .ilh-room-section__grid,
    .ilh-casino-showcase__grid,
    .ilh-casino-intro__inner,
    .ilh-casino-callout__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .ilh-casino-showcase__pillars {
        grid-template-columns: 1fr 1fr;
    }

    .ilh-why__media {
        order: 1 !important;
    }
    .ilh-why__content {
        order: 2 !important;
    }

    .ilh-mission__grid > :first-child,
    .ilh-mission__grid > :last-child {
        order: unset;
    }

    .ilh-room-section:nth-child(even) .ilh-room-section__media,
    .ilh-room-section:nth-child(even) .ilh-room-section__content {
        order: unset;
    }

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

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

    .ilh-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .ilh-about__float-badge {
        right: 1rem;
    }

    .ilh-mission__image-secondary {
        bottom: -1.5rem;
        right: -1.5rem;
    }

    .ilh-why__stats {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------------------------
   Small tablet / large phone — max 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --ilh-section-pad: clamp(3rem, 8vw, 5rem);
    }

    /* Header */
    .ilh-header__inner {
        height: 64px;
    }
    .ilh-hamburger {
        display: flex;
    }

    /* Mobile nav drawer
       — position:fixed with explicit height (not bottom) avoids iOS dynamic toolbar gaps.
       — overflow-y: scroll is more reliable than auto on iOS Safari.
       — We use `right` offset to hide/show (NOT transform) because Chrome has a known
         bug where transform on position:fixed elements contributes to document scrollWidth,
         causing false horizontal scroll even when the element is off-screen. */
    .ilh-nav {
        position: fixed;
        top: 0;
        /* Off-screen to the right via right property (no transform = no Chrome scrollWidth bug) */
        right: calc(-1 * min(300px, 85vw) - 2px);
        width: min(300px, 85vw);
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        background: var(--ilh-bg-2);
        border-left: 1px solid var(--ilh-gold-border);
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6);
        padding: 80px 1.25rem 3rem 1.25rem;
        /* Transition `right` not transform */
        transition: right 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.38s;
        visibility: hidden;
        z-index: 850;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        flex-shrink: 0;
    }
    .ilh-nav.ilh-nav--open {
        right: 0;
        visibility: visible;
    }
    .ilh-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        /* make list take at least full available height so tap targets are big */
        min-height: 100%;
    }
    .ilh-nav__link {
        font-size: 1rem;
        padding: 0.85rem 1rem;
        justify-content: space-between;
        border-radius: var(--ilh-radius);
        white-space: normal;
        word-break: break-word;
    }
    .ilh-nav__dropdown {
        position: static;
        /* reset desktop transition/visibility values */
        transform: none !important;
        opacity: 1;
        visibility: visible;
        border: none;
        border-left: 2px solid var(--ilh-gold-border);
        border-radius: 0;
        background: transparent;
        padding: 0.25rem 0 0.25rem 0.75rem;
        margin-left: 0.75rem;
        box-shadow: none;
        display: none;
    }
    .ilh-nav__item--has-dropdown.ilh-nav__item--dropdown-open .ilh-nav__dropdown,
    .ilh-nav__item--has-dropdown[aria-expanded="true"] .ilh-nav__dropdown {
        display: block;
    }
    .ilh-nav__dropdown-link {
        font-size: 0.9rem;
        padding: 0.6rem 0.75rem;
        white-space: normal;
    }
    /* .ilh-nav-overlay display is controlled exclusively by JS (openNav/closeNav).
       No CSS override here — avoids the overlay blocking pointer events when closed. */

    /* Hero */
    .ilh-hero {
        min-height: 80vh;
    }
    .ilh-hero__title {
        font-size: clamp(2.2rem, 7vw, 3.5rem);
    }
    .ilh-hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .ilh-hero__actions .ilh-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Sections */
    .ilh-about__float-badge {
        position: static;
        margin-top: 1rem;
        display: inline-block;
    }
    .ilh-amenities__grid {
        grid-template-columns: 1fr;
    }
    .ilh-featured__grid {
        grid-template-columns: 1fr;
    }
    .ilh-featured__header {
        flex-direction: column;
        align-items: flex-start;
    }
    .ilh-why__stats {
        grid-template-columns: 1fr;
    }
    .ilh-mission__image-secondary {
        position: static;
        width: 100%;
        margin-top: 1rem;
        border: none;
    }
    .ilh-footer__grid {
        grid-template-columns: 1fr;
    }
    .ilh-casino-showcase__pillars {
        grid-template-columns: 1fr;
    }
    .ilh-footer__bottom .ilh-footer__inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Cookie */
    .ilh-cookie__inner {
        flex-direction: column;
        align-items: stretch;
    }
    .ilh-cookie__actions {
        justify-content: stretch;
    }
    .ilh-cookie__btn {
        flex: 1;
        text-align: center;
    }

    /* Forms */
    .ilh-form__submit {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Small phone — max 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .ilh-header__logo-main {
        font-size: 1.1rem;
    }
    .ilh-header__logo-sub {
        display: none;
    }
    .ilh-page-header__title {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }
    .ilh-hero__eyebrow {
        font-size: 0.65rem;
    }
    .ilh-agegate__dialog {
        padding: 2rem 1.5rem;
    }
    .ilh-agegate__actions {
        flex-direction: column;
    }
    .ilh-agegate__btn {
        width: 100%;
    }
    .ilh-404__links {
        flex-direction: column;
    }
    .ilh-room-section__actions {
        flex-direction: column;
    }
    .ilh-room-section__actions .ilh-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .ilh-disclaimer-bar__text {
        font-size: 0.72rem;
    }
}

/* --------------------------------------------------------------------------
   Wide screen — min 1440px
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    :root {
        --ilh-section-pad: 8rem;
    }
    .ilh-hero__title {
        font-size: 5.5rem;
    }
}