/* =============================================================
   barrio_npm_prototype — Pātai landing (per-slug bindings + framework)

   Phase F of pae-landing-mirror-plan.md slimmed this file down.
   Shared landing-cluster chrome (cluster head, legend, panel grid, panel
   header/body/foot, featured-project rows, responsive) now lives in
   css/landing-cluster.css and is emitted via .np-lc-* classes.

   This file owns:
     - Per-slug --hue + --bg picsum defaults for the 4 Pātai panels,
       bound to .np-lc-panel via the data-patai attribute.
     - Pātai dot colours (.np-d-patai-*) — used by the counter-axis
       Pātai legend on the Pae landing AND by the Pae/Pātai framework
       grid cells below.
     - The Pae/Pātai framework explainer grid (.np-matakitenga /
       .np-grid-mt / .np-mt-cell) — Pātai-landing-only cluster below
       the panels.
   ============================================================= */

/* ---------- Pātai dot colours ---------- */
.np-d-patai-puawai { background: var(--np-patai-puawai); }
.np-d-patai-mauri  { background: var(--np-patai-mauri); }
.np-d-patai-whanau { background: var(--np-patai-whanau); }
.np-d-patai-teao   { background: var(--np-patai-teao); }

/* ---------- per-slug panel bindings ----------
   EDITORIAL IMAGERY — proper editorial photos supplied 2026-11-11,
   superseding the picsum-sourced placeholders shipped 2026-11-10.
   Served locally from ../images/pae_patai/. See
   ../images/pae_patai/CREDITS.md for photographer/source attribution.
   Longer-term replacement path: inline --bg emitted by
   templates/content/patai-landing.html.twig will still override these
   defaults per-term if field_patai_image is added to the `patai` vocab
   (PataiLandingBuilder already reads field_patai_image defensively via
   hasField()). See documentation/pae-patai-image-swap-plan.md. */
.np-lc-panel[data-patai="puawai"] {
  --hue: var(--np-patai-puawai);  --hue-dk: var(--np-patai-puawai-dk);
  --bg: url('../images/pae_patai/patai-puawai.jpg');
}
.np-lc-panel[data-patai="mauri"] {
  --hue: var(--np-patai-mauri);   --hue-dk: var(--np-patai-mauri-dk);
  --bg: url('../images/pae_patai/patai-mauri.jpg');
}
.np-lc-panel[data-patai="whanau"] {
  --hue: var(--np-patai-whanau);  --hue-dk: var(--np-patai-whanau-dk);
  --bg: url('../images/pae_patai/patai-whanau.jpg');
}
.np-lc-panel[data-patai="teao"] {
  --hue: var(--np-patai-teao);    --hue-dk: var(--np-patai-teao-dk);
  --bg: url('../images/pae_patai/patai-teao.jpg');
}

/* =============================================================
   Pae & Pātai framework explainer — third cluster on the Pātai
   landing (below the panels). Driven by content_menu_block:block_pae_patai;
   per-cell markup in views-view-fields--content-menu-block--block-pae-patai.html.twig.
   ============================================================= */
.np-matakitenga {
  background: #faf8f3;
  border: 1px solid #e4e0d8;
  border-radius: 8px;
  padding: 24px;
  margin: 0 0 50px;
}
.np-matakitenga h3 {
  margin: 0 0 14px;
  font-weight: 600; font-size: 16px;
  text-transform: uppercase; letter-spacing: .04em;
  color: #6c675f;
}
.np-mt-legends {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  margin: 0 0 18px;
}

/* Grid container — .np-grid-mt holds .np-mt-cell children directly
   (no Views wrapper because this cluster is preprocess-driven, not a
   drupal_view() embed). */
.np-grid-mt {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}

/* Cell — coloured top border keyed off data-patai / data-pae attribute. */
.np-mt-cell {
  background: #fff;
  border: 1px solid #e4e0d8;
  border-radius: 8px;
  padding: 14px 15px;
  border-top: 4px solid #6c675f;
}
.np-mt-cell.np-cat-patai[data-patai="puawai"] { border-top-color: var(--np-patai-puawai); }
.np-mt-cell.np-cat-patai[data-patai="mauri"]  { border-top-color: var(--np-patai-mauri); }
.np-mt-cell.np-cat-patai[data-patai="whanau"] { border-top-color: var(--np-patai-whanau); }
.np-mt-cell.np-cat-patai[data-patai="teao"]   { border-top-color: var(--np-patai-teao); }
.np-mt-cell.np-cat-pae[data-pae="auaha"]   { border-top-color: var(--np-pae-auaha); }
.np-mt-cell.np-cat-pae[data-pae="tawhiti"] { border-top-color: var(--np-pae-tawhiti); }
.np-mt-cell.np-cat-pae[data-pae="ora"]     { border-top-color: var(--np-pae-ora); }
.np-mt-cell.np-cat-pae[data-pae="ahurei"]  { border-top-color: var(--np-pae-ahurei); }
/* Rautaki — third row of the grid. Each cell is one column wide; the
   row is centred by starting the first Rautaki cell at column 2. The
   second cell flows naturally into column 3, leaving columns 1 and 4
   empty. The .np-cat-rautaki--first class is added in the template via
   {% if loop.first %}. */
.np-mt-cell.np-cat-rautaki--first                      { grid-column-start: 2; }
.np-mt-cell.np-cat-rautaki[data-rautaki="kounga"]      { border-top-color: var(--np-rautaki-kounga); }
.np-mt-cell.np-cat-rautaki[data-rautaki="whakaaweawe"] { border-top-color: var(--np-rautaki-whakaaweawe); }

.np-mt-cell .np-mt-tag {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: #6c675f;
}
.np-mt-cell h4 {
  font-weight: 600; font-size: 14.5px;
  margin: 4px 0 6px;
}
.np-mt-cell h4 em {
  font-style: italic; font-weight: 400; color: #6c675f;
}
/* Description body — .np-mt-desc is a <div> wrapper around the rendered
   body HTML (which usually contains <p>s from filter_autop). Style any
   block-level descendants here. */
.np-mt-cell .np-mt-desc,
.np-mt-cell .np-mt-desc p {
  margin: 0;
  font-size: 12.5px;
  color: #6c675f;
  line-height: 1.45;
}
.np-mt-cell .np-mt-desc p + p { margin-top: 6px; }
.np-mt-cell .np-mt-desc a { color: inherit; text-decoration: underline; }
.np-mt-cell .np-mt-desc strong { color: #2c2c2b; }

/* ---------- responsive (framework grid only) ---------- */
@media (max-width: 880px) {
  .np-grid-mt { grid-template-columns: repeat(2, 1fr); }
  /* In a 2-column grid the Rautaki row already fills naturally — drop
     the column-2 start so the two cells sit side by side, not in col 2. */
  .np-mt-cell.np-cat-rautaki--first { grid-column-start: auto; }
}
@media (max-width: 560px) {
  .np-grid-mt { grid-template-columns: 1fr; }
}