/* =============================================================
   barrio_npm_prototype — Tangerina-style frontpage hero.

   First visible ship of the pivot per
   documentation/frontpage-tangerina-pivot-plan.md §7c (Day 2).
   Replaces the powhiri photo hero with a typography-first hero
   on cream + a 4-shape composition using Pātai cluster hues as
   the visual anchor.

   Shape composition is a Day-2 placeholder — 4 overlapping
   circles in Pātai colours arranged in a diamond formation.
   Iteration Day 3-4 will refine towards more kōwhaiwhai /
   tukutuku-appropriate geometry (curved petals, poutama steps,
   or committed shapes if a kaupapa Māori design commission
   happens post-director-validation).

   Layout: 2-column at ≥md (shapes left, text right), stacked
   at mobile. Container-width. Cream background inherits from
   body (colors.css).
   ============================================================= */

.np-tangerina-hero {
  padding: 60px 0 80px;
  /* Explicit white matches #header's white background — the two
     blend into a single white top zone. The top-of-page stack:
       #header + hero  (white)
         → navbar pill  (#f1ece1, warm cream) floating on the white
         → body         (#f1ece1, warm cream) resuming from news-btn
     Kept as an explicit value (not `transparent`) so the hero stays
     self-contained if #header's bg is retuned again. */
  background: #ffffff;
}

.np-tangerina-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 768px) {
  .np-tangerina-hero__grid {
    grid-template-columns: 1fr 1.5fr;   /* shapes 40% / text 60% */
    gap: 60px;
  }
}

/* --- Shape composition --- */
.np-tangerina-hero__shapes {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bounded size — SVG scales responsively but doesn't dominate the
     layout on wide viewports. Sized for the tukutuku composition
     (portrait 4:7 aspect); if the shape SVG changes back to square,
     bump max-width back up to ~400px. */
  max-width: 260px;
  margin: 0 auto;
  width: 100%;
}
.np-tangerina-hero__svg {
  display: block;
  width: 100%;
  height: auto;
  /* Belt-and-braces for very-narrow-hero-column viewports where the
     portrait SVG could otherwise stretch tall. */
  max-height: 500px;
}

/* --- Text block --- */
.np-tangerina-hero__text {
  /* No specific styling here — children carry their own. */
}

.np-tangerina-hero__title {
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: #1a1a1a;
}

.np-tangerina-hero__tagline {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.4;
  color: #4a4a4a;
  margin: 0 0 32px;
  max-width: 30ch;   /* limits wrap width for readability */
}

/* --- CTA list (hero variant) ---
   Base pill visual + nth-child tint mapping live in components.css
   under .np-cta-pill / .np-cta-list. Only the hero-specific layout
   override lives here: at ≥640px the pills wrap horizontally as
   chips (mobile keeps the base vertical stack). */
@media (min-width: 640px) {
  .np-cta-list--hero {
    flex-direction: row;
    flex-wrap: wrap;
  }
}