/* ============================================================
   36-section-dividers.css — soft SVG wave at section boundaries

   Adds a faint decorative SVG wave at the bottom edge of
   alternating sections so the visual rhythm of the page feels
   crafted, not block-stacked. Implementation is purely additive:
   we use a `::before` pseudo on each `section.module:nth-of-type(even)`
   that doesn't already own one elsewhere (see exclusion list
   below), and we don't touch padding so existing layouts are
   unaffected.

   The wave sits at low opacity so it reads as a gentle accent,
   not a billboard. Cards above it, photos above it — the wave
   slips quietly under everything.

   Browsers that don't support `mask-image` just skip it. No
   layout shift, no JS, no broken modules.
   ============================================================ */

section.module {
  position: relative;
}

/* The wave on alternating sections. We tag every other module
   via :nth-of-type(even) so the page reads as a rhythmic
   white-cream-white-cream pattern with soft wave joints. */
section.module:nth-of-type(even)::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 28px;
  background: var(--c-bg);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'><path d='M0,14 C240,28 480,0 720,14 C960,28 1200,0 1440,14 L1440,28 L0,28 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'><path d='M0,14 C240,28 480,0 720,14 C960,28 1200,0 1440,14 L1440,28 L0,28 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* Skip the wave on the dark anchor sections (testimonials with
   dark bg, etc.) — looks wrong against dark surfaces.
   IMPORTANT: do NOT include #hero::before here. The hero is not
   `section.module:nth-of-type(even)` so the wave never applies
   to it anyway, and `display: none` on #hero::before would also
   kill the hero's gold radial overlay (04-hero.css) and the
   cursor-spotlight overlay (39-hero-spotlight.css). Lesson
   learned: pseudo-elements are owned by their selector chain,
   not the element. We can only opt OUT of the wave on the
   .module rule itself, and even modules that already own
   ::before still get clobbered — see the per-module
   exclusions below. */
section.module.dark:nth-of-type(even)::before,
section.module#testimonials:nth-of-type(even)::before {
  display: none;
}

/* Exclude modules that already own their own ::before for
   other purposes (cost estimator, value-props with their own
   accent overlay, etc.) — these keep their existing decoration
   instead of being overwritten with the wave. Add to this list
   if another module appears to lose its background accent. */
section.module#cost-estimator:nth-of-type(even)::before,
section.module#value-props:nth-of-type(even)::before,
section.module#availability:nth-of-type(even)::before,
section.module#before-after:nth-of-type(even)::before,
section.module#job-map:nth-of-type(even)::before {
  -webkit-mask-image: none;
          mask-image: none;
  display: none;
}

@media (max-width: 720px) {
  section.module:nth-of-type(even)::before {
    height: 20px;
  }
}