/* =========================================================================
   wr-mobile.css — Mobile responsiveness fixes for the gallery pages.

   The template locks the page into a fixed 100vh viewport and drives layout
   with JS (Locomotive smooth-scroll + a custom gallery scroller). It also
   switches between a desktop and a mobile layout based on HOVER capability,
   not screen width. On phones this leaves content clipped and unscrollable.

   Loaded only on the 4 gallery pages, last in the cascade.
   - Scroll fixes apply at any phone-sized viewport.
   - The desktop/mobile layout switch is scoped to real touch devices
     (hover: none) so resizing a desktop window narrow is never affected.
   Desktop is untouched.
   ========================================================================= */

@media (max-width: 767px) {

    /* ===== A. Make the fixed viewport scroll natively ===== */
    .page-content-wrapper {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
    }

    .page-content-wrapper__inner,
    .page-content,
    main {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    [data-scroll-section] {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }

    .gallery-mobile-layout__sticky,
    .gallery-mobile-layout__layer,
    .gallery-mobile-measure {
        position: static !important;
        transform: none !important;
        height: auto !important;
    }

    .c-scrollbar {
        display: none !important;
    }

    /* ===== B. gallery-*.html modal pages (Architecture / Infrastructure /
           Residencies): turn the horizontal desktop carousel inside
           #gallery-modal into a vertical, swipe-scrollable photo list. ===== */
    #gallery-modal .modal__animation,
    #gallery-modal .modal__content-wrapper {
        height: 100% !important;
    }

    #gallery-modal .modal__scroller {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #gallery-modal .modal__scroller__scrollable {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    #gallery-modal .sticky-slider,
    #gallery-modal .sticky-slider__sticky,
    #gallery-modal .gallery-modal__list,
    #gallery-modal [data-scroll-sticky] {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    #gallery-modal .gallery-modal__list-item {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 6px 0 !important;
    }

    #gallery-modal .gallery-modal__list-item picture,
    #gallery-modal .gallery-modal__list-item img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        display: block !important;
    }

    #gallery-modal .cursor__button--left,
    #gallery-modal .cursor__button--right {
        display: none !important;
    }
}

/* Note: gallery.html's mobile hub layout is handled by a self-contained
   custom card layout injected inline in gallery.html (.wr-mobile-gallery). */