/* ==========================================================================
   Newsroom landing (/news/ + /en/news/ + /nl-be/news/, 2026-10-11)
   Landing layer on top of newsroom-paper.css (tokens, components, cards, end
   card and motion live there): hero plate, category strip, split sections and
   the "02 updates" scene. Same grammar as the homepage (home-v27.css).
   Generated by news/src/render.mjs (renderNewsroom). Design: docs/design-newsroom-v27.md.
   ========================================================================== */

/* ---------- Hero ---------- */

/* Hero title: the homepage hero grammar, one step larger than the section titles. */
.nh .nh-hero__title {
  font-family: var(--cb-display-font);
  font-size: calc(var(--cb-title-hero) * 1.2);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
}

.nh-hero {
  --nh-hero-h: max(700px, min(100svh, 1060px));
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--nh-hero-h);
  margin-top: calc(-1 * var(--news-header-h));
  padding-top: var(--news-header-h);
  overflow: hidden;
}

/* The plate never exceeds 92vw, so its painted half always starts right of the copy column. */
.nh-hero__plate {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(92vw, calc(var(--nh-hero-h) * 1.7768));
  aspect-ratio: 1672 / 941;
}

.nh-hero__plate picture,
.nh-hero__img {
  display: block;
  width: 100%;
  height: 100%;
}

.nh-hero__img {
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%);
  mask-composite: intersect;
}

.nh-hero__live {
  position: absolute;
  left: 49%;
  top: 13%;
  z-index: 2;
}

.nh-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.nh-hero__copy { max-width: min(600px, 40vw); margin-block: auto; padding-block: 40px 28px; }

.nh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  margin-top: 38px;
}

.nh .nh-watch {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  color: var(--nh-ink);
  text-decoration: none;
}

.nh-watch__ring {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 253, 249, .85);
  box-shadow: inset 0 0 0 1.5px var(--nh-ink), 0 0 0 9px rgba(86, 126, 255, .12);
  transition: box-shadow .3s ease, transform .3s ease;
}

.nh-watch__ring svg { width: 20px; height: 20px; margin-left: 3px; fill: #3249c7; }
.nh-watch:hover .nh-watch__ring { transform: scale(1.05); box-shadow: inset 0 0 0 1.5px var(--nh-ink), 0 0 0 13px rgba(86, 126, 255, .16); }
.nh-watch__text { display: grid; gap: 4px; }
.nh-watch__text b { font-size: 19px; font-weight: 500; letter-spacing: -.015em; }
.nh-watch__text small { color: var(--nh-muted); font-size: 13px; font-weight: 500; line-height: 1.35; }


/* ---------- Split sections ---------- */

.nh-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(40px, 5.5vw, 104px);
}

.nh-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.nh-split--flip .nh-copy { order: 2; }

/* 02 Updates: list + Bram's monitoring desk with the focus card */
.nh-updates__list {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--nh-line);
}

.nh-updates__list a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--nh-line);
  color: var(--nh-ink);
  text-decoration: none;
}

.nh-updates__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: var(--nh-accent-button);
}

.nh-updates__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nh-updates__text { display: grid; gap: 3px; min-width: 0; }
.nh-updates__text b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.nh-updates__text small { color: var(--nh-muted); font-size: 15px; line-height: 1.45; }
.nh-updates__list time { color: var(--nh-muted); font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nh-updates__list a:hover b { color: var(--nh-link); }
.nh-updates__all { margin-top: 18px; }

.nh-scene--updates { aspect-ratio: 760 / 580; }

.nh-updates__bram {
  position: absolute;
  left: 0;
  top: 9%;
  width: 86%;
}

.nh-updates__chip { position: absolute; left: 3%; top: 0; z-index: 3; }
.nh-updates__bubble { left: 44%; top: 6%; }

.nh-focus {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 46%;
  padding: 18px 20px 14px;
  color: #e6ecfb;
  background: #10173d;
  box-shadow: 0 24px 50px rgba(16, 23, 61, .3);
}

.nh-focus__kicker { display: flex; align-items: center; gap: 10px; margin: 0; color: #aeb8d8; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.nh-focus__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: var(--cb-accent-gradient);
}

.nh-focus__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nh-focus h3 { margin: 14px 0 0; color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.nh-focus p { margin: 6px 0 0; color: #c9d2ec; font-size: 14.5px; line-height: 1.45; }

.nh .nh-focus__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  color: #9be8c8;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.nh-focus__link:hover { text-decoration: underline; text-underline-offset: 5px; }
.nh-focus__link:focus-visible { outline-color: #9be8c8; }

/* ---------- Header over the plate ---------- */

@media (min-width: 1121px) {
  /* Over the plate: a soft paper veil keeps the navigation legible without hiding the painting. */
  .news-page--paper .news-site-header:not(.is-compact) {
    border-bottom-color: transparent;
    background: linear-gradient(180deg, rgba(251, 244, 230, .82) 0%, rgba(251, 244, 230, .5) 62%, rgba(251, 244, 230, 0) 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .nh-rise { animation: nh-rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 110ms + 120ms); }

  .nh-hero__img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%), url("/assets/home/home-v27/bloom-mask-20261011.png");
    -webkit-mask-composite: source-in, source-in;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0 0, 0 0, 68% 46%;
    -webkit-mask-size: 100% 100%, 100% 100%, 330% 330%;
    mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%), url("/assets/home/home-v27/bloom-mask-20261011.png");
    mask-composite: intersect, intersect;
    mask-repeat: no-repeat;
    mask-position: 0 0, 0 0, 68% 46%;
    mask-size: 100% 100%, 100% 100%, 330% 330%;
    animation: nh-bloom 2.4s cubic-bezier(.3, .6, .2, 1) both .1s;
  }

  .nh-hero__live { animation: nh-pop .6s cubic-bezier(.3, 1.4, .5, 1) both 1.7s; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
  .nh-hero {
    min-height: 0;
    margin-top: 0;
    padding: 40px 0 0;
  }

  /* Stacked hero: copy, then the plate, then the category strip. */
  .nh-hero__inner { display: contents; }
  .nh-hero__copy,
  .nh-topics { order: 1; width: min(var(--cb-shell), 640px); max-width: none; margin-inline: auto; }
  .nh-hero__copy { margin-block: 0; padding-block: 0; }
  .nh-topics { order: 3; }

  .nh-hero__plate {
    position: relative;
    inset: auto;
    order: 2;
    width: min(100%, 860px);
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 30px auto 0;
  }

  .nh-hero__img,
  html .nh-hero__img {
    -webkit-mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
    -webkit-mask-size: 118% 118%;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: source-over;
    mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
    mask-size: 118% 118%;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-composite: add;
    animation: none;
  }

  .nh-hero__live { left: 6%; top: 5%; }

  .nh-topics {
    margin-top: 26px;
    margin-bottom: 0;
    border-radius: 24px;
  }

  .nh-split,
  .nh-split--flip { grid-template-columns: minmax(0, 1fr); }
  .nh-split--flip .nh-copy { order: 0; }
}

@media (max-width: 760px) {
  .nh-hero__copy,
  .nh-topics { width: calc(100% - 40px); }
  .nh-hero { padding-top: 18px; }
  .nh .nh-hero__title { font-size: calc(var(--cb-title-hero) * .98); }
  .nh-hero__actions { gap: 22px; }
  .nh-hero__actions .nh-btn { width: 100%; }
  .nh-hero__plate { width: calc(100% + 24px); margin-inline: -12px; }


  .nh-scene--updates { aspect-ratio: auto; display: grid; gap: 12px; }
  .nh-scene--updates > * { position: relative; inset: auto; width: 100%; }
  .nh-updates__chip,
  .nh-updates__bubble { width: max-content; max-width: 100%; }
  .nh-scene--updates > .nh-updates__chip { position: absolute; left: 10px; top: 10px; }
  .nh-updates__bubble { justify-self: end; margin-top: -48px; }

  .nh-updates__list a { grid-template-columns: 40px minmax(0, 1fr); }
  .nh-updates__icon { width: 40px; height: 40px; }
  .nh-updates__list time { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .nh-watch__ring { transition: none; }
}