/* ============================================================
   news.css — NEWS / UPDATES COMPONENT (bold cards + feed grid)
   Load on any page that shows a news feed, and on the /news pages.
   Reads from the site :root tokens, so it themes (light/dark) with
   the rest of the site. All selectors namespaced .news-*.

   The card is the "Layout A" bold design: a tinted cap with a
   category icon, an overlapping category pill, then title + blurb.
   ============================================================ */

/* ---- Feed wrapper + optional heading row ---- */
.news-feed { margin: 0; }
.news-feed__head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem;
  margin-bottom: 1.5rem;
}
.news-feed__title {
  font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.2;
  color: var(--text-primary); margin: 0; letter-spacing: -0.01em;
}
.news-feed__all {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.news-feed__all i { font-size: 16px; transition: transform .15s ease; }
.news-feed__all:hover i { transform: translateX(3px); }

/* ---- The grid: up to 3 across, stacks on narrow screens.
   On an archive page with many posts it simply wraps to more rows. ---- */
.news-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

/* ---- The bold card ----
   .news-card is now an <article> wrapper holding two links:
   .news-card__main (the post link, fills the card) and
   .news-card__label (the category pill, layered on top). ---- */
.news-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-surface); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.news-card:hover {
  border-color: var(--accent-soft); transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(31,42,38,0.08);
}
.news-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the main post link fills the card */
.news-card__main {
  display: flex; flex-direction: column; flex: 1;
  text-decoration: none; color: inherit;
  border-radius: var(--radius-lg);
}
.news-card__main:focus-visible { outline: none; }

/* tinted cap with the category icon watermark */
.news-card__cap {
  height: 92px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, var(--bar-bg)) 100%);
}
.news-card__cap i {
  position: absolute; right: 14px; bottom: 10px; font-size: 46px;
  color: rgba(255,255,255,0.16);
}

/* overlapping category pill — now a clickable link to the category page */
.news-card__label {
  position: absolute; top: 70px; left: 18px; z-index: 2;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--warm-ink);
  background: var(--bg-surface); border: 0.5px solid var(--border);
  border-radius: 999px; padding: 5px 12px; box-shadow: 0 2px 8px rgba(31,42,38,0.06);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.news-card__label:hover { color: var(--warm); border-color: var(--warm-soft); background: var(--bg-warm-soft); }
.news-card__label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.news-card__body { padding: 1.75rem 1.35rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.news-card__body h3 {
  font-family: var(--font-head); font-size: 18px; font-weight: 700;
  color: var(--text-primary); margin: 0 0 0.4rem; line-height: 1.25;
}
.news-card__body p { font-size: 14px; line-height: 1.55; color: var(--text-body); margin: 0 0 1rem; flex: 1; }
.news-card__go {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--accent);
}
.news-card__go i { font-size: 15px; transition: transform .15s ease; }
.news-card:hover .news-card__go i { transform: translateX(3px); }

@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-feed__head { grid-template-columns: 1fr; }
}

/* ============================================================
   /news ARCHIVE PAGE — intro, archive grid, newsletter band
   ============================================================ */
.news-page { max-width: var(--content); margin: 0 auto; padding: 0 1.5rem 4rem; }

.news-hero { padding: 2.5rem 0 0; }
.news-hero__eyebrow {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--warm-ink); margin: 0 0 0.6rem;
}
.news-hero__title {
  font-family: var(--font-head); font-weight: 700; font-size: 34px; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 0.9rem;
}
.news-hero__sub {
  font-size: 18px; line-height: 1.6; color: var(--text-body); margin: 0; max-width: 40rem;
}
.news-hero__bar {
  width: 54px; height: 3px; background: var(--warm); margin-top: 1.25rem;
}

.news-archive { padding-top: 3rem; }

/* Newsletter band (visual only for now) — bold charcoal-green block,
   mirrors the homepage band style we built earlier. */
.news-nl {
  margin: 4rem 0 0; background: var(--bar-bg); border-radius: var(--radius-lg);
  padding: 2.75rem; position: relative; overflow: hidden;
}
.news-nl::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--warm);
}
.news-nl__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
.news-nl__eyebrow {
  font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--warm-ink); margin: 0 0 0.6rem;
}
.news-nl h2 { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--bar-ink); margin: 0 0 0.8rem; line-height: 1.2; }
.news-nl p { font-size: 15px; line-height: 1.6; color: var(--bar-ink-muted); margin: 0; max-width: 34rem; }
.news-nl__form { display: flex; flex-direction: column; gap: 10px; }
.news-nl__form input {
  width: 100%; box-sizing: border-box; font-size: 15px; padding: 13px 14px; font-family: inherit;
  border: 1px solid var(--bar-border); border-radius: var(--radius-md);
  background: var(--bar-bg-2); color: var(--bar-ink);
}
.news-nl__form input::placeholder { color: var(--bar-ink-muted); }
.news-nl__form input:focus-visible { outline: 2px solid var(--bar-accent); outline-offset: 1px; }
.news-nl__form button {
  font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--bar-bg);
  background: var(--warm); border: none; border-radius: var(--radius-md);
  padding: 13px 20px; cursor: pointer; transition: opacity .15s ease;
}
.news-nl__form button:hover { opacity: 0.9; }
.news-nl__form button:focus-visible { outline: 2px solid var(--bar-accent); outline-offset: 2px; }
.news-nl__fine { font-size: 12px; color: var(--bar-ink-muted); margin: 0.4rem 0 0; }

@media (max-width: 900px) {
  .news-nl__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .news-hero__title { font-size: 28px; }
}

/* ============================================================
   SINGLE POST PAGE — the four-part structure
   ============================================================ */
.post { max-width: var(--reading); margin: 0 auto; padding: 0 1.5rem 4rem; }
.post__crumbs { font-size: 13px; color: var(--text-muted); margin: 2.5rem 0 1.5rem; }
.post__crumbs a { color: var(--text-muted); text-decoration: none; }
.post__crumbs a:hover { color: var(--accent); }
.post__crumbs .sep { margin: 0 8px; color: var(--text-faint); }

.post__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.post__cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--warm-ink);
  background: var(--bg-warm-soft); border-radius: 999px; padding: 5px 12px;
  text-decoration: none; transition: color .15s ease, background .15s ease;
}
.post__cat:hover { color: var(--warm); background: var(--warm-soft); }
.post__cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.post__cat i { font-size: 14px; }
.post__date { font-size: 13px; color: var(--text-muted); }

.post__title {
  font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 1.18;
  letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 0.6rem;
}
.post__lede { font-size: 18px; line-height: 1.6; color: var(--text-body); margin: 0 0 1rem; }
.post__bar { width: 54px; height: 3px; background: var(--warm); margin: 1.5rem 0 2.25rem; }

/* the four parts */
.post__block { margin-bottom: 2rem; }
.post__q {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-size: 19px; font-weight: 700;
  color: var(--text-primary); margin: 0 0 0.6rem;
}
.post__q i { font-size: 20px; color: var(--accent); }
.post__block p { font-size: 17px; line-height: 1.7; color: var(--text-body); margin: 0; }

/* "Learn more" link list */
.post__links { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.post__links a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; color: var(--accent); text-decoration: none; font-weight: 500;
}
.post__links a i { font-size: 16px; }
.post__links a:hover { text-decoration: underline; }

/* back-to-all + related feed at the bottom */
.post__foot { border-top: 0.5px solid var(--border); margin-top: 2.5rem; padding-top: 2rem; }
.post__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.post__back i { font-size: 16px; }

@media (max-width: 560px) {
  .post__title { font-size: 27px; }
}