/* ==========================================================================
   NEWS & UPDATES — dedicated page (page-specific styles)
   SEPARATE source file from styles/news.css (the home-page `.news__*` carousel
   section). Prefixed `nu-` so nothing here collides with that block.

   Unlike SWM/Impact/Outreach/Visits/Awards (which use the shared photo
   .page-hero banner), this page opens on a SOLID-COLOUR hero: a muted
   steel-blue section with a navy rounded panel holding the title + intro. The
   shared site navbar is position:fixed + transparent and floats over the top,
   so the section reserves top padding to clear it (no photo fills behind it).

   While the page is in progress it is linked directly from news-updates.html;
   once complete it will be folded into styles/bundle.css by
   scripts/build-css.mjs (place it AFTER about-project.css). Edit here, then run
   `npm run build:css` to regenerate the bundle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — steel-blue band + navy title panel
   The steel-blue is the brand navy (--color-primary) laid over the white body
   at ~62% — keeps the colour tied to the :root token instead of a one-off hex.
   Top padding clears the fixed navbar (gold strip + navy bar ≈ 111px); the
   bottom is flush (padding-bottom:0) so the next section can sit directly
   beneath the panel.
   -------------------------------------------------------------------------- */
.nu-hero {
  background: rgb(var(--color-primary-rgb) / 62%);
  padding: 270px 20px 0;
}

.nu-hero__panel {
  margin: 0 auto;
  max-width: 1250px;
  /* Rounded top only — the panel reads as the top of a larger navy region the
     following sections will continue. */
  border-radius: 26px 26px 0 0;
  background: var(--color-primary);
  color: var(--text-secondary);
  text-align: center;
  padding: 20px;
}

.nu-hero__title {
  margin: 0;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  line-height: 1.15;
}

.nu-hero__sub {
  margin: 18px auto 0;
  max-width: 64ch;
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  line-height: 1.6;
  /* white (--text-secondary) softened — no --text-secondary-rgb token exists */
  color: rgb(255 255 255 / 82%);
}

/* --------------------------------------------------------------------------
   ALL UPDATES — filter row + card grid
   White section sitting directly beneath the navy hero panel. The filter row
   currently holds a single active "All Updates" chip; more category chips
   (Award / Visits / …) will be added as the list grows.
   -------------------------------------------------------------------------- */
.nu-updates {
  background: var(--color-white);
  padding: 40px 0 80px;
}

.nu-updates__inner {
  margin: 0 auto;
  max-width: 1250px;
  padding: 0 20px;
}

/* Filter chips row */
.nu-updates__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.nu-chip {
  padding: 9px 20px;
  border: 1px solid rgb(var(--color-primary-rgb) / 18%);
  border-radius: 999px;
  background: var(--color-white);
  color: rgb(var(--text-primary-rgb) / 75%);
  font-family: var(--font-base);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.nu-chip:hover {
  border-color: rgb(var(--color-primary-rgb) / 40%);
}

/* Active chip — solid navy */
.nu-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-secondary);
}

/* Card grid — 3-up on desktop */
.nu-updates__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* --------------------------------------------------------------------------
   CARD — whole tile is a link to the related page
   -------------------------------------------------------------------------- */
.nu-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--color-white);
  border: 1px solid rgb(var(--color-primary-rgb) / 8%);
  box-shadow: 0 6px 22px rgb(var(--text-primary-rgb) / 7%);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.nu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgb(var(--text-primary-rgb) / 12%);
}

/* Photo inset within the card padding, with its own rounded corners */
.nu-card__media {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: rgb(var(--color-primary-rgb) / 6%);
}

.nu-card__media img {
  display: block;
  width: 100%;
  /* height:auto lets the aspect-ratio win over the HTML height attribute */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.nu-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 20px 20px;
}

.nu-card__meta {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgb(var(--text-primary-rgb) / 55%);
}

.nu-card__title {
  margin: 0 0 18px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
  color: rgb(var(--text-primary-rgb) / 85%);
}

/* Category tag — light mint pill (matches the home news card tag) */
.nu-card__tag {
  margin-top: auto;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--color-light-mint);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   TABLET (≤ 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nu-hero {
    padding-top: 270px;
  }

  .nu-hero__panel {
    /* leave the steel-blue gutters visible on the sides */
    max-width: 100%;
  }

  .nu-updates__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   PHONE (≤ 600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .nu-hero {
    padding: 210px 14px 0;
  }

  .nu-hero__panel {
    border-radius: 20px 20px 0 0;
  }

  .nu-hero__sub {
    max-width: 100%;
  }

  .nu-updates {
    padding: 32px 0 56px;
  }

  .nu-updates__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}