/* =============================================================
   barrio_npm_prototype — Pātai-spotlight page chrome
   /research/projects/<patai-slug>
   Phase 1 of prototypes/project-list-by-patai-with-spotlight.html.
   Covers: hero band + sibling-nav pills. Spotlight grid + per-type
   group sections arrive in Phase 2 / Phase 3.
   ============================================================= */

/* The outermost wrapper carries data-patai="<slug>" so the hue cascade
   reaches every coloured surface below. Same [data-patai="…"] hue
   pattern as .np-lc-panel[data-patai="…"] in css/patai.css. */
.np-patai-spotlight {
  --hue:    #6c675f;
  --hue-dk: #2c2c2b;
}
.np-patai-spotlight[data-patai="puawai"] { --hue: var(--np-patai-puawai); --hue-dk: var(--np-patai-puawai-dk); }
.np-patai-spotlight[data-patai="mauri"]  { --hue: var(--np-patai-mauri);  --hue-dk: var(--np-patai-mauri-dk); }
.np-patai-spotlight[data-patai="whanau"] { --hue: var(--np-patai-whanau); --hue-dk: var(--np-patai-whanau-dk); }
.np-patai-spotlight[data-patai="teao"]   { --hue: var(--np-patai-teao);   --hue-dk: var(--np-patai-teao-dk); }

/* Project-type spotlight pages — same hue-cascade pattern as Pātai but
   keyed off data-t with project-type slugs. The 5 canonical types each
   get their colour. Other types fall through to grey (the .np-type-spotlight
   default below) but in practice this wrapper only renders on the 5
   canonical pages — see TypeSpotlightContextBuilder::resolveTid(). */
.np-type-spotlight {
  --hue:    #6c675f;
  --hue-dk: #2c2c2b;
}
.np-type-spotlight[data-t="full"]       { --hue: var(--np-pt-full);       --hue-dk: var(--np-pt-full-dk); }
.np-type-spotlight[data-t="scoping"]    { --hue: var(--np-pt-scoping);    --hue-dk: var(--np-pt-scoping-dk); }
.np-type-spotlight[data-t="doctoral"]   { --hue: var(--np-pt-doctoral);   --hue-dk: var(--np-pt-doctoral-dk); }
.np-type-spotlight[data-t="internship"] { --hue: var(--np-pt-internship); --hue-dk: var(--np-pt-internship-dk); }
.np-type-spotlight[data-t="programme"]  { --hue: var(--np-pt-programme);  --hue-dk: var(--np-pt-programme-dk); }
.np-type-spotlight[data-t="whakaaweawe"] { --hue: var(--np-pt-whakaaweawe); --hue-dk: var(--np-pt-whakaaweawe-dk); }
/* TID 633 — cross-cutting editorial-promotion axis. Per
   whakaaweawe-featured-impact-page-plan.md; placed after Whakaaweawe (619)
   for semantic pairing. */
.np-type-spotlight[data-t="featured-impact"] { --hue: var(--np-pt-featured-impact); --hue-dk: var(--np-pt-featured-impact-dk); }

/* Pae/Rautaki spotlight pages — third sibling axis-block. Same hue-
   cascade pattern as Pātai + type, keyed off data-p (short for "pae"
   to differentiate from data-t/data-patai on sibling axes). 6 canonical
   terms per ProjectTypeRules::canonicalPaePills(): 4 Pae + 2 Rautaki.
   Reuses the shared type-chrome layout rules below (.np-type-context /
   .np-siblings / etc.) since the visual is identical — only the --hue
   cascade differs per axis. Added Phase D of pae-per-term-pages-plan.md. */
.np-pae-spotlight {
  --hue:    #6c675f;
  --hue-dk: #2c2c2b;
}
.np-pae-spotlight[data-p="auaha"]       { --hue: var(--np-pae-auaha);        --hue-dk: var(--np-pae-auaha-dk); }
.np-pae-spotlight[data-p="tawhiti"]     { --hue: var(--np-pae-tawhiti);      --hue-dk: var(--np-pae-tawhiti-dk); }
.np-pae-spotlight[data-p="ora"]         { --hue: var(--np-pae-ora);          --hue-dk: var(--np-pae-ora-dk); }
.np-pae-spotlight[data-p="ahurei"]      { --hue: var(--np-pae-ahurei);       --hue-dk: var(--np-pae-ahurei-dk); }
.np-pae-spotlight[data-p="kounga"]      { --hue: var(--np-rautaki-kounga);      --hue-dk: var(--np-rautaki-kounga-dk); }
.np-pae-spotlight[data-p="whakaaweawe"] { --hue: var(--np-rautaki-whakaaweawe); --hue-dk: var(--np-rautaki-whakaaweawe-dk); }

/* Sibling-pill dot colours for the pae-spotlight nav. Six pills total;
   dot colour matches the pill's own axis hue. Same shape as the type-
   spotlight pill dots (see .np-siblings .np-pill[data-t=…] rules below
   / in project-type-tiles.css). */
/* Per-slug hue declarations. These set --hue / --hue-dk ON THE PILL rather
   than colouring the dot directly (changed 2026-08-20) — the base rule
   below routes BOTH the 3px border and the dot through --hue, so the two
   are structurally unable to diverge and a new term is one line, not two.
   Matches .np-people-tab / .np-pubsearch-tab / .np-video-facet, which have
   worked this way since 2026-08-19. */
.np-siblings .np-pill[data-p="auaha"]       { --hue: var(--np-pae-auaha);       --hue-dk: var(--np-pae-auaha-dk); }
.np-siblings .np-pill[data-p="tawhiti"]     { --hue: var(--np-pae-tawhiti);     --hue-dk: var(--np-pae-tawhiti-dk); }
.np-siblings .np-pill[data-p="ora"]         { --hue: var(--np-pae-ora);         --hue-dk: var(--np-pae-ora-dk); }
.np-siblings .np-pill[data-p="ahurei"]      { --hue: var(--np-pae-ahurei);      --hue-dk: var(--np-pae-ahurei-dk); }
.np-siblings .np-pill[data-p="kounga"]      { --hue: var(--np-rautaki-kounga);  --hue-dk: var(--np-rautaki-kounga-dk); }
.np-siblings .np-pill[data-p="whakaaweawe"] { --hue: var(--np-rautaki-whakaaweawe); --hue-dk: var(--np-rautaki-whakaaweawe-dk); }

/* Type-spotlight chrome reuses the patai-spotlight CSS for the context
   hero, sibling nav, and spotlight band. The classes below are alias-
   styled to match .np-patai-context / .np-lc-name / etc. so the
   markup in templates/content/type-spotlight-chrome.html.twig has the
   same visual treatment as the patai chrome above it. */
.np-type-context           { /* same as .np-patai-context */ }
.np-type-context-inner     { /* same as .np-patai-context-inner */ }
.np-type-kicker            { /* same as .np-patai-kicker */ }
.np-type-context .np-type-name { /* same as .np-patai-context .np-lc-name */ }
.np-type-description       { /* same as .np-lc-desc but block-level */ }
.np-tc-count               { /* same as .np-pc-count */ }
.np-tc-lede                { /* same as .np-pc-lede */ }

/* Type / Pae / Grant spotlight card ---------------------------------------
   Restyled 2026-08-17 as a card echo of the section-menu tile treatment
   (.np-landing-item--parent) — white body inside a container, coloured
   header band with the tukutuku motif and dark text on the light body.
   Old full-bleed gradient + diagonal stripes + white-on-dark treatment
   retired; the identity band now reads as "matched-family element" rather
   than a shouting title. Grayscale body-background bleeds around the card.
   The 4 header partials wrap the .np-type-context in a .container so the
   card sits at container width. */
.np-type-context {
  position: relative;
  background: #fff;
  color: #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
  /* Border + box-shadow retired 2026-08-18 aligning with .np-hero__card
     — the head's pale-to-white fade below carries the boundary implicitly. */
}

/* Head band. Iteration history:
     v1: linear-gradient(135deg, color-mix(--hue-dk, black 12%), --hue-dk)
         + white text — dark shouting band
     v2: pale hue fade to white (2026-08-18) — head "melts" downward
         into the white card body
     v3: transparent (2026-08-18) — fully white head; kicker +
         title chip + subtle tukutuku pattern carry all identity.
         Aligns with .np-hero__head after TWN preference check. */
.np-type-context-head {
  position: relative;
  padding: 22px 26px 24px;
  overflow: hidden;
}
.np-type-context-head::before {
  content: '';
  position: absolute; inset: 0;
  /* Tukutuku pattern via mask-image so we can colour it with --hue-dk
     instead of the PNG's baked-in white. White pattern on pale bg was
     invisible after the head lightening — mask + bg-color inverts the
     visibility. Aligns with .np-hero__head::before. */
  background-color: var(--hue-dk);
  mask-image: url('../images/npm-pattern-white.png');
  mask-repeat: no-repeat;
  mask-position: 100% center;
  mask-size: contain;
  -webkit-mask-image: url('../images/npm-pattern-white.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 100% center;
  -webkit-mask-size: contain;
  opacity: .15;
  pointer-events: none;
}
.np-type-context-head > * { position: relative; z-index: 1; }

.np-type-kicker {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  /* Dark hue for contrast on the pale head bg — flipped from the
     earlier muted-white (rgba(255,255,255,.85) on dark bg). */
  color: var(--hue-dk);
  margin-bottom: 10px;
}
/* Name chip: sits INSIDE the coloured head band as an inline-block pill.
   Background --hue (the lighter of the cluster's pair) lifts off the
   band's --hue-dk gradient for a visible chip; width follows the text. */
.np-type-context .np-type-name {
  display: inline-block;
  background: var(--hue);
  color: #fff;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -.2px;
  line-height: 1.15;
  padding: 7px 14px;
  border-radius: 6px;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

/* Light body — description + count + lede in dark text. */
.np-type-context-body {
  padding: 20px 26px 22px;
  background: #fff;
}
.np-type-description {
  font-size: 14px; line-height: 1.5;
  color: rgba(0,0,0,.72);
  max-width: 64ch;
}
/* Editors sometimes author field_description with block-level tags
   (h1-h6, li, blockquote) via the rich-text editor instead of plain
   paragraphs — see Pae "Rautaki Whakaaweawe" for the live example (both
   lines are <h4>). Without an explicit rule the headings pick up
   typography.css's `h1,h2,… { font-weight: 100 !important }` (per
   CLAUDE.md gotcha) so they render as unreadable hairlines even on the
   light body. Force readable body-weight + our body colour on every
   text-carrying child of the wrapper. */
.np-type-description :is(p, h1, h2, h3, h4, h5, h6, li, blockquote, em, strong, a) {
  color: rgba(0,0,0,.72);
}
.np-type-description :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600 !important; /* defeats typography.css hairline override */
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px;
}
.np-type-description :is(p, h1, h2, h3, h4, h5, h6):last-child { margin: 0; }
.np-type-description p { margin: 0 0 8px; }
.np-tc-count {
  margin-top: 12px;
  font-size: 13.5px;
  color: rgba(0,0,0,.66);
}
.np-tc-count strong { color: #1a1a1a; font-weight: 700; }
.np-tc-lede {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: rgba(0,0,0,.62);
  max-width: 60ch;
}

/* Sibling-nav pills — type pages reuse .np-siblings + .np-pill rules
   already defined for patai pages. The current pill highlight (--hue)
   cascades through .np-type-spotlight just like .np-patai-spotlight,
   so no separate rule block needed. Only addition: type-specific dot
   colours per the 5 canonical pills. */
.np-siblings .np-pill[data-t="full"]            { --hue: var(--np-pt-full);            --hue-dk: var(--np-pt-full-dk); }
.np-siblings .np-pill[data-t="scoping"]         { --hue: var(--np-pt-scoping);         --hue-dk: var(--np-pt-scoping-dk); }
.np-siblings .np-pill[data-t="doctoral"]        { --hue: var(--np-pt-doctoral);        --hue-dk: var(--np-pt-doctoral-dk); }
.np-siblings .np-pill[data-t="internship"]      { --hue: var(--np-pt-internship);      --hue-dk: var(--np-pt-internship-dk); }
.np-siblings .np-pill[data-t="programme"]       { --hue: var(--np-pt-programme);       --hue-dk: var(--np-pt-programme-dk); }
.np-siblings .np-pill[data-t="whakaaweawe"]     { --hue: var(--np-pt-whakaaweawe);     --hue-dk: var(--np-pt-whakaaweawe-dk); }
.np-siblings .np-pill[data-t="featured-impact"] { --hue: var(--np-pt-featured-impact); --hue-dk: var(--np-pt-featured-impact-dk); }

/* ---------- Pātai context card ----------
   Restyled 2026-08-17 to the same card treatment as .np-type-context
   above (see that rule block for the design rationale). Class-name
   diversity (.np-patai-context + .np-lc-name / .np-lc-desc vs
   .np-type-context + .np-type-name / .np-type-description) is legacy
   from the Pātai spotlight shipping earlier than type / pae / grant —
   preserved here rather than unified in this pass. */
.np-patai-context {
  position: relative;
  background: #fff;
  color: #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
  /* Border + box-shadow retired 2026-08-18 aligning with .np-hero__card
     — the head's pale-to-white fade below carries the boundary implicitly. */
}

/* Head band. See .np-type-context-head above for the iteration
   history — same recipe (no background; identity comes from
   kicker + title chip + tukutuku pattern). */
.np-patai-context-head {
  position: relative;
  padding: 22px 26px 24px;
  overflow: hidden;
}
.np-patai-context-head::before {
  content: '';
  position: absolute; inset: 0;
  /* Tukutuku pattern via mask-image — see .np-type-context-head::before
     above for the rationale. */
  background-color: var(--hue-dk);
  mask-image: url('../images/npm-pattern-white.png');
  mask-repeat: no-repeat;
  mask-position: 100% center;
  mask-size: contain;
  -webkit-mask-image: url('../images/npm-pattern-white.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 100% center;
  -webkit-mask-size: contain;
  opacity: .15;
  pointer-events: none;
}
.np-patai-context-head > * { position: relative; z-index: 1; }

.np-patai-kicker {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--hue-dk);
  margin-bottom: 10px;
}
/* .np-patai-context still uses the .np-lc-name / .np-lc-desc classes
   shared with landing-cluster.css, but scopes its rules to the
   .np-patai-context-head so the landing-cluster surface stays
   untouched. Inherits the inline-block chip treatment (background,
   padding, border-radius, box-shadow) from landing-cluster.css's
   .np-lc-name — only override font-size/margin here so the chip
   scales up for the spotlight and doesn't carry the landing-cluster's
   trailing 12px margin (the head's own padding handles spacing). */
.np-patai-context-head .np-lc-name {
  font-size: clamp(22px, 2.6vw, 32px);
  margin: 0;
}

.np-patai-context-body {
  padding: 20px 26px 22px;
  background: #fff;
}
.np-patai-context-body .np-lc-desc {
  font-size: 15px; line-height: 1.45;
  color: rgba(0,0,0,.72);
  margin: 0; max-width: 56ch;
}
.np-pc-count {
  margin-top: 12px;
  font-size: 13.5px;
  color: rgba(0,0,0,.66);
}
.np-pc-count strong { color: #1a1a1a; font-weight: 700; }
.np-pc-lede {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: rgba(0,0,0,.62);
  max-width: 60ch;
}

/* ---------- Sibling-nav pill row ----------
   Sits below the hero band, above {{ page.content }}. Back link +
   4 Pātai pills; current is filled with --hue per
   .np-pill[aria-current="page"]. */
.np-siblings {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 28px;
  font-family: inherit;
}
.np-siblings .np-back {
  font-size: 13px;
  color: #6c675f;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.np-siblings .np-back:hover { color: var(--hue-dk); }
.np-siblings .np-sep { color: #e4e0d8; }

/* 3px hued border 2026-08-20 (TWN) — brings this pill row onto the
   convention .np-people-tab established 2026-08-19 and
   .np-pubsearch-tab / .np-video-facet already share: a 3px border in the
   item's own hue, with the dot the same colour, because a row of 1px grey
   pills reads too homogeneous to tell apart at a glance. This row was the
   last holdout.

   Padding trimmed 6px 12px -> 4px 10px so the pill's OUTER box is
   unchanged — the border grew 2px per side. (.np-people-tab absorbed only
   1px of its 2px; full absorption here keeps the row from re-wrapping,
   which matters more with 7 pills plus the back-link.)

   --hue / --hue-dk come from the per-slug maps above and below; a pill
   with no match falls back to the old grey. */
.np-siblings .np-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 3px solid var(--hue, #e4e0d8);
  background: #fff;
  color: #2c2c2b;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
/* One dot rule for every axis — the 23 per-slug `.np-dot { background: … }`
   declarations this replaces are now --hue declarations on the pill. */
.np-siblings .np-pill .np-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hue, #6c675f);
}
.np-siblings .np-pill[data-patai="puawai"] { --hue: var(--np-patai-puawai); --hue-dk: var(--np-patai-puawai-dk); }
.np-siblings .np-pill[data-patai="mauri"]  { --hue: var(--np-patai-mauri);  --hue-dk: var(--np-patai-mauri-dk); }
.np-siblings .np-pill[data-patai="whanau"] { --hue: var(--np-patai-whanau); --hue-dk: var(--np-patai-whanau-dk); }
.np-siblings .np-pill[data-patai="teao"]   { --hue: var(--np-patai-teao);   --hue-dk: var(--np-patai-teao-dk); }

.np-siblings .np-pill[aria-current="page"] {
  background: var(--hue);
  border-color: var(--hue);
  color: #fff;
}
.np-siblings .np-pill[aria-current="page"] .np-dot { background: #fff; }
/* Hover darkens the pill's own hue rather than replacing it with grey —
   the old `border-color: #6c675f` would have DRAINED the colour out of a
   now-coloured border, which reads backwards. Same treatment as
   .np-people-tab:hover. */
.np-siblings .np-pill:hover:not([aria-current="page"]) {
  border-color: var(--hue-dk, #6c675f);
}

/* ============================================================
   Whakaaweawe spotlight band — Phase 2
   1 hero card + 4 small cards (2×2), rendered by the
   patai_spotlight view via per-row template dispatch on
   $view->row_index. Grid layout targets .view-content (the
   Drupal Views inner wrapper) the same way the other
   drupal_view() embeds in this theme do.
   ============================================================ */
.np-spotlight-cluster {
  /* Only set the bottom — Bootstrap's .container class on this element
     uses margin-left: auto + margin-right: auto for horizontal centring.
     Setting `margin: 0 0 40px` (4-value shorthand) collapses both
     auto margins to 0 and pushes the section to the left viewport edge. */
  margin-bottom: 40px;
}
.np-spotlight-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding-bottom: 13px; margin-bottom: 22px;
  border-bottom: 2px solid #2c2c2b;
}
.np-spotlight-head h2 {
  font-weight: 600; font-size: 22px; letter-spacing: -.2px;
  line-height: 1.15; margin: 0;
}
.np-spotlight-head h2 .np-en { font-weight: 400; color: #6c675f; }
.np-spotlight-head p {
  font-size: 14px; color: #6c675f;
  max-width: 520px; margin: 5px 0 0;
}
.np-spotlight-aside {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

/* Outer grid: hero (1.25fr) on left, small-card sub-grid (1fr) on right.
   The chrome templates emit two direct children into .np-spotlight-grid:
   the hero's .views-row and the .np-spotlight-small-grid wrapper for the
   remaining cards. (Previously this grid lived on the Drupal Views inner
   .view-content wrapper when the cluster was drupal_view()-embedded; the
   embed was replaced by an inline _spotlight-card.html.twig loop in
   Nov 2026, so the grid moves up one DOM level.) */
.np-spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.np-spotlight-grid > .views-row,
.np-spotlight-grid > .np-spotlight-small-grid {
  width: auto;
  padding: 0;
  margin: 0;
}

/* Inner 2×2 sub-grid for small cards. */
.np-spotlight-small-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.np-spotlight-small-grid .views-row {
  width: auto;
  padding: 0;
  margin: 0;
}

/* ---------- hero card ---------- */
.np-spotlight-hero {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e4e0d8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40,40,40,.05), 0 6px 18px rgba(40,40,40,.06);
  text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.np-spotlight-hero:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(40,40,40,.09), 0 16px 44px rgba(40,40,40,.10);
  color: inherit;
}
/* Base .np-ph media/cover slot chrome. Shared between the spotlight hero
   card (Whakaaweawe band on patai / type / article listings), the two
   listing modals (article + grant), and the grant canonical detail page.
   The hue cascade (--hue / --hue-dk) is set by the parent —
   .np-patai-spotlight[data-patai] for the patai band,
   .np-type-spotlight[data-t] for the type band,
   .np-article-spotlight[data-ct] for the article band,
   .np-article-modal-content[data-ct] for the article modal,
   .np-grant-modal-content[data-cluster] for the grant modal, and
   .np-grant-detail[data-cluster] for the grant detail page. */
.np-spotlight-hero .np-ph,
.np-article-modal-content .np-ph,
.np-grant-modal-content .np-ph,
.np-grant-detail .np-ph {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--hue-dk), var(--hue));
  background-size: cover;
  /* Anchor 20% down from the top so faces stay in frame when 4:3 (or
     square) derivatives are cropped to 16:9 here. Extractor sends the
     np_spotlight image style — already top-anchored — so this CSS
     anchor only trims the bottom on typical sources. See
     spotlight-image-crop-plan.md D-2. */
  background-position: 50% 20%;
  overflow: hidden;
}
/* Tukutuku frieze — the theme's own white pattern (images/npm-pattern-white.png),
   layered over the hue. Hidden on photo cards, revealed on covers (below). */
.np-spotlight-hero .np-ph::before,
.np-article-modal-content .np-ph::before,
.np-grant-modal-content .np-ph::before,
.np-grant-detail .np-ph::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/npm-pattern-white.png');
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: auto 250%;
  opacity: 0;
  pointer-events: none;
}
.np-ph-label {
  position: absolute; bottom: 12px; left: 14px;
  /* right offset mirrors `left: 14px` so the pill never crowds the
     right edge (where .np-grant-status sits on grant variants). */
  max-width: calc(100% - 28px);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255,255,255,.95);
  padding: 4px 9px;
  background: rgba(0,0,0,.32);
  border-radius: 4px;
  z-index: 1;
  /* Truncate long labels to one line with ellipsis — guards against
     grant titles (30-80 chars) + long article badges post-te-reo
     Phase 1 (e.g. "Ō MĀTAU KŌRERO · OUR STORIES" = 29 chars). See
     documentation/card-photograph-retire-plan.md §10. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-hero-body {
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 11px;
  flex: 1;
}
.np-hero-kicker {
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--hue-dk);
}
.np-spotlight-hero h3 {
  font-weight: 700; font-size: 22px;
  line-height: 1.2; margin: 0;
  color: #2c2c2b;
}
.np-hero-pae {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: #6c675f;
}
.np-hero-pae .np-dot { width: 9px; height: 9px; }
.np-hero-quote {
  font-style: italic;
  font-size: 15px; line-height: 1.5;
  color: #2c2c2b;
  padding-left: 14px;
  border-left: 3px solid var(--hue);
  margin: 4px 0 0;
  /* Cap the card teaser — bodySummary() plain-text-trims to ~360 chars; this
     clamps the visible height so a long summary can't blow out the card. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-hero-quote p { margin: 0; }
.np-hero-quote p + p { margin-top: 8px; }
.np-hero-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: auto; padding-top: 4px;
  align-items: center;
}
.np-cta-primary {
  color: #fff;
  background: var(--hue-dk);
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 700; font-size: 13px;
}

/* ---------- small cards ---------- */
.np-spotlight-small {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #e4e0d8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40,40,40,.05), 0 6px 18px rgba(40,40,40,.06);
  text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.np-spotlight-small:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(40,40,40,.09), 0 16px 44px rgba(40,40,40,.10);
  color: inherit;
}
.np-spotlight-small .np-ph {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  /* Matches the hero anchor — top-focused so heads stay in frame.
     The np_spotlight image style is already 1200×900 (4:3) so this
     anchor barely trims anything on the small variant. See
     spotlight-image-crop-plan.md D-2. */
  background-position: 50% 20%;
  background-color: var(--hue);
}
/* Pae-tinted photo placeholder when no image present.
   Override the default --hue tint per Pae if the card has a data-pae. */
.np-spotlight-small[data-pae="auaha"]   .np-ph { background-color: var(--np-pae-auaha); }
.np-spotlight-small[data-pae="tawhiti"] .np-ph { background-color: var(--np-pae-tawhiti); }
.np-spotlight-small[data-pae="ora"]     .np-ph { background-color: var(--np-pae-ora); }
.np-spotlight-small[data-pae="ahurei"]  .np-ph { background-color: var(--np-pae-ahurei); }
/* Tukutuku frieze (see hero note). Hidden on photo cards, shown on covers. */
.np-spotlight-small .np-ph::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/npm-pattern-white.png');
  background-repeat: no-repeat;
  background-position: 100% center;
  background-size: auto 260%;
  opacity: 0;
  pointer-events: none;
}

/* =============================================================
   Image-fallback cover — no photo. The .np-ph--cover modifier (added by
   _spotlight-card.html.twig when np_spotlight.image_url is empty) collapses
   the media window to a compact Pae-hued tukutuku strip carrying the Pae
   identity, instead of a tall empty rectangle. Photo cards are unaffected.
   ============================================================= */
.np-spotlight-hero  .np-ph--cover,
.np-spotlight-small .np-ph--cover,
.np-article-modal-content .np-ph--cover,
.np-grant-modal-content .np-ph--cover,
.np-grant-detail .np-ph--cover {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
}
.np-spotlight-hero  .np-ph--cover,
.np-article-modal-content .np-ph--cover,
.np-grant-modal-content .np-ph--cover,
.np-grant-detail .np-ph--cover { padding: 18px 24px; }
.np-spotlight-small .np-ph--cover { padding: 14px 17px; }

/* Reveal the tukutuku only on covers. */
.np-spotlight-hero  .np-ph--cover::before,
.np-spotlight-small .np-ph--cover::before,
.np-article-modal-content .np-ph--cover::before,
.np-grant-modal-content .np-ph--cover::before,
.np-grant-detail .np-ph--cover::before { opacity: .2; }

/* Per-card rhythm — each small cover shows a different slice of the frieze. */
.np-spotlight-small-grid .views-row:nth-child(1) .np-ph--cover::before { background-position: 100% center; }
.np-spotlight-small-grid .views-row:nth-child(2) .np-ph--cover::before { background-position: 58% center; }
.np-spotlight-small-grid .views-row:nth-child(3) .np-ph--cover::before { background-position: 22% center; }
.np-spotlight-small-grid .views-row:nth-child(4) .np-ph--cover::before { background-position: 78% center; }

/* Tint the hero cover strip by its Pae so the colour matches its label
   (the hero body accents stay on the page hue — this only overrides the
   strip background, not the --hue cascade). */
.np-spotlight-hero[data-pae="auaha"]   .np-ph--cover { background: linear-gradient(135deg, #315982, var(--np-pae-auaha)); }
.np-spotlight-hero[data-pae="tawhiti"] .np-ph--cover { background: linear-gradient(135deg, #6f3e5e, var(--np-pae-tawhiti)); }
.np-spotlight-hero[data-pae="ora"]     .np-ph--cover { background: linear-gradient(135deg, #9a5424, var(--np-pae-ora)); }
.np-spotlight-hero[data-pae="ahurei"]  .np-ph--cover { background: linear-gradient(135deg, #245450, var(--np-pae-ahurei)); }

/* Compact Pae identity label on the cover strip. */
.np-cover-word {
  position: relative; z-index: 1;    /* sit above the ::before pattern */
  margin: 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: .01em; line-height: 1.15;
  color: #fff; text-transform: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.np-cover-word .np-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.92); flex: none;
}
.np-spotlight-hero  .np-cover-word { font-size: 20px; }
.np-spotlight-small .np-cover-word { font-size: 16px; }
.np-small-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 7px;
  flex: 1;
}
.np-small-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: #6c675f;
}
.np-small-kicker .np-dot { width: 8px; height: 8px; }
.np-spotlight-small h4 {
  font-weight: 600; font-size: 15px;
  line-height: 1.25; margin: 0;
  color: #2c2c2b;
}
.np-small-quote {
  font-style: italic;
  font-size: 12.5px; line-height: 1.45;
  color: #6c675f;
  margin: 0;
  /* Clamp — see .np-hero-quote note. Small cards are narrower, so a few
     more lines fit the same ~360-char cap. */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-small-quote p { margin: 0; }
.np-small-cta {
  margin-top: auto;
  font-size: 12px; font-weight: 700;
  color: var(--hue-dk);
}

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .np-spotlight-grid { grid-template-columns: 1fr; }
  .np-spotlight-small-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .np-spotlight-small-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .np-patai-context-inner { padding: 22px 0 20px; }
  .np-siblings { gap: 8px 10px; font-size: 12px; }
  .np-siblings .np-pill { padding: 5px 10px; font-size: 12px; }
}