/* ==========================================================================
   Wave edges – used by every page.
   Remove the .wave blocks from a page to drop the effect there.
   ========================================================================== */

:root { --wave-h: clamp(60px, 9vw, 130px); }

.space--white     { --this: var(--white); }
.space--primary   { --this: var(--primary); }
.space--secondary { --this: var(--secondary); }

.has-wave {
  position: relative;
  padding-bottom: calc(clamp(3.5rem, 7vw, 5.5rem) + var(--wave-h));
}

.has-wave.space--compact {
  padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + var(--wave-h));
}

.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;            /* overlaps the next block slightly so no hairline seam shows */
  height: var(--wave-h);
  pointer-events: none;
}

.wave--to-white     { --next: var(--white); }
.wave--to-primary   { --next: var(--primary); }
.wave--to-secondary { --next: var(--secondary); }

.wave svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: block;
}

/* Front wave: solid colour of the next space */
.wave__front { height: calc(100% + 2px); fill: var(--next); }

/* Back wave: taller, mirrored, a softer blend of the two colours (the "ripple") */
.wave__back {
  height: 135%;
  transform: scaleX(-1);
  fill: color-mix(in srgb, var(--next) 45%, var(--this));
}

/* The wave already provides breathing room, so the space after it needs less top padding */
.has-wave + .space {
  padding-top: clamp(.5rem, 1.5vw, 1rem);
}


/* Pull the block below a wave up by 2px so it covers the seam.
   Its colour matches the wave's front layer, so the overlap is invisible. */
.has-wave + .space,
main + .site-footer {
  position: relative;
  margin-top: -2px;
}