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

/* ---------- top band ---------- */
.np-grant-detail-ph {
  aspect-ratio: 24 / 9;
  border-radius: 8px 8px 0 0;
  margin-top: 1.25rem;
}
.np-grant-detail-ph.np-ph--cover { aspect-ratio: auto; }
.np-grant-detail-ph .np-cover-word { font-size: 22px; }

/* ---------- header block ---------- */
.np-grant-detail-head {
  padding: 1.25rem 1.5rem 0;
  border-inline: 1px solid #e4e0d8;
  background: #fff;
}
.np-grant-detail-kicker {
  display: inline-block;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--hue-dk);
  margin-bottom: .25rem;
}
.np-grant-detail-kicker-sep { color: #b8b0a5; font-weight: 400; }
.np-grant-detail-title {
  margin: 0 0 .75rem;
  font-size: 2rem; line-height: 1.2; font-weight: 700;
  color: #2c2c2b;
}
.np-grant-detail-dates {
  margin: 0;
  font-size: 1rem; color: #6c675f;
}
.np-grant-detail-dates strong { color: #2c2c2b; }

/* ---------- two-column layout ---------- */
.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: 0 0 8px 8px;
  border-top: none;
  margin-bottom: 2rem;
}

/* ---------- content column ---------- */
.np-grant-detail-content {
  min-width: 0;
}
.np-grant-detail-apply-row {
  margin: 0 0 1.25rem;
}
.np-grant-detail-apply {
  display: inline-block;
  padding: 12px 22px;
  background: var(--hue-dk);
  color: #fff;
  border-radius: 6px;
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
}
.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 {
  color: var(--hue-dk);
  font-weight: 700;
  text-decoration: none;
}
.np-grant-detail-rail-link:hover,
.np-grant-detail-rail-link:focus {
  text-decoration: underline;
  color: var(--hue-dk);
}

/* 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;
  }
  .np-grant-detail-ph { aspect-ratio: 21 / 9; }
  .np-grant-detail-title { font-size: 1.5rem; }
}