/* ============================================================================
   news.css — the News & Events page only
   ============================================================================
   Loaded AFTER campaign.css, and deliberately short. Everything this page
   could take from the shared sheet it takes unchanged: .wrap, .sec-pad-sm,
   .eyebrow, .post (news card), .ev (event row), .preview-band, .btn-brand,
   the header, the footer and the mobile action bar are all campaign.css
   as-is — including #site-top-spacer, which this file must never re-declare.

   What is left below is the handful of things the homepage never needed, so
   the shared sheet has no answer for them: an interior page's title band, a
   news grid that can grow, a second-level section heading, a section notice,
   the "sample" tags, the third column of an event row, and a boxed CTA.

   ── ONE HEX, AND WHY ───────────────────────────────────────────────────────
   An earlier version of this comment claimed no colour here is anything but a
   token. That was not true: .page-head sets color: #FFF. It still does, and
   the claim is corrected rather than the colour, because plain white on a
   dark green ground is the shared sheet's own convention — campaign.css uses
   the same literal on .hero, .quote, .countdown, .ev-date and .skip-link, and
   there is no white token in the CAMPAIGN IDENTITY block to point at. Swapping
   it for --on-brand-3 here would make this page's h1 off-white while the
   homepage's stays white, on the same green. If a --on-brand-0 (#FFF) token is
   ever added to that block, change this one declaration to use it. Every OTHER
   value below is a token, so re-skinning the site still re-skins this page.
   ========================================================================= */

/* -------------------------------------------------- interior page title -- */
/* The homepage opens on a photographic hero. An interior page opens on the
   same dark green ground so the two read as one site — without a second
   full-bleed photograph competing with the news photographs below it. */
.page-head { background: var(--brand-deep); color: #FFF; }

.page-head .wrap {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.page-head h1 {
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.08;
  text-wrap: pretty;
}

/* .lead is tuned for dark ink on paper; on the green ground it needs the
   on-brand text colour instead. Same class, one ground-specific override. */
.page-head .lead {
  color: var(--on-brand-2);
  font-size: clamp(16px, 2vw, 19px);
  max-width: 58ch;
}

/* ------------------------------------------------ second-level headings -- */
/* .h2 is sized to lead a homepage section. Here the page already has an h1
   above it, so the section headings step down rather than compete with it. */
.h2-sub { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.2; }

/* ------------------------------------------------------ section notices -- */
/* The band under the header warns about the page. This warns about the
   section it sits in, in the reader's own view: which items are samples, and
   that no stop has a date. It is not decoration — do not remove it while the
   section still holds unverified content. Ink-2 on the panel tint clears
   4.5:1 comfortably at this size. */
.notice {
  margin: 0 0 26px;
  max-width: 78ch;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ------------------------------------------------ the per-item "sample" -- */
/* One tag on every item the secretariat has not verified — beside a news
   date, and in place of the venue line of an unscheduled stop. Small, but
   it is the only warning a reader gets while scanning a single card, so it
   is high-contrast rather than whispered: ink-2 on the panel tint. Delete a
   tag when its item becomes real; delete this rule when the last one goes. */
.sample-flag {
  display: inline-block;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

/* The news card's date and its tag share one line and wrap together on a
   narrow card. .post is a flex column, so the row — not the <time> — now
   carries the gap to the headline. */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.post-meta time { margin-bottom: 0; }

/* ------------------------------------------------------------ news grid -- */
/* The homepage teases three items in a fixed three-across grid. The full list
   is meant to grow past that once the Kura news feed fills it, so this grid
   steps 1 → 2 → 3 columns instead: at tablet widths a longer list needs the
   two-column stop that .cards-3 does not have. It holds three items today —
   the other three sample stories were deleted in the honesty review; see the
   header comment in news.html. */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
}
@media (min-width: 700px)  { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

/* -------------------------------------------------------- event rows -- */
/* CONTRAST FIX. The shared .ev-date paints its gold month line on the LIGHT
   end of the green gradient (--brand → --brand-dark): at 11px that is about
   3.5:1, under the 4.5:1 WCAG AA floor for text this size. Every date block
   on this page says "DATE / TBC" rather than a real date, and deepening the
   ground under it takes the same gold to roughly 7.4:1 without inventing a
   colour. NOTE FOR THE LEAD: the homepage's .ev-date has the identical
   problem and the real fix belongs in campaign.css — see the note filed with
   this page. */
.ev-date-tbc { background: var(--brand-deep); }

/* "TBC" is a word, not a numeral, so it takes the serif face of .ev-day a
   couple of sizes down to sit inside the same 66px block. */
.ev-day-tbc { font-size: 20px; letter-spacing: .02em; }

/* With no venue and no time to print, the venue line carries the "Not
   scheduled" tag instead and needs a little air under the title. */
.ev-body .ev-venue { margin-top: 6px; }

/* --------------------------------------------------------- event detail -- */
/* On the homepage an event row ends in a "Details" button that leads here.
   This IS here, so the row carries the detail itself. It keeps its own flex
   basis so a long line wraps under the date instead of squeezing the title. */
.ev-detail {
  margin: 0;
  flex: 1 1 240px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ------------------------------------------------------------ CTA panel -- */
/* The homepage runs its volunteer appeal as a full-width band. Inside an
   article-shaped page a band would cut the column in half, so the same appeal
   is boxed and sits at the end of the events list. */
.cta-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.cta-card h3 { margin: 0 0 6px; font-size: 22px; }
.cta-card p  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-3); max-width: 52ch; }