/* ==========================================================================
   updates.css - Updates page sections: updates-intro, updates-featured,
   updates-grid, newsletter. Shared pieces (.container, .post-card, .btn,
   .heading-h2, .on-dark, .sr-only) come from base.css.
   ========================================================================== */

/* ---- updates-intro ------------------------------------------------------- */
.updates-intro {
  padding-block: clamp(96px, 12vw, 150px) 64px;
  display: flex; flex-direction: column; gap: 40px;
}
.updates-intro__text { display: flex; flex-direction: column; gap: 20px; }
.updates-intro__title { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.035em; }
.updates-intro__body { font-size: var(--fs-body-l); line-height: 1.5; color: var(--text-secondary); max-width: 560px; }
.updates-intro__filter { display: flex; flex-wrap: wrap; gap: 8px; }
.updates-intro__pill {
  font-size: 15px; font-weight: var(--fw-medium); padding: 10px 20px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--color-white); color: var(--text-primary);
}
.updates-intro__pill[aria-current="true"],
.updates-intro__pill[aria-current="true"]:hover {
  background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white);
}

/* ---- updates-featured ---------------------------------------------------- */
.updates-featured { padding-bottom: 96px; }
.updates-featured__post {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px; align-items: center;
}
.updates-featured__cover { aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
.updates-featured__cover:hover { transform: none; }
.updates-featured__cover-text { font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -.025em; padding: 0 40px; }
.updates-featured__text { display: flex; flex-direction: column; gap: 18px; }
.updates-featured__meta { display: flex; gap: 12px; font-size: 15px; color: var(--text-primary); }
.updates-featured__date { color: var(--text-secondary); }
.updates-featured__title { font-size: var(--fs-featured-post); line-height: 1.15; letter-spacing: -.025em; }
.updates-featured__excerpt { font-size: 18px; line-height: 1.55; color: var(--text-secondary); }
.updates-featured__more { font-size: 16px; font-weight: var(--fw-medium); margin-top: 8px; }

/* ---- updates-grid -------------------------------------------------------- */
.updates-grid { padding-bottom: clamp(120px, 14vw, 180px); }
.updates-grid__list {
  --post-cover-fs: clamp(26px, 2.6vw, 34px);
  --post-title-fs: 21px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 56px 24px;
}
.updates-grid__empty { font-size: 18px; color: var(--text-secondary); padding: 40px 0; }

/* ---- newsletter ---------------------------------------------------------- */
.newsletter { background: var(--dark-bg); color: var(--color-white); }
.newsletter__inner {
  padding-block: clamp(100px, 12vw, 150px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.newsletter__body {
  font-size: 18px; line-height: 1.5; color: var(--dark-text-secondary);
  max-width: 480px; margin-top: 20px;
}
.newsletter__form {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: 100%; max-width: 460px; margin-top: 40px;
}
.newsletter__input {
  flex: 1; min-width: 220px;
  font: var(--fw-regular) 16px var(--font-sans); padding: 15px 22px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-on-dark);
  background: transparent; color: var(--color-white);
}
.newsletter__input[aria-invalid="true"] { border-color: var(--text-muted); }
.newsletter__submit { font-size: 16px; padding: 15px 26px; }
.newsletter__error { flex-basis: 100%; font-size: 14px; color: var(--text-muted); }