/* =============================================================
   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 pattern as .np-patai-panel
   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); }

/* 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-patai-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-patai-name */ }
.np-type-description       { /* same as .np-patai-q but block-level */ }
.np-tc-count               { /* same as .np-pc-count */ }
.np-tc-lede                { /* same as .np-pc-lede */ }

/* Apply the patai chrome styles to the type chrome via direct selector
   targeting — cheaper than copy-pasting the rule blocks. */
.np-type-context {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--hue-dk), var(--hue));
  color: #fff;
  margin-bottom: 22px;
  border-radius: 0 0 8px 8px;
}
.np-type-context::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px);
  pointer-events: none;
}
.np-type-context-inner { position: relative; padding: 30px 0 26px; }
.np-type-kicker {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 12px;
}
.np-type-context .np-type-name {
  display: inline-block;
  background: var(--hue-dk);
  color: #fff;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -.2px;
  line-height: 1.15;
  padding: 8px 16px;
  border-radius: 6px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.np-type-description {
  font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,.94);
  max-width: 64ch;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.np-type-description p { margin: 0 0 8px; }
.np-type-description p:last-child { margin: 0; }
.np-tc-count {
  margin-top: 16px;
  font-size: 13.5px;
  color: rgba(255,255,255,.92);
}
.np-tc-count strong { color: #fff; font-weight: 700; }
.np-tc-lede {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,.9);
  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"]       .np-dot { background: var(--np-pt-full); }
.np-siblings .np-pill[data-t="scoping"]    .np-dot { background: var(--np-pt-scoping); }
.np-siblings .np-pill[data-t="doctoral"]   .np-dot { background: var(--np-pt-doctoral); }
.np-siblings .np-pill[data-t="internship"] .np-dot { background: var(--np-pt-internship); }
.np-siblings .np-pill[data-t="programme"]  .np-dot { background: var(--np-pt-programme); }

/* ---------- Pātai context hero band ----------
   Full-bleed Pātai-hued band carrying the page identity. The gradient
   uses the Pātai hue as the base; future phases can layer a photo over
   it via an inline --bg custom property (D4 in the implementation plan).
*/
.np-patai-context {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--hue-dk), var(--hue));
  color: #fff;
  margin-bottom: 22px;
  border-radius: 0 0 8px 8px;
}
.np-patai-context::before {
  /* Niho-like diagonal texture overlay — subtle, matches the prototype. */
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px);
  pointer-events: none;
}
.np-patai-context-inner {
  position: relative;
  padding: 30px 0 26px;
}
.np-patai-kicker {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-bottom: 12px;
}
.np-patai-context .np-patai-name {
  display: inline-block;
  background: var(--hue-dk);
  color: #fff;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -.2px;
  line-height: 1.15;
  padding: 8px 16px;
  border-radius: 6px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.np-patai-context .np-patai-q {
  font-size: 16px; line-height: 1.45;
  color: rgba(255,255,255,.96);
  margin: 0; max-width: 56ch;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.np-pc-count {
  margin-top: 16px;
  font-size: 13.5px;
  color: rgba(255,255,255,.92);
}
.np-pc-count strong { color: #fff; font-weight: 700; }
.np-pc-lede {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: rgba(255,255,255,.9);
  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; }

.np-siblings .np-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #e4e0d8;
  background: #fff;
  color: #2c2c2b;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.np-siblings .np-pill .np-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.np-siblings .np-pill[data-patai="puawai"] .np-dot { background: var(--np-patai-puawai); }
.np-siblings .np-pill[data-patai="mauri"]  .np-dot { background: var(--np-patai-mauri); }
.np-siblings .np-pill[data-patai="whanau"] .np-dot { background: var(--np-patai-whanau); }
.np-siblings .np-pill[data-patai="teao"]   .np-dot { background: var(--np-patai-teao); }

.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; }
.np-siblings .np-pill:hover:not([aria-current="page"]) {
  border-color: #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; background-position: center;
  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;
  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;
}
.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; background-position: center;
  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; }
}