/* ═══════════════════════════════════════════════════════════════
   Today's Racing strip — landing page, above the hero fold.

   Two variants share one <aside>:
     .today-strip__mobile   — single tappable row, hidden on tablet+
     .today-strip__desktop  — full 3-col layout, hidden on mobile

   The breakpoint at 700px keeps the desktop strip from collapsing
   awkwardly between 700 and 880px (current layout still fits at
   that width because the meta column wraps naturally).

   Self-contained — nothing here targets the hero or any other
   landing section. Removing the include in landing.html leaves no
   CSS debris.
═══════════════════════════════════════════════════════════════ */

.today-strip {
  /* Same dark family as the hero so the page reads as one piece.
     Sits above the hero — the gold rule is on the BOTTOM so it
     forms the visual seam INTO the hero; the top edge gets the
     subtle border that separates it from the navbar. */
  background: linear-gradient(180deg, #0a121e 0%, #0e1827 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1.4;
}

/* ── Mobile variant: layout Race of the Day card ≤700px ─────────── */
.today-strip__mobile {
  display: none; /* enabled at ≤700px */
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  /* Vertical only — .container supplies --page-gutter sides */
  padding-top: 14px;
  padding-bottom: 10px;
  text-decoration: none;
  color: inherit;
}

.today-strip__m-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 16px;
  align-items: center;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.38);
  background: rgba(8, 12, 20, 0.55);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.today-strip__m-card:active,
.today-strip__m-card:focus-visible {
  outline: none;
  border-color: rgba(212, 175, 55, 0.65);
  background: rgba(212, 175, 55, 0.06);
}

.today-strip__m-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 64px;
}
.today-strip__m-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(245, 242, 234, 0.88);
  line-height: 1.2;
}
.today-strip__m-day {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 0.92;
  color: #fff;
  letter-spacing: -0.02em;
}

.today-strip__m-race {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.today-strip__m-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--c-gold);
}
.today-strip__m-when {
  font-size: 15px;
  font-weight: 600;
  color: rgba(245, 242, 234, 0.92);
}
.today-strip__m-when strong {
  color: var(--c-gold);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.today-strip__m-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(245, 242, 234, 0.92);
}

.today-strip__m-next {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0 2px 4px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(245, 242, 234, 0.78);
}
.today-strip__m-zap {
  flex: 0 0 14px;
  margin-top: 2px;
  filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(450%)
    hue-rotate(64deg) brightness(1.05);
}
.today-strip__m-next a {
  color: rgba(245, 242, 234, 0.92);
  text-decoration: none;
}
.today-strip__m-next a:hover {
  color: var(--c-gold);
}
.today-strip__m-next strong {
  color: #fff;
  font-weight: 700;
}

/* Legacy one-liner hooks (unused with new markup) */
.today-strip__mobile-icon,
.today-strip__mobile-body,
.today-strip__mobile-kicker,
.today-strip__mobile-line,
.today-strip__mobile-arrow {
  display: none;
}

/* ── Desktop variant: full 3-column strip ──────────────────────── */
.today-strip__desktop {
  /* Only vertical rhythm — keep .container horizontal --page-gutter */
  padding-top: 18px;
  padding-bottom: 18px;
}
.today-strip__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
}

.today-strip__date-col { display: flex; align-items: center; }
.today-strip__date-pill {
  display: inline-flex; flex-direction: column;
  padding: 6px 14px;
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.35);
  min-width: 92px;
  text-align: center;
}
.today-strip__date-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--c-gold);
}
.today-strip__date-value {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.today-strip__feature-col {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.today-strip__feature-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--c-gold);
  text-transform: uppercase;
}
.today-strip__feature-line {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-strip__feature-line strong {
  color: #fff;
  font-weight: 700;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

.today-strip__meta-col {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
  text-align: right;
}
.today-strip__meta-counts-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.today-strip__meta-counts {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
}
.today-strip__meta-counts strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.today-strip__meta-next {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.today-strip__meta-next strong {
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.today-strip__dot {
  display: inline-block;
  margin: 0 6px;
  color: rgba(212, 175, 55, 0.50);
}

.today-strip__cta {
  display: inline-flex; align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border 0.15s ease;
}
.today-strip__cta--primary {
  align-self: flex-start;
  background: var(--c-gold);
  color: #11151f;
  border: 1px solid var(--c-gold);
}
.today-strip__cta--primary:hover {
  background: #e2c25e;
  color: #11151f;
}
.today-strip__cta--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.today-strip__cta--secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(212, 175, 55, 0.35);
}

/* ── Breakpoint switch ─────────────────────────────────────────── */
/* Anything 700px and below shows the mobile one-liner and hides
   the desktop strip. The previous 880px multi-row stack of the
   desktop variant is gone — the dedicated mobile markup replaces it
   so the hero stays above the fold on phones. */
@media (max-width: 700px) {
  .today-strip {
    background: #05070c;
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
  .today-strip__desktop {
    display: none;
  }
  .today-strip__mobile {
    display: flex;
  }
}