/* =============================================================
   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).
   ============================================================= */

/* .np-person-detail hue cascade retired 2026-08-19 per Day 3 D-P4 —
   was `--hue: #6c675f; --hue-dk: #2c2c2b;` with four `[data-patai="…"]`
   variants driving the retired .np-person-band accent + Matakitenga
   dots. Dead code in practice (no person node ever carried field_patai;
   every page rendered neutral-grey). Section hue for the new .np-hero
   comes from `.np-landing-group--ko-wai-matou` (Ko Wai Mātou blue) via
   the landing-group cascade in landing-submenu-groups.css. Matakitenga
   dots still light up per patai/pae via .np-d-* classes on the dots
   themselves — the wrapper cascade wasn't feeding them anyway. */

/* .np-person-band + .np-person-band-inner + .np-person-title retired
   2026-08-19 per Day 3 — kicker + h1 now render in the shared .np-hero
   via preprocess_page. */

/* ---------- 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;
}
/* Content column — grid item; no cap here. The scroll cap now sits on
   the inner .np-person-body-scroll / .np-project-body-scroll wrappers
   so the media strip (person) / media strip (project) stay outside the
   scroll cap and visible below the fold. */
.np-person-content,
.np-project-content {
  min-width: 0;
}

/* max-height + overflow-y:auto — cap the body-scroll wrapper on both
   person AND project canonical so long body text doesn't push the
   multimedia strip past the fold. Floor: 600px; `js/body-cap.js` bumps
   up to match the rail-column height when the rail is taller than
   600px. Skipped at ≤880px (mobile stacks single column). `overflow-y:
   auto` also establishes a BFC — needed on person so the .np-person-portrait
   float stays inside its parent (no `display: flow-root` fallback
   needed). Grouped selector reuses one rule for both surfaces;
   body-cap.js targets both wrappers via its CONFIGS table. */
.np-person-body-scroll,
.np-project-body-scroll {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 8px;  /* Space for the scrollbar without content jumping. */
}

/* ---------- Identity + body — portrait floats, body wraps ----------
   Magazine-style layout: portrait floats left with a right + bottom
   margin so position + body prose flow beside it, then wrap below when
   the portrait ends. Fills the content column with actual body length
   rather than leaving an empty gap under the portrait.
   Retired 2026-08-19 (with the read-more/modal flow): .np-person-identity
   flex row + .np-person-intro column wrapper — portrait, position, body
   are now siblings in .np-person-content. */
.np-person-portrait {
  float: left;
  width: 260px;
  aspect-ratio: 1 / 1;
  margin: 0 24px 16px 0;
  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-portrait--placeholder retired 2026-08-06 — migrated to
   template-level `<img>` fallback src in node--person--canonical.html.twig. */
.np-person-position {
  margin: 0 0 14px;
  font-size: 16px; line-height: 1.4;
  font-weight: 600;
  color: #2c2c2b;
}
/* .np-person-summary + .np-person-readmore retired 2026-08-19 — the
   truncated-teaser + "Read more" CTA + modal flow are gone; body renders
   inline in the content column below the identity block. The modal
   shell + JS behaviour remain registered as latent capability but are
   no longer emitted or triggered from the person canonical. */

/* ---------- Full body — rendered inline in the content column ---------- */
/* No max-width cap — body fills the content column so prose aligns
   with the identity-block photo above (2026-10-15). The content
   column itself is already bounded by its parent layout, so lines
   don't get runaway-wide at typical desktop widths. */
.np-person-body {
  margin-top: 24px;
  color: #2c2c2b;
  font-size: 16px;
  line-height: 1.65;
  /* Guard against long URLs / unbreakable tokens blowing out the
     column — wrap mid-token when no natural break opportunity fits. */
  overflow-wrap: anywhere;
}
.np-person-body p {
  margin: 0 0 14px;
}
.np-person-body p:last-child { margin-bottom: 0; }
.np-person-body h2 {
  margin: 24px 0 10px;
  font-size: 20px; font-weight: 700;
  color: #2c2c2b;
}
.np-person-body h3 {
  margin: 20px 0 8px;
  font-size: 17px; font-weight: 700;
  color: #2c2c2b;
}
.np-person-body a {
  color: var(--hue-dk, #2c2c2b);
  text-decoration: underline;
}
.np-person-body ul,
.np-person-body ol { margin: 0 0 14px 1.25rem; }
.np-person-body li { margin-bottom: .375rem; }

/* ---------- 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). */
/* Downloads + related-links moved INSIDE .np-rail-inner 2026-08-19 —
   compact treatment without section labels: shared _attachment-list
   carries file-icon + name + size affordance, shared _link-list carries
   the ↗ arrow on external links — both self-identifying, no need for
   "Tikiake · Downloads" / "Hononga · Related links" labels adding
   vertical footprint. Small top gap separates them from the meta rows
   above; no border-top since they're inside the same box. */
.np-person-rail-files,
.np-person-rail-links {
  margin-top: 14px;
}

/* ---------- Facts rail (right column, sticky at desktop) ---------- */
/* Rail chrome migrated 2026-08-19 per Day 3 — .np-person-rail-inner +
   .np-person-rail-row + .np-person-rail-key + .np-person-rail-value
   retired in favour of the shared .np-rail-inner / .np-rail-row /
   .np-rail-key / .np-rail-value from rail.css (same chrome the
   article / grant / publication rails use). Positioning wrapper
   .np-person-rail below stays. */
.np-person-rail {
  min-width: 0;
}

/* 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;
}

/* 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. */

/* ---------- Related-projects report-tile grid (full-width) ----------
   Full-width sibling of .np-person-layout — the person's PROJECT WORK
   deserves the visual density 3-4 tiles per row gives at container
   width. Each tile is the shared `_report-card` partial (tile chrome
   lives in publication-listing.css; nothing to duplicate here). This
   block supplies the grid CONTAINER only.
   Retired earlier in the same day: the in-content-column placement
   (only 2 tiles per row, felt sparse); the rail-side text-shape card
   list (.np-person-rail-projects et al — §11 refactor). */
.np-person-report-grid {
  margin-top: 40px;
  margin-bottom: 24px;
}
.np-person-report-grid-head {
  margin: 0 0 16px;
  font-size: 20px; font-weight: 700;
  color: #2c2c2b;
}

/* "Ngā Whakaputanga · Publications" curated grid — same section-chrome
   shape as .np-person-report-grid above. Grid layout reuses .np-report-grid
   (see css/views.css); this block only supplies wrapper spacing + heading
   style. Tiles are the shared `_publication-card` partial. */
.np-person-publication-grid {
  margin-top: 40px;
  margin-bottom: 24px;
}
.np-person-publication-grid-head {
  margin: 0 0 16px;
  font-size: 20px; font-weight: 700;
  color: #2c2c2b;
}
/* .np-report-grid moved to css/views.css 2026-08-20 — the project
   canonical's "Ētahi atu · Other projects" grid became its second
   consumer, so it is no longer a person-detail concern. The
   .np-person-report-grid + .np-person-publication-grid wrappers stay here. */

/* ---------- 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 + .np-person-videos wrappers retired 2026-08-19 §13
   — images + videos now render in the combined .np-person-media strip
   inside .np-person-content (see the .np-media-grid + .np-media-tile*
   rules below). The `.np-person-gallery-head` / `.np-person-videos-head`
   full-width-band heading style + section top-border separator are
   retired with them. */
.np-person-stories {
  margin: 8px 0 50px;
}
.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. */

/* Combined multimedia strip (2026-08-19, §13) — 120×120 square tiles
   for images AND videos, in the content column below body. Retired the
   split .np-person-gallery + .np-person-videos treatment: images sat in
   the content column as a 120px strip, videos sat full-width below the
   layout at showcase-tile scale — two visual modes for the same category
   of content. Now they share one strip.
   The 300_x_300px image style (image_scale_and_crop, anchor: center-top)
   keeps portrait faces at the top of the frame server-side; video thumbs
   come from the embedded_video node's own field (external URL, typically
   YouTube's mqdefault or hqdefault — cover-crops the same way).
   Retired here: the `.np-person-content .np-person-gallery-head` and
   `.np-person-content .np-gallery-*` overrides. */
/* Selectors group both `.np-person-content` + `.np-project-content` so
   the combined media strip pattern (docs: combined-media-grid.md)
   shares one set of rules across both surfaces. Person + project both
   want the same compact 120px-square layout with the same play-icon
   overlay treatment — grouped rather than duplicated. Add a third
   consumer's `.np-*-content` scope to the same selectors when it lands. */
.np-person-content .np-person-media-head,
.np-project-content .np-project-media-head {
  font-size: 15px;
  padding-top: 16px;
  margin-bottom: 12px;
}
.np-person-content .np-media-grid,
.np-project-content .np-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  gap: 8px;
  margin-top: 12px;
}
.np-person-content .np-media-tile,
.np-project-content .np-media-tile {
  margin: 0; padding: 0; border: 0;
  background: #f1ece1;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;   /* anchor the play-icon overlay on videos */
}
.np-person-content .np-media-tile img,
.np-project-content .np-media-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.np-person-content .np-media-tile:focus-visible,
.np-project-content .np-media-tile:focus-visible {
  outline: 3px solid var(--hue);
  outline-offset: 2px;
}
/* Play-icon overlay on video tiles. Sits above the thumb with a thin
   scrim so the triangle stays legible against bright backgrounds. */
.np-person-content .np-media-tile-play,
.np-project-content .np-media-tile-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.np-person-content .np-media-tile-play svg,
.np-project-content .np-media-tile-play svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.np-person-content .np-media-tile:hover .np-media-tile-play,
.np-project-content .np-media-tile:hover .np-media-tile-play {
  background: rgba(0, 0, 0, 0.30);
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .np-person-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Mobile order — content-first per D-P3(b) 2026-08-19. Portrait +
     intro + read-more IS the person's identity moment; the rail is
     supplementary. Contrast with grant + article which reverse order
     (rail-first) because their bodies are long prose and the meta is
     scan-first. If user testing shows phone users want person meta
     scan-first, flip to `order: 1` on .np-person-content + `order: 2`
     on .np-person-rail.
     Rail-inner sticky drop is handled by rail.css's own media query. */
}
@media (max-width: 560px) {
  /* Drop the portrait float — text wrap around a smaller portrait crushes
     inline. Portrait becomes a top-of-column block-image; body flows
     below in full column width. */
  .np-person-portrait {
    float: none;
    width: 180px;
    margin: 0 0 16px 0;
  }
}