/* =========================================================
   NEWS — SPOTLIGHT SPREAD (20260729newsfeat)

   The photo used to win the row outright: aspect-ratio combined with
   min-height gave the media an automatic minimum width larger than its
   fr share, so the fr tracks resolved to 1110px / 169px and the copy was
   crushed into a ribbon. Tracks are stated explicitly here, both items are
   allowed to shrink, and the photo is capped so the spread reads as a
   magazine page instead of a wall.
   ========================================================= */

@media (min-width: 901px) {
  html body.page-news .news-feature {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important;
    gap: clamp(2.5rem, 4vw, 4.5rem) !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  html body.page-news .news-feature__media {
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
    max-height: min(68vh, 33rem) !important;
    align-self: center !important;
  }

  html body.page-news .news-feature__body {
    min-width: 0 !important;
    padding: 0 !important;
    align-self: center !important;
  }
}

/* The photo fills its frame, so its own ratio must not fight the frame's. */
html body.page-news .news-feature__img {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
}

/* Date line — eyebrow with a hairline, so the column opens deliberately. */
html body.page-news .news-feature .news-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  margin: 0 0 1rem !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2em !important;
}

html body.page-news .news-feature .news-date::after {
  content: "" !important;
  display: block !important;
  width: clamp(1.5rem, 3vw, 3.25rem) !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: 0.5 !important;
}

html body.page-news .news-feature__body h3 {
  font-size: clamp(1.85rem, 2.5vw, 2.6rem) !important;
  line-height: 1.1 !important;
  margin: 0 0 1.1rem !important;
  text-wrap: balance;
}

html body.page-news .news-feature__excerpt {
  max-width: 34rem !important;
  font-size: 1.02rem !important;
  line-height: 1.72 !important;
  margin: 0 !important;
}

html body.page-news .news-feature .news-expand-more p {
  max-width: 34rem !important;
}

/* ---------------------------------------------------------
   Recent Updates mosaic — placement has to survive filtering.

   The cards carried hardcoded start lines (the fifth one began at
   column 8), and filtering only hides siblings with display:none —
   nth-child keeps counting them. So a single CSR result stayed pinned
   to the right-hand columns with the whole left half empty. Spans
   without start lines let any subset pack from column 1, and while a
   filter is active the staggered rhythm gives way to even columns,
   since there is no mosaic left to read.
   --------------------------------------------------------- */

@media (min-width: 821px) {
  html body.page-news .news-journal--mosaic {
    grid-auto-flow: row dense !important;
  }

  html body.page-news .news-journal--mosaic > .news-journal__card:not(.news-journal__card--lead):nth-child(2),
  html body.page-news .news-journal--mosaic > .news-journal__card:not(.news-journal__card--lead):nth-child(5) {
    grid-column: span 5 !important;
  }

  html body.page-news .news-journal--mosaic > .news-journal__card:not(.news-journal__card--lead):nth-child(3),
  html body.page-news .news-journal--mosaic > .news-journal__card:not(.news-journal__card--lead):nth-child(4) {
    grid-column: span 7 !important;
  }

  html body.page-news .news-journal--mosaic > .news-journal__card:not(.news-journal__card--lead):nth-child(6),
  html body.page-news .news-journal--mosaic > .news-journal__card:not(.news-journal__card--lead):nth-child(7) {
    grid-column: span 6 !important;
  }

  html body.page-news .news-journal--mosaic:has(> .is-filtered-out) > .news-journal__card:not(.news-journal__card--lead) {
    grid-column: span 6 !important;
    margin-top: 0 !important;
  }

  html body.page-news .news-journal--mosaic:has(> .is-filtered-out) > .news-journal__card:not(.news-journal__card--lead) .news-journal__media {
    aspect-ratio: 3 / 2 !important;
  }

  /* A lone result reads as a spread rather than a half-width card in a void. */
  html body.page-news .news-journal--mosaic.is-single-result > .news-journal__card:not(.is-filtered-out) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
    gap: clamp(1.75rem, 3.5vw, 3rem) !important;
    align-items: center !important;
    margin-top: 0 !important;
  }

  html body.page-news .news-journal--mosaic.is-single-result > .news-journal__card:not(.is-filtered-out) .news-journal__media {
    aspect-ratio: 16 / 10 !important;
    max-height: min(62vh, 31rem) !important;
    margin-bottom: 0 !important;
  }

  html body.page-news .news-journal--mosaic.is-single-result > .news-journal__card:not(.is-filtered-out) .news-journal__body > p:not(.news-date):not(.news-kicker),
  html body.page-news .news-journal--mosaic.is-single-result > .news-journal__card:not(.is-filtered-out) .news-expand-more p {
    max-width: 34rem !important;
  }
}

@media (max-width: 900px) {
  html body.page-news .news-feature {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(1.75rem, 5vw, 2.5rem) !important;
  }

  html body.page-news .news-feature__media {
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    max-height: none !important;
  }

  html body.page-news .news-feature__body {
    min-width: 0 !important;
    padding: 0 !important;
  }
}