/* ==========================================================================
   Inline story strip — an in-article placement for a SINGLE story.

   Distinct from rail.css: the rail shows one cover card per story across a
   publisher's whole catalogue, whereas this shows every card WITHIN one story.

   Desktop (>760px): all cards laid out across the page, focus auto-advancing
                     from one to the next like a filmstrip.
   Mobile  (<=760px): a single tappable cover that opens the full-screen viewer.
   ========================================================================== */

.stories-inline {
    --si-ink: #111;
    --si-red: #d81f26;
    --si-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --si-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* Track geometry. Declared here rather than on .si-strip so the footer —
       a sibling — can size itself to match the cards. */
    --si-visible: 3;
    /* Tight gap: the cards are meant to read as one connected filmstrip rather
       than as separate tiles, so the gutter is halved from the hub's 16px. */
    --si-gap: 8px;
    /* Card width, matching .hub-card-media on /finance-stories/ so the two
       placements read as the same product. Paired with the 9/14 aspect ratio
       on .si-card, this reproduces the hub's card geometry exactly. */
    --si-card-w: 240px;

    margin: 36px 0 40px;
    font-family: var(--si-sans);
}

/**
 * Break out of the article's text measure — rightward only, and only as far as
 * the track actually needs.
 *
 * Three 240px cards plus two 8px gaps need 736px of content box; this article's
 * text measure is 720px, so without this the third card is clipped. The strip's
 * own max-width still caps the track, so this only ever grants the shortfall —
 * it does not stretch cards, which are fixed to the hub's width.
 *
 * Rightward only: the left edge stays flush with the body copy. A symmetric
 * bleed would hang off the left of the viewport and read as broken. `width` is
 * set rather than a negative margin so the cap and this cooperate.
 */
@media (min-width: 761px) {
    .stories-inline {
        width: max-content;
        max-width: calc(100vw - 48px);
    }
}

/* --- header --------------------------------------------------------------- */

.si-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--si-ink);
    margin-bottom: 16px;
}

.si-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--si-red);
}

.si-meta {
    font-size: 12px;
    color: #6b6b6b;
    white-space: nowrap;
}

/* --- desktop filmstrip --------------------------------------------------- */

/* Three cards visible at a time. The track holds all of them and slides
   horizontally; --si-visible cards fit the viewport width, the rest wait
   off-frame. The clip is on a wrapper so focused cards can still lift and
   cast a shadow without being cut off. */
.si-strip {
    position: relative;
    /* Hold the track to exactly --si-visible cards. Without this the strip
       would stretch to the full bleed and fit more than 3, leaving the window
       size at the mercy of the viewport. */
    max-width: calc(
        var(--si-visible) * var(--si-card-w) +
        (var(--si-visible) - 1) * var(--si-gap) +
        16px /* the 8px horizontal padding below, which sits inside this box */
    );
    /* Room for the lift + shadow of the focused card. */
    margin: 0 -8px;
    padding: 10px 8px 16px;
    overflow: hidden;
}

.si-track {
    display: grid;
    grid-auto-flow: column;
    /* Fixed card width, so cards keep the hub's geometry instead of stretching
       to fill whatever width the bleed produced. The strip's max-width above is
       what limits the visible window to --si-visible of them. */
    grid-auto-columns: var(--si-card-w);
    gap: var(--si-gap);
    align-items: stretch;
    transform: translateX(var(--si-offset, 0px));
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.si-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    /* Square, not rounded: butted-up square edges make the strip read as one
       continuous filmstrip and set it apart from rounded-card feeds. */
    border-radius: 0;
    overflow: hidden;
    background: #08080a;
    /* Matches .hub-card-media on /finance-stories/. */
    aspect-ratio: 9 / 14;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: #fff;
    /* Unfocused cards sit back; the focused one comes forward. */
    opacity: 0.52;
    filter: saturate(0.75);
    transform: translateY(0) scale(0.97);
    transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease,
                box-shadow 0.45s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.si-card.is-focused {
    opacity: 1;
    filter: none;
    transform: translateY(-6px) scale(1);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.si-card:hover,
.si-card:focus-visible {
    opacity: 1;
    filter: none;
}

.si-card:focus-visible {
    outline: 2.5px solid var(--si-red);
    outline-offset: 3px;
}

.si-card-media {
    position: absolute;
    inset: 0;
}

.si-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Legibility scrim behind the caption. */
.si-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(4, 4, 6, 0.92) 0%,
        rgba(4, 4, 6, 0.55) 38%,
        rgba(4, 4, 6, 0.12) 68%,
        rgba(4, 4, 6, 0.30) 100%
    );
}

.si-card-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 16px 18px;
}

.si-card-index {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.66);
    margin-bottom: 8px;
}

.si-card-title {
    margin: 0;
    font-family: var(--si-serif);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
    /* Keep every card the same visual weight regardless of copy length. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Supporting line, room for which only exists at this larger card size. */
.si-card-sub {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.si-card--quote .si-card-title {
    font-style: italic;
}

.si-card--quote .si-card-title::before { content: '\201C'; }
.si-card--quote .si-card-title::after  { content: '\201D'; }

/* Per-card progress: fills while this card holds focus. */
.si-card-progress {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.si-card-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--si-red);
    transform: scaleX(0);
    transform-origin: left center;
}

.si-card.is-focused .si-card-progress span {
    animation: si-fill linear forwards;
    animation-duration: var(--si-duration, 6000ms);
}

.si-card.is-seen .si-card-progress span {
    transform: scaleX(1);
}

@keyframes si-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* --- sponsored tile ------------------------------------------------------ */

/*
 * A derived ad tile in the filmstrip, carrying the same JWX house creative as
 * the hub's feed slot (.hub-mock-ad) so the two placements read as one product.
 *
 * It sits in the track like a card and shares the card's box, but it is not a
 * .si-card: it never takes focus, gets no dot, and does not dim as focus moves
 * past it. An ad that faded in and out with editorial focus would read as part
 * of the story rather than as a paid slot.
 *
 * Light card, not dark: the JWX wordmark's "X" is solid black on a transparent
 * background, so on a dark fill half the logo vanishes.
 */
.si-ad {
    --jwx-pink: #ec0041;

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 9 / 14;
    /* Matches .si-card's square edges. */
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
    text-decoration: none;
    color: inherit;
    /* The track's white-space handling would otherwise keep the copy on one
       clipped line. */
    white-space: normal;
}

.si-ad:focus-visible {
    outline: 2.5px solid var(--si-red);
    outline-offset: 3px;
}

/* Hairline keeps the white creative from dissolving into the page. */
.si-ad::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 0;
    pointer-events: none;
}

/* Disclosure sits above the creative — a real placement is always labelled. */
.si-ad-label {
    flex: none;
    padding: 7px 12px 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a8a8a;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    background: #fafafa;
}

.si-ad-creative {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 16px;
    background:
        radial-gradient(circle at 88% 6%, rgba(236, 0, 65, 0.13), transparent 46%),
        #fff;
}

/* Landscape hero band. flex rather than a fixed aspect-ratio so the hero is the
   part that gives when the column narrows — a fixed ratio pushes the CTA past
   the bottom edge on small columns. */
.si-ad-hero {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    object-fit: cover;
    display: block;
    margin-bottom: 11px;
}

.si-ad-logo {
    width: 50px;
    height: auto;
    flex: none;
    margin: 0 14px 3px;
    display: block;
    object-fit: contain;
}

/* align-items:flex-start makes these shrink-to-fit, so they need to stretch or
   long copy overflows the creative instead of wrapping. */
.si-ad-headline {
    align-self: stretch;
    flex: none;
    box-sizing: border-box;
    padding: 0 14px;
    font-family: var(--si-serif);
    font-size: 17px;
    line-height: 1.16;
    font-weight: 700;
    color: var(--si-ink);
    text-wrap: balance;
}

.si-ad-sub {
    align-self: stretch;
    flex: none;
    box-sizing: border-box;
    padding: 4px 14px 0;
    display: block;
    font-size: 10.5px;
    line-height: 1.4;
    color: #5b5b5b;
    overflow-wrap: break-word;
}

.si-ad-cta {
    flex: none;
    margin: 10px 0 0 14px;
    padding: 7px 13px;
    border-radius: 3px;
    background: var(--jwx-pink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.si-ad:hover .si-ad-cta { background: #c90038; }

/* --- arrows -------------------------------------------------------------- */

.si-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20);
    color: #111;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.si-nav:hover { background: #fff; transform: scale(1.06); }

.si-nav:focus-visible {
    outline: 2.5px solid var(--si-red);
    outline-offset: 2px;
}

.si-nav svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.si-nav--prev { left: 12px; }
.si-nav--next { right: 12px; }

/* At either end the arrow stays in the layout but stops inviting a click. */
.si-nav[disabled] {
    opacity: 0;
    pointer-events: none;
}

/* --- footer / controls --------------------------------------------------- */

/* Three columns so the dots stay optically centred regardless of the width of
   the hint and the pause button flanking them.

   Shares the strip's max-width: the cards no longer fill the full bleed, so
   without this the footer would run past them and the dots would centre on the
   bleed rather than on the strip they describe. */
.si-foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    max-width: calc(
        var(--si-visible, 3) * var(--si-card-w, 240px) +
        (var(--si-visible, 3) - 1) * var(--si-gap, 16px)
    );
}

.si-hint {
    font-size: 12.5px;
    color: #6b6b6b;
}

/* Dots: one per card, showing position within the full set. */
.si-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.si-foot .si-pause { justify-self: end; }

.si-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfcfcf;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.si-dot.is-active {
    background: var(--si-red);
    transform: scale(1.32);
}

.si-dot:focus-visible {
    outline: 2px solid var(--si-red);
    outline-offset: 2px;
}

.si-pause {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font: 600 12px/1 var(--si-sans);
    color: #333;
    background: #f2f2f2;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    cursor: pointer;
}

.si-pause:hover { background: #e8e8e8; }

.si-pause:focus-visible {
    outline: 2.5px solid var(--si-red);
    outline-offset: 2px;
}

/* --- mobile: single tappable cover -------------------------------------- */

.si-mobile {
    display: none;
    position: relative;
    width: 100%;
    padding: 0;
    border: 0;
    /* Square, matching the desktop strip. */
    border-radius: 0;
    overflow: hidden;
    background: #08080a;
    aspect-ratio: 4 / 5;
    cursor: pointer;
    color: #fff;
    text-align: left;
    font: inherit;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.si-mobile:focus-visible {
    outline: 2.5px solid var(--si-red);
    outline-offset: 3px;
}

.si-mobile .si-card-media::after {
    background: linear-gradient(
        to top,
        rgba(4, 4, 6, 0.93) 0%,
        rgba(4, 4, 6, 0.45) 45%,
        rgba(4, 4, 6, 0.10) 75%,
        rgba(4, 4, 6, 0.34) 100%
    );
}

.si-mobile-body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 18px 20px;
}

.si-mobile-kicker {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ff6b70;
    margin-bottom: 7px;
}

.si-mobile-title {
    margin: 0 0 10px;
    font-family: var(--si-serif);
    font-size: 23px;
    line-height: 1.16;
    font-weight: 900;
}

.si-mobile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
}

.si-mobile-meta span + span::before {
    content: '·';
    margin-right: 8px;
}

/* Card-count pips, so the reader knows there are 5 slides inside. */
.si-pips {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
}

.si-pips i {
    flex: 1;
    height: 2.5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.85);
}

.si-pips i + i { background: rgba(255, 255, 255, 0.34); }

/* Narrow desktop: the host article still gives 300px to its sidebar here, so
   three 240px cards plus gaps do not fit in the remaining measure. Cards keep
   their size and the window drops to 2 rather than shrinking. */
@media (max-width: 1180px) {
    .stories-inline { --si-visible: 2; }
}

@media (max-width: 760px) {
    .stories-inline { margin: 28px 0 32px; }
    .si-strip,
    .si-foot { display: none; }
    .si-mobile { display: block; }
}

/* Respect reduced-motion: no auto-advancing focus, no fill animation, and the
   track jumps rather than slides. */
@media (prefers-reduced-motion: reduce) {
    .si-card,
    .si-card.is-focused {
        transition: none;
        transform: none;
    }
    .si-track { transition: none; }
    .si-card.is-focused .si-card-progress span {
        animation: none;
        transform: scaleX(1);
    }
    .si-nav { transition: none; }
}