/* =============================================================
   barrio_npm_prototype — grants Open-calls spotlight
   /grants-filtered (+ ?field_npm_grant_type_target_id=<tid> clusters)

   Chrome markup: templates/content/grants-landing-chrome.html.twig +
   templates/views/_grant-spotlight-card.html.twig. This file only adds the
   grant-specific pieces — hue cascade, per-card cluster tint, status pill,
   closing date; the context band, pills, grid, cards and the tukutuku
   image-fallback covers are all reused from css/patai-spotlight.css.

   Cluster hues are menu-driven (Grant\GrantClusterResolver): the slug is
   the first word of each Manaaki submenu title, lowercased. Unknown/new
   clusters fall back to the Manaaki bronze default below.
   ============================================================= */

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

/* ---------- per-card tint: each card follows its own cluster on the
   unfiltered "all" landing (on a cluster page they all match anyway). ---------- */
.np-spotlight-hero[data-cluster="manaaki"],
.np-spotlight-small[data-cluster="manaaki"]      { --hue: var(--np-grant-manaaki);      --hue-dk: var(--np-grant-manaaki-dk); }
.np-spotlight-hero[data-cluster="research"],
.np-spotlight-small[data-cluster="research"]     { --hue: var(--np-grant-research);     --hue-dk: var(--np-grant-research-dk); }
.np-spotlight-hero[data-cluster="doctoral"],
.np-spotlight-small[data-cluster="doctoral"]     { --hue: var(--np-grant-doctoral);     --hue-dk: var(--np-grant-doctoral-dk); }
.np-spotlight-hero[data-cluster="international"],
.np-spotlight-small[data-cluster="international"] { --hue: var(--np-grant-international); --hue-dk: var(--np-grant-international-dk); }
.np-spotlight-hero[data-cluster="internship"],
.np-spotlight-small[data-cluster="internship"]   { --hue: var(--np-grant-internship);   --hue-dk: var(--np-grant-internship-dk); }
.np-spotlight-hero[data-cluster="whakaaweawe"],
.np-spotlight-small[data-cluster="whakaaweawe"]  { --hue: var(--np-grant-whakaaweawe);  --hue-dk: var(--np-grant-whakaaweawe-dk); }

/* Small-card cover uses the flat --hue like the patai smalls; the hero
   already gradients from --hue-dk → --hue in patai-spotlight.css. */
.np-grant-spotlight .np-spotlight-small .np-ph { background-color: var(--hue); }

/* ---------- cluster pill dots ---------- */
.np-siblings .np-pill[data-cluster="manaaki"]      .np-dot { background: var(--np-grant-manaaki); }
.np-siblings .np-pill[data-cluster="research"]     .np-dot { background: var(--np-grant-research); }
.np-siblings .np-pill[data-cluster="doctoral"]     .np-dot { background: var(--np-grant-doctoral); }
.np-siblings .np-pill[data-cluster="international"] .np-dot { background: var(--np-grant-international); }
.np-siblings .np-pill[data-cluster="internship"]   .np-dot { background: var(--np-grant-internship); }
.np-siblings .np-pill[data-cluster="whakaaweawe"]  .np-dot { background: var(--np-grant-whakaaweawe); }

/* ---------- status pill (Open) — sits centre-right on the media ---------- */
.np-grant-status {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.np-grant-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
}
.np-grant-status[data-s="open"] { background: var(--np-status-open); color: #fff; }
.np-grant-status[data-s="closed"] {
  background: #fff; color: var(--np-status-closed); border: 1px solid #e4e0d8;
}
.np-grant-status[data-s="closed"]::before { background: var(--np-status-closed); }

/* ---------- closing date ---------- */
.np-grant-dates {
  font-size: 12.5px; font-weight: 600; color: #2c2c2b;
}
.np-small-body .np-grant-dates { font-size: 12px; color: #6c675f; }

/* ---------- see-all + empty state ---------- */
.np-see-all {
  font-size: 13px; font-weight: 700;
  color: var(--hue-dk); text-decoration: none;
}
.np-see-all:hover { text-decoration: underline; }
.np-grant-empty { font-size: 14px; color: #6c675f; margin: 0; }
/* =============================================================
   Grants listing (below the spotlight) — teaser cards
   Phase 3A: views-view-list--npm-grants-awards--page-4.html.twig.
   .np-ph / .np-ph--cover / the tukutuku ::before are scoped to
   .np-spotlight-* in patai-spotlight.css, so re-declare the media
   surface here for the teaser context.
   ============================================================= */
.np-grant-listing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 4px 0 8px;
}
.np-grant-teaser {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e4e0d8;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(40,40,40,.05), 0 6px 18px rgba(40,40,40,.06);
  text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.np-grant-teaser:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(40,40,40,.09), 0 16px 44px rgba(40,40,40,.10);
  color: inherit;
}

/* Per-card cluster hue (drives strip + accents + cover tint). */
.np-grant-teaser[data-cluster="manaaki"]      { --hue: var(--np-grant-manaaki);      --hue-dk: var(--np-grant-manaaki-dk); }
.np-grant-teaser[data-cluster="research"]     { --hue: var(--np-grant-research);     --hue-dk: var(--np-grant-research-dk); }
.np-grant-teaser[data-cluster="doctoral"]     { --hue: var(--np-grant-doctoral);     --hue-dk: var(--np-grant-doctoral-dk); }
.np-grant-teaser[data-cluster="international"] { --hue: var(--np-grant-international); --hue-dk: var(--np-grant-international-dk); }
.np-grant-teaser[data-cluster="internship"]   { --hue: var(--np-grant-internship);   --hue-dk: var(--np-grant-internship-dk); }
.np-grant-teaser[data-cluster="whakaaweawe"]  { --hue: var(--np-grant-whakaaweawe);  --hue-dk: var(--np-grant-whakaaweawe-dk); }

.np-grant-teaser-strip { height: 5px; background: var(--hue); }

/* media surface — photo window, or compact tukutuku cover when no image. */
.np-grant-teaser .np-ph {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--hue-dk), var(--hue));
  background-size: cover; background-position: center;
}
.np-grant-teaser .np-ph::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: 0; pointer-events: none;
}
.np-grant-teaser .np-ph--cover {
  aspect-ratio: auto; display: flex; align-items: center; padding: 14px 16px;
}
.np-grant-teaser .np-ph--cover::before { opacity: .2; }
.np-grant-teaser .np-cover-word { font-size: 15px; }

.np-grant-teaser-body {
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.np-grant-teaser-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--hue-dk);
}
.np-grant-teaser h3 {
  font-weight: 700; font-size: 16px; line-height: 1.25; margin: 0; color: #2c2c2b;
}
.np-grant-teaser-summary {
  font-size: 13px; line-height: 1.45; color: #6c675f;
  /* Clamp to keep listing cards uniform (bodySummary() caps the text ~360). */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-grant-teaser-cta {
  margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--hue-dk);
}

/* =============================================================
   Grant tile → modal (mini-detail overlay). Structural parallel of the
   announcement modal (article-listing.css §modal). One shared
   #np-grant-modal Bootstrap dialog with a slot; each tile carries an
   inert <template> with its own payload cloned in on show.
   ============================================================= */

/* Per-cluster hue cascade on the modal content wrapper — same six
   clusters as the tile / spotlight, driven by data-cluster. Consumed
   by the shared .np-ph gradient (patai-spotlight.css) + local
   cta/kicker/link rules. */
.np-grant-modal-content {
  --hue:    var(--np-grant-manaaki);
  --hue-dk: var(--np-grant-manaaki-dk);
}
.np-grant-modal-content[data-cluster="research"]     { --hue: var(--np-grant-research);     --hue-dk: var(--np-grant-research-dk); }
.np-grant-modal-content[data-cluster="doctoral"]     { --hue: var(--np-grant-doctoral);     --hue-dk: var(--np-grant-doctoral-dk); }
.np-grant-modal-content[data-cluster="international"] { --hue: var(--np-grant-international); --hue-dk: var(--np-grant-international-dk); }
.np-grant-modal-content[data-cluster="internship"]   { --hue: var(--np-grant-internship);   --hue-dk: var(--np-grant-internship-dk); }
.np-grant-modal-content[data-cluster="whakaaweawe"]  { --hue: var(--np-grant-whakaaweawe);  --hue-dk: var(--np-grant-whakaaweawe-dk); }

/* Close X — overlaid on the tukutuku band top-right, replacing the
   removed .modal-header slot. Mirror of .np-article-modal-close in
   article-listing.css (same visual chrome; separate rule for now, DRY
   later if a third modal appears). */
.np-grant-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  padding: 10px;
  background-color: rgba(0, 0, 0, .35);
  background-size: 12px;
  border-radius: 50%;
  opacity: 1;
}
.np-grant-modal-close:hover,
.np-grant-modal-close:focus {
  background-color: rgba(0, 0, 0, .55);
  opacity: 1;
}

/* Top band — shares .np-ph chrome with the spotlight hero + article
   modal (rules in patai-spotlight.css). Modal-scoped fit tweaks:
     - 21/9 aspect ratio so the band reads as chrome without eating
       the modal body.
     - Bleed to .modal-body edges.
     - Round only top corners to match .modal-content radius. */
.np-grant-modal-ph {
  aspect-ratio: 21 / 9;
  margin: -1rem -1rem 1.25rem;
  border-radius: 6px 6px 0 0;
}
.np-grant-modal-ph.np-ph--cover { aspect-ratio: auto; }
.np-grant-modal-ph .np-cover-word { font-size: 18px; }

/* ---------- modal body typography ---------- */

.np-grant-modal-kicker {
  display: inline-block;
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--hue-dk);
  margin-bottom: .5rem;
}
.np-grant-modal-title {
  margin: 0 0 .75rem;
  font-size: 1.75rem; line-height: 1.25; font-weight: 700;
  color: #2c2c2b;
}
.np-grant-modal-dates {
  margin: 0 0 1.25rem;
  font-size: .95rem; color: #6c675f; font-weight: 600;
}
.np-grant-modal-body {
  font-size: 1rem; line-height: 1.6;
  color: #2c2c2b;
  margin-bottom: 1.5rem;
}
.np-grant-modal-body p { margin: 0 0 .875rem; }
.np-grant-modal-body a { color: var(--hue-dk); text-decoration: underline; }
.np-grant-modal-body img { max-width: 100%; height: auto; margin: .75rem 0; border-radius: 4px; }

/* Apply CTA row — two-button when the grant has attached files (Apply
   primary + Documents outlined), single-button when it doesn't. Flex
   layout so the buttons sit side-by-side and wrap on narrow modals. */
.np-grant-modal-cta-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.np-grant-modal-cta {
  display: inline-block;
  padding: 10px 20px;
  background: var(--hue-dk);
  color: #fff;
  border-radius: 6px;
  font-weight: 700; font-size: .95rem;
  text-decoration: none;
}
.np-grant-modal-cta:hover,
.np-grant-modal-cta:focus {
  background: var(--hue);
  color: #fff;
  text-decoration: none;
}

/* Documents CTA — outlined secondary next to the primary Apply. Same
   idea as the row-tile "Upcoming" pill: white bg + cluster border/text
   so the primary Apply CTA stays visually dominant. In-modal anchor
   (#np-grant-modal-files) so a scrollable modal jumps to the files
   section below; a no-op when the modal fits without scroll. */
.np-grant-modal-cta--download {
  background: #fff;
  color: var(--hue-dk);
  border: 1px solid var(--hue-dk);
  padding: 9px 19px; /* compensate for 1px border so heights match Apply */
}
.np-grant-modal-cta--download:hover,
.np-grant-modal-cta--download:focus {
  background: var(--hue-dk);
  color: #fff;
}

/* Inline files section — sits between the CTA row and the "View full
   page" footer link. Compact heading + the shared _attachment-list
   chrome (reused unchanged). */
.np-grant-modal-files {
  margin: 0 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e4e0d8;
}
.np-grant-modal-files-head {
  margin: 0 0 .5rem;
  font-size: .95rem; font-weight: 700;
  color: var(--hue-dk);
}

.np-grant-modal-detail-link {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #e4e0d8;
}
.np-grant-modal-detail-link a {
  color: var(--hue-dk);
  font-weight: 600;
  text-decoration: none;
}
.np-grant-modal-detail-link a:hover { text-decoration: underline; }