/*
  Internal page hero family — shared shell (.page-hero) plus structural
  variants (.page-hero--split-media, --split-content, --article). Built
  from Figma nodes 18669:13784 (Insurance), 18690:11896 (Claims),
  18669:13789 (Boating Hub) and 18669:13792 (Article) — see the
  architecture note in the project plan for the full comparison.
  .page-hero (base), .page-hero--split-media (Insurance, Runabout) and
  .page-hero--split-content (Claims, the first instance) are implemented;
  --article lands with the Article template.

  Background is a separate concern from content layout — see the
  "Background variants" section below (.page-hero--gradient-teal) — so a
  future page can mix either content layout with either background
  without a new combined variant.

  Distinct from the homepage .hero (css/home.css) — that component keeps
  its own unique photographic/trust-content treatment and isn't part of
  this family. Linked only from internal pages, not index.html.
*/

/* ---- Base shell ---- */

.page-hero {
  position: relative;
  width: 100%;
  overflow: hidden; /* keeps the decorative background/wave artwork from ever forcing horizontal scroll */
  color: var(--colour-white);
  /* Fallback surface colour, not decoration: assets/images/hero-*-wave.svg
     is only filled BELOW its curve line — the area above the curve, within
     the SVG's own viewBox, is genuinely transparent (see the wave's own
     comment below). .page-hero__bg is opaque everywhere it covers, but its
     own bottom edge and the wave's transparent band don't land on exactly
     the same pixel at every viewport width, so without this, that sliver
     reveals the page's white background instead of the hero's own teal —
     a thin white seam between the teal hero and the grey wave. Matches the
     gradient's own end colour (assets/images/hero-insurance-bg.svg's
     bottom stop), so it's invisible everywhere the bg image already
     covers, and only shows through that transparent sliver. */
  background-color: var(--colour-brand-teal);
  box-sizing: border-box;
}

/* Background artwork sits behind everything, sized to the viewport width
   with its own natural aspect ratio (matches the .product-transition__wave
   technique in css/home.css) — not object-fit: cover, which would crop the
   diagonal curve unpredictably whenever the hero's rendered height (driven
   by its own content) doesn't exactly match the artwork's design height. */
.page-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ---- Background variants ---- */
/* Alternative to a .page-hero__bg image (used by --split-media's pages):
   a flat vertical gradient with no decorative artwork, painted straight
   onto the hero shell itself. Stop position (23.558%) and colours come
   directly from the Claims Figma frame (18690:11896) — same top/bottom
   tokens as --colour-deep-teal / --colour-brand-teal used elsewhere, just
   not previously combined as a gradient. Percentage stop (not px) so it
   stays proportionally correct regardless of the hero's own
   content-driven height. */
.page-hero--gradient-teal {
  background: linear-gradient(to bottom, var(--colour-deep-teal) 23.558%, var(--colour-brand-teal) 100%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  /* 24px from tablet up (the desktop value, unchanged), 16px on phones —
     see --page-gutter, css/variables.css. */
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  box-sizing: border-box;
}

/* Wave is the last child of the hero, in normal document flow — the hero
   owns its own transition, the next section needs no compensating
   margin/spacer (see architecture note, "wave flow"). The SVG itself is
   only filled below its curve line (fill: #F7F8F9) — the region above the
   curve, within its own viewBox, is transparent; see .page-hero's own
   background-color above for why that matters.

   Not used where something straddles the hero/section boundary (e.g. the
   Insurance page's Product Selector) — there the wave moves into
   css/section-transition.css's .section-transition instead, since that's
   the component that owns overlapping-content transitions; the hero's own
   padding-bottom still ends flush with where that wave begins. */
.page-hero__wave {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 0; /* removes the inline-image baseline gap so the wave sits flush against the hero's own bottom edge */
}

.page-hero__wave img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Breadcrumb ---- */
/* Shared by every variant. Real <nav>/<ol>, not Figma's loose <p> runs.
   The separator is the project's existing chevron icon
   (assets/icons/icon-chevron-right.svg), recoloured via mask + background
   rather than duplicated as a second white asset — its only other use
   (js/product-selector.js) needs the plain grey file as-is, so the
   original SVG stays untouched. */

.page-hero__breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.page-hero__breadcrumb li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 19.5px;
  letter-spacing: 0.42px;
  color: var(--colour-white-70);
  white-space: nowrap;
}

.page-hero__breadcrumb li:last-child {
  color: var(--colour-white);
}

.page-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.page-hero__breadcrumb a:hover,
.page-hero__breadcrumb a:focus-visible {
  text-decoration: underline;
}

.page-hero__breadcrumb li + li::before {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-color: var(--colour-white-70);
  mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjIwNi40MyAzMS4xNzk3IDYuMTY0IDEwLjY0MDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yMTIuMjg5IDM1Ljk2MDlDMjEyLjU5NCAzNi4yNjU2IDIxMi41OTQgMzYuNzM0NCAyMTIuMjg5IDM3LjAzOTFMMjA3Ljc4OSA0MS41MzkxQzIwNy41MDggNDEuODIwMyAyMDcuMDE2IDQxLjgyMDMgMjA2LjczNCA0MS41MzkxQzIwNi40MyA0MS4yMzQ0IDIwNi40MyA0MC43NjU2IDIwNi43MzQgNDAuNDYwOUwyMTAuNjk1IDM2LjVMMjA2LjczNCAzMi41MzkxQzIwNi40MyAzMi4yMzQ0IDIwNi40MyAzMS43NjU2IDIwNi43MzQgMzEuNDYwOUMyMDcuMDE2IDMxLjE3OTcgMjA3LjUwOCAzMS4xNzk3IDIwNy43ODkgMzEuNDYwOUwyMTIuMjg5IDM1Ljk2MDlaIiBmaWxsPSIjQUFBQ0IxIi8+Cjwvc3ZnPgo=') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjIwNi40MyAzMS4xNzk3IDYuMTY0IDEwLjY0MDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yMTIuMjg5IDM1Ljk2MDlDMjEyLjU5NCAzNi4yNjU2IDIxMi41OTQgMzYuNzM0NCAyMTIuMjg5IDM3LjAzOTFMMjA3Ljc4OSA0MS41MzkxQzIwNy41MDggNDEuODIwMyAyMDcuMDE2IDQxLjgyMDMgMjA2LjczNCA0MS41MzkxQzIwNi40MyA0MS4yMzQ0IDIwNi40MyA0MC43NjU2IDIwNi43MzQgNDAuNDYwOUwyMTAuNjk1IDM2LjVMMjA2LjczNCAzMi41MzkxQzIwNi40MyAzMi4yMzQ0IDIwNi40MyAzMS43NjU2IDIwNi43MzQgMzEuNDYwOUMyMDcuMDE2IDMxLjE3OTcgMjA3LjUwOCAzMS4xNzk3IDIwNy43ODkgMzEuNDYwOUwyMTIuMjg5IDM1Ljk2MDlaIiBmaWxsPSIjQUFBQ0IxIi8+Cjwvc3ZnPgo=') center / contain no-repeat;
}

/* ---- Heading ---- */
/* text-h1 (typography.css) supplies the 64px/70.4 sizing; this file only
   adds the muted second-run treatment used across every variant's H1. */

.page-hero__heading {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  /* Fluid 38px (mobile) → the Figma 64px, reached at 1280px and held from
     there — identical ramp to .text-h1 (css/typography.css), which this
     element's own rule would otherwise override. Desktop is unchanged. */
  font-size: clamp(38px, 26.61px + 2.921vw, 64px);
  line-height: 1.1;
  color: var(--colour-white);
}

.page-hero__heading-muted {
  color: var(--colour-white-70);
}

.page-hero__body {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: 400;
  /* Same ramp as .text-body-xxl (css/typography.css) — 17px → the Figma
     22px at 1280px and above. */
  font-size: clamp(17px, 14.81px + 0.562vw, 22px);
  line-height: 1.4;
  color: var(--colour-white);
}

.page-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* two CTAs side by side wrap rather than overflow once the column narrows */
  gap: var(--space-l); /* 16px */
}

/* ================================================================
   SPLIT MEDIA — Insurance, Boating Hub
   ================================================================ */

/* 216px = Figma's own content-row top (264px) minus the 48px the notice
   bar already reserves via body:has(.notice-bar) (css/style.css) — the
   background artwork's own top edge starts at that same 48px offset, so
   264 − 48 = 216 reproduces the real distance from the hero's top to its
   content without hardcoding Figma's absolute canvas position. Confirmed
   shared by both Insurance and Boating Hub's Figma frames (both start
   their content row at the same y:264), so it belongs on the variant, not
   as a one-off per-page value. */
.page-hero--split-media .page-hero__inner {
  display: flex;
  align-items: center;
  gap: 37px;
  padding-top: var(--hero-pad-top, 200px);
  /* Space between the content/media row and the wave — this varies per
     page (content length + wave height both differ), so each page instance
     sets --hero-pad-bottom inline rather than this variant hardcoding one
     page's value. 96px is a sane section-spacing fallback if a future page
     forgets to set it. */
  padding-bottom: var(--hero-pad-bottom, 96px);
}

/* This is the STRUCTURAL column — Figma's own "Hero content" layer is a
   fixed 737px-wide box, not a flex item that grows/shrinks to fit its
   copy. The row itself (.page-hero__inner) doesn't stretch to fill the
   1280px container either — content (737) + gap (37) + media (410) sum to
   less than that, and sit left-aligned within it, exactly as Figma has
   it. Getting this column's own width right is what lands the media
   composition in the right place — see .page-hero__content-text/__body
   below for the narrower 660px copy width nested *inside* this column,
   which is a different number for a different reason (text wrap, not
   column position) and must not be conflated with it. */
.page-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl); /* 42px — Figma's own gap between the main text/content group and the actions row, not a uniform gap shared with the tighter groups nested inside it */
  flex: 0 0 737px;
  min-width: 0;
}

/* Main text/content group — breadcrumb+heading group plus body copy. Own
   660px copy width lives here (Figma's actual text measure), nested inside
   the wider 737px structural column above. */
.page-hero__content-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl); /* 24px between the breadcrumb+heading group and the body copy */
  max-width: 660px;
}

/* Breadcrumb+heading group — its own tighter gap, nested inside
   .page-hero__content-text rather than sharing that element's 24px. */
.page-hero__heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 8px between breadcrumb and heading */
}

/* ---- Media composition ---- */
/* Same philosophy as the homepage Promo (.promo__visual/.promo__image/
   .promo__tags in css/home.css): a real photo plus real, independently
   positioned HTML tags — never a flattened composite image. */

.page-hero__media {
  position: relative;
  flex-shrink: 0;
  width: 410px;
  height: 300px;
}

.page-hero__media-image {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

.page-hero__media-image img {
  position: absolute;
  max-width: none;
}

/* Tags are positioned as a percentage of the media box's own width/height
   (not fixed px) so the 410×300 composition can scale as a unit. Figma
   used one identical arrangement on every page (and placeholder copy on
   several of them); each page now carries its own arrangement and its own
   contextual copy inline instead — see the note above each set in the
   markup. Negative/over-100% values are expected: several tags
   deliberately overhang the image's edges, as in Figma.

   Tags are also pointer-reactive on devices with a fine pointer: after
   their entrance finishes, js/motion.js drifts each one by a few pixels
   against the cursor, and the photo very slightly the other way. That is
   a transform on top of the resting position set here, so this file stays
   the single source of truth for where a tag actually lives. */
.page-hero__tag {
  position: absolute;
  left: var(--tag-x);
  top: var(--tag-y);
  display: inline-flex;
  align-items: center;
  width: max-content;
  background: var(--colour-sky-teal);
  color: var(--colour-white);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 16px;
  line-height: 19.2px;
  white-space: nowrap;
  padding: 12px 20px;
  border-radius: 12px;
}

/* "Quick Quotes" — Figma gives this one tag a slightly different
   padding/radius and an (identically-coloured) border; kept as its own
   modifier rather than assuming it was a mistake in the design. */
.page-hero__tag--framed {
  padding: 12px 16px;
  border-radius: 13px;
  border: 1px solid var(--colour-sky-teal);
}

/* ================================================================
   SPLIT CONTENT — Claims (first instance)
   ================================================================ */
/* Two even text columns, no media: breadcrumb+heading on the left,
   intro copy+CTA on the right. Reuses .page-hero__heading-group as the
   left column and .page-hero__content as the right column verbatim —
   both already have the right internal gap for this layout, they just
   need sizing as flex items here instead of as nested groups inside
   --split-media's single content column. */

.page-hero--split-content .page-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xl); /* 24px — matches Figma's own row gap */
  padding-top: var(--hero-pad-top, 200px); /* same derivation as --split-media: Figma's 264px content-row top minus the 48px notice-bar offset */
  /* Space between the content row and the wave — page-specific, like
     --split-media's own use of this same custom property (see above). */
  padding-bottom: var(--hero-pad-bottom, 96px);
}

.page-hero--split-content .page-hero__heading-group {
  flex: 1 0 0;
  min-width: 0;
}

.page-hero--split-content .page-hero__content {
  flex: 1 0 0;
  min-width: 0;
  padding-top: var(--space-5xl); /* 42px — Figma offsets this column down so its copy sits clear of the taller H1 opposite it */
}

/* ================================================================
   ARTICLE — centred breadcrumb + heading + metadata pill
   ================================================================ */
/* Single centred column: no media, no second text column — just the
   breadcrumb+heading group and a metadata pill underneath it. Reuses
   .page-hero__heading-group/__breadcrumb/__heading verbatim, centred,
   plus one new element (.page-hero__meta) for the pill. This hero sits
   much taller than the other variants (Figma's own background artwork
   runs well past the heading to make room for the Compass/feature-image
   row that overlaps its bottom edge) — that overlap is handled by
   .section-transition (css/section-transition.css) immediately below the
   hero in the page, exactly like Boating Hub's Content Filter panel; the
   hero itself only owns its own padding-bottom, not the wave. */

.page-hero--article .page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl); /* 32px — Figma's own gap between the heading group and the metadata pill */
  padding-top: var(--hero-pad-top, 200px); /* same derivation as the other variants: Figma's 264px content-row top minus the 48px notice-bar offset */
  padding-bottom: var(--hero-pad-bottom, 96px);
  text-align: center;
}

.page-hero--article .page-hero__breadcrumb ol {
  justify-content: center;
}

.page-hero--article .page-hero__heading-group {
  align-items: center;
}

/* Figma sizes this heading with the site's H2 style (48px/57.6, -0.96px
   tracking), not the H1 sizing .page-hero__heading carries for the other
   variants above — same clamp/ramp as .text-h2 (css/typography.css) so it
   scales identically to every other H2 on the site. */
.page-hero--article .page-hero__heading {
  font-size: clamp(30px, 22.11px + 2.022vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ---- Metadata pill (date · reading time · "Proudly written by a human") ---- */

.page-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-m); /* 12px */
  margin: 0; /* this is a <p> — reset the browser's default paragraph margin so the 32px gap above comes only from .page-hero__inner's own flex gap */
  padding: var(--space-xs) var(--space-l); /* 6px 16px */
  background: var(--colour-brand-teal);
  border: 1px solid var(--colour-white-70);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--colour-white);
  white-space: nowrap;
}

.page-hero__meta-dot {
  width: 3px;
  height: 3px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--colour-white);
}

.page-hero__meta-human {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-hero__meta-human img {
  flex-shrink: 0;
  width: 12px;
  height: 10px;
}

@media (max-width: 767px) {
  .page-hero__meta {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
  }
}

/* ================================================================
   Responsive
   ================================================================ */
/* Shared by every page that uses this hero family (Insurance, Claims,
   Renew, Runabout, Why choose us, Claim form), so it lives here rather
   than as per-page overrides. Breakpoints are the site-wide set the Home
   page established: ≤767 phone, 768–1023 tablet portrait, 1024–1279
   tablet landscape / small laptop, ≥1280 the untouched desktop design.
   Heading/body sizes are already fluid (clamp(), above) across the whole
   range and are deliberately NOT re-declared per breakpoint.

   --hero-pad-top is the distance from the top of the hero down to its
   content row. The desktop 216px clears the fixed header (76px offset +
   an ~88px row) with Figma's own breathing room; the header itself gets
   shorter at tablet (~80px row) and phone (~72px row) widths, so the
   hero's own lead-in steps down with it instead of leaving a large empty
   band above the breadcrumb. */

@media (max-width: 1023px) {
  .page-hero {
    --hero-pad-top: 176px;
  }

  /* Both structural variants become a single column below 1024px: the
     --split-media row (737px text column + 410px media) and the
     --split-content row (two even text columns) both need more width
     than tablet portrait has before the H1 starts wrapping every second
     word. */
  .page-hero--split-media .page-hero__inner,
  .page-hero--split-content .page-hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4xl); /* 40px between the stacked content and media/copy */
  }

  .page-hero__content {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }

  /* The space between the content row and the wave is page-specific
     (--hero-pad-bottom, set inline per instance) and several pages set a
     large desktop value to make room for a section that overlaps the
     hero's bottom edge. That overlap is itself smaller at tablet/phone
     widths (see --transition-overlap-tablet/-mobile,
     css/section-transition.css), so those pages can set a matching
     --hero-pad-bottom-tablet/-mobile; anything that doesn't simply keeps
     its own single value. */
  .page-hero--split-media .page-hero__inner,
  .page-hero--split-content .page-hero__inner,
  .page-hero--article .page-hero__inner {
    padding-bottom: var(--hero-pad-bottom-tablet, var(--hero-pad-bottom, 96px));
  }

  /* The offset that dropped this column clear of the taller H1 beside it
     only makes sense while the two are side by side. */
  .page-hero--split-content .page-hero__content {
    padding-top: 0;
  }

  /* Media keeps its exact Figma proportions (410×300) but is now free to
     shrink, and centres itself in the full-width column so the tags that
     deliberately overhang its left/right edges still have room to do so
     rather than being clipped by the hero's own overflow. */
  .page-hero__media {
    align-self: center;
    width: 100%;
    max-width: 410px;
    height: auto;
    aspect-ratio: 410 / 300;
  }
}

@media (max-width: 767px) {
  .page-hero {
    --hero-pad-top: 148px;
  }

  .page-hero--split-media .page-hero__inner,
  .page-hero--split-content .page-hero__inner,
  .page-hero--article .page-hero__inner {
    gap: var(--space-3xl); /* 32px */
    padding-bottom: var(--hero-pad-bottom-mobile, var(--hero-pad-bottom-tablet, var(--hero-pad-bottom, 96px)));
  }

  .page-hero__content {
    gap: var(--space-3xl); /* 32px, down from the desktop 42px */
  }

  /* Full-width CTAs, matching the Home hero's own mobile treatment
     (css/home.css). */
  .page-hero__actions {
    width: 100%;
  }

  .page-hero__actions .btn {
    width: auto;
  }

  /* The floating tags stay part of the same composition at phone width —
     the box they're pinned to (.page-hero__media, still 410×300 and
     shrinking as a unit via the ≤1023px rule above) just gets smaller, not
     replaced with a different layout. --tag-x/--tag-y are already
     percentages of that box (see the note above .page-hero__tag), so they
     track its edges at any size without their own breakpoint rule. Tags
     only get smaller here so they read as accents on a much smaller photo
     rather than dominating it — position/overlap is untouched.

     One tag ("Agreed value option", --tag-x: -13%) deliberately overhangs
     the media box's left edge — on the ≤1023px rule above, the box is
     wide enough that the overhang still lands inside .page-hero__inner's
     own side padding (--page-gutter). Below ~550px it no longer does: the
     box is close enough to full-width that a fixed % overhang overruns
     that padding and .page-hero's own overflow: hidden (needed to stop
     the background artwork forcing horizontal scroll, see that rule)
     clips the tag's text mid-word instead of just letting it bleed. Capping
     the box a bit narrower than 100% here — instead of loosening that
     overflow, which would risk the artwork causing real horizontal
     scroll — reserves enough side margin for the overhang at any phone
     width, so the tag stays fully on screen while the composition itself
     keeps the same overlap relationship, just at a very slightly smaller
     scale. */
  .page-hero__media {
    max-width: min(410px, calc(100% - 72px));
  }

  .page-hero__tag {
    font-size: 14px;
    padding: var(--space-s) var(--space-m);
  }
}