/* Affiliate campaign block (partials/affiliate_block.html, affiliate_campaigns.py), placed by
   static/ads.js on an affiliate turn (static/affiliates.js) on any page with ads. One shows per
   screen size. A container query, so each shape follows the column
   it's in rather than the screen. */
.rd-aff { container-type: inline-size; margin: 28px 0; }
.rd-aff--rail, .rd-aff--wide { display: none; }
.rd-aff--rail { margin: 0 0 24px; }
@media (min-width: 1024px) {
    .rd-aff--rail, .rd-aff--wide { display: block; }
    .rd-aff--flow { display: none; }
}
.rd-aff-inner {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) 216px;
    gap: 20px;
    align-items: center;
    padding: 16px;
    background: var(--aff-bg);
    border: 1px solid var(--aff-line);
    border-radius: 8px;
}
.rd-aff-photo { display: block; border-radius: 6px; overflow: hidden; background: #fff; }
.rd-aff-photo img,
.rd-aff-photo video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.rd-aff-label { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--aff-accent); }
.rd-aff-brand { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--aff-dark); }
.rd-aff-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rs-text, #1f1d1a);
}
.rd-aff-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--rs-text, #1f1d1a); }
.rd-aff-deal {
    padding: 14px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--aff-line);
    border-radius: 6px;
}
.rd-aff-deal-big {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--aff-dark);
}
.rd-aff-deal-sub { margin: 4px 0 12px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--rs-text, #1f1d1a); }
.rd-aff-cta {
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    color: #fff !important;
    background: var(--aff-accent);
    border-radius: 6px;
    text-decoration: none;
}
.rd-aff-cta:hover { background: var(--aff-dark); }
.rd-aff-cta:focus-visible { outline: 2px solid var(--aff-accent); outline-offset: 2px; }
.rd-aff-offer { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--rs-text-secondary, #5c5a55); }
@container (max-width: 640px) {
    .rd-aff-inner { grid-template-columns: 110px minmax(0, 1fr); }
    .rd-aff-deal { grid-column: 1 / -1; }
}
@container (max-width: 480px) {
    .rd-aff-inner { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .rd-aff-photo { width: 240px; max-width: 100%; margin: 0 auto; }
}

/* Sidebar card as the sidebar's first stretch (static/ads.js placeRail, 12 Nov 2026): the
   stretch is at least the card's height, and the card sticks under the header like the
   sidebar ads when the whole card fits the window (.rail-seg--stick). */
@media (min-width: 1024px) {
    .rail-ads > .rail-seg--aff { min-height: auto; flex-grow: 1; }   /* one stretch, like an ad (ads.js AFF_SEGS); style.css loads later */
    .rail-seg--aff > .rd-aff--rail { margin: 0; }
    .rail-seg--stick > .rd-aff--rail { position: sticky; top: 92px; }
}

/* Partner carousel (partials/affiliate_carousel.html, 13 Nov 2026): the partner's own look. RunDNA:
   ink bar with its logo, its Black Friday banner, then shoes on its pale blue with today's price, in
   its REM typeface. --aff-bg pale, --aff-line rule, --aff-accent teal, --aff-dark ink. One stage
   height for every slide, so nothing below moves as it turns: tall (5:6, the banner's portrait
   crop) under 560px, the wide banner's 2.4:1 above. Slides cross-fade; the one moving thing is the
   active slide's bar filling over --aff-car-time (2.8s; 5s then 3.5s were too slow, John 13 Nov 2026), which
   also drives the turn (affiliates.js). */
.aff-car {
    --aff-ink: var(--aff-dark);
    overflow: hidden;
    color: var(--aff-ink);
    background: var(--aff-ink);
    border-radius: 10px;
    font-family: 'REM', var(--font-body, system-ui), sans-serif;
    box-shadow: 0 1px 2px rgba(20, 30, 37, 0.08), 0 8px 24px -12px rgba(20, 30, 37, 0.35);
}
.aff-car-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 6px 0 14px;
    color: var(--aff-bg);
}
.aff-car-logo { display: block; width: 74px; flex: none; line-height: 0; }
.aff-car-logo svg { display: block; width: 100%; height: auto; }
.aff-car-label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; color: rgba(245, 250, 254, 0.72); white-space: nowrap; }
.aff-car-dots { display: flex; gap: 2px; margin-left: auto; }
.aff-car-dot {
    position: relative;
    width: 22px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.aff-car-dot::before,
.aff-car-dot::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    background: rgba(245, 250, 254, 0.28);
}
.aff-car-dot::after { background: var(--aff-accent); transform: scaleX(0); transform-origin: left; }
.aff-car-dot.is-done::after { transform: scaleX(1); }
.aff-car-dot.is-on::after { animation: aff-car-fill var(--aff-car-time, 2.8s) linear forwards; }
.aff-car.is-held .aff-car-dot.is-on::after,
.aff-car:hover .aff-car-dot.is-on::after,
.aff-car:focus-within .aff-car-dot.is-on::after { animation-play-state: paused; }
@keyframes aff-car-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.aff-car-pause {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: rgba(245, 250, 254, 0.8);
    background: none;
    cursor: pointer;
}
.aff-car-pause:hover { color: #fff; background: rgba(245, 250, 254, 0.1); }
.aff-car-dot:focus-visible,
.aff-car-pause:focus-visible { outline: 2px solid var(--aff-accent); outline-offset: -2px; border-radius: 6px; }
.aff-car-i-play, .aff-car.is-stopped .aff-car-i-pause { display: none; }
.aff-car.is-stopped .aff-car-i-play { display: block; }

/* The offer, on show whatever the slide: RunDNA's own promo-strip pattern, teal with ink type. */
.aff-car-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 8px;
    row-gap: 0;
    padding: 8px 14px 9px;
    font-size: 13.5px;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    color: var(--aff-ink);
    background: var(--aff-accent);
    transition: background-color 0.2s ease-out;
}
.aff-car-strip:hover { background: #19bdb2; }
.aff-car-strip:focus-visible { outline: 3px solid var(--aff-bg); outline-offset: -3px; }
.aff-car-strip-name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }
.aff-car-strip-offer { font-weight: 700; }
.aff-car-strip-until { font-weight: 500; }
.aff-car-strip-go { align-self: center; flex: none; }
@container (max-width: 400px) {
    .aff-car-strip-name { flex-basis: 100%; }
}

.aff-car-stage { position: relative; aspect-ratio: 720 / 864; background: var(--aff-bg); }
.aff-car-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    color: var(--aff-ink);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
}
.aff-car-slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.aff-car-slide:focus-visible { outline: 3px solid var(--aff-accent); outline-offset: -3px; }

.aff-car-banner { display: block; width: 100%; height: 100%; object-fit: cover; }
.aff-car-banner--wide { display: none; }

.aff-car-photo {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}
/* Pinned inside its box: the photos are white squares, and an overflowing one shows under the text. */
.aff-car-photo img {
    position: absolute;
    left: 8%;
    top: 5%;
    width: 84%;
    height: 92%;
    object-fit: contain;
    mix-blend-mode: multiply;   /* the photos' own off-white background disappears into the panel */
    transform: scale(0.96);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.aff-car-slide.is-on .aff-car-photo img { transform: none; }
.aff-car-info {
    display: grid;
    gap: 2px;
    padding: 14px 16px 16px;
    background: var(--aff-bg);
    border-top: 1px solid var(--aff-line);
}
.aff-car-name { font-size: 17px; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.aff-car-brand { font-weight: 500; }
.aff-car-who { font-size: 13px; color: #31495b; }
.aff-car-price { margin-top: 6px; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.aff-car-note { font-size: 11.5px; color: #4a5d6b; }
.aff-car-cta {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--aff-ink);
    background: var(--aff-accent);
    border-radius: 6px;
    transition: background-color 0.2s ease-out;
}
.aff-car-slide:hover .aff-car-cta { background: #19bdb2; }
.aff-car-cta--light {
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    margin: 0;
    padding: 11px 22px;
    white-space: nowrap;
    background: var(--aff-bg);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
}
.aff-car-slide:hover .aff-car-cta--light { background: #fff; }

@container (max-width: 330px) {
    .aff-car-info { padding: 12px 14px 14px; }
    .aff-car-name { font-size: 16px; }
    .aff-car-price { font-size: 23px; margin-top: 4px; }
    .aff-car-cta { margin-top: 8px; padding: 9px 12px; }
}
@container (min-width: 560px) {
    /* Wide (in the article on desktop), tightened 13 Nov 2026 (John: too much white space): a
       shorter stage, the banner cropped top and bottom (its type sits in the middle), the shoe
       filling a wider panel, and the text spread across the width. */
    .aff-car-stage { aspect-ratio: 1400 / 440; }
    .aff-car-banner--wide { display: block; object-position: 50% 52%; }
    .aff-car-banner--tall { display: none; }
    .aff-car-cta--light { left: auto; right: 4%; bottom: 50%; transform: translateY(50%); }
    .aff-car-slide--item { flex-direction: row; }
    .aff-car-photo { flex: 0 0 42%; height: 100%; }
    .aff-car-photo img { left: 5%; top: 0; width: 90%; height: 100%; object-fit: cover; object-position: 50% 52%; }
    .aff-car-info {
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name name" "who who" "price cta" "rrp cta" "note cta";
        align-content: center;
        column-gap: 20px;
        row-gap: 2px;
        padding: 18px 28px;
        border-top: 0;
        border-left: 1px solid var(--aff-line);
    }
    .aff-car-name { grid-area: name; font-size: 22px; }
    .aff-car-who { grid-area: who; font-size: 14px; }
    .aff-car-price { grid-area: price; margin-top: 14px; font-size: 34px; }
    .aff-car-note { grid-area: note; font-size: 12px; }
    .aff-car-rrp { grid-area: rrp; }
    .aff-car-info > .aff-car-cta { grid-area: cta; align-self: end; margin: 0 0 2px; padding: 12px 22px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .aff-car-slide, .aff-car-photo img { transition: none; }
    .aff-car-photo img { transform: none; }
    .aff-car-dot.is-on::after { animation: none; transform: scaleX(1); }
}
.rd-aff.aff-car { margin: 28px 0; }
.rd-aff--rail.aff-car { margin: 0 0 24px; }

/* The free spot (slot 'spot'): always shown, at every width; the page around it sets the margins.
   Its hosts style their own links (.raceday-panel a is underlined), so the carousel resets them. */
.rd-aff.rd-aff--spot { display: block; margin: 0; }
.rd-aff.aff-car a { text-decoration: none; font-weight: inherit; color: inherit; }
.rd-aff.aff-car a.aff-car-strip { color: var(--aff-ink); }

/* Compact carousel, as the race top panel's right-hand column on desktop (13 Nov 2026, John: the
   pill only filled space this size doesn't have). A 2:1 stage with the wide banner, the shoe beside
   its name and price, and a text link in place of the pill; the banner keeps its button. Flat,
   because the panel is already the card. */
@media (min-width: 1024px) {
    .rtp-aff .aff-car { box-shadow: none; border-radius: 10px; }
    .rtp-aff .aff-car-bar { height: 40px; }
    .rtp-aff .aff-car-strip { font-size: 12.5px; padding: 7px 12px; }
    .rtp-aff .aff-car-strip-name { font-size: 11px; flex-basis: auto; }
    .rtp-aff .aff-car-stage { aspect-ratio: 1850 / 770; }    /* the banner's own shape: no side crop, so its type keeps clear of the button */
    .rtp-aff .aff-car-banner--wide { display: block; object-position: 50% 52%; }
    .rtp-aff .aff-car-banner--tall { display: none; }
    .rtp-aff .aff-car-cta--light { left: auto; right: 4%; bottom: 9%; transform: none; padding: 8px 14px; font-size: 13.5px; }
    .rtp-aff .aff-car-slide--item { flex-direction: row; }
    .rtp-aff .aff-car-photo { flex: 0 0 46%; height: 100%; }
    .rtp-aff .aff-car-photo img { left: 4%; top: 0; width: 92%; height: 100%; object-fit: cover; object-position: 50% 52%; }
    .rtp-aff .aff-car-info { flex: 1 1 auto; align-content: center; gap: 0; padding: 10px 16px; border-top: 0; border-left: 1px solid var(--aff-line); }
    .rtp-aff .aff-car-name { font-size: 16px; }
    .rtp-aff .aff-car-who { font-size: 12.5px; }
    .rtp-aff .aff-car-price { margin-top: 6px; font-size: 23px; }
    .rtp-aff .aff-car-note { font-size: 11px; }
    .rtp-aff .aff-car-info > .aff-car-cta {
        justify-self: start;
        margin: 6px 0 0;
        padding: 0;
        font-size: 13px;
        color: #00706a;            /* RunDNA teal, deepened to 5:1 on the pale panel */
        text-align: left;
        background: none;
        border-radius: 0;
    }
    .rtp-aff .aff-car-info > .aff-car-cta::after { content: ' \2192'; }
    .rtp-aff .aff-car-slide:hover .aff-car-info > .aff-car-cta { background: none; text-decoration: underline; text-underline-offset: 3px; }
}

/* Narrow carousels (a phone panel leaves ~340px): the bar keeps its logo, the "Affiliate link"
   disclosure, every slide button and the pause button on one line. */
@container (max-width: 380px) {
    .aff-car-bar { gap: 8px; padding: 0 2px 0 12px; }
    .aff-car-logo { width: 64px; }
    .aff-car-label { font-size: 11px; }
    .aff-car-dot { width: 15px; }
    .aff-car-pause { width: 30px; }
}

/* Our own first slide for a carousel with no partner banner (Campaign.promo): the offer on the
   partner's ink, the shoe on its pale blue. Stacked when tall, side by side when wide. */
.aff-car-slide--promo { background: var(--aff-ink); color: var(--aff-bg); }
.aff-car-promo-shoe { position: relative; flex: 1 1 52%; min-height: 0; background: var(--aff-bg); }
.aff-car-promo-shoe img {
    position: absolute; left: 10%; top: 6%; width: 80%; height: 88%;
    object-fit: contain; mix-blend-mode: multiply;
}
.aff-car-promo-text { display: grid; align-content: center; gap: 6px; padding: 18px 18px 20px; }
.aff-car-promo-title { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.aff-car-promo-line { font-size: 13.5px; line-height: 1.45; color: rgba(245, 250, 254, 0.78); }
.aff-car-promo-text .aff-car-cta { margin-top: 8px; }
.aff-car-slide--promo:hover .aff-car-cta { background: #19bdb2; }
@container (min-width: 560px) {
    .aff-car-slide--promo { flex-direction: row; }
    .aff-car-promo-text { order: -1; flex: 0 0 56%; padding: 20px 28px; }
    .aff-car-promo-title { font-size: 28px; }
    .aff-car-promo-line { font-size: 14.5px; }
    .aff-car-promo-text .aff-car-cta { justify-self: start; padding: 11px 22px; }
    .aff-car-promo-shoe { flex: 1 1 auto; }
}
@media (min-width: 1024px) {
    .rtp-aff .aff-car-slide--promo { flex-direction: row; }
    .rtp-aff .aff-car-promo-text { order: -1; flex: 0 0 58%; padding: 12px 16px; gap: 4px; }
    .rtp-aff .aff-car-promo-title { font-size: 18px; }
    .rtp-aff .aff-car-promo-line { font-size: 12px; }
    .rtp-aff .aff-car-promo-text .aff-car-cta { justify-self: start; margin-top: 6px; padding: 7px 14px; font-size: 13.5px; }
    .rtp-aff .aff-car-promo-shoe { flex: 1 1 auto; }
}

/* Sale prices (RunDNA Black Friday, 13 Nov 2026): RunDNA's own regular price struck through, and the
   saving in its sale red, only while the feed's price is below it (affiliate_products.py). */
.aff-car-off {
    display: inline-block;
    margin-left: 6px;
    padding: 3px 7px;
    font-size: 0.5em;
    font-weight: 700;
    letter-spacing: 0.01em;
    vertical-align: 0.35em;
    color: #fff;
    background: #d40a2f;      /* RunDNA's sale red (#f30c36), deepened for white text */
    border-radius: 4px;
}
.aff-car-rrp { font-size: 12.5px; color: #4a5d6b; }
.aff-car-rrp s { text-decoration-thickness: 1.5px; }

/* In the race top's partner column on desktop the carousel fills the column's height
   (John, 13 Nov 2026): the stage grows, slides fill it. */
@media (min-width: 1024px) {
    .rtp--aff > .rtp-aff > .rd-aff.aff-car { display: flex; flex-direction: column; height: 100%; }
    .rtp-aff .aff-car .aff-car-stage { flex: 1 1 auto; aspect-ratio: auto; min-height: 180px; }
    .rtp-aff .aff-car-banner--wide { object-fit: cover; }
}

/* Product photos in the race top's partner column are never cropped (John, 13 Nov 2026: the
   watch was cut off): shown whole on white. When the column is tall (the board beside it is
   long) the slide stacks like the phone: photo on top, name and price below. */
@media (min-width: 1024px) {
    .rtp-aff .aff-car .aff-car-stage { container: aff-stage / size; }
    .rtp-aff .aff-car-photo img { left: 6%; top: 6%; width: 88%; height: 88%; object-fit: contain; }
    @container aff-stage (min-height: 300px) {
        .rtp-aff .aff-car-slide--item { flex-direction: column; }
        .rtp-aff .aff-car-photo { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }
        .rtp-aff .aff-car-photo img { left: 8%; top: 5%; width: 84%; height: 90%; }
        .rtp-aff .aff-car-info { flex: none; padding: 10px 16px 12px; border-left: 0; border-top: 1px solid var(--aff-line); }
        .rtp-aff .aff-car-price { margin-top: 4px; }
    }
}