/* =============================================================
   barrio_npm_prototype — landing submenu (spotlight cards)

   The <div id="submenu"> block on landing/section pages
   (menu--main--landing.html.twig): a grid of L2 "spotlight" cards — a coloured
   header band (per-L2 --cluster-hue gradient + tukutuku frieze + bullet +
   title) over a white body (description + browse cue). L3 children reuse the
   same band treatment in the parent's hue: full mini-cards in the desktop
   active-row, compact band strips inline on mobile.

   HUE: one knob, --cluster-hue. Per-L2 colours come from
   css/landing-submenu-groups.css (name-based np-landing-group--<slug>, loaded
   after this file so it overrides); un-coloured items fall back to the single
   dark neutral set below. L3 carries its PARENT's np-landing-group--<slug>, so
   its band inherits the parent's hue. Everything (band gradient, active tint)
   derives from --cluster-hue via color-mix().

   Extracted from proto.css and restyled to the spotlight look — see
   landing-submenu-spotlight-restyle-plan.md (+ landing-submenu-color-groups-plan.md).
   ============================================================= */

.np-landing-submenu {
  margin: 2rem 0;
}

/* L2 cards fill the container (`1fr` max). Deliberately uncapped even
   though the L3 active-row below is small-N capped — L2 is the primary
   section-nav band and should establish the full container width; L3 is
   secondary drill-down that sits narrower and inset below. auto-fill
   keeps empty tracks on the wrap row so a lone orphan card stays at
   column width instead of stretching edge-to-edge. */
.np-landing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1rem;
}

/* Hue fallback — a single dark neutral ("awaiting colour") so every band stays
   legible with white text. Seeded groups override via
   css/landing-submenu-groups.css (specificity (0,2,0), loaded after). Replaces
   the old :nth-child blue/beige parity (restyle plan D-1). */
.np-landing-item { --cluster-hue: #6c675f; }

/* ---------- L2 spotlight card ---------- */
.np-landing-item--parent {
  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);
  transition: box-shadow .18s ease, transform .18s ease;
}
.np-landing-item--parent:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(40, 40, 40, .09), 0 16px 44px rgba(40, 40, 40, .10);
}

.np-landing-link {
  display: block;
  text-decoration: none;
  color: #1a1a1a;
}
.np-landing-item--parent > .np-landing-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Header band — hue gradient + tukutuku frieze + bullet + title. */
.np-landing-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.1rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cluster-hue), black 18%), var(--cluster-hue));
  overflow: hidden;
}
.np-landing-head::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 260%;
  opacity: .18;
  pointer-events: none;
}
.np-landing-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}
.np-landing-head .np-landing-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

/* White body — description only. The browse cue (→) stopped being its own
   element 2026-08-15 (it cost ~26px of height per card); it is now appended
   INLINE to the end of the description — see .np-landing-desc::after. `gap` is
   retained because the body is still a flex column and may take a second
   child again. */
.np-landing-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  padding: .85rem 1.1rem 1rem;
}

/* ---------- Full-bleed browse-axis cards (2026-08-15) ----------
   The three "Browse by …" tiles on /research/landing are the page's primary
   CTAs and were reading as peers of the destination tiles below them. Colour
   alone did not separate them, because everything on the page is coloured;
   they are a different CLASS of thing (an axis you browse along, not a place
   you land), so they are differentiated by weight — the hue runs across the
   whole card instead of just the header band.

   Keyed on the three group slugs. A FOURTH browse axis must be added here as
   well as to the hue seed in css/landing-submenu-groups.css — there is no
   generic "is a browse axis" class to hook, because group classes are derived
   from menu titles.

   The head's own gradient is cleared so the card reads as one continuous
   field rather than a band over a block of the same colour. */
.np-landing-item--parent.np-landing-group--browse-by-patai,
.np-landing-item--parent.np-landing-group--browse-by-pae,
.np-landing-item--parent.np-landing-group--browse-by-type {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cluster-hue), black 18%), var(--cluster-hue));
  border-color: color-mix(in srgb, var(--cluster-hue), black 28%);
}
.np-landing-item--parent.np-landing-group--browse-by-patai .np-landing-head,
.np-landing-item--parent.np-landing-group--browse-by-pae .np-landing-head,
.np-landing-item--parent.np-landing-group--browse-by-type .np-landing-head {
  background: none;
}
/* Description sits on the hue now, so it needs light text — the default is a
   muted grey tuned for the white body. */
.np-landing-item--parent.np-landing-group--browse-by-patai .np-landing-desc,
.np-landing-item--parent.np-landing-group--browse-by-pae .np-landing-desc,
.np-landing-item--parent.np-landing-group--browse-by-type .np-landing-desc {
  color: rgba(255, 255, 255, .92);
}
/* The inline cue's default colour is the hue darkened — invisible on the hue
   itself. Full white so it stays the strongest mark on the card. */
.np-landing-item--parent.np-landing-group--browse-by-patai .np-landing-desc::after,
.np-landing-item--parent.np-landing-group--browse-by-pae .np-landing-desc::after,
.np-landing-item--parent.np-landing-group--browse-by-type .np-landing-desc::after {
  /* Action cue: "Go →" appended to the description (TWN, 2026-08-20).
     These three cards carry a PROSE description, and a bare arrow at the
     end of a sentence reads as punctuation rather than as a link — the
     affordance the base cue below loses on long text but keeps on short
     labels. A word converts the glyph into a label.

     Three attempts, in order, each settled by looking at the page:

       1. A larger arrow pinned right in the head band (f2ecd4e7).
          Wordless — so language-neutral and needing no exceptions list —
          but hard to see, competing with the pattern image at the card's
          right edge, and adding no affordance. Reverted.
          Lesson: the WORD does the work, not the glyph's size or position.
       2. "More →" (0762c832). Read well; only English-only string here.
       3. "Haere · Go →" (c502435d) — the site's mi · en pair, matching
          the separator rule in documentation/title-case-guideline.md §2.
          Correct by convention, too long in practice: the cue is one
          unbreakable unit, and at ~12 characters it pushed the card to
          an extra line. Reverted.

     So: "Go" — two characters, the shortest wording that still labels
     the arrow. Shorter than "More", so the wrap risk is lower than any
     version tried.

     Both nbsp are load-bearing: the first keeps "Go" attached to the last
     word of the sentence, the second keeps the arrow attached to "Go".
     Either wrapping alone would cost the line of card height the
     2026-08-15 inline-cue change exists to save — the constraint that
     killed attempt 3. ⚠ If a copy edit to these three descriptions ever
     forces a wrap, shorten the DESCRIPTION, not the cue.

     ⚠ DISCOVERABILITY: this is the theme's ONLY CSS-authored word —
     every other `content:` in css/ is a glyph or empty. Anyone looking
     to change "Go" will grep templates/ and config/ and find nothing.
     Not a translation hazard today (the site runs single-language; there
     is no language.entity.* config, and the bilingual mi · en convention
     is editorial content, not Drupal multilingual), but it IS the one
     string living outside the usual places. If interface translation is
     ever enabled, this cue has to move into the template first — which
     costs back the line of height the inline form saves. Attempt 3 is
     the evidence that a longer bilingual form does not fit inline.

     NOT applied to the other three parent cards: their descriptions are
     short labels ("Featured Impact Case Studies"), which already read
     as links, and "…Case Studies Go →" is redundant. See
     documentation/research-axis-toggle-everywhere-plan.md §5.5. */
  content: '\00a0More\00a0\2192' / '';
  color: #fff;
}

/* Base title/desc. */
.np-landing-title {
  display: block;
  line-height: 1.25;
}
/* Browse cue, inline (2026-08-15). Was a block-level .np-landing-cue pinned to
   the card bottom with margin-top:auto, which cost a whole line per card. As an
   ::after on the description it reads the same and costs no height.
   - `\00a0` (nbsp) keeps the arrow attached to the last word, so it can never
     wrap onto a line of its own — which would reintroduce the height it saves.
   - `/ ''` marks it decorative for screen readers, matching the aria-hidden the
     old span carried. Browsers without alt-text support just read the glyph.
   Every card that renders a body also renders a description (verified across
   /people, /publications, /knowledge-portal, /about 2026-08-15), so this
   reaches every visible card. If a description-less card ever appears it simply
   shows no cue — an arrow alone on an empty body would cost the line back. */
.np-landing-desc::after {
  content: '\00a0\2192' / '';
  color: color-mix(in srgb, var(--cluster-hue), black 18%);
  font-weight: 700;
}
.np-landing-desc {
  display: block;
  font-size: .85rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, .66);
}

/* Active trail — deepen the band + card border. */
.np-landing-item--parent.is-active-trail .np-landing-head {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cluster-hue), black 34%),
    color-mix(in srgb, var(--cluster-hue), black 12%));
}
.np-landing-item--parent.is-active-trail {
  border-color: color-mix(in srgb, var(--cluster-hue), black 12%);
}

/* ---------- L3 children — mini spotlight cards ----------
   Each L3 carries its parent L2's np-landing-group--<slug>, so its band shows
   the PARENT's --cluster-hue. Two presentations (viewport-exclusive):
     • Desktop active-row → full mini-card (band + white body).
     • Mobile inline (inside the L2 card) → compact band strip (body hidden). */
.np-landing-item--child > .np-landing-link {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Scaled-down band (inherits the L2 .np-landing-head gradient + tukutuku). */
.np-landing-item--child .np-landing-head {
  padding: .45rem .7rem;
  gap: .45rem;
}
.np-landing-item--child .np-landing-head .np-landing-title {
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
}
.np-landing-item--child .np-landing-dot {
  width: 7px;
  height: 7px;
}
/* Softer, smaller tukutuku on the small band. */
.np-landing-item--child .np-landing-head::before {
  background-size: auto 170%;
  opacity: .14;
}

/* White body (desktop mini-card; hidden on the mobile strips). */
.np-landing-item--child .np-landing-body {
  padding: .5rem .7rem .6rem;
  gap: .3rem;
}
.np-landing-item--child .np-landing-desc {
  font-size: .78rem;
}

/* Active-trail L3 — deepen the band (matches the L2 treatment). */
.np-landing-item--child.is-active-trail .np-landing-head {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--cluster-hue), black 34%),
    color-mix(in srgb, var(--cluster-hue), black 12%));
}
.np-landing-item.is-active-trail > .np-landing-link {
  font-weight: 600;
}

/* ---- Mobile inline children = compact band strips (no white body) ----
   White gap between strips separates same-hue siblings. */
.np-landing-children {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
}
.np-landing-children .np-landing-body {
  display: none;
}

/* Desktop: hide inline children — L3 discovery is via the active-row. */
@media (min-width: 992px) {
  .np-landing-children { display: none; }
}

/* ---------- Desktop active-row — full-width grid of mini-cards ---------- */
.np-landing-active-row {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
}
/* Small-N cap: 1-3 pills swap 1fr for a fixed 20rem max, so a section
   with few L3 children doesn't stretch each pill edge-to-edge. auto-fit
   still collapses empty tracks; the freed space becomes trailing
   whitespace rather than being absorbed. Same house pattern as
   .np-report-grid + .np-project-people-grid — data-count is emitted on
   the <ul> from menu--main--landing.html.twig. */
.np-landing-active-row[data-count="1"],
.np-landing-active-row[data-count="2"],
.np-landing-active-row[data-count="3"] {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 20rem));
}
.np-landing-active-row .np-landing-item--child {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e0d8;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 40, 40, .05), 0 4px 12px rgba(40, 40, 40, .05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.np-landing-active-row .np-landing-item--child > .np-landing-link {
  flex: 1;
}
/* Equal-height bands within a row (2026-08-06). Grid stretches each
   .np-landing-item--child to the row's tallest cell (grid default),
   the link fills the item (flex: 1 above), but the coloured band
   inside otherwise sizes to its own content — so a 2-line title
   ("Whakaputa · Journal publications") produces a tall band while
   1-line siblings ("Kaiārahi · Leadership") stay short. Making the
   band a flex child that grows fills the available vertical space,
   matching neighbours in the same row.
   Scoped to active-row context so the mobile inline strip band
   (which reads better at content height) is unaffected. */
.np-landing-active-row .np-landing-item--child > .np-landing-link .np-landing-head {
  flex: 1;
  align-items: center;
}
.np-landing-active-row .np-landing-item--child:hover {
  box-shadow: 0 4px 10px rgba(40, 40, 40, .09), 0 12px 30px rgba(40, 40, 40, .08);
  transform: translateY(-2px);
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  .np-landing-submenu { margin: 1rem 0; }
  .np-landing-list { grid-template-columns: 1fr; }
  /* Active row is redundant on mobile — cards render children inline. */
  .np-landing-active-row { display: none; }
}