/* ==========================================================
   Blueprint Mobile Gallery Experience
   ========================================================== */

.media-tile__expand,
.mobile-gallery-controls,
.mobile-gallery__hint {
    display: none;
}

/* ----------------------------------------------------------
   Tablet and mobile carousel
---------------------------------------------------------- */

@media (max-width: 920px) {
    .lifestyle-gallery {
        overflow: visible;
    }

    .lifestyle-gallery__header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.25rem;
        margin-bottom: 1.75rem;
    }

    .lifestyle-gallery__intro-wrap {
        display: grid;
        gap: .75rem;
    }

    .lifestyle-gallery__intro {
        max-width: 44rem;
        margin: 0;
    }

    .mobile-gallery__hint {
        display: inline-flex;
        align-items: center;
        color: var(--color-primary);
        font-size: .7rem;
        font-weight: var(--fw-bold);
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .lifestyle-gallery__layout {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(62vw, 530px);

        width: 100%;
        max-width: 100%;

        gap: 1rem;
        padding: .15rem 0 1rem;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-padding-inline: 0;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .lifestyle-gallery__layout::-webkit-scrollbar {
        display: none;
    }

    .lifestyle-gallery__feature,
    .lifestyle-gallery__pair,
    .lifestyle-gallery__closing-pair {
        display: contents;
    }

    .lifestyle-gallery__layout
    [data-gallery-slide] {
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .lifestyle-gallery__layout
    .media-tile__media {
        aspect-ratio: 4 / 5;
        height: auto;
        min-height: 0;
        border-radius: 24px;
    }

    .lifestyle-gallery__layout
    .media-tile__image {
        object-fit: cover;
    }

    .lifestyle-gallery__layout
    .media-tile__overlay {
        max-width: none;
        padding: 1.35rem;
    }

    .lifestyle-gallery__layout
    .media-tile__title {
        max-width: 15ch;
        font-size: clamp(1.55rem, 5vw, 2.2rem);
    }

    .lifestyle-gallery__layout
    .media-tile__text {
        display: -webkit-box;
        max-width: 38ch;
        overflow: hidden;
        font-size: .82rem;
        line-height: 1.55;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .media-tile__expand {
        position: absolute;
        z-index: 4;
        top: 1rem;
        right: 1rem;

        display: grid;
        place-items: center;

        width: 44px;
        height: 44px;

        padding: 0;
        border: 1px solid rgba(255, 255, 255, .4);
        border-radius: 50%;

        background: rgba(255, 255, 255, .82);
        color: var(--color-text);

        box-shadow:
            0 10px 28px
            rgba(20, 18, 15, .14);

        cursor: pointer;

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .media-tile__expand:focus-visible {
        outline: 3px solid var(--color-primary);
        outline-offset: 3px;
    }

    /* Statement becomes its own editorial slide. */

    .lifestyle-gallery__statement {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        min-height: 0;
        margin: 0;
        padding: clamp(1.5rem, 5vw, 2.5rem);

        border: 1px solid var(--color-border);
        border-radius: 24px;

        background:
            radial-gradient(
                circle at 90% 10%,
                rgba(181, 138, 96, .18),
                transparent 45%
            ),
            linear-gradient(
                145deg,
                rgba(255, 255, 255, .75),
                rgba(122, 135, 102, .08)
            ),
            var(--color-surface);

        box-shadow: var(--shadow-sm);
    }

    .lifestyle-gallery__statement-number {
        margin-bottom: auto;
    }

    .lifestyle-gallery__statement blockquote {
        margin-block: 2rem;
    }

    .lifestyle-gallery__statement blockquote p {
        font-size: clamp(1.65rem, 5vw, 2.45rem);
        line-height: 1.12;
    }

    .lifestyle-gallery__statement-caption {
        margin-top: auto;
        white-space: normal;
    }

    /* ------------------------------------------------------
       Navigation controls
    ------------------------------------------------------ */

    .mobile-gallery-controls {
        display: grid;
        grid-template-columns:
            44px
            minmax(0, 1fr)
            auto
            44px;
        align-items: center;
        gap: .8rem;
        margin-top: .25rem;
    }

    .mobile-gallery-controls__button {
        display: grid;
        place-items: center;

        width: 44px;
        height: 44px;

        padding: 0;
        border: 1px solid var(--color-border);
        border-radius: 50%;

        background: var(--color-surface);
        color: var(--color-text);

        font: inherit;
        cursor: pointer;
    }

    .mobile-gallery-controls__button:disabled {
        opacity: .35;
        cursor: default;
    }

    .mobile-gallery-controls__button:focus-visible {
        outline: 3px solid rgba(181, 138, 96, .25);
        outline-offset: 3px;
    }

    .mobile-gallery-controls__dots {
        display: flex;
        align-items: center;
        gap: .38rem;
        min-width: 0;
    }

    .mobile-gallery-controls__dot {
        width: 6px;
        height: 6px;

        flex: 0 0 auto;

        padding: 0;
        border: 0;
        border-radius: 999px;

        background: rgba(45, 45, 45, .2);

        cursor: pointer;

        transition:
            width .22s ease,
            background-color .22s ease;
    }

    .mobile-gallery-controls__dot.is-active {
        width: 20px;
        background: var(--color-primary);
    }

    .mobile-gallery-controls__count {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        color: var(--color-text-light);
        font-size: .72rem;
        white-space: nowrap;
    }

    .mobile-gallery-controls__count strong {
        color: var(--color-text);
    }
}

/* ----------------------------------------------------------
   Phone composition
---------------------------------------------------------- */

@media (max-width: 760px) {
    .lifestyle-gallery__layout {
        grid-auto-columns:
            calc(100% - 28px);
    }

    .lifestyle-gallery__layout
    .media-tile__media {
        aspect-ratio: 4 / 5;
        border-radius: 22px;
    }

    .lifestyle-gallery__statement {
        border-radius: 22px;
    }

    .mobile-gallery-controls {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            auto
            42px;
        gap: .6rem;
    }

    .mobile-gallery-controls__button {
        width: 42px;
        height: 42px;
    }
}

/* ==========================================================
   Fullscreen mobile gallery
   ========================================================== */

body.gallery-lightbox-open {
    overflow: hidden;
    touch-action: none;
}

.mobile-gallery-lightbox {
    position: fixed;
    z-index: 5000;
    inset: 0;

    display: grid;
    place-items: center;

    padding: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.mobile-gallery-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-gallery-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 16, 14, .9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mobile-gallery-lightbox__dialog {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-rows:
        minmax(0, 1fr)
        auto;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #171613;
    color: #fff;
}

.mobile-gallery-lightbox__close {
    position: absolute;
    z-index: 4;
    top:
        max(
            1rem,
            env(safe-area-inset-top)
        );
    right:
        max(
            1rem,
            env(safe-area-inset-right)
        );

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;

    background: rgba(25, 24, 21, .58);
    color: #fff;

    cursor: pointer;

    backdrop-filter: blur(12px);
}

.mobile-gallery-lightbox__close span::before,
.mobile-gallery-lightbox__close span::after {
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.mobile-gallery-lightbox__close span::before {
    transform: rotate(45deg);
}

.mobile-gallery-lightbox__close span::after {
    transform: rotate(-45deg);
}

.mobile-gallery-lightbox__visual {
    display: grid;
    place-items: center;

    min-width: 0;
    min-height: 0;

    padding:
        max(4.8rem, env(safe-area-inset-top))
        1rem
        1rem;

    overflow: hidden;

    touch-action: pan-y;
}

.mobile-gallery-lightbox__visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-drag: none;
}

.mobile-gallery-lightbox__content {
    padding:
        1.25rem
        max(1.25rem, env(safe-area-inset-right))
        calc(
            1.25rem
            + env(safe-area-inset-bottom)
        )
        max(1.25rem, env(safe-area-inset-left));

    border-top: 1px solid rgba(255, 255, 255, .12);

    background: rgba(28, 27, 24, .96);
}

.mobile-gallery-lightbox__eyebrow {
    display: block;
    margin-bottom: .4rem;

    color: #d2a649;

    font-size: .66rem;
    font-weight: var(--fw-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mobile-gallery-lightbox__title {
    margin: 0 0 .55rem;
    color: #fff;
    font-size: clamp(1.35rem, 6vw, 2rem);
    line-height: 1.08;
}

.mobile-gallery-lightbox__text {
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: .84rem;
    line-height: 1.55;
}

.mobile-gallery-lightbox__navigation {
    display: grid;
    grid-template-columns:
        44px
        minmax(0, 1fr)
        44px;
    align-items: center;
    gap: 1rem;

    margin-top: 1rem;
}

.mobile-gallery-lightbox__navigation button {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    padding: 0;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;

    background: rgba(255, 255, 255, .08);
    color: #fff;

    font: inherit;
    cursor: pointer;
}

.mobile-gallery-lightbox__navigation > span {
    color: rgba(255, 255, 255, .56);
    font-size: .76rem;
    text-align: center;
}

.mobile-gallery-lightbox__navigation strong {
    color: #fff;
}

@media (min-width: 921px) {
    .mobile-gallery-lightbox {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-gallery-controls__dot,
    .mobile-gallery-lightbox {
        transition: none;
    }
}