/* =============================================================
   barrio_npm_prototype — person detail page
   /person/<machine-name> (node + bundle=person, canonical route)
   Phase 1 — covers:
     · Pātai-hued title band with niho pattern (grey in practice —
       no person node carries field_patai yet)
     · Two-column layout (identity content + facts rail at desktop;
       stacks at 880px, rail above content)
     · Identity header — portrait + position
     · Bio body + pull-quote (content column)
     · Downloads + related links (content column)
     · Related videos + related stories (full-width grids at the bottom)
     · Rail: person-type badges, Whakapapa affiliations, Whare wānanga
       organisation, Matakitenga framework, Kaupapa programme
     · Rail: related-projects cards (reverse query) below the facts card
   Browse-back deferred with D1.

   Forks the project-detail chrome under person-owned .np-person-*
   classes (D5). Reuses the global widgets that are content-agnostic:
   .np-band-pattern / .np-band-kicker (project-detail.css),
   .np-dot / .np-d-patai-* / .np-d-pae-* (patai.css), .np-browse-back
   (project-detail.css), and the --hue / --np-patai-* tokens (colors.css).
   ============================================================= */

/* Hue cascade — outer wrapper carries data-patai="<slug>" so --hue and
   --hue-dk reach the band accent + Matakitenga dots. No person node
   currently has field_patai, so the neutral-grey default is what renders;
   the mappings light up automatically once persons get classified. */
.np-person-detail {
  --hue:    #6c675f;
  --hue-dk: #2c2c2b;
}
.np-person-detail[data-patai="puawai"] { --hue: var(--np-patai-puawai); --hue-dk: var(--np-patai-puawai-dk); }
.np-person-detail[data-patai="mauri"]  { --hue: var(--np-patai-mauri);  --hue-dk: var(--np-patai-mauri-dk); }
.np-person-detail[data-patai="whanau"] { --hue: var(--np-patai-whanau); --hue-dk: var(--np-patai-whanau-dk); }
.np-person-detail[data-patai="teao"]   { --hue: var(--np-patai-teao);   --hue-dk: var(--np-patai-teao-dk); }

/* ---------- Title band ----------
   Niho-pattern band with the Pātai hue as a top accent. The .np-band-pattern
   SVG + .np-band-kicker text are reused from project-detail.css. */
.np-person-band {
  position: relative; overflow: hidden;
  background: #f1ece1;
  border-top: 6px solid var(--hue);
  border-bottom: 1px solid #e4e0d8;
  margin-bottom: 24px;
}
.np-person-band-inner {
  position: relative;
  padding: 36px 0;
}
.np-person-title {
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15; letter-spacing: -.3px;
  color: #2c2c2b;
  margin: 0;
}

/* ---------- Layout ----------
   Desktop: 2 columns — content 2fr, rail 1fr.
   Mobile (≤880px): rail stacks above content. */
.np-person-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 50px;
}
.np-person-content {
  min-width: 0;
}

/* ---------- Identity header — portrait (left) + intro (right) ----------
   Two columns at desktop; stacks at the mobile breakpoint below. The intro
   carries position, the body summary, and a "read more" that opens the full
   body in #np-person-body-modal. */
.np-person-identity {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.np-person-portrait {
  flex: 0 0 auto;
  width: 260px; max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f1ece1;
  border: 1px solid #e4e0d8;
}
.np-person-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.np-person-intro {
  flex: 1 1 auto;
  min-width: 0;
}
.np-person-position {
  margin: 2px 0 14px;
  font-size: 16px; line-height: 1.4;
  font-weight: 600;
  color: #2c2c2b;
}
.np-person-summary {
  font-size: 16px; line-height: 1.6;
  color: #2c2c2b;
}
.np-person-summary p { margin: 0 0 12px; }
.np-person-summary p:last-child { margin-bottom: 0; }
.np-person-readmore {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700; font-size: 14px;
  color: var(--hue-dk, #2c2c2b);
  text-decoration: none;
}
.np-person-readmore:hover { text-decoration: underline; }

/* ---------- Full body — rendered inside #np-person-body-modal ---------- */
.np-person-body p {
  margin: 0 0 14px;
  line-height: 1.65;
}
.np-person-body p:last-child { margin-bottom: 0; }
.np-person-body-modal .modal-content {
  padding: 30px 34px 34px;
  border: 0;
  border-radius: 12px;
}
.np-person-body-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
}
.np-person-body-modal-slot {
  padding-right: 20px; /* clear the close button on the first line */
}

/* ---------- Downloads + related links ----------
   Section wrappers only; the .np-dl-list / .np-link-list row widgets are
   reused from project-detail.css (standalone + hue-aware, so the download
   icon picks up the person --hue). */
.np-person-downloads,
.np-person-links {
  margin: 28px 0 0;
}
.np-person-downloads h3,
.np-person-links h3 {
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 10px;
  color: #2c2c2b;
}

/* ---------- Facts rail (right column, sticky at desktop) ---------- */
.np-person-rail {
  min-width: 0;
}
.np-person-rail-inner {
  top: 24px;
  background: #faf8f3;
  border: 1px solid #e4e0d8;
  border-top: 4px solid var(--hue);
  border-radius: 8px;
  padding: 20px 22px 22px;
  font-size: 13.5px;
}

/* Rail: person-type badges — neutral grey (person_type labels don't map
   to the project-type colour system). */
.np-person-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.np-person-type-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 5px;
  color: #fff;
  background: #6c675f;
  text-decoration: none;
  transition: background-color .15s ease;
}
.np-person-type-badge:hover,
.np-person-type-badge:focus-visible {
  background: #4c4842;
  color: #fff;
}

/* Rail rows — key/value pairs. */
.np-person-rail-row {
  margin-bottom: 14px;
}
.np-person-rail-row:last-of-type {
  margin-bottom: 6px;
}
.np-person-rail-key {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: #6c675f;
  margin-bottom: 6px;
}
.np-person-rail-value {
  display: block;
  color: #2c2c2b;
  line-height: 1.4;
}
.np-person-rail-value .np-sub {
  display: block;
  font-size: 12.5px;
  color: #6c675f;
  margin-top: 2px;
}

/* Matakitenga classification list — Pātai (linked) + Pae chips. The
   .np-dot colour comes from the global .np-d-patai-* / .np-d-pae-*
   widget in patai.css; this only sets the dot size + list layout. */
.np-person-classification {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.np-person-classification li {
  display: inline-flex; align-items: center; gap: 8px;
}
.np-person-classification a {
  display: inline-flex; align-items: center; gap: 8px;
  color: #2c2c2b;
  text-decoration: none;
  font-weight: 600;
}
.np-person-classification a:hover {
  color: var(--hue-dk);
  text-decoration: underline;
}
.np-person-classification .np-dot {
  width: 11px; height: 11px;
}

/* .np-browse-back reused from project-detail.css — dormant until D1
   (person-list page) lands and RailSection populates browse_back. */

/* ---------- Rail: related projects ----------
   Card block below the facts card (a sibling, so the facts card stays
   sticky while this scrolls). Mirrors the project detail's related-
   researcher cards — 56px thumbnail + title + meta + teaser, each a
   plain link to the project. Forked from project-detail.css per D5. */
.np-person-rail-projects {
  margin-top: 20px;
  background: #faf8f3;
  border: 1px solid #e4e0d8;
  border-top: 4px solid var(--hue);
  border-radius: 8px;
  padding: 18px 22px 22px;
  font-size: 13.5px;
}
.np-person-projects-head {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #6c675f;
}
.np-related-projects {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.np-related-project {
  border-top: 1px solid #e4e0d8;
  padding-top: 10px;
  margin-top: 10px;
}
.np-related-project:first-child {
  border-top: 0; padding-top: 0; margin-top: 0;
}
.np-related-project-link {
  display: flex; gap: 10px; align-items: flex-start;
  text-decoration: none; color: #2c2c2b;
  transition: color .15s;
}
.np-related-project-link:hover { color: var(--hue-dk); }
.np-related-project-link:hover .np-related-project-title {
  text-decoration: underline;
}
.np-related-project-img {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 6px; overflow: hidden;
  background: #f1ece1;
}
.np-related-project-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.np-related-project-text {
  flex: 1;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.np-related-project-title {
  font-size: 13.5px; line-height: 1.35; font-weight: 600;
}
.np-related-project-meta {
  font-size: 12px; line-height: 1.35; font-weight: 600;
  color: var(--hue-dk);
}
.np-related-project-body {
  font-size: 12px; line-height: 1.4; color: #6c675f; font-weight: 400;
}

/* ---------- Gallery + videos + stories — bottom sections ----------
   Wrappers + headings only. All three grids are shared components: the
   image grid lives in css/image-grid.css (_image-grid.html.twig), the video
   grid in css/video-grid.css (_video-grid.html.twig), and the story grid in
   css/story-grid.css (_story-grid.html.twig). Headings share the
   bottom-section style below. Rendered in order: gallery → videos → stories. */
.np-person-gallery {
  margin: 8px 0 0;
}
.np-person-videos {
  margin: 8px 0 0;
}
.np-person-stories {
  margin: 8px 0 50px;
}
.np-person-gallery-head,
.np-person-videos-head,
.np-person-stories-head {
  margin: 0 0 18px;
  padding-top: 22px;
  border-top: 1px solid #e4e0d8;
  font-weight: 700;
  font-size: 20px;
  color: #2c2c2b;
}
/* The stories grid + banner cards + single-item cap moved to the shared
   css/story-grid.css component (see _story-grid.html.twig). Only the
   .np-person-stories wrapper + heading (above) stay here. */

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .np-person-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Rail moves above the content column, and drops sticky. */
  .np-person-rail {
    order: -1;
  }
  .np-person-rail-inner {
    position: static;
  }
}
@media (max-width: 560px) {
  .np-person-band-inner { padding: 26px 0; }
  /* Stack the identity two-column so portrait + intro don't crush. */
  .np-person-identity { flex-direction: column; gap: 18px; }
  .np-person-portrait { width: 180px; }
}