/* ─────────────────────────────────────────────────────────────────
   Saturday Preview — sage editorial layout.

   Loaded only when article.category.slug == 'saturday-preview' AND
   article.body_structured is set. Scoped under .sat-preview so it
   can't leak onto other article surfaces.

   Visual register:
     • Sage palette — matches LLaMa Letters, signals long-form /
       contemplative voice. Distinct from Deep Dive (gold/race-day
       urgency) and Bet of the Day (copper/tactical).
     • Generous spacing — anticipatory pieces benefit from breath.
     • Serif body type, sans-serif chips + labels — same vocabulary
       as the Deep Dive (race_preview.css) for visual consistency.
     • Hairline rules on H2s — newspaper-grade section separation
       without competing with the article masthead.
   ───────────────────────────────────────────────────────────── */

.sat-preview {
  --sp-ink:          #1a201c;
  --sp-ink-70:       rgba(26, 32, 28, 0.72);
  --sp-ink-50:       rgba(26, 32, 28, 0.50);
  --sp-ink-20:       rgba(26, 32, 28, 0.20);
  --sp-ink-08:       rgba(26, 32, 28, 0.08);

  --sp-sage:         #6b8e6b;
  --sp-sage-deep:    #4a6b4a;
  --sp-sage-bright:  #8db28d;
  --sp-sage-cream:   #f3f6ef;
  --sp-sage-soft:    rgba(107, 142, 107, 0.12);
  --sp-sage-line:    rgba(107, 142, 107, 0.35);

  --sp-cream:        #faf8f2;
  --sp-cream-warm:   #f5f1e3;

  --sp-rose:         #b91c1c;
  --sp-rose-soft:    rgba(185, 28, 28, 0.08);
  --sp-emerald:      #1a7d4a;
  --sp-emerald-soft: rgba(26, 125, 74, 0.10);
  --sp-slate-soft:   rgba(71, 85, 105, 0.10);

  font-family: "Iowan Old Style", Charter, Georgia, serif;
  color: var(--sp-ink);
  line-height: 1.72;
  font-size: 22px;
}

/* ── Fallback notice ───────────────────────────────────────── */
.sat-preview__fallback-notice {
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--sp-rose-soft);
  border-left: 3px solid var(--sp-rose);
  border-radius: 4px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 13.5px;
  color: var(--sp-ink-70);
  line-height: 1.5;
}
.sat-preview__fallback-notice strong {
  color: var(--sp-rose);
  margin-right: 4px;
}

/* ── Hero strip ────────────────────────────────────────────── */
.sat-preview__hero {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "chips     count"
    "racecard  count";
  align-items: center;
  gap: 12px 24px;
  margin: 0 0 32px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--sp-ink-08);
}
.sat-preview__hero-chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sat-preview__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--sp-ink-08);
  border-radius: 4px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sp-ink-70);
}
.sat-preview__chip--time,
.sat-preview__chip--course {
  background: var(--sp-ink);
  color: #fff;
  border-color: var(--sp-ink);
}
.sat-preview__chip--prize {
  background: var(--sp-sage-soft);
  border-color: var(--sp-sage-line);
  color: var(--sp-sage-deep);
}

.sat-preview__countdown {
  grid-area: count;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 22px;
  background: var(--sp-sage-cream);
  border: 1px solid var(--sp-sage-line);
  border-radius: 6px;
  line-height: 1;
}
.sat-preview__countdown-num {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--sp-sage-deep);
  margin-bottom: 4px;
}
.sat-preview__countdown-label {
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sp-ink-70);
}

.sat-preview__racecard-cta {
  grid-area: racecard;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  padding: 8px 14px;
  background: var(--sp-ink);
  color: #fff;
  border-radius: 4px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.15s ease;
}
.sat-preview__racecard-cta:hover {
  background: var(--sp-sage-deep);
}

/* ── Section + H2 vocabulary ──────────────────────────────── */
.sat-preview__section {
  margin: 0 0 30px;
}
/* Constrain the reading column so prose stays at ~64ch — the
   standard wire-article body uses the same convention. Sections
   with non-prose contents (market table, contender grid,
   history list) opt out below to use the full container width. */
.sat-preview__section p {
  margin: 0 0 14px;
  max-width: 64ch;
}
.sat-preview__section p:last-child {
  margin-bottom: 0;
}

/* Inline links inside LLM prose — horse / trainer / jockey profile
   links the writer emits as [Name](/horses/name/). Sage-deep colour
   + semibold weight + 2px sage underline make the linked names
   visually distinct from body text without competing with the
   contender card H3s. Applied to every prose surface (lede,
   sections, contender case) so links read consistently across
   the article. */
.sat-preview__lede p a,
.sat-preview__section p a,
.sat-preview__contender-case a {
  color: var(--sp-sage-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--sp-sage-line);
  padding-bottom: 1px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sat-preview__lede p a:hover,
.sat-preview__section p a:hover,
.sat-preview__contender-case a:hover {
  color: var(--sp-sage);
  border-bottom-color: var(--sp-sage);
}
.sat-preview__h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-sage-deep);
}
.sat-preview__h2-rule {
  flex: 0 0 28px;
  height: 2px;
  background: var(--sp-sage);
  border-radius: 1px;
}

/* ── Lede ──────────────────────────────────────────────────── */
/* Lede inherits the body size (22px) — the drop cap is the
   lede's differentiator, not a font-size step. Line-height is
   slightly tighter for the opening punch. */
.sat-preview__lede p {
  font-family: "Iowan Old Style", Charter, Georgia, serif;
  line-height: 1.55;
  color: var(--sp-ink);
  max-width: 64ch;
}
.sat-preview__lede p:first-child::first-letter {
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 64px;
  line-height: 1;
  float: left;
  padding: 4px 12px 0 0;
  color: var(--sp-sage-deep);
  font-weight: 700;
}

/* ── Market list ───────────────────────────────────────────── */
.sat-preview__market-list {
  margin: 12px 0 0;
  padding: 14px 18px;
  background: var(--sp-cream);
  border: 1px solid var(--sp-ink-08);
  border-radius: 6px;
  list-style: none;
  font-family: "DM Sans", "Inter", sans-serif;
}
.sat-preview__market-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dashed var(--sp-ink-08);
  font-size: 14px;
}
.sat-preview__market-row:first-child {
  border-top: 0;
}
.sat-preview__market-rank {
  font-weight: 700;
  color: var(--sp-ink-50);
  text-align: right;
}
.sat-preview__market-horse {
  color: var(--sp-ink);
  font-weight: 600;
}
.sat-preview__market-price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--sp-sage-deep);
}
.sat-preview__market-move {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: right;
  min-width: 50px;
}
.sat-preview__market-move--in {
  color: var(--sp-emerald);
}
.sat-preview__market-move--out {
  color: var(--sp-rose);
}
.sat-preview__market-move--flat {
  color: var(--sp-ink-20);
}

/* ── Contender cards ───────────────────────────────────────── */
.sat-preview__contender-list {
  display: grid;
  gap: 18px;
  margin: 0;
}
.sat-preview__contender {
  padding: 18px 20px;
  background: var(--sp-cream);
  border: 1px solid var(--sp-ink-08);
  border-left: 3px solid var(--sp-sage);
  border-radius: 4px;
}
.sat-preview__contender-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px;
}
.sat-preview__contender-name {
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.sat-preview__contender-name a {
  color: var(--sp-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--sp-sage-soft);
  transition: border-color 0.15s ease;
}
.sat-preview__contender-name a:hover {
  border-bottom-color: var(--sp-sage);
}
.sat-preview__contender-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12.5px;
}
.sat-preview__contender-price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--sp-sage-deep);
  padding: 2px 8px;
  background: var(--sp-sage-soft);
  border-radius: 3px;
}
.sat-preview__contender-band {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--sp-slate-soft);
  color: var(--sp-ink-70);
}
.sat-preview__contender-band--favourite {
  background: var(--sp-emerald-soft);
  color: var(--sp-emerald);
}
.sat-preview__contender-band--longshot,
.sat-preview__contender-band--outsider {
  background: var(--sp-rose-soft);
  color: var(--sp-rose);
}
.sat-preview__contender-trainer {
  color: var(--sp-ink-50);
}
.sat-preview__contender-case {
  margin: 0;
  font-family: "Iowan Old Style", Charter, Georgia, serif;
  font-size: 22px;
  line-height: 1.65;
  color: var(--sp-ink);
}

/* ── History list (course pattern winners) ────────────────── */
.sat-preview__history-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: "DM Sans", "Inter", sans-serif;
}
.sat-preview__history-list li {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px dashed var(--sp-ink-08);
  font-size: 14px;
}
.sat-preview__history-list li:first-child {
  border-top: 0;
}
.sat-preview__history-year {
  font-weight: 700;
  color: var(--sp-sage-deep);
}
.sat-preview__history-horse {
  font-weight: 600;
  color: var(--sp-ink);
}
.sat-preview__history-sp {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--sp-ink-70);
}
.sat-preview__history-meta {
  color: var(--sp-ink-50);
  font-size: 13px;
}

/* ── Yard list (trainer watch) ────────────────────────────── */
.sat-preview__yard-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: "DM Sans", "Inter", sans-serif;
  display: grid;
  gap: 4px;
}
.sat-preview__yard-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dashed var(--sp-ink-08);
  font-size: 14px;
}
.sat-preview__yard-list li:first-child {
  border-top: 0;
}
.sat-preview__yard-list strong {
  color: var(--sp-sage-deep);
  font-weight: 700;
}
.sat-preview__yard-list span {
  color: var(--sp-ink-70);
}
.sat-preview__yard-rate {
  color: var(--sp-emerald) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Watch list — closing prominent block ─────────────────── */
.sat-preview__watch-list {
  margin: 40px 0 24px;
  padding: 24px 28px;
  background: var(--sp-sage-cream);
  border: 1px solid var(--sp-sage-line);
  border-radius: 6px;
  text-align: center;
}
.sat-preview__watch-list-h2 {
  margin: 0 0 14px;
  font-family: "Iowan Old Style", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--sp-sage-deep);
  letter-spacing: 0;
  text-transform: none;
}
.sat-preview__watch-list-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-family: "DM Sans", "Inter", sans-serif;
}
.sat-preview__watch-list-items li {
  position: relative;
}
.sat-preview__watch-list-items li + li::before {
  content: '·';
  position: absolute;
  left: -10px;
  color: var(--sp-sage);
  font-weight: 700;
}
.sat-preview__watch-list-items a {
  color: var(--sp-ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid var(--sp-sage-soft);
  transition: border-color 0.15s ease;
}
.sat-preview__watch-list-items a:hover {
  border-bottom-color: var(--sp-sage);
}
.sat-preview__watch-list-caveat {
  margin: 0;
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12.5px;
  color: var(--sp-ink-50);
}
.sat-preview__watch-list-caveat em {
  font-style: italic;
}

/* ── Attribution footer ──────────────────────────────────── */
.sat-preview__attribution {
  margin: 24px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--sp-ink-08);
  font-family: "DM Sans", "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--sp-ink-50);
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .sat-preview {
    font-size: 19px;
  }
  .sat-preview__hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "chips"
      "count"
      "racecard";
  }
  .sat-preview__countdown {
    justify-self: start;
  }
  .sat-preview__lede p:first-child::first-letter {
    font-size: 54px;
  }
  .sat-preview__contender {
    padding: 16px;
  }
  .sat-preview__contender-name {
    font-size: 20px;
  }
  .sat-preview__market-row {
    grid-template-columns: 24px 1fr auto auto;
    gap: 8px;
    font-size: 13px;
  }
  .sat-preview__history-list li {
    grid-template-columns: 50px 1fr auto;
  }
  .sat-preview__history-meta {
    display: none;
  }
  .sat-preview__watch-list {
    padding: 20px 18px;
  }
}