/**
 * =====================================================================
 * NEWS COMPONENT — STYLES
 * =====================================================================
 * .news/.news__card/etc. copied verbatim from the actual uploaded
 * style.css (pulled directly, not reconstructed from memory — see
 * this project's own history for why that distinction matters).
 *
 * Everything under "Archive Mode — New UI" below has NO equivalent in
 * the original design at all (per the brief: this functionality
 * doesn't exist in the provided frontend). Built to match this
 * project's established tokens (tracked-uppercase Public Sans weight
 * 600 for small labels — the site's revised convention, see
 * css/style.css's "TYPE DIRECTION" note; --red/--ink/--slate/--line,
 * --radius-lg, existing .btn styles) so it reads as part of the same
 * site rather than bolted on.
 *
 * Tag qualifiers and font-family !important applied from the start —
 * both confirmed necessary, repeatedly, on this project's other
 * components: a bare single-class selector loses to Blocksy's own
 * base styling, and font-family specifically needs !important since
 * Blocksy uses !important on that property too.
 * =====================================================================
 */

/* ---------- News cards (authoritative, from the real source) ---------- */
/*
 * grid-template-columns changed from the original "1.4fr 1fr 1fr" to
 * equal thirds — the original ratio specifically existed to make room
 * for the "wide" first card's larger footprint. Since every card is
 * now the same size (per request), an uneven column width would have
 * made every card in the FIRST column visually wider than the other
 * two, regardless of content — not what "equal sizes" means.
 */
div.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
a.news__card {
  display: block; background: var(--white);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.news__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
div.news__img { aspect-ratio: 16/10; overflow: hidden; }
.news__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.news__card:hover .news__img img { transform: scale(1.05); }
div.news__body { padding: 26px 28px 30px; }
div.news__meta { font-family: var(--font-sans) !important; font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
h3.news__title { font-family: var(--font-display) !important; font-size: var(--step-1); font-weight: 500; margin: 12px 0 6px; line-height: 1.2; }
p.news__excerpt { font-size: 16px; color: var(--slate); }
/* .news__card--wide rules removed entirely — no card ever receives
   this class anymore, so keeping dead CSS around would only risk
   confusing future maintenance. */
@media (max-width: 900px) {
  div.news { grid-template-columns: 1fr; }
}

/* ---------- Uniform "news-grid" (3-col, no wide card) ----------
 * Used by BOTH the homepage's news_digest sub-blocks AND the full
 * Latest Updates/Upcoming Events/Press Releases listing pages —
 * genuinely distinct from ".news" above (which keeps its wide-card-
 * shaped ratio for wherever a compact homepage-style teaser still
 * wants it). news_digest reuses this file's own assets by manually
 * enqueueing them (see components/news_digest/component.php), the
 * same established pattern article_component already uses to reuse
 * this component's card renderer/CSS.
 */
div.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { div.news-grid { grid-template-columns: 1fr; } }
@media (min-width: 640px) and (max-width: 900px) { div.news-grid { grid-template-columns: repeat(2, 1fr); } }

/* One ".news-sub" block per hub (Latest Updates / Upcoming Events /
   Press Releases) inside the homepage's news_digest — each with its
   own bold "See all" CTA. */
.news-sub + .news-sub { margin-top: 64px; }
.news-sub__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
}
h3.news-sub__title { font-family: var(--font-display) !important; font-size: var(--step-2); font-weight: 500; color: var(--ink); }
.news-sub__cta { flex-shrink: 0; }
@media (max-width: 560px) {
  .news-sub__cta { width: 100%; justify-content: center; }
}

/* Upcoming Events cards: a date badge over the image, plus a
   venue/city and date/time line — so each listing reads like a real
   event, not a generic article teaser. */
.news__card--event .news__img { position: relative; }
.news__date-badge {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: var(--white); border-radius: var(--radius-sm);
  padding: 8px 11px; text-align: center; line-height: 1;
  box-shadow: var(--shadow-md);
}
.news__date-day { display: block; font-family: var(--font-display) !important; font-size: 19px; font-weight: 600; color: var(--ink); }
.news__date-month { display: block; margin-top: 3px; font-family: var(--font-sans) !important; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--red); }
.news__date-year { display: block; margin-top: 2px; font-family: var(--font-mono) !important; font-size: 9px; letter-spacing: 0.04em; color: var(--slate); }
.news__event-detail {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2); margin: 7px 0 0;
}
.news__event-detail svg { flex-shrink: 0; color: var(--red); }
.news__event-detail:first-of-type { margin-top: 10px; }
.news__card--event .news__excerpt { margin-top: 12px; }

/*
 * "View All" link — reuses the SAME visual technique as the existing
 * .eyebrow class (a short dash before small, uppercase, red
 * tracked Public Sans text), since that's the established style for
 * this kind of small label/link across the site. Not literally sharing
 * the .eyebrow class itself, since .eyebrow is meant for section labels
 * ABOVE a heading, not a clickable link — same look, different
 * semantic role.
 */
.news__view-all-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}
a.news__view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans) !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.news__view-all::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--red);
}
.news__view-all:hover { color: var(--ink); }
.news__view-all:hover::before { background: var(--ink); }

/* ---------- Archive Mode ----------
 * The toolbar/results/pagination skeleton itself now reuses the
 * shared ".browse"/".docs-toolbar" family (assets/css/global.css —
 * see that file's own comment on why it lives there, shared with
 * [document_library]/[media_gallery]). Only this one loading-state
 * color is specific enough to news' own archive mode to keep here.
 */
.news-archive__loading { color: var(--red); font-family: var(--font-sans) !important; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }