/* otd.css - the On This Day component (template-parts/on-this-day-widget.php, assets/js/on-this-day-widget.js).
   Homepage band + compact article-rail variant. Loaded on the front page and on singular pages
   (inc/home.php). The date landing page (.on-this-day-date__*, .on-this-day__year/__type/__title)
   keeps its own rules in editorial.css. Tokens only.

   Contrast (WCAG 2.x): the year numeral is --gold #835b16 on --paper-2 #f6f1e6 = 5.37:1 (large text
   needs 3:1; it also clears 4.5:1, so it doubles as small text such as the date line). */

.otd {
  --otd-pad: clamp(1rem, 2.4vw, 1.75rem);
  background: var(--paper-2);
  border-block: 2px solid var(--gold);
  padding: var(--otd-pad);
  color: var(--ink);
}
.otd [hidden] { display: none !important; }

.otd__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.otd__title { font-size: var(--fs-section); line-height: 1; text-transform: uppercase; }
.otd__today { margin: 0; font-family: var(--font-body); font-weight: var(--weight-label); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-label); color: var(--ink-2); }
.otd__note { margin: var(--space-1) 0 0; font-size: var(--fs-1); line-height: 1.4; color: var(--ink-2); } /* fallback: no exact-date item */
.otd__all { margin-left: auto; color: var(--red); text-decoration: none; padding-block: 0.6em; }
.otd__all ~ .otd__controls { margin-left: 0; }
.otd__all:hover { color: var(--red-2); text-decoration: underline; text-underline-offset: 0.2em; }

/* Stage: slides share one grid cell once the script has enhanced the component, so the crossfade
   overlaps and the reserved height (set by the script) never jumps. Without JS: a stacked list. */
.otd__stage { margin-top: var(--space-3); }
.otd__note + .otd__stage { margin-top: var(--space-4); }
.otd__slide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: start; }
.otd:not(.is-enhanced) .otd__slide + .otd__slide { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--paper-3); }

.otd.is-enhanced .otd__stage { display: grid; }
.otd.is-enhanced .otd__slide { grid-area: 1 / 1; transition: opacity 260ms ease-out, transform 260ms ease-out; }
.otd.is-enhanced .otd__slide.is-entering { opacity: 0; transform: translateY(8px); }
.otd.is-enhanced .otd__slide.is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }

.otd__numeral {
  margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--gold);
  font-size: var(--fs-otd-numeral); line-height: 0.82; letter-spacing: -0.01em;
  font-variant-numeric: lining-nums; white-space: nowrap;
}
.otd__text { min-width: 0; display: grid; gap: var(--space-2); justify-items: start; }
.otd__dateline { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-family: var(--font-body); font-weight: var(--weight-label); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-label); color: var(--ink-2); }
.otd__date--own { font-size: var(--fs-1); letter-spacing: 0.04em; color: var(--ink); } /* fallback items: their own date, prominent, so nothing implies today */
.otd__type { color: var(--ink-3); }
.otd__headline { font-weight: var(--weight-story); font-size: var(--fs-otd-headline); line-height: var(--lh-story); letter-spacing: var(--tracking-story); text-transform: none; text-wrap: balance; }
.otd__headline a { text-decoration: none; }
.otd__headline a:hover { color: var(--red); }
.otd__excerpt { margin: 0; max-width: 52ch; font-size: var(--fs-1); color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.otd__read { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--red); text-decoration: none; }
.otd__read:hover { color: var(--red-2); text-decoration: underline; text-underline-offset: 0.2em; }
.otd__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.otd__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.85); }

/* Controls: 44x44 square ink-outline buttons; the position reads "2 / 5" (aria-hidden: slides carry "2 of 5"). */
.otd__controls { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; } /* homepage: lives in the head row; rail: its own row (below) */
.otd__btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0; cursor: pointer; transition: background var(--ease), color var(--ease); }
.otd__btn:hover { background: var(--ink); color: var(--paper-2); }
.otd__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper-2); }
.otd__btn svg { display: block; }
.otd__icon-play { display: none !important; }
.otd__btn.is-paused .otd__icon-play { display: block !important; }
.otd__btn.is-paused .otd__icon-pause { display: none; }
.otd__position { margin: 0 0 0 var(--space-2); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.04em; font-size: var(--fs-1); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.otd { touch-action: pan-y; }
.otd__stage { touch-action: pan-y; }

/* Homepage: numeral | text | image (when the item has one). The numeral column is sized from the
   numeral itself so every slide's text starts at the same x. */
.otd--homepage { --otd-num: var(--fs-otd-numeral); }
.otd--homepage .otd__numeral { font-size: var(--otd-num); }
/* Controls come last in the DOM (keyboard order: head, story, controls). Below 48rem they sit at the
   bottom of the module; from 48rem a grid puts them back in the head row, right-aligned. */
.otd--homepage .otd__controls { margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--paper-3); }
.otd--homepage .otd__position { margin-left: auto; }
@media (min-width: 48rem) {
  .otd--homepage { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); align-items: center; }
  .otd--homepage > .otd__head { grid-area: 1 / 1; }
  .otd--homepage > .otd__controls { grid-area: 1 / 2; margin: 0; padding: 0; border-top: 0; }
  .otd--homepage > .otd__note, .otd--homepage > .otd__stage { grid-column: 1 / -1; }
  .otd--homepage .otd__position { margin-left: var(--space-2); }
  .otd--homepage .otd__slide { grid-template-columns: calc(var(--otd-num) * 2.2) minmax(0, 1fr); column-gap: clamp(1.25rem, 2.4vw, 2.25rem); }
  .otd--homepage .otd__text { padding-top: 0.15rem; }
  .otd--homepage .otd__media { grid-column: 1 / -1; max-width: 32rem; }
}
@media (min-width: 64rem) {
  .otd--homepage .otd__slide--has-image { grid-template-columns: calc(var(--otd-num) * 2.2) minmax(0, 1fr) minmax(0, 15rem); }
  .otd--homepage .otd__slide--has-image .otd__media { grid-column: 3; max-width: none; }
}

/* Rail (article right rails / sidebars, ~20rem): a genuinely compact card. 1.25rem head, 3rem numeral,
   1.125rem Oswald 600 headline, 3-line excerpt, no image, one control row that keeps its 44px targets. */
.otd--rail { --otd-pad: var(--space-4); }
.otd--rail .otd__head { display: grid; gap: var(--space-1); }
.otd--rail .otd__title { font-size: var(--fs-rail-head); line-height: 1.1; letter-spacing: 0.01em; }
.otd--rail .otd__today { font-size: var(--fs-label); }
.otd--rail .otd__note { font-size: var(--fs-0); }
.otd--rail .otd__all { margin-left: 0; padding-block: 0; font-size: var(--fs-0); }
.otd--rail .otd__stage { margin-top: var(--space-3); }
.otd--rail .otd__slide { gap: var(--space-2); }
.otd--rail .otd__numeral { font-size: 3rem; line-height: 0.9; }
.otd--rail .otd__text { gap: var(--space-2); }
.otd--rail .otd__dateline { font-size: var(--fs-label); }
.otd--rail .otd__date--own { font-size: var(--fs-0); }
.otd--rail .otd__headline { font-family: var(--font-display); font-size: var(--fs-lede); text-wrap: pretty; }
.otd--rail .otd__excerpt { font-size: var(--fs-0); line-height: 1.45; -webkit-line-clamp: 3; line-clamp: 3; }
.otd--rail .otd__read { min-height: 2.75rem; font-size: var(--fs-label); }
.otd--rail .otd__media { display: none; }
.otd--rail .otd__controls { flex-wrap: nowrap; gap: var(--space-1); margin-left: 0; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--paper-3); }
.otd--rail .otd__position { margin-left: auto; font-size: var(--fs-1); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .otd.is-enhanced .otd__slide { transition: none; }
}