/* =============================================================
   barrio_npm_prototype — Facts rail chrome (shared)
   The accent-topped .np-rail-inner box + badges / rows / classification /
   browse-back + the related-researcher / related-story cards. Shared by the
   project, featured-publication and arotahi rails.
   (Extracted from project-detail.css.)
   ============================================================= */

/* Shared rail chrome — the accent-topped facts box. Used by the project rail
   and the featured-publication / arotahi rails (both apply .np-rail-inner). The
   --hue fallback covers pages with no pātai hue (publications / arotahi). */
.np-rail-inner {
  top: 24px;
  background: #faf8f3;
  border: 1px solid #e4e0d8;
  border-top: 4px solid var(--hue, #6c675f);
  border-radius: 8px;
  padding: 20px 22px 22px;
  font-size: 13.5px;
}

.np-rail-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.np-rail-badges .np-type-badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 5px;
  color: #fff;
  background: #6c675f;
}
.np-rail-badges .np-type-badge[data-t="full"]       { background: var(--np-pt-full); }
.np-rail-badges .np-type-badge[data-t="scoping"]    { background: var(--np-pt-scoping-dk); }
.np-rail-badges .np-type-badge[data-t="doctoral"]   { background: var(--np-pt-doctoral); }
.np-rail-badges .np-type-badge[data-t="internship"] { background: var(--np-pt-internship); }
.np-rail-badges .np-type-badge[data-t="programme"]  { background: var(--np-pt-programme); }
.np-rail-badges .np-feat-pill {
  background: #fff;
  border: 1px solid #e4e0d8;
}

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

/* Matakitenga classification list — Pātai (linked) + Pae chips. */
.np-rail-classification {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.np-rail-classification li {
  display: inline-flex; align-items: center; gap: 8px;
}
.np-rail-classification a {
  display: inline-flex; align-items: center; gap: 8px;
  color: #2c2c2b;
  text-decoration: none;
  font-weight: 600;
}
.np-rail-classification a:hover { color: var(--hue-dk); text-decoration: underline; }
.np-rail-classification .np-dot {
  width: 11px; height: 11px;
}

/* Browse-back link at rail bottom. */
.np-browse-back {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--hue-dk);
  text-decoration: none;
}
.np-browse-back:hover { text-decoration: underline; }

/* ---------- Rail: related researchers + related stories blocks ----------
   Two sibling cards below `.np-project-rail-inner` (NOT rows inside it).
   The inner facts card stays sticky as the user scrolls; these
   secondary cards scroll naturally underneath. Both mirror the inner
   card's chrome (white-band bg, border, Pātai-hued top accent, padding,
   rounded corners) so the rail reads as three stacked cards rather
   than one long ribbon. Hue cascade flows in from .np-project-detail's
   [data-patai] attribute one level up.

   Researchers + stories use parallel class names (.np-related-researcher*
   / .np-related-story*) but share most of their CSS via grouped
   selectors. The researcher card adds one extra row per item — the
   meta line carrying indigenous-affiliations / position / organisation
   between title and body. */
.np-project-rail-researchers,
.np-project-rail-stories {
  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-rail-researchers-head,
.np-rail-stories-head {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6c675f;
}

/* Item rows inside each card — vertical list with thin dividers
   between items: square thumbnail (150_x_150px image style, rendered
   at 56px CSS) + text column. Items with no thumbnail render the text
   column at full width; items with no body render title (+ meta for
   researchers) only — graceful degrade rather than dropping the row.
   The whole row is one <a> so the click target is forgiving. */
.np-related-researchers,
.np-related-stories {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.np-related-researcher,
.np-related-story {
  border-top: 1px solid #e4e0d8;
  padding-top: 10px;
  margin-top: 10px;
}
.np-related-researcher:first-child,
.np-related-story:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.np-related-researcher-link,
.np-related-story-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
  color: #2c2c2b;
  transition: color .15s;
}
.np-related-researcher-link:hover,
.np-related-story-link:hover {
  color: var(--hue-dk);
}
.np-related-researcher-link:hover .np-related-researcher-title,
.np-related-story-link:hover .np-related-story-title {
  text-decoration: underline;
}
.np-related-researcher-img,
.np-related-story-img {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1ece1;
}
.np-related-researcher-img img,
.np-related-story-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Text column — flex column stacks title, (meta), body. flex: 1 so it
   absorbs the remaining width next to the thumbnail. */
.np-related-researcher-text,
.np-related-story-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.np-related-researcher-title,
.np-related-story-title {
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 600;
}
.np-related-researcher-body,
.np-related-story-body {
  font-size: 12px;
  line-height: 1.4;
  color: #6c675f;
  font-weight: 400;
}
/* Meta line — researcher-only. Sits between title and body, picks up
   the Pātai-dark hue so it reads as a distinct identity surface (the
   first populated of indigenous_affiliations / position / organisation).
   Bold weight + hue colour make this the prominent secondary line on
   the row; the body teaser below stays muted as supplementary detail. */
.np-related-researcher-meta {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--hue-dk);
}

/* Rail box drops sticky at mobile (moved here with the chrome). */
@media (max-width: 880px) {
  .np-rail-inner {
    position: static;  /* drop sticky at mobile */
  }
}