/* =============================================================
   barrio_npm_prototype — page-level baseline.
   Hero band. The landing submenu lives in css/landing-submenu.css.
   Navbar styles live in css/menu.css.
   ============================================================= */

/* ---------- Hero band ----------
   Spotlight-adjacent heavy restyle 2026-08-18 — mirrors
   .np-patai-context in css/patai-spotlight.css so non-chromed
   content routes share the same identity treatment as the
   dedicated spotlight surfaces.

   Structure (see page.html.twig .np-hero markup for the full
   nesting):
     .np-hero                 — outer wrapper, --cluster-hue
                                injected via .np-landing-group--<slug>
       .container             — container-width sandwich
         .np-hero__card       — white rounded card with subtle shadow
           .np-hero__head     — coloured band, tukutuku pattern overlay
             .np-hero__kicker — small-caps L1-section label
             .np-hero__title  — inline-block hue chip carrying the H1

   Photo backdrop (`bg_image` from field_header_hero_image) was
   dropped from the wrapper in this pass — the section-band carries
   the identity. Re-add as a layer inside .np-hero__head with a hue
   tint overlay if per-page photos come back.

   --hue + --hue-dk are aliased from --cluster-hue for parity with
   the .np-patai-context system (which uses --hue / --hue-dk). --hue-dk
   is derived from --cluster-hue by darkening 15% via color-mix. */

.np-hero {
  --hue:    var(--cluster-hue, var(--np-link));
  --hue-dk: color-mix(in srgb, var(--cluster-hue, var(--np-link)), black 15%);
}

.np-hero__card {
  position: relative;
  background: #fff;
  color: #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 22px;
  /* Border + box-shadow retired 2026-08-18 with the head-fade
     iteration — the pale-hue head fading to white makes the card
     "float" naturally without needing an explicit edge. Adding
     them back would fight the soft edge the gradient establishes. */
}

.np-hero__head {
  position: relative;
  padding: 22px 26px 24px;
  /* No background — the head sits transparent on the white
     .np-hero__card body. Kicker (dark hue text), title chip
     (--hue fill + white text), and tukutuku pattern (dark hue
     mask at 15% opacity) carry all the identity now — no coloured
     band needed behind them. TWN checked this in DevTools by
     toggling the background off; verdict was that fully white
     reads cleaner than the pale wash.
     Iteration history for future reference:
       v1: linear-gradient(--hue-dk-darker → --hue-dk)   — dark band
       v2: color-mix(--hue, white 88%)                   — flat pale
       v3: linear-gradient(pale 0/55%, white 100%)       — fade-to-white
       v4: transparent (no background)                    — current
     Restore any earlier variant by adding back a background rule. */
  overflow: hidden;
}
.np-hero__head::before {
  content: '';
  position: absolute; inset: 0;
  /* Tukutuku pattern rendered via CSS mask so we can colour it
     with --hue-dk (dark) instead of the PNG's baked-in white.
     White pattern on pale hue bg was invisible after the head
     lightening — mask + bg-color inverts the visibility. */
  background-color: var(--hue-dk);
  mask-image: url('../images/npm-pattern-white.png');
  mask-repeat: no-repeat;
  mask-position: 100% center;
  mask-size: contain;
  -webkit-mask-image: url('../images/npm-pattern-white.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 100% center;
  -webkit-mask-size: contain;
  opacity: .15;
  pointer-events: none;
}
.np-hero__head > * { position: relative; z-index: 1; }

.np-hero__kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* Dark hue for contrast on the pale head bg — flipped from the
     earlier muted-white (rgba(255,255,255,.85) on dark bg). Ties
     to the same section-hue family as the title chip below. */
  color: var(--hue-dk);
  margin-bottom: 10px;
}

.np-hero__title {
  align-self: flex-start;
  display: inline-block;
  background: var(--hue);
  color: #fff;
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -.2px;
  line-height: 1.15;
  padding: 7px 14px;
  border-radius: 6px;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  /* h1 typography.css override — the site-wide `h1 { font-weight: 100
     !important }` would otherwise defeat the 700 weight above. */
  font-weight: 700 !important;
}

/* Hero meta-slot — general-purpose meta row rendered by page.html.twig
   from the `np_hero_meta` preprocess variable. Sits below .np-hero__title
   inside the head. Each item is 'text' (muted small text) or 'chip'
   (pill styled with --hue-dk). Items separated by middle-dot. Wraps
   naturally on long content. See documentation/node-header-
   unification-plan.md §5A. */
.np-hero__meta {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
  font-size: .8125rem;
  color: #6c675f;
}
.np-hero__meta-item + .np-hero__meta-item::before {
  content: '·';
  margin: 0 10px;
  color: #b5aea3;
}
/* Suppress the middle-dot separator before chip items — the chip's own
   `.np-dot` bullet + margin-left already provide the visual break. Only
   text→text transitions still take the separator. */
.np-hero__meta-item + .np-hero__meta-item--chip::before {
  content: none;
}
.np-hero__meta-item--text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Chip variant — pale wash pill in the section's --hue (85% white
   mix), dark text in --hue-dk. Uppercase small-caps register
   parallels the section-menu tile kicker treatment elsewhere in
   the theme. --meta-color override supports e.g. featured-impact
   violet on projects.
   Iteration history:
     v1: pale wash + dark text + uppercase small caps  (current)
     v2: dark filled pill + white text + sentence case  (retired
         2026-08-19 after TWN visual check preferred v1's
         quieter register). */
.np-hero__meta-item--chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 40px 3px 12px;
  border-radius: 20px;
  margin-left: 10px;
  background: #fff;
  border: 3px solid var(--dot-color, var(--meta-color, var(--hue-dk, var(--np-link))));
  color: color-mix(in srgb, var(--meta-color, var(--hue-dk, var(--np-link))), black 5%);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background-color .12s ease;
}
/* Bullet inside each chip — larger than the shared .np-dot (8-9px)
   because the hero meta lives at a glance-scan distance; hue-tinted
   per chip via --dot-color, falling back to --meta-color then --hue-dk.
   On the status chip preprocess sets --dot-color explicitly
   (`--np-status-open-dk` for Open, `--np-status-closed-red` for Closed)
   so status reads at-a-glance even when the surrounding chip stays
   neutral. */
.np-hero__meta-item--chip .np-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--dot-color, var(--meta-color, var(--hue-dk, currentColor)));
  flex: none;
}

.np-hero__meta-item--chip a {
  color: inherit;
  text-decoration: none;
}
.np-hero__meta-item--chip:hover,
.np-hero__meta-item--chip:focus-within {
  background: color-mix(in srgb, var(--dot-color, var(--meta-color, var(--hue, var(--np-link)))), white 92%);
}

/* Text variant — Option A balance treatment: bumped from default
   400 weight + muted grey to 500 + --hue-dk so the date visually
   holds its own next to the chip without needing its own container. */
.np-hero__meta-item--text {
  font-weight: 500;
  color: var(--hue-dk, #4a4a4a);
  text-transform: uppercase;
  font-size: 1.2em;
  text-shadow: 0 0 black;
}