/* ═══════════════════════════════════════════════════════════════════════════
   marketing-carousel.css — shared styles for the drag-to-snap image rail.

   Pairs with js/showcase_carousel.js. Structural rules here must stay in step
   with the geometry the script computes:

     - The script sets the track's inline padding to (rail − card) / 2 and the
       card's inline width, so `x = 0` centres card 0. That padding is the
       ENTIRE peek mechanism — do not add competing margins to .sc-track.
     - .sc-viewport starts as a native scroll-snap strip so the rail works
       with JS disabled. The script adds .sc-ready to hand over to transform
       dragging; everything scroll-related is switched off at that point.
     - .sc-img is pre-scaled to 1.12 so the script's ±7% parallax drift never
       exposes an edge.

   Self-contained: every colour resolves through a --sc-* token with a literal
   fallback, so the file drops onto any marketing page regardless of which
   --primary/--text variables that page happens to define. Override the tokens
   on .sc-section to re-tint a rail per page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Section shell ──────────────────────────────────────────────────────── */

.sc-section {
    /* Tokens — override these on the section to re-theme a rail. */
    --sc-ink: #ffffff;
    --sc-ink-dim: rgba(255, 255, 255, 0.72);
    --sc-ink-faint: rgba(255, 255, 255, 0.55);
    --sc-accent: #6ee7b7;
    --sc-surface: rgba(255, 255, 255, 0.08);
    --sc-surface-hi: rgba(255, 255, 255, 0.2);
    --sc-hairline: rgba(255, 255, 255, 0.22);
    --sc-glow: rgba(110, 231, 183, 0.07);
    --sc-card-radius: 24px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 5rem 0 4.5rem;
    background: linear-gradient(135deg, #022c22 0%, #064e3b 100%);
    color: var(--sc-ink);
}

/* Ambient wash behind the rail. */
.sc-section::before {
    content: '';
    position: absolute;
    top: -35%;
    right: -10%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: var(--sc-glow);
    pointer-events: none;
    z-index: -1;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.sc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.sc-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--sc-accent);
    margin: 0 0 0.6rem;
}

.sc-title {
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    color: var(--sc-ink);
    margin: 0;
    text-wrap: balance;
}

.sc-sub {
    margin: 0.9rem 0 0;
    max-width: 46rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--sc-ink-dim);
}

/* ── Arrows ─────────────────────────────────────────────────────────────── */

.sc-arrows {
    display: flex;
    gap: 0.6rem;
    flex: none;
}

.sc-arrow {
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sc-hairline);
    background: var(--sc-surface);
    color: var(--sc-ink);
    border-radius: 50%;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.sc-arrow:hover:not(:disabled) {
    background: var(--sc-surface-hi);
    transform: translateY(-1px);
}

.sc-arrow:active:not(:disabled) { transform: translateY(0); }

.sc-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.sc-arrow:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: 2px;
}

/* ── Rail ───────────────────────────────────────────────────────────────── */

/* Full-bleed so the partial prev/next cards reach the screen edges.
   Before the script takes over (and if it never loads) this is a plain native
   scroll strip with snap points, so the section is always usable. */
.sc-viewport {
    width: 100%;
    /* Caps the rail on wide monitors. Without this the card hits its pixel
       ceiling, the next card lands FULLY on screen, and the centring stops
       reading as a carousel. */
    max-width: 1600px;
    margin-inline: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Vertical page scroll must still belong to the page on touch. */
    touch-action: pan-y;
}

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

/* Script has taken over: transform dragging, no native scrolling. */
.sc-viewport.sc-ready {
    overflow: hidden;
    scroll-snap-type: none;
}

.sc-viewport:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: -2px;
}

.sc-track {
    display: flex;
    align-items: stretch;
    /* Fallback gutters only — the script overwrites both once it measures. */
    padding-inline: 1.25rem;
    column-gap: 1.25rem;
    will-change: transform;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.sc-viewport.is-dragging .sc-track { cursor: grabbing; }

/* ── Card ───────────────────────────────────────────────────────────────── */

.sc-card {
    flex: none;
    /* Fallback width only — the script sets an inline px width per breakpoint. */
    width: min(86vw, 780px);
    scroll-snap-align: center;
}

.sc-card-inner {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: var(--sc-card-radius);
    background: #0b1220;
    /* Ring is an inset shadow rather than a border, so it never affects layout. */
    box-shadow:
        0 24px 56px -32px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: box-shadow 0.45s ease;
}

.sc-card.is-active .sc-card-inner {
    box-shadow:
        0 40px 80px -32px rgba(0, 0, 0, 0.85),
        inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* ── Figure ─────────────────────────────────────────────────────────────── */

.sc-figure {
    position: relative;
    /* Portrait on phones, widening with the viewport. */
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* Shows through if the photo 404s or is still loading. */
    background: linear-gradient(135deg, #1f2937 0%, #0f172a 45%, #312e81 100%);
}

@media (min-width: 576px) {
    .sc-figure { aspect-ratio: 16 / 11; }
}

@media (min-width: 992px) {
    .sc-figure { aspect-ratio: 3 / 2; }
}

.sc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Headroom for the script's ±7% parallax drift. */
    transform: scale(1.12);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    /* Photos fade in rather than popping. */
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Dead CDN URL — fall back to the gradient panel underneath. */
.sc-img.is-failed { opacity: 0; }

/* Legibility scrim under the copy.
   Tuned against a WORST-CASE photo — a near-white one, such as a pale chart
   screenshot. A gentler ramp looks better over dark photography but leaves the
   blurb unreadable over a light one, and the copy block is proportionally
   taller on a phone (4/5 card) than on desktop (3/2), so the ramp has to stay
   opaque further up the card than it first appears to need. */
.sc-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.85) 24%,
        rgba(0, 0, 0, 0.58) 46%,
        rgba(0, 0, 0, 0.24) 68%,
        rgba(0, 0, 0, 0.06) 100%
    );
    pointer-events: none;
}

/* Taller copy block relative to the card, so hold the ramp up longer. */
@media (max-width: 575.98px) {
    .sc-scrim {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.96) 0%,
            rgba(0, 0, 0, 0.9) 34%,
            rgba(0, 0, 0, 0.68) 56%,
            rgba(0, 0, 0, 0.3) 76%,
            rgba(0, 0, 0, 0.08) 100%
        );
    }
}

/* ── Overlays ───────────────────────────────────────────────────────────── */

.sc-date {
    position: absolute;
    top: 1.15rem;
    left: 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem 0.7rem;
    border-radius: 14px;
    /* Dark glass, not light: this chip sits in the top corner where the scrim
       is weakest, so it has to carry its own contrast over a bright photo. */
    background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    line-height: 1;
}

.sc-date .m {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.sc-date .d {
    margin-top: 0.15rem;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sc-tag {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

/* ── Copy ───────────────────────────────────────────────────────────────── */

.sc-copy {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.35rem 1.4rem 1.5rem;
    color: #fff;
}

@media (min-width: 576px) {
    .sc-copy { padding: 1.75rem 1.85rem 1.9rem; }
}

.sc-meta {
    margin: 0 0 0.45rem;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
}

.sc-copy h3 {
    margin: 0;
    font-size: clamp(1.15rem, 2.1vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.25;
    color: #fff;
    text-wrap: balance;
}

.sc-blurb {
    margin: 0.55rem 0 0;
    max-width: 38rem;
    font-size: 0.92rem;
    line-height: 1.6;
    /* Not dimmer than this: it has to clear AA against the scrim over a
       light photo, not just look right over a dark one. */
    color: rgba(255, 255, 255, 0.84);
}

.sc-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    margin-top: 1.1rem;
    padding: 0 1.25rem;
    border-radius: 999px;
    background: #fff;
    color: #0b1220;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.sc-cta:hover {
    background: rgba(255, 255, 255, 0.88);
    color: #0b1220;
    transform: translateY(-1px);
}

.sc-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.sc-cta span { transition: transform 0.2s ease; }
.sc-cta:hover span { transform: translateX(3px); }

/* ── Footer: dots + progress rail ───────────────────────────────────────── */

.sc-foot {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.25rem;
}

.sc-dots {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: none;
}

.sc-dot {
    /* 44px tall hit target around a 6px visual dot. */
    width: 24px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.sc-dot i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.3s ease, background 0.3s ease;
}

.sc-dot:hover i { background: rgba(255, 255, 255, 0.6); }
.sc-dot[aria-current='true'] i { width: 20px; background: #fff; }

.sc-dot:focus-visible {
    outline: 2px solid var(--sc-accent);
    outline-offset: -6px;
    border-radius: 8px;
}

.sc-rail {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.sc-rail i {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    transform-origin: left center;
    transform: scaleX(0);
}

/* The footer arrows duplicate the header pair for reach on small screens. */
.sc-foot .sc-arrows { display: none; }

@media (max-width: 767.98px) {
    .sc-head .sc-arrows { display: none; }
    .sc-foot .sc-arrows { display: flex; }
    .sc-section { padding: 3.5rem 0 3rem; }
    .sc-head { margin-bottom: 1.75rem; }
    .sc-rail { display: none; }
    .sc-foot { justify-content: space-between; }
}

/* ── Screen-reader live region ──────────────────────────────────────────── */

.sc-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

/* The script already skips the spring, the scale/fade falloff and the
   parallax; this covers the CSS-driven transitions it does not own. */
@media (prefers-reduced-motion: reduce) {
    .sc-card-inner,
    .sc-img,
    .sc-cta,
    .sc-cta span,
    .sc-arrow,
    .sc-dot i {
        transition: none;
    }

    .sc-img { transform: none; }
    .sc-cta:hover,
    .sc-arrow:hover:not(:disabled) { transform: none; }
}