/* =============================================================
   barrio_npm_prototype — grant canonical detail page
   templates/content/node--npm-grant--canonical.html.twig

   Two-column detail (content 2fr / rail 1fr) under a tukutuku top band
   matching the tile / modal chrome the user just clicked through. Cluster
   hue cascade via data-cluster on the wrapper, mapping the six clusters
   from colors.css --np-grant-* tokens onto --hue / --hue-dk.

   Reuses:
     - .np-ph chrome (base gradient + tukutuku pattern) from
       patai-spotlight.css (fifth selector: .np-grant-detail .np-ph).
     - .np-grant-status pill from grants-spotlight.css.
     - .np-rail-inner / .np-rail-row / .np-rail-key / .np-rail-value /
       .np-type-badge / .np-browse-back from rail.css (same shared
       chrome publication + project + person detail use).
   ============================================================= */

/* ---------- hue cascade ---------- */
.np-grant-detail {
  --hue:    var(--np-grant-manaaki);
  --hue-dk: var(--np-grant-manaaki-dk);
}
.np-grant-detail[data-cluster="research"]     { --hue: var(--np-grant-research);     --hue-dk: var(--np-grant-research-dk); }
.np-grant-detail[data-cluster="doctoral"]     { --hue: var(--np-grant-doctoral);     --hue-dk: var(--np-grant-doctoral-dk); }
.np-grant-detail[data-cluster="international"] { --hue: var(--np-grant-international); --hue-dk: var(--np-grant-international-dk); }
.np-grant-detail[data-cluster="internship"]   { --hue: var(--np-grant-internship);   --hue-dk: var(--np-grant-internship-dk); }
.np-grant-detail[data-cluster="whakaaweawe"]  { --hue: var(--np-grant-whakaaweawe);  --hue-dk: var(--np-grant-whakaaweawe-dk); }

/* .np-grant-detail-ph (tukutuku top band) retired 2026-08-19 per Day 2 —
   cluster identity now carried by the .np-hero meta type chip's hue dot,
   and status by the meta status chip's green/red dot. Associated rules
   removed: .np-grant-detail-ph, .np-grant-detail-ph.np-ph--cover,
   .np-grant-detail-ph .np-cover-word. Reintroduce as a hero-image slot
   inside .np-hero__head if editorial needs a decorative image band. */

/* .np-grant-detail-head retired 2026-08-19 per Day 2 of
   node-header-unification-plan.md — kicker + h1 + close-date now render
   in the shared .np-hero via preprocess_page. Associated rules removed:
   .np-grant-detail-head, .np-grant-detail-kicker, .np-grant-detail-kicker-sep,
   .np-grant-detail-title, .np-grant-detail-dates. */

/* ---------- two-column layout ---------- */
/* Post-Day-2: self-contained content card. Both the .np-grant-detail-head
   header (retired earlier) and the .np-grant-detail-ph tukutuku top band
   (retired in the same pass) used to sit above this; now it opens directly
   under the .np-hero. */
.np-grant-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #e4e0d8;
  border-radius: 8px;
  margin-block: 1.5rem 2rem;
}

/* ---------- content column ---------- */
.np-grant-detail-content {
  min-width: 0;
}
/* .np-grant-detail-apply-row (body-column CTA wrapper) retired 2026-08-19
   — the CTA moved to the rail column. .np-grant-detail-apply itself stays
   as the pill's own styling. */
.np-grant-detail-apply {
  display: block;
  padding: 12px 22px;
  background: var(--hue-dk);
  color: #fff;
  border-radius: 6px;
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
  text-align: center;
}
.np-grant-detail-apply:hover,
.np-grant-detail-apply:focus {
  background: var(--hue);
  color: #fff;
  text-decoration: none;
}

.np-grant-detail-body {
  font-size: 1rem; line-height: 1.65;
  color: #2c2c2b;
  margin-bottom: 1.5rem;
}
.np-grant-detail-body p { margin: 0 0 1rem; }
.np-grant-detail-body h2 {
  margin: 1.5rem 0 .75rem;
  font-size: 1.25rem; font-weight: 700;
  color: #2c2c2b;
}
.np-grant-detail-body h3 {
  margin: 1.25rem 0 .5rem;
  font-size: 1.05rem; font-weight: 700;
  color: #2c2c2b;
}
.np-grant-detail-body a { color: var(--hue-dk); text-decoration: underline; }
.np-grant-detail-body ul,
.np-grant-detail-body ol { margin: 0 0 1rem 1.25rem; }
.np-grant-detail-body li { margin-bottom: .375rem; }

.np-grant-detail-files {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e4e0d8;
}
.np-grant-detail-files-head {
  margin: 0 0 .75rem;
  font-size: 1.125rem; font-weight: 700;
  color: var(--hue-dk);
}

/* ---------- facts rail ---------- */

/* Positioning wrapper only — the visible frame (background, border,
   accent-topped) comes from .np-rail-inner in rail.css, which is the
   shared chrome the publication / arotahi / newsletter / e_panui rails
   also apply. Matches the .np-featured-publication-rail pattern in
   detail.css. The .np-rail-inner top accent picks up --hue from our
   [data-cluster] cascade automatically. */
.np-grant-detail-rail {
  min-width: 0;
  align-self: start;
}
.np-grant-detail-rail .np-type-badge {
  background: var(--hue-dk);
  color: #fff;
}

/* Inline status pill inside the rail — smaller, static (the band uses
   the tile's absolute-positioned .np-grant-status). */
.np-grant-status--inline {
  position: static;
  padding: 3px 10px;
  font-size: 10.5px;
}

/* .np-grant-detail-rail-link (secondary Tono · Apply compact link inside
   .np-rail-inner) retired 2026-08-19 — the primary Apply CTA below the
   box makes the compact rail link redundant. */

/* Primary Apply CTA wrapper — sits between .np-rail-inner (meta box) and
   .np-grant-detail-files (downloads) inside the rail column. Same
   top-border separator idiom as the files block below so the three
   elements form a coherent action group. */
.np-grant-detail-rail-apply-row {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e4e0d8;
}
/* "Tono · Apply online" label above the button — reuses .np-rail-key
   small-caps treatment from rail.css so the label matches the meta box's
   row keys above (Tūnga · Status, Wā katinga · Closes). Block-level with
   a small gap to the button below. */
.np-grant-detail-rail-apply-key {
  display: block;
  margin-bottom: 8px;
}
/* When the Apply CTA is present, the files block sits directly under it
   without its own separator (the CTA already provides one above). */
.np-grant-detail-rail-apply-row + .np-grant-detail-files {
  margin-top: 1.25rem;
  padding-top: 0;
  border-top: none;
}

/* Back link: reuses .np-browse-back from rail.css; only the accent tint
   varies by cluster. */
.np-grant-detail-rail .np-browse-back {
  color: var(--hue-dk);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .np-grant-detail-layout {
    grid-template-columns: 1fr;
  }
  /* Mobile-first meta-first: reverse column visual order so phone users
     see the meta rail (status, close date, back-link) + Apply CTA +
     files BEFORE the body prose. Time-sensitive action-first pattern —
     for a grant the "closing soon, apply now, download the PDF" facts
     are what users came for; the body narrative is supporting context.
     Screen-reader DOM order (body → rail) stays semantically
     defensible since the body is self-contained prose about the grant.
     Two stale rules (.np-grant-detail-ph aspect-ratio +
     .np-grant-detail-title font-size) retired here 2026-08-19 with
     Day 2 — both classes are gone from the DOM now. */
  .np-grant-detail-content { order: 2; }
  .np-grant-detail-rail    { order: 1; }
}