/**
 * Wave edge system — apply to any full-bleed section.
 *
 * Each block owns exactly two edges (top + bottom) that touch only its borders:
 *   .tidal-wave-wave-section
 *     .tidal-wave-wave-edge--top     ← block top border
 *     .tidal-wave-wave-panel         ← content inset (background on section shell)
 *     .tidal-wave-wave-edge--bottom  ← block bottom border
 *
 * Section shell is full-bleed; panel bg/color tokens paint the shell edge-to-edge.
 * Edge fill defaults to --tidal-wave-wave-panel-bg (overridable per block).
 */

/* ——— Block style → variant mapping ——— */

.is-style-tidal-wave-wave-white-gentle,
.tidal-wave-wave-section--white-gentle {
  --tidal-wave-wave-panel-bg: var(--wp--preset--color--surface);
  --tidal-wave-wave-panel-color: var(--wp--preset--color--ink);
  --tidal-wave-wave-edge-height: clamp(40px, 6.5vw, 60px);
  --tidal-wave-wave-edge-height-mobile: clamp(32px, 10vw, 56px);
}

.is-style-tidal-wave-wave-navy-deep,
.tidal-wave-wave-section--navy-deep {
  --tidal-wave-wave-panel-bg: var(--wp--preset--color--primary-dark);
  --tidal-wave-wave-panel-color: var(--wp--preset--color--surface);
  --tidal-wave-wave-edge-height: clamp(48px, 7.5vw, 72px);
  --tidal-wave-wave-edge-height-mobile: clamp(36px, 11vw, 64px);
}

.is-style-tidal-wave-wave-multi-blue,
.tidal-wave-wave-section--multi-blue {
  --tidal-wave-wave-panel-bg: var(--wp--preset--color--surface-soft);
  --tidal-wave-wave-panel-color: var(--wp--preset--color--ink);
  --tidal-wave-wave-edge-height: clamp(52px, 8vw, 76px);
  --tidal-wave-wave-edge-height-mobile: clamp(40px, 12vw, 68px);
}

/* ——— Section shell ——— */

.is-style-tidal-wave-wave-white-gentle,
.is-style-tidal-wave-wave-navy-deep,
.is-style-tidal-wave-wave-multi-blue,
.tidal-wave-wave-section {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: 0;
  padding: 0 !important;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
  background: var(--tidal-wave-wave-panel-bg, var(--wp--preset--color--surface)) !important;
  color: var(--tidal-wave-wave-panel-color, inherit);
}

.wp-block-group.is-style-tidal-wave-wave-white-gentle,
.wp-block-group.is-style-tidal-wave-wave-navy-deep,
.wp-block-group.is-style-tidal-wave-wave-multi-blue,
.wp-block-group.tidal-wave-wave-section {
  border-radius: 0 !important;
}

/* ——— Seam divider between sections ——— */

.tidal-wave-wave-divider,
.tidal-wave-wave-divider--split,
.wp-block-tidal-wave-wave-divider,
.tidal-wave-wave-divider__band,
.tidal-wave-wave-divider__band--top,
.tidal-wave-wave-divider__band--bottom {
  border-radius: 0 !important;
}

.tidal-wave-wave-divider {
  display: block;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  /*
   * Overlap adjacent section paints by a couple of pixels. Without this, tablet
   * widths (~700–800px) often leave a 1px body-canvas hairline under the SVG
   * when vw-based edge heights land on fractional device pixels — especially
   * around the 781px layer/height switch.
   */
  margin-block: -2px;
  padding: 0;
  line-height: 0;
  position: relative;
  z-index: 1;
}

.tidal-wave-wave-divider__svg {
  display: block;
  width: 100%;
  /* +1px helps the path paint cover anti-aliased SVG bottom/top edges. */
  height: calc(var(--tidal-wave-wave-edge-height, var(--tidal-wave-edge-height)) + 1px);
  margin-block: -0.5px;
}

.tidal-wave-wave-divider__top,
.tidal-wave-wave-divider__bottom {
  fill: currentColor;
}

/* Fewer wave bumps on narrower screens (see inc/waves.php responsive counts). */
.tidal-wave-wave-divider__layer--md,
.tidal-wave-wave-divider__layer--sm {
  display: none;
}

@media (max-width: 1024px) {
  .tidal-wave-wave-divider__layer--lg {
    display: none;
  }

  .tidal-wave-wave-divider__layer--md {
    display: block;
  }
}

@media (max-width: 781px) {
  .tidal-wave-wave-divider__layer--md {
    display: none;
  }

  .tidal-wave-wave-divider__layer--sm {
    display: block;
  }

  .tidal-wave-wave-divider__svg {
    height: calc(
      var(--tidal-wave-wave-edge-height-mobile, var(--tidal-wave-edge-height-mobile)) + 1px
    );
  }
}

/* Split seam: top and bottom bands stack with hero wave art between them. */
.tidal-wave-wave-divider--split {
  position: relative;
  height: calc(var(--tidal-wave-wave-edge-height, var(--tidal-wave-edge-height)) + 1px);
}

.tidal-wave-wave-divider--split .tidal-wave-wave-divider__band {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  line-height: 0;
  pointer-events: none;
}

.tidal-wave-wave-divider--split .tidal-wave-wave-divider__band--top {
  z-index: 1;
}

.tidal-wave-wave-divider--split .tidal-wave-wave-divider__band--bottom {
  z-index: 3;
}

@media (max-width: 781px) {
  .tidal-wave-wave-divider--split {
    height: calc(
      var(--tidal-wave-wave-edge-height-mobile, var(--tidal-wave-edge-height-mobile)) + 1px
    );
  }
}

/* ——— Edge strips (legacy single edges) ——— */

.tidal-wave-wave-edge {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  line-height: 0;
  pointer-events: none;
}

.tidal-wave-wave-edge svg {
  display: block;
  width: 100%;
  height: var(--tidal-wave-wave-edge-height, var(--tidal-wave-edge-height));
}

.tidal-wave-wave-edge svg path {
  fill: currentColor;
}

/* Panel fill reads --tidal-wave-wave-panel-bg from the section (overridable per block). */
.tidal-wave-wave-edge--fill-panel {
  color: var(--tidal-wave-wave-panel-bg);
}

/* Seal hairline gap between this block's edge and its panel only. */
.tidal-wave-wave-edge--top {
  margin-bottom: -1px;
}

.tidal-wave-wave-edge--bottom {
  margin-top: -1px;
}

/* Layered multi-blue bottom */
.tidal-wave-wave-edge--layered {
  position: relative;
  height: var(--tidal-wave-wave-edge-height, var(--tidal-wave-edge-height));
}

.tidal-wave-wave-edge__layer {
  position: absolute;
  inset: 0;
  line-height: 0;
}

.tidal-wave-wave-edge__layer svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tidal-wave-wave-edge__layer svg path {
  fill: currentColor;
}

.tidal-wave-wave-edge__layer--back {
  transform: translateY(6px);
  z-index: 1;
}

.tidal-wave-wave-edge__layer--mid {
  transform: translateY(3px);
  z-index: 2;
}

.tidal-wave-wave-edge__layer--front {
  z-index: 3;
}

/* ——— Content panel ——— */

.tidal-wave-wave-panel,
.tidal-wave-wave-section > .alignwide.tidal-wave-wave-panel {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 auto;
  z-index: 1;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1240px);
  margin-inline: auto !important;
  margin-block: 0 !important;
  padding-inline: var(--tidal-wave-gutter-inline);
  padding-block: var(--tidal-wave-section-padding);
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible;
}

/* CTA bands and other compact strips */
.tidal-wave-wave-panel--compact,
.tidal-wave-cta-band__panel {
  padding-block: var(--tidal-wave-section-padding-compact);
}

.tidal-wave-wave-panel.wp-block-group {
  border-radius: 0 !important;
}

/* Optional inner content wrapper inside panel */
.tidal-wave-wave-panel__inner {
  position: relative;
  z-index: 1;
}

/* ——— Edge visibility modifiers ——— */

.tidal-wave-wave-section--edges-top-only .tidal-wave-wave-edge--bottom {
  display: none;
}

.tidal-wave-wave-section--edges-bottom-only .tidal-wave-wave-edge--top {
  display: none;
}

.tidal-wave-wave-section--edges-none .tidal-wave-wave-edge {
  display: none;
}

/* ——— Full-width wave decor (hero, explainer, …) ——— */

.tidal-wave-section-wave-decor {
  --tidal-wave-section-wave-decor-height: clamp(14rem, 78%, 36rem);
  --tidal-wave-section-wave-seam-right-ratio: 0.838462;
  --tidal-wave-section-wave-seam-tail-ratio: 0.04023;
  --tidal-wave-section-wave-decor-art-height: 261;
  --tidal-wave-section-wave-decor-offset: 20px;
  --tidal-wave-section-wave-decor-clip-trim: 10px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  bottom: calc(
    var(--tidal-wave-wave-edge-height, clamp(52px, 8vw, 76px)) *
      var(--tidal-wave-section-wave-seam-right-ratio) * -1 -
    var(--tidal-wave-section-wave-decor-height) *
      var(--tidal-wave-section-wave-seam-tail-ratio) -
    var(--tidal-wave-section-wave-decor-offset)
  );
  z-index: 2;
  height: var(--tidal-wave-section-wave-decor-height);
  line-height: 0;
  pointer-events: none;
  opacity: 0.58;
  clip-path: inset(
    0 0 calc(
        var(--tidal-wave-section-wave-decor-height) *
          var(--tidal-wave-section-wave-seam-tail-ratio) +
        var(--tidal-wave-section-wave-decor-offset) +
        var(--tidal-wave-section-wave-decor-clip-trim)
      )
      0
  );
}

.tidal-wave-section-wave-decor::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    100deg,
    rgba(182, 215, 250, 0.45) 0%,
    rgba(182, 215, 250, 0.18) 38%,
    transparent 72%
  );
  pointer-events: none;
}

.tidal-wave-section-wave-decor__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tidal-wave-section-wave-decor__svg--fit {
  display: none;
}

.tidal-wave-section-wave-decor__layer--md,
.tidal-wave-section-wave-decor__layer--sm {
  display: none;
}

@media (max-width: 1024px) {
  .tidal-wave-section-wave-decor__layer--lg {
    display: none;
  }

  .tidal-wave-section-wave-decor__layer--md {
    display: block;
  }
}

@media (max-width: 781px) {
  /*
   * 100vw + (50% - 50vw) breakout often exceeds the visual viewport on mobile
   * (scrollbar / dynamic UI chrome) and clips page content on the left. Use the
   * actual parent width instead — sections are already edge-to-edge here.
   */
  .is-style-tidal-wave-wave-white-gentle,
  .is-style-tidal-wave-wave-navy-deep,
  .is-style-tidal-wave-wave-multi-blue,
  .tidal-wave-wave-section,
  .tidal-wave-wave-divider {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  .tidal-wave-section-wave-decor__layer--md {
    display: none;
  }

  .tidal-wave-section-wave-decor__layer--sm {
    display: block;
  }

  .tidal-wave-section-wave-decor {
    --tidal-wave-section-wave-decor-mobile-scale: 1.15;
    --tidal-wave-section-wave-decor-height: clamp(
      calc(9rem * var(--tidal-wave-section-wave-decor-mobile-scale)),
      calc(52vw * var(--tidal-wave-section-wave-decor-mobile-scale)),
      calc(18rem * var(--tidal-wave-section-wave-decor-mobile-scale))
    );
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    overflow: hidden;
    opacity: 0.48;
    bottom: calc(
      var(--tidal-wave-wave-edge-height-mobile, clamp(40px, 12vw, 68px)) *
        var(--tidal-wave-section-wave-seam-right-ratio) * -1 -
      var(--tidal-wave-section-wave-decor-height) *
        var(--tidal-wave-section-wave-seam-tail-ratio) -
      var(--tidal-wave-section-wave-decor-offset)
    );
    height: var(--tidal-wave-section-wave-decor-height);
  }

  .tidal-wave-section-wave-decor__svg--stretch {
    display: none !important;
  }

  .tidal-wave-section-wave-decor__svg--fit {
    display: block;
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    max-width: none;
    aspect-ratio: var(--tidal-wave-section-wave-decor-canvas-width, 864) /
      var(--tidal-wave-section-wave-decor-art-height, 261);
  }
}

/* ——— Responsive ——— */

@media (max-width: 781px) {
  .tidal-wave-wave-edge svg,
  .tidal-wave-wave-edge--layered {
    height: var(--tidal-wave-wave-edge-height-mobile, var(--tidal-wave-edge-height-mobile));
  }

  .tidal-wave-wave-edge--layered .tidal-wave-wave-edge__layer svg {
    height: 100%;
  }

  .tidal-wave-wave-edge__layer--back {
    transform: translateY(4px);
  }

  .tidal-wave-wave-edge__layer--mid {
    transform: translateY(2px);
  }
}