/*
  Section Transition — reusable wave + overlapping-content component, for
  places where a hero/section boundary needs a wave AND something (a
  panel, cards, or any other component) intentionally straddling that
  boundary.

  Layered Grid architecture: .section-transition__surface (the decorative
  wave + fill) and .section-transition__overlay (arbitrary content) share
  the same grid cell, so the container's own flow height is automatically
  whichever of the two is taller. The next normal-flow section always
  begins right after that — no compensating margin, no knowledge of
  either layer's height required from outside this file.

  THE COMPONENT THAT OWNS THE VISUAL TRANSITION OWNS THE WAVE: the wave's
  position is measured only from the TOP of .section-transition (via the
  fixed --transition-lead below) and is completely independent of
  .section-transition__overlay's height — swapping the overlay's content
  for something 150px or 900px tall changes how much fill/background
  shows beneath the wave, never where the wave itself sits. This is what
  makes the component genuinely reusable for content other than the
  Product Selector.

  Three things are legitimately page-specific and are supplied inline, same
  pattern as --hero-pad-bottom in css/page-hero.css:
    --transition-overlap  geometry — how far the whole block is pulled up
                           over the preceding section. The one positioning
                           control pages get.
    --transition-fill     colour only — matches the destination section's
                           background so the fill layer blends into it.
                           Has no effect on layout/position.
    --transition-lead     fixed distance from the top of the transition to
                           the wave.
  Home/Insurance's shared 128px value is the default fallback, so neither
  page needs to set it explicitly. A page whose Figma places the wave at a
  different offset (e.g. Boating Hub's shorter Content Filter overlay,
  where Figma has the wave starting 104px down, not 128px) sets its own
  --transition-lead inline rather than inheriting a value tuned for a
  taller overlay — otherwise the surface's fixed lead+wave height exceeds
  the shorter overlay's natural height and the grid row (sized to the
  taller of the two) leaves a visible band of unwanted fill/background.
*/

.section-transition {
  --transition-lead: 128px; /* Home's own original offset is the default — a page can override --transition-lead inline on .section-transition itself (inline specificity beats this class rule), same pattern as --transition-overlap/--transition-fill */
  position: relative;
  display: grid;
  margin-top: var(--transition-overlap, -160px); /* homepage's own overlap value is the default — page-specific, carried over unchanged from .product-transition */
}

/* Surface and overlay occupy the same implicit grid cell, so they stack
   and the row sizes to the taller of the two — no absolute positioning
   or manual height math needed to make that happen. */
.section-transition__surface,
.section-transition__overlay {
  grid-area: 1 / 1;
}

/* The decorative visual layer: lead (transparent, reveals the preceding
   section) + wave (transparent above its curve, solid-filled below it) +
   fill (solid, continues the wave's own fill colour for any extra height
   the overlay adds). Stretches to the grid row's full height by default
   (grid items are align-self: stretch unless overridden), which is what
   lets the fill grow to cover taller overlay content. Purely decorative,
   so it never intercepts pointer events meant for the overlay. */
.section-transition__surface {
  display: flex;
  flex-direction: column;
  z-index: 1;
  pointer-events: none;
}

/* wave-transition.svg (and other wave assets) are only filled BELOW their
   curve line — the area above, within the SVG's own viewBox, is
   transparent. --transition-lead is the fixed space before the wave
   starts; from there the image's own natural aspect ratio (width: 100%,
   height: auto) determines how tall it renders at any viewport width. */
.section-transition__wave {
  display: block;
  width: 100%;
  height: auto;
  flex-shrink: 0;
  margin-top: var(--transition-lead);
}

/* Continues the wave's own solid fill colour for whatever height remains
   in the (possibly stretched) surface once the lead + wave have taken
   their natural space — i.e. exactly the gap left by a taller overlay.
   flex: 1 means this needs no knowledge of the wave's rendered height or
   the overlay's content height; it simply claims what's left. */
.section-transition__fill {
  flex: 1 1 auto;
  background: var(--transition-fill, #fff);
}

/* Reusable overlay slot — normal-flow content (Product Selector today, or
   any other component later) defines its own natural height; it isn't
   forced to stretch to match a taller surface. No assumptions about what
   goes inside. */
.section-transition__overlay {
  position: relative;
  z-index: 2;
  align-self: start;
}

/* Mobile — smaller lead/overlap than desktop's (both tuned against the
   800px desktop hero + full-width Product Selector panel), so the wave
   still reads as a deliberate curve rather than a barely-there sliver
   against the shorter mobile hero, and the overlay overlaps the hero by a
   proportionally smaller amount. Still page-configurable per --transition-
   overlap (the homepage's own default, above, is what's being scaled down
   here) — this only changes the shared constant and the fallback. */
@media (max-width: 767px) {
  .section-transition {
    --transition-lead: 56px;
    margin-top: var(--transition-overlap-mobile, -72px);
  }
}

/* Tablet portrait — .hero is auto-height (not the desktop's fixed 800px)
   in this range too (see css/home.css), so it gets its own intermediate
   lead/overlap rather than either the mobile or desktop constant. 1024px+
   reverts to the untouched desktop values — the hero goes back to its
   fixed 800px height there, which is what the desktop lead/overlap was
   tuned against.

   -128px is the shared default other pages' page-hero (Insurance, Boating
   Hub, Article — see --hero-pad-bottom-tablet on each) were deliberately
   sized against, so it stays as-is here; a page whose own hero has less
   buffer below its content at this breakpoint (the homepage's plain
   .hero, whose tablet bottom padding is a fixed 64px with no tunable
   variable of its own) overrides --transition-overlap-tablet inline on
   its own .section-transition, same pattern as --transition-overlap. */
@media (min-width: 768px) and (max-width: 1023px) {
  .section-transition {
    --transition-lead: 96px;
    margin-top: var(--transition-overlap-tablet, -128px);
  }
}

/* Ultra-wide desktop — homepage only (.section-transition--home, set on
   index.html's own instance; every other page's .section-transition
   keeps the untouched 128px default at this width too). */
@media (min-width: 1921px) {
  .section-transition--home {
    --transition-lead: 110px;
  }
}