1/* =============================================================
   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.
     On the front page this is overlaid by beach.webp — see below. */
  background: #ffffff;
}

/* Front-page hero backdrop — beach.webp as backdrop behind the
   typography + CTA pills. See frontpage-beach-background-plan.md.
   Scoped to `body.path-frontpage` so the white backdrop remains on
   any other surface that reuses .np-tangerina-hero (currently none;
   defensive). No overlay for first ship (TWN D3 2026-11-12 — test
   contrast visually, add semi-transparent cream overlay later if
   title/tagline/CTA text legibility suffers). */
body.path-frontpage .np-tangerina-hero {
  background-image: url('/themes/custom/barrio_npm_prototype/images/beach.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Front-page hero layout — hide the triangular shape composition
   (redundant now that the beach backdrop carries the visual anchor)
   and collapse the 2-column grid to 1-column so the text block takes
   the full width + sits left-aligned naturally (TWN 2026-11-12). */
body.path-frontpage .np-tangerina-hero__shapes {
  display: none;
}
body.path-frontpage .np-tangerina-hero__grid {
  grid-template-columns: 1fr;
}

.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. */
  padding: 3em 0 6em 0;
}

.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: black;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  margin: 0 0 32px;
  max-width: 70ch;   /* 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;
  }
}

/* Hero-only tint swap for pills 3 and 4 — Rapua Rangahau + Ataata.
   Base (components.css) mirrors the hero SVG outer→inner order
   (yellow, blue, navy, coral); on the hero row, swapping the last
   two so coral sits at position 3 and navy at position 4 reads
   better as a colour progression. Mega banner untouched (retains
   the SVG-mirror order for its own visual language). */
.np-cta-list--hero > .np-cta-pill:nth-child(3) { --cta-tint: var(--npm-tukutuku-coral); }
.np-cta-list--hero > .np-cta-pill:nth-child(4) { --cta-tint: var(--npm-tukutuku-navy);  }

/* Pill rest + hover styling (border matches bg, self-darken hover,
   pill 1 brand-blue variant) was promoted to the base .np-cta-pill
   in components.css on 2026-08-20 so the mega banner shares the
   same visual vocabulary. Only hero-specific behaviour left in this
   file: the row-wrap layout above + the pill 3/4 tint swap. */