/* =============================================================
   news.css — News archive (P10) timeline, filter pills, share row.
   Loaded on is_home() / is_category() / is_singular('post') after
   pages.css. Tokens only; no new colours. base -> layout -> components
   -> pages -> news.
============================================================= */

/* -------------------------------------------------------------
   Category filter pills (real <a> links; JS-off safe)
------------------------------------------------------------- */
.cw-filter {
  border-bottom: 1px solid var(--cw-border-soft);
}
.cw-filter__inner {
  padding-block: 1rem;
}
.cw-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
/* 4F §F1 fix: base.css's global `li + li { margin-top }` (a body-copy list
   reset) was leaking into this nav list, pushing every pill after the first
   down ~7px and — with the flex row's default stretch behaviour — making the
   un-shifted "All" pill look taller/misaligned against its siblings. Pills
   sit in a single row, so no inter-item top margin belongs here at all. */
.cw-filter__list > li + li {
  margin-top: 0;
}
.cw-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-pill);
  font-size: var(--cw-fs-small);
  font-weight: 600;
  color: var(--cw-ink);
  text-decoration: none;
  transition: border-color var(--cw-dur-fast) var(--cw-ease),
    background-color var(--cw-dur-fast) var(--cw-ease),
    color var(--cw-dur-fast) var(--cw-ease);
}
.cw-pill:hover {
  border-color: var(--cw-gold);
  color: var(--cw-gold-deep);
}
.cw-pill--active {
  background: var(--cw-gold);
  border-color: var(--cw-gold);
  color: var(--cw-gold-ink);
}
.cw-pill--active:hover {
  color: var(--cw-gold-ink);
}

/* -------------------------------------------------------------
   The dated timeline (replaces the old 2-col card grid)
------------------------------------------------------------- */
.cw-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cw-timeline__item {
  padding: clamp(1.75rem, 4vw, 2.5rem) 0;
  border-top: 1px solid var(--cw-border-soft);
  display: grid;
  gap: 0.5rem 2rem;
}
.cw-timeline__item:first-child {
  border-top: 0;
  padding-top: 0;
}
.cw-timeline__date {
  margin: 0;
  font-family: var(--cw-font-heading);
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cw-gold-deep);
}
.cw-timeline__body {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}
.cw-timeline__cat {
  margin: 0;
}
.cw-timeline__title {
  margin: 0;
  font-size: var(--cw-fs-h3);
}
.cw-timeline__title a {
  color: var(--cw-heading);
  text-decoration: none;
  background-image: linear-gradient(var(--cw-gold), var(--cw-gold));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--cw-dur) var(--cw-ease);
}
.cw-timeline__title a:hover,
.cw-timeline__title a:focus-visible {
  background-size: 100% 1px;
}
.cw-timeline__dek {
  margin: 0;
  color: var(--cw-text-muted);
  line-height: var(--cw-lh-body);
}
@media (min-width: 640px) {
  .cw-timeline__item {
    grid-template-columns: 8.5rem 1fr;
  }
}

/* -------------------------------------------------------------
   Timeline row thumbnail (4I §3 row 6) — OPT-IN ONLY via the
   .cw-timeline__item--has-thumb modifier, applied by news-archive.php
   only when has_post_thumbnail() is true. The base .cw-timeline__item
   rules above are never touched by this block, so a row with no
   thumbnail (the seeder's normal case — see the PHP comment at the
   call site) renders with zero layout difference: no reserved column,
   no gap, no placeholder box.
------------------------------------------------------------- */
.cw-timeline__thumb {
  margin-top: 0.25rem;
}
.cw-timeline__thumb-img {
  display: block;
  width: 120px;
  height: 80px;
  object-fit: cover;
  /* Hardened to editorial (4K-IMAGE-SYSTEM.md §2 THE RULE): zero radius. */
  border-radius: 0;
  border: 1px solid var(--cw-border);
}
@media (min-width: 640px) {
  /* Add the thumb as a 3rd column only on rows that actually have one;
     date/body keep their existing widths unchanged. */
  .cw-timeline__item--has-thumb {
    grid-template-columns: 8.5rem 1fr auto;
    align-items: start;
  }
  .cw-timeline__item--has-thumb .cw-timeline__thumb {
    margin-top: 0;
  }
}

/* -------------------------------------------------------------
   Single post — banded masthead meta row (W6f, mirrors essays.css's
   .cw-essay__meta--band / .cw-page-hero--band--crumbs-only exactly —
   duplicated here rather than shared because essays.css only loads on
   is_page('essays') / page-essay.php, never on single.php; see
   inc/assets.php's cw_enqueue_assets() conditionals).
------------------------------------------------------------- */
.cw-page-hero--band--crumbs-only {
  padding-block: 0;
}
.cw-page-hero--band--crumbs-only .cw-page-hero__inner {
  max-width: none;
  text-align: left;
}
.cw-page-hero--band--crumbs-only .cw-breadcrumbs {
  justify-content: flex-start;
  margin-bottom: 0;
}
.cw-post__meta--band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-size: var(--cw-fs-small);
  color: var(--cw-on-dark-muted);
  /* Overrides the light-background .cw-post__meta rule (components.css)
     which sets uppercase/letter-spacing for the old bare-cream masthead;
     the banded meta row reads as plain sentence case, same as essays. */
  letter-spacing: normal;
  text-transform: none;
}
.cw-post__meta--band .cw-post__date {
  font-variant-numeric: tabular-nums;
}
.cw-post__meta--band .cw-post__meta-sep {
  color: var(--cw-gold-soft);
}
.cw-post__meta--band .cw-post__author a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cw-gold);
  text-underline-offset: 3px;
}
.cw-post__meta--band .cw-post__author a:hover {
  color: var(--cw-gold-light, var(--cw-gold));
}
.cw-post__meta--band .cw-post__readtime {
  color: inherit;
}

/* Onward links row (sits below cta-band.php's own centred column, inside
   the same .cw-band--navy) — mirrors .cw-essay__onward-links. */
.cw-post__onward-links {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2rem;
}

/* -------------------------------------------------------------
   Single post — linked byline, reading time, share row (reading column,
   light background — unrelated to the banded masthead rules above)
------------------------------------------------------------- */
.cw-post__author a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cw-gold);
  text-underline-offset: 3px;
}
.cw-post__author a:hover {
  color: var(--cw-gold-deep);
}
.cw-post__readtime {
  color: var(--cw-text-muted);
}
.cw-share {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--cw-border-soft);
}
.cw-share__label {
  font-size: var(--cw-fs-small);
  font-weight: 700;
  letter-spacing: var(--cw-track-eyebrow);
  text-transform: uppercase;
  color: var(--cw-text-muted);
}
.cw-share__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Whitespace (newline + indent) between each <li> and its <a> in the
     template injects a font-metric baseline strut into the flex row, which
     lands on the first flex item and lifts it out of alignment with its
     siblings (verified live on /book/'s share row — same markup pattern).
     font-size:0 collapses that whitespace's box; see .cw-share__btn .cw-icon
     below for the required icon-size counterpart. Do not remove. */
  font-size: 0;
}
.cw-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius-pill);
  color: var(--cw-navy);
  transition: border-color var(--cw-dur-fast) var(--cw-ease),
    color var(--cw-dur-fast) var(--cw-ease);
}
/* .cw-icon is em-sized (1.5em, base.css) — .cw-share__list's font-size:0
   above would shrink it to 0×0 without this. single.php renders each icon
   via cw_icon(..., ['size' => 18]). */
.cw-share__btn .cw-icon {
  width: 18px;
  height: 18px;
}
.cw-share__btn:hover {
  border-color: var(--cw-gold);
  color: var(--cw-gold-deep);
}