/* =========================================================
   LUXSOME GALLERY
========================================================= */

:root {
    --gallery-ink: #2e1c15;
    --gallery-brown: #673629;
    --gallery-cream: #f8f4ef;
    --gallery-warm: #eee7df;
    --gallery-muted: #756861;
    --gallery-line: rgba(46, 28, 21, 0.15);
    --gallery-white: #ffffff;
}

html,
body {
    overflow-x: clip;
}

.collection-eyebrow {
    margin: 0 0 24px;
    color: var(--gallery-brown);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.21em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* =========================================================
   HERO
========================================================= */

.collection-hero {
    position: relative;
    display: grid;
    align-items: end;
    padding:
        clamp(120px, 15vw, 220px)
        max(24px, 6vw)
        clamp(65px, 8vw, 110px);
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(103, 54, 41, 0.12),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #f8f4ef 0%,
            #eee7df 100%
        );
}

.collection-hero__copy {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
}

.collection-hero h1 {
    max-width: 1100px;
    margin: 0;
    color: var(--gallery-ink);
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: clamp(
        4rem,
        9.2vw,
        9.4rem
    );
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.82;
}

.collection-hero__description {
    max-width: 590px;
    margin:
        clamp(35px, 5vw, 65px)
        0
        0
        auto;
    color: var(--gallery-muted);
    font-size: clamp(
        0.92rem,
        1.2vw,
        1.05rem
    );
    line-height: 1.85;
}

.collection-hero__note {
    position: absolute;
    right: max(24px, 6vw);
    bottom: clamp(35px, 5vw, 70px);
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--gallery-muted);
    font-size: 0.61rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.collection-hero__line {
    width: 70px;
    height: 1px;
    background: var(--gallery-brown);
}

/* =========================================================
   GALLERY INTRODUCTION
========================================================= */

.collection-showcase {
    padding-top:
        clamp(90px, 11vw, 165px);
    background: var(--gallery-cream);
}

.collection-showcase__top {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 410px);
    gap: clamp(40px, 8vw, 130px);
    align-items: end;
    width: min(
        calc(100% - 48px),
        1420px
    );
    margin:
        0
        auto
        clamp(48px, 7vw, 90px);
}

.collection-showcase__top h2 {
    max-width: 860px;
    margin: 0;
    color: var(--gallery-ink);
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: clamp(
        3rem,
        6vw,
        6.3rem
    );
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 0.95;
}

.collection-showcase__intro {
    margin: 0;
    color: var(--gallery-muted);
    font-size: 0.88rem;
    line-height: 1.8;
}

/* =========================================================
   FILTERS
========================================================= */

.collection-filters {
    display: flex;
    gap: clamp(20px, 3vw, 46px);
    width: min(
        calc(100% - 48px),
        1420px
    );
    margin: 0 auto 24px;
    padding-bottom: 17px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom:
        1px solid
        var(--gallery-line);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.collection-filters::-webkit-scrollbar {
    display: none;
}

.collection-filter {
    position: relative;
    flex: 0 0 auto;
    padding: 0 0 10px;
    border: 0;
    background: transparent;
    color:
        rgba(46, 28, 21, 0.53);
    font: inherit;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
}

.collection-filter::after {
    position: absolute;
    right: 0;
    bottom: -18px;
    left: 0;
    height: 2px;
    background:
        var(--gallery-brown);
    content: "";
    transform: scaleX(0);
    transform-origin: left center;
    transition:
        transform 300ms ease;
}

.collection-filter:hover,
.collection-filter.is-active {
    color: var(--gallery-ink);
}

.collection-filter.is-active::after {
    transform: scaleX(1);
}

/* =========================================================
   GALLERY SCENE
========================================================= */

.collection-scroll-scene {
    position: relative;
    height: auto;
    padding:
        clamp(30px, 5vw, 70px)
        0;
    overflow: hidden;
}

.collection-sticky {
    position: relative;
    top: auto;
    display: block;
    min-height: 0;
    overflow: visible;
    background:
        var(--gallery-cream);
}

/* =========================================================
   SCROLLABLE VIEWPORT
========================================================= */

.collection-viewport {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    cursor: grab;

    /*
     * No snapping, because snapping prevents smooth autoplay.
     */
    scroll-behavior: auto;
    scroll-snap-type: none;

    scrollbar-width: none;

    /*
     * Users can swipe horizontally while the page
     * remains vertically scrollable.
     */
    touch-action: pan-x pan-y;

    /*
     * Keep horizontal overscroll within the gallery,
     * without trapping vertical page scrolling.
     */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;

    -webkit-overflow-scrolling: touch;
}

.collection-viewport::-webkit-scrollbar {
    display: none;
}

.collection-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* =========================================================
   TRACK
========================================================= */

.collection-track {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2vw, 32px);

    width: max-content;

    padding:
        0
        max(20px, 6vw);

    /*
     * The track itself is not translated.
     * JavaScript moves the viewport using scrollLeft.
     */
    transform: none !important;
    will-change: auto;
}

.collection-track[hidden] {
    display: none;
}

/* =========================================================
   SLIDES
========================================================= */

.collection-slide {
    flex:
        0 0
        clamp(
            270px,
            31vw,
            470px
        );
    min-width: 0;
}

.collection-slide[hidden] {
    display: none;
}

.collection-slide figure {
    margin: 0;
}

.collection-slide__image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background:
        var(--gallery-warm);
}

.collection-slide__image::after {
    position: absolute;
    inset: 0;
    border:
        1px solid
        rgba(255, 255, 255, 0.15);
    content: "";
    pointer-events: none;
}

.collection-slide img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    pointer-events: none;
    user-select: none;

    -webkit-user-drag: none;

    transform: scale(1);
    transition:
        transform 500ms ease,
        filter 500ms ease,
        opacity 500ms ease;
}

.collection-slide:not(.is-current) img {
    filter:
        saturate(0.86)
        brightness(0.92);
}

.collection-slide.is-current img {
    filter: none;
    transform: scale(1.015);
}

/* =========================================================
   CAPTIONS
========================================================= */

.collection-slide figcaption {
    display: grid;
    gap: 8px;
    padding-top: 18px;
}

.collection-slide figcaption span {
    color: var(--gallery-brown);
    font-size: 0.61rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.collection-slide h3 {
    margin: 0;
    color: var(--gallery-ink);
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
}

/* =========================================================
   GALLERY STATUS
========================================================= */

.collection-status {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(
        calc(100% - 48px),
        1420px
    );
    margin:
        clamp(28px, 4vw, 50px)
        auto
        0;
    color: var(--gallery-muted);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.collection-status__line {
    flex: 1;
    height: 1px;
    margin: 0 8px;
    background:
        var(--gallery-line);
}

.collection-empty {
    width: min(
        calc(100% - 48px),
        1420px
    );
    margin: 40px auto;
    color: var(--gallery-muted);
    text-align: center;
}

/* =========================================================
   STATEMENT
========================================================= */

.collection-statement {
    background:
        var(--gallery-ink);
    color:
        var(--gallery-white);
}

.collection-statement__inner {
    width: min(
        calc(100% - 48px),
        1420px
    );
    margin: 0 auto;
    padding:
        clamp(95px, 13vw, 190px)
        0
        clamp(85px, 11vw, 155px);
}

.collection-statement
.collection-eyebrow {
    color: #c7a886;
}

.collection-statement h2 {
    max-width: 1080px;
    margin: 0;
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
    font-size: clamp(
        3.8rem,
        8vw,
        8.7rem
    );
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.85;
}

.collection-statement__bottom {
    display: grid;
    grid-template-columns:
        minmax(0, 520px)
        auto;
    gap: 50px;
    justify-content: space-between;
    align-items: end;
    margin-top:
        clamp(55px, 8vw, 105px);
    padding-top: 36px;
    border-top:
        1px solid
        rgba(255, 255, 255, 0.16);
}

.collection-statement__bottom p {
    margin: 0;
    color:
        rgba(255, 255, 255, 0.66);
    font-size: 0.94rem;
    line-height: 1.9;
}

.collection-statement__link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
    min-width: 300px;
    padding: 18px 0;
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.55);
    color:
        var(--gallery-white);
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
    .collection-showcase__top,
    .collection-statement__bottom {
        grid-template-columns: 1fr;
    }

    .collection-slide {
        flex-basis:
            min(54vw, 410px);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .collection-hero {
        padding-inline: 20px;
    }

    .collection-hero h1 {
        font-size:
            clamp(
                3.2rem,
                16vw,
                5.3rem
            );
        line-height: 0.88;
    }

    .collection-hero__description {
        margin-left: 0;
    }

    .collection-hero__note {
        display: none;
    }

    .collection-showcase__top,
    .collection-filters,
    .collection-status,
    .collection-statement__inner,
    .collection-empty {
        width:
            calc(100% - 32px);
    }

    .collection-track {
        gap: 14px;
        padding-inline: 16px;
    }

    .collection-slide {
        flex-basis: 76vw;
    }

    .collection-status {
        margin-top: 28px;
    }

    .collection-statement__link {
        min-width: 0;
        width: 100%;
    }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
    /*
     * Transitions are removed, but autoplay is not disabled.
     * This prevents the user's browser preference from
     * unexpectedly stopping the gallery completely.
     */
    .collection-slide img {
        transition: none;
    }
}

/* =====================================================
   GALLERY — BUILDER ACTIONS
===================================================== */

.collection-statement__actions {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
}

.collection-statement__secondary-link {
    position: relative;
    color: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    opacity: 0.68;
    text-decoration: none;
    transition: opacity 250ms ease;
}

.collection-statement__secondary-link:hover,
.collection-statement__secondary-link:focus-visible {
    opacity: 1;
}

.collection-statement__secondary-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}