/* Round16 — Marketplace — section-marketplace
   Figma: 4096:6173 (desktop) | 4107:11055..11068 (tablet/mobile, shared breakpoint <=1024px)
   Desktop: sticky-scrub -- progress rail + copy panel are position:sticky (centered at
   50vh), while the 3 screenshots scroll past naturally in normal flow (assets/scripts.js
   picks whichever one is nearest the viewport's center as active). Same mechanism as
   Round13's page-launch section-signup (.r13-signup__scrub in page-launch.css).
   Tablet/mobile: static stacked list, own image per item, no JS. */

.r16-marketplace {
    /* Dark theme tokens come from global.css (body.page-template-static-pages-R16page-
       marketplace-php) -- not redefined here. */

    position: relative;
    display: flex;
    justify-content: center;
    background: var(--color-1st-bg);
    /* Papers over a hairline sub-pixel gap some browsers can render between two
       adjacent same-color sections (fractional computed heights from flex/aspect-ratio
       layout round independently per element) -- paint-only, doesn't affect layout.
       Both edges: a neighbor with its own overflow:hidden (e.g. section-proven) can't
       show its own copy of this shadow, so covering both sides here is what protects it. */
    box-shadow: 0 -2px 0 0 var(--color-1st-bg), 0 2px 0 0 var(--color-1st-bg);
    padding: var(--var-140, 140px) var(--section-horizontal-padding, 32px);
    font-family: var(--font-body);
}

.r16-marketplace * {
    box-sizing: border-box;
}

.r16-marketplace__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap, 80px);
    width: 100%;
    max-width: var(--container-max, 1400px);
}

.r16-marketplace__headings {
    display: flex;
    justify-content: center;
    width: 100%;
}

.r16-marketplace__title {
    max-width: 800px;
    margin: 0;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h2, 48px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
}

/* ---------- Desktop sticky-scrub ---------- */
.r16-marketplace__scroller {
    width: 100%;
}

.r16-marketplace__row {
    display: grid;
    grid-template-columns: auto 625px minmax(0, 1fr);
    align-items: start;
    column-gap: var(--var-60, 60px);
    width: 100%;
}

/* Rail/panel are the two sticky columns; each gets its OWN padded, non-sticky wrapper
   so its sticky child has room to travel the full height of this wrapper (bounded by
   it, not by the far-taller media column) before disengaging -- same "pad the sticky
   element's own containing block" trick as .r13-signup__scrub-left in page-launch.css.
   A FIXED vh (not that file's %-of-width) keeps both wrappers' travel range equal
   despite the rail being much narrower than the panel. */
.r16-marketplace__rail,
.r16-marketplace__panel-wrap {
    position: relative;
    height: 100%;
    padding-block: 30vh;
}

.r16-marketplace__panel-wrap {
    min-width: 0;
}

.r16-marketplace__progress,
.r16-marketplace__panel {
    position: sticky;
    top: 50vh;
    transform: translateY(-50%);
}

@supports (top: 50dvh) {

    .r16-marketplace__progress,
    .r16-marketplace__panel {
        top: 50dvh;
    }
}

.r16-marketplace__progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-8, 8px);
    flex-shrink: 0;
    padding: var(--var-8, 8px);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-2nd-bg);
}

.r16-marketplace__dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-reverse-stroke, #4a4949);
    transition: height 0.25s ease, background 0.25s ease;
}

.r16-marketplace__dot.is-active {
    height: 40px;
    background: var(--color-2nd-fg);
}

/* Real stacked screenshots, natural document flow -- no cross-fade, no absolute
   positioning. This is what gives the section actual scrollable height and what
   assets/scripts.js measures (each item's distance from the viewport's center). */
.r16-marketplace__media {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap, 80px);
    width: 625px;
}

.r16-marketplace__media-item {
    width: 625px;
    height: 559px;
    flex-shrink: 0;
}

.r16-marketplace__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* All 3 copy blocks stacked in the same grid cell -- only .is-active is visible,
   cross-fading, matching .r13-signup__text-stack in page-launch.css. */
.r16-marketplace__panel {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
}

.r16-marketplace__copy {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: var(--var-28, 28px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.r16-marketplace__copy.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.r16-marketplace__copy-title {
    margin: 0;
    max-width: 800px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h5, 25px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
}

.r16-marketplace__copy-desc {
    margin: 0;
    max-width: 600px;
    font-size: var(--fs-body, 16px);
    line-height: var(--lh-body, 1.4);
    color: var(--color-2nd-fg);
}

/* Reduced motion: drop the sticky pin entirely, show all 3 copy blocks stacked and
   fully visible, rail/panel sit in normal flow -- same fallback as page-launch.css's
   sticky-scrub reduced-motion block. */
@media (prefers-reduced-motion: reduce) {

    .r16-marketplace__rail,
    .r16-marketplace__panel-wrap {
        padding-block: 0;
    }

    .r16-marketplace__progress,
    .r16-marketplace__panel {
        position: static;
        transform: none;
    }

    .r16-marketplace__panel {
        display: flex;
        flex-direction: column;
        gap: var(--section-gap, 80px);
    }

    .r16-marketplace__copy {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: none;
    }

    .r16-marketplace__dot {
        transition: none;
    }
}

/* ---------- Tablet/mobile static list ---------- */
.r16-marketplace__list {
    display: none;
}

@media (max-width: 1024px) {
    .r16-marketplace {
        /* Figma tablet (4096:6310): py-[var(--var-72,72px)] -- --var-140 doesn't
           auto-respond to the breakpoint on its own, unlike --section-horizontal-padding. */
        padding-top: var(--var-72, 72px);
        padding-bottom: var(--var-72, 72px);
    }

    .r16-marketplace__scroller {
        display: none;
    }

    .r16-marketplace__list {
        /* Figma (4096:6310): content-wrapper is one flat flex column (headings + 3
           items) with a single uniform 40px gap throughout -- not 60px between items. */
        display: flex;
        flex-direction: column;
        gap: var(--var-40, 40px);
        width: 100%;
    }

    .r16-marketplace__list-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--var-20, 20px);
        width: 100%;
    }

    .r16-marketplace__list-img {
        display: block;
        width: 100%;
        aspect-ratio: 1878 / 1680;
        object-fit: cover;
        height: auto;
    }

    .r16-marketplace__list-copy {
        display: flex;
        flex-direction: column;
        gap: var(--var-28, 28px);
        width: 100%;
        max-width: 794px;
    }

    .r16-marketplace__list-title {
        margin: 0;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: var(--fs-h5, 20px);
        line-height: var(--lh-heading, 1.15);
        color: var(--color-1st-fg);
    }

    .r16-marketplace__list-desc {
        margin: 0;
        font-size: var(--fs-body, 16px);
        line-height: var(--lh-body, 1.4);
        color: var(--color-2nd-fg);
    }
}