/* =============================================================
   barrio_npm_prototype — project detail page
   /project/<machine-name> (node + bundle=project, canonical route)
   Phases 1 + 2 of prototypes/project-detail-by-patai.html — covers:
     · Pātai-hued title band with niho pattern
     · Two-column layout (content + facts rail at desktop;
       stacks at 880px)
     · Hero with type badge + featured pill overlay
     · Body + pull quote
     · Downloads section (icon + name + size rows)
     · Related links section (name + ↗ rows)
     · Rail rows: Matakitenga, Wā timeline, Whare wānanga host,
       Kaiārahi lead, Kaupapa programme
     · Browse-back link
   Phase 3 (deferred): breadcrumb, project code, accessibility audit.

   Shared chrome extracted out of this file: css/rail.css (the facts-rail box +
   related cards) and css/{researcher,story,video}-modal.css (the modals).
   ============================================================= */

/* Hue cascade — outer wrapper carries data-patai="<slug>" so --hue and
   --hue-dk reach every coloured surface on the page. Same pattern as
   .np-patai-spotlight on the listing pages. */
.np-project-detail {
  --hue:    #6c675f;
  --hue-dk: #2c2c2b;
}
.np-project-detail[data-patai="puawai"] { --hue: var(--np-patai-puawai); --hue-dk: var(--np-patai-puawai-dk); }
.np-project-detail[data-patai="mauri"]  { --hue: var(--np-patai-mauri);  --hue-dk: var(--np-patai-mauri-dk); }
.np-project-detail[data-patai="whanau"] { --hue: var(--np-patai-whanau); --hue-dk: var(--np-patai-whanau-dk); }
.np-project-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 pattern SVG
   is positioned with low opacity over the background colour, evoking
   the same chevron motif used elsewhere in the theme. */
.np-project-band {
  position: relative; overflow: hidden;
  background: #f1ece1;
  border-top: 6px solid var(--hue);
  border-bottom: 1px solid #e4e0d8;
  margin-bottom: 24px;
}
.np-band-pattern {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.7;
  pointer-events: none;
}
.np-project-band-inner {
  position: relative;
  padding: 36px 0;
}
.np-band-kicker {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--hue-dk);
  margin-bottom: 8px;
}
.np-project-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 so the metadata is
   immediately visible (prototype's behaviour). */
.np-project-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 50px;
}

/* ---------- Content column ---------- */
.np-project-content {
  min-width: 0;  /* prevent grid blowout on long titles in body */
}

/* Hero image / placeholder block. */
.np-project-hero {
  position: relative;
  background: linear-gradient(135deg, var(--hue-dk), var(--hue));
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
  /* No image → compact tukutuku cover strip. Most project pages have no
     featured image, so the full 16/9 band wasted crucial content space;
     the .np-project-hero--image modifier restores the photo window. Mirrors
     the card image-fallback (.np-ph--cover in patai-spotlight.css). */
  display: flex;
  align-items: center;
  padding: 14px 18px;
}
.np-project-hero--image {
  display: block;
  padding: 0;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
/* Tukutuku frieze — the theme's own pattern over the hue. Shown on the
   cover, hidden over a real photo (replaces the old 45° stripe). */
.np-project-hero::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: .2;
  pointer-events: none;
}
.np-project-hero--image::before { opacity: 0; }
.np-project-hero-badges {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px;
  z-index: 1;
}
/* Over a photo the badges overlay the bottom-left; on the compact cover
   they sit in-flow inside the strip. */
.np-project-hero--image .np-project-hero-badges {
  position: absolute;
  bottom: 16px; left: 16px;
}
.np-project-hero-badges .np-type-badge {
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 5px;
  color: #fff;
  background: #6c675f;
}
.np-project-hero-badges .np-type-badge[data-t="full"]       { background: var(--np-pt-full); }
.np-project-hero-badges .np-type-badge[data-t="scoping"]    { background: var(--np-pt-scoping-dk); }
.np-project-hero-badges .np-type-badge[data-t="doctoral"]   { background: var(--np-pt-doctoral); }
.np-project-hero-badges .np-type-badge[data-t="internship"] { background: var(--np-pt-internship); }
.np-project-hero-badges .np-type-badge[data-t="programme"]  { background: var(--np-pt-programme); }

.np-feat-pill {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--hue-dk);
  border: 1px solid rgba(255,255,255,.55);
}

/* Body — typography for the rendered field text. */
.np-project-body {
  font-size: 15.5px; line-height: 1.65;
  color: #2c2c2b;
}
.np-project-body h2 {
  font-weight: 600; font-size: 22px;
  line-height: 1.2;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--hue);
  color: #2c2c2b;
}
.np-project-body h3 { font-weight: 600; font-size: 18px; margin: 26px 0 8px; }
.np-project-body p { margin: 0 0 16px; }
.np-project-body p:last-child { margin-bottom: 0; }
.np-project-body a { color: var(--hue-dk); }
.np-project-body a:hover { text-decoration: underline; }
.np-project-body ul, .np-project-body ol {
  margin: 0 0 16px; padding-left: 24px;
}
.np-project-body li { margin-bottom: 6px; }

/* Pull quote — italic block with Pātai-hued left rule. */
.np-project-quote {
  font-style: italic;
  font-size: 18px; line-height: 1.55;
  color: #2c2c2b;
  padding: 6px 0 6px 18px;
  border-left: 4px solid var(--hue);
  margin: 28px 0;
}
.np-project-quote p { margin: 0 0 8px; }
.np-project-quote p:last-child { margin-bottom: 0; }
.np-project-quote cite {
  display: block; font-style: normal;
  font-size: 13px;
  color: #6c675f;
  margin-top: 8px;
}

/* ---------- Facts rail (right column) ---------- */
.np-project-rail {
  min-width: 0;
}
/* The shared rail chrome (.np-rail-* box + badges / rows / classification) and
   the related-researcher / related-story cards moved to css/rail.css — shared
   with the featured-publication + arotahi rails. */

/* ---------- Gallery (content column) ----------
   Multi-value field_image rendered as a flexible CSS Grid. Auto-fit
   handles 3+ cleanly (column count flexes with viewport); count-based
   overrides reshape the 1- and 2-image cases that auto-fit handles
   awkwardly. Image style 400_x_300_px scale-and-crops uploads to a
   uniform 4:3 thumbnail; object-fit: cover keeps the cells consistent
   when the source isn't already that ratio. */
.np-project-gallery {
  margin: 28px 0 0;
}
.np-project-gallery h3 {
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 10px;
  color: #2c2c2b;
}
/* The gallery grid + items + count-based sizing + lightbox modal moved to
   the shared css/image-grid.css component (see _image-grid.html.twig +
   _gallery-modal.html.twig). Only the .np-project-gallery wrapper + heading
   stay here (project-owned framing). */

/* ---------- Downloads + related-links sections (content column) ----------
   Both follow the same structural pattern: <section> wrapper with an
   <h3>, then an unstyled <ul> with one <li> per entry. Shared rules
   live in the combined selectors; per-row content differences split
   into the family-specific blocks below. */
.np-project-downloads,
.np-project-links {
  margin: 28px 0 0;
}
.np-project-downloads h3,
.np-project-links h3 {
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 10px;
  color: #2c2c2b;
}
.np-dl-list,
.np-link-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.np-dl-list li,
.np-link-list li {
  border-top: 1px solid #e4e0d8;
}
.np-dl-list li:first-child,
.np-link-list li:first-child {
  border-top: 0;
}
.np-dl-list a,
.np-link-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px;
  text-decoration: none;
  color: #2c2c2b;
  transition: background .15s;
}
.np-dl-list a:hover,
.np-link-list a:hover {
  background: #faf8f3;
  color: var(--hue-dk);
}

/* Download rows moved to the shared .np-file list (_attachment-list.html.twig,
   styled in detail.css) — the old .np-dl-ic/nm/sz row styles were
   retired with that swap. .np-dl-list here now only serves .np-link-list. */

/* Related-link row — title + ↗ external indicator. */
.np-link-list .np-link-nm {
  flex: 1;
  font-size: 14px; font-weight: 600;
  color: var(--hue-dk);
}
.np-link-list .np-link-ext {
  color: #6c675f;
  font-size: 14px;
}

/* The gallery lightbox modal (.np-gallery-modal*) moved to the shared
   css/image-grid.css component (see _gallery-modal.html.twig). */



/* ---------- Videos grid (content column) ----------
   field_related_videos rendered as a click-to-expand thumbnail grid
   above the image gallery. Same auto-fit-grid + count-overrides
   pattern as .np-project-gallery for visual rhythm; thumbnail comes
   through the same 400_x_300_px style. Each cell is a <button> for
   keyboard/screen-reader affordance — clicking opens #np-video-modal
   which iframe-src-swaps to the embed URL.

   Differences from the gallery: a play-button overlay marks each
   cell as video content, and a title below the thumbnail labels the
   video (videos benefit from naming far more than images do). */
.np-project-videos {
  margin: 28px 0 0;
}
.np-project-videos h3 {
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 10px;
  color: #2c2c2b;
}
/* The video grid + cards + count-based sizing moved to the shared
   css/video-grid.css component (see _video-grid.html.twig). Only the
   .np-project-videos wrapper + heading stay here (project-owned framing). */

/* The researcher, story + video modals moved to css/researcher-modal.css,
   css/story-modal.css, css/video-modal.css — shared modal chrome, also used on
   person pages and /replay-media. */

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .np-project-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Rail moves ABOVE content — prototype's mobile behaviour. */
  .np-project-rail {
    order: -1;
  }
}
@media (max-width: 560px) {
  .np-project-band-inner { padding: 26px 0; }
  .np-project-hero--image { aspect-ratio: 4 / 3; }
  /* (The single-gallery-image phone override moved to css/image-grid.css.) */
}