/* ==========================================================
   Blueprint Mobile Experience
   Phase 1: Foundation, overflow protection and swipe rails
   ========================================================== */

/* ----------------------------------------------------------
   Document overflow protection

   overflow-x: clip prevents off-canvas components from making
   the complete document horizontally scrollable, without
   creating the extra scroll container caused by hidden.
---------------------------------------------------------- */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

body {
    min-width: 0;
}

.site,
.site-main,
#page,
#primary,
main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.site-main > *,
.site-main section,
.site-main .container {
    min-width: 0;
    max-width: 100%;
}

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
}

/*
 * Protect common Blueprint grid and layout elements from their
 * children forcing the document wider than the viewport.
 */

.hero-grid,
.configurator-layout,
.configurator__form,
.configurator-preview-panel,
.lifestyle-gallery__layout,
.product-specifications__layout,
.product-reviews__featured,
.purchase-summary,
.related-products__grid,
.site-footer__grid,
.site-footer__invitation-grid {
    min-width: 0;
    max-width: 100%;
}

/*
 * The off-canvas navigation was one likely contributor to the
 * blank area visible to the right on physical mobile devices.
 */

@media (max-width: 1080px) {
    .site-nav {
        max-width: 100vw;
        overflow-x: hidden;
        contain: layout paint;
    }

    body:not(.menu-is-open) .site-nav {
        pointer-events: none;
    }

    .site-menu-overlay {
        max-width: 100vw;
        overflow: hidden;
    }
}

/* ----------------------------------------------------------
   Tablet foundation
---------------------------------------------------------- */

@media (min-width: 761px) and (max-width: 1080px) {
    .container,
    .container-sm,
    .container-lg,
    .container-fluid {
        width: min(
            100% - 40px,
            var(--container-width, 1400px)
        );
    }

    .section {
        padding-block: clamp(3.5rem, 7vw, 5rem);
    }

    .section-lg {
        padding-block: clamp(4rem, 8vw, 5.75rem);
    }
}

/* ----------------------------------------------------------
   Mobile design tokens
---------------------------------------------------------- */

@media (max-width: 760px) {
    :root {
        --mobile-gutter: clamp(16px, 4.5vw, 22px);
        --mobile-section-space: clamp(3rem, 13vw, 4.5rem);
        --mobile-card-radius: 22px;
        --mobile-rail-gap: 1rem;
    }

    .container,
    .container-sm,
    .container-lg,
    .container-fluid {
        width: calc(
            100%
            - var(--mobile-gutter)
            - var(--mobile-gutter)
        );

        max-width: 100%;
        margin-inline: auto;
    }

    .section,
    .section-sm,
    .section-lg {
        padding-block: var(--mobile-section-space);
    }

    /*
     * Reviews use custom section padding rather than .section-lg.
     */

    .product-reviews {
        padding-block: var(--mobile-section-space);
    }

    /*
     * Prevent long labels and prices from forcing cards wider.
     */

    .hero-badge,
    .product-swatch,
    .purchase-trust-item,
    .product-card__badge,
    .product-card__configurable,
    .lifestyle-gallery__statement-caption,
    .purchase-summary__option dd,
    .configurator-preview__selection strong {
        min-width: 0;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /*
     * Large desktop headings become deliberate mobile headings,
     * rather than simply shrinking at the edge of the viewport.
     */

    .highlights__title,
    .configurator__title,
    .craftsmanship__title,
    .lifestyle-gallery__title,
    .product-specifications__title,
    .product-reviews__title,
    .product-faq__title,
    .final-purchase__title,
    .related-products__title,
    .site-footer__invitation-title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(2.15rem, 10.5vw, 3.3rem);
        letter-spacing: -.045em;
        line-height: .98;
    }

    /*
     * Mobile screens should begin sections promptly rather than
     * carrying desktop-sized gaps between the eyebrow and title.
     */

    .configurator__header,
    .lifestyle-gallery__header,
    .product-specifications__header,
    .product-reviews__header,
    .product-faq__header,
    .final-purchase__header,
    .related-products__header {
        gap: 1.25rem;
        margin-bottom: 2rem;
    }

    .configurator__header {
        max-width: none;
        margin-inline: 0;
        text-align: left;
    }

    .configurator__intro {
        margin-inline: 0;
    }
}

/* ==========================================================
   Native-feeling horizontal rails
   ========================================================== */

@media (max-width: 760px) {
    /*
     * Each section retains the same PHP content and product data,
     * but mobile changes its composition into a swipeable rail.
     */

    .hero-badges,
    .highlights__grid,
    .highlights-grid,
    .feature-card-grid,
    .product-specifications__care-grid,
    .review-metrics,
    .product-reviews__grid,
    .related-products__grid,
    .final-purchase__trust-bar {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(78%, 1fr);

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

        gap: var(--mobile-rail-gap);

        padding:
            .2rem
            max(0px, calc(var(--mobile-gutter) / 4))
            .9rem;

        overflow-x: auto;
        overflow-y: visible;

        scroll-padding-inline: .25rem;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;

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

    .hero-badges::-webkit-scrollbar,
    .highlights__grid::-webkit-scrollbar,
    .highlights-grid::-webkit-scrollbar,
    .feature-card-grid::-webkit-scrollbar,
    .product-specifications__care-grid::-webkit-scrollbar,
    .review-metrics::-webkit-scrollbar,
    .product-reviews__grid::-webkit-scrollbar,
    .related-products__grid::-webkit-scrollbar,
    .final-purchase__trust-bar::-webkit-scrollbar {
        display: none;
    }

    .hero-badges > *,
    .highlights__grid > *,
    .highlights-grid > *,
    .feature-card-grid > *,
    .product-specifications__care-grid > *,
    .review-metrics > *,
    .product-reviews__grid > *,
    .related-products__grid > *,
    .final-purchase__trust-bar > * {
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    /*
     * More product image should remain visible on the next card,
     * signalling naturally that the row can be swiped.
     */

    .related-products__grid {
        grid-auto-columns: minmax(86%, 1fr);
    }

    .product-reviews__grid,
    .product-specifications__care-grid {
        grid-auto-columns: minmax(84%, 1fr);
    }

    .review-metrics {
        grid-auto-columns: minmax(72%, 1fr);
    }

    .hero-badges {
        grid-auto-columns: minmax(76%, 1fr);
        margin-inline: 0;
    }

    .final-purchase__trust-bar {
        grid-auto-columns: minmax(68%, 1fr);
        justify-content: initial;
        padding-block: 1rem;
    }

    /*
     * Previous responsive selectors positioned the third related
     * product as a special centred row. A rail needs every card to
     * behave identically.
     */

    .related-products__grid > :last-child {
        grid-column: auto;
        width: auto;
        max-width: none;
        margin-inline: 0;
    }

    /*
     * Cards need an intentional mobile height, not the enormous
     * height inherited from a desktop column.
     */

    .feature-card {
        min-height: 260px;
    }

    .care-card {
        min-height: 245px;
    }

    .review-metric {
        min-height: 220px;
    }

    .testimonial-card--compact {
        min-height: 250px;
    }
}

/* ----------------------------------------------------------
   Tablet rails show roughly two items at once
---------------------------------------------------------- */

@media (min-width: 761px) and (max-width: 920px) {
    .product-specifications__care-grid,
    .review-metrics,
    .product-reviews__grid,
    .related-products__grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(44%, 1fr);

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

        gap: 1.1rem;
        padding-bottom: .75rem;

        overflow-x: auto;
        scroll-snap-type: inline mandatory;
        overscroll-behavior-inline: contain;

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

    .product-specifications__care-grid::-webkit-scrollbar,
    .review-metrics::-webkit-scrollbar,
    .product-reviews__grid::-webkit-scrollbar,
    .related-products__grid::-webkit-scrollbar {
        display: none;
    }

    .product-specifications__care-grid > *,
    .review-metrics > *,
    .product-reviews__grid > *,
    .related-products__grid > * {
        scroll-snap-align: start;
    }

    .related-products__grid > :last-child {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }
}

/* ==========================================================
   Mobile lifestyle gallery carousel
   ========================================================== */

@media (max-width: 760px) {
    .lifestyle-gallery__layout {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(84vw, 370px);

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

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

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

    /*
     * The desktop pairs are wrappers. display: contents allows
     * their individual media tiles to become carousel slides.
     */

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

    .lifestyle-gallery__layout .media-tile,
    .lifestyle-gallery__statement {
        min-width: 0;
        scroll-snap-align: start;
    }

    .lifestyle-gallery__layout
    .media-tile__media {
        aspect-ratio: 4 / 5;
        min-height: 0;
        border-radius: var(--mobile-card-radius);
    }

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

        min-height: 420px;
        margin: 0;
        padding: 1.6rem;

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

        background:
            linear-gradient(
                145deg,
                rgba(181, 138, 96, .12),
                rgba(122, 135, 102, .08)
            ),
            var(--color-surface);
    }

    .lifestyle-gallery__statement blockquote p {
        font-size: clamp(1.6rem, 7vw, 2.15rem);
    }

    .lifestyle-gallery__statement-caption {
        margin-top: 1rem;
    }
}

/* ==========================================================
   Rail pagination dots
   Injected by mobile-experience.js
   ========================================================== */

.mobile-rail-dots {
    display: none;
}

@media (max-width: 760px) {
    .mobile-rail-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .42rem;

        min-height: 20px;
        margin-top: .2rem;
    }

    .mobile-rail-dot {
        width: 6px;
        height: 6px;

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

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

        cursor: pointer;

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

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

    .mobile-rail-dot:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 3px;
    }
}

/* ==========================================================
   Mobile polish
   ========================================================== */

@media (max-width: 760px) {
    /*
     * Cards should feel like individual mobile surfaces.
     */

    .feature-card,
    .care-card,
    .review-metric,
    .testimonial-card--compact,
    .product-card {
        border-radius: var(--mobile-card-radius);
    }

    /*
     * Avoid desktop hover movement sticking after a touch event.
     */

    @media (hover: none) {
        .feature-card:hover,
        .care-card:hover,
        .review-metric:hover,
        .testimonial-card--compact:hover,
        .product-card:hover {
            transform: none;
        }
    }

    /*
     * Keep the floating purchase dock and navigation controls
     * inside the physical viewport.
     */

    .purchase-dock,
    .purchase-dock__inner,
    .site-header,
    .site-header__inner {
        max-width: 100vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-rail-dot {
        transition: none;
    }
}