/*
  CALL TO ACTION — a light-green band (zorgvrij_call_to_action). Free WYSIWYG
  text on the left with a Gravity Form or a primary-button link, and an image on
  the right. A wavy TOP edge only; the bottom is flat. Reuses the band SVG; see
  components/wave-band.css for the parallel-edge rationale (don't scaleY(-1)).

  WIDTH is whatever the Page Builder row/column gives it (stretch the row for a
  full-bleed band) — the component does NOT break out of its column itself.

  STRUCTURE
    section.cta                       colour is NOT set here (would tint the form)
      span.cta__wave--top             wave-band-top.svg    → wavy top, lapped
                                      UP over the previous row (out of flow)
      div.cta__body                   solid green; .container > .cta__grid
        .cta__content                 WYSIWYG + .cta__form | .cta__actions
        .cta__media                   image (when present)
      span.cta__curve ×2              section-level dashed "Vector 12" flourishes

  Surface is fixed to --color-green-light. Text, headings and form labels are
  pure black here for maximum contrast on the light green (the global defaults —
  green-tinted dark text, brand-orange headings — wash out on it). The
  .btn-primary stays dark green + white (correct contrast on light green).
*/

.cta {
  --cta-color: var(--color-green-light);
  --cta-wave-height: var(--wave-band-overhang);
  /* On the light-green band, text and headings are pure black for maximum
     contrast — green-tinted darks (the global text/heading defaults) wash out
     on green-light. */
  --color-heading: var(--color-black);
  color: var(--color-text);
  position: relative;
  /* Clip the decorative curves at the band's left/right edges (like the Figma)
     without a horizontal scrollbar, while still letting the wave + curve lap UP
     over the row above (overflow-y stays visible — clip pairs with visible). */
  overflow-x: clip;
}

.cta .btn {
  margin-block-end: 0;
}

.cta__wave {
  display: block;
  line-height: 0;                              /* kill the inline-SVG descender gap */
  color: var(--cta-color);                     /* drives the wave SVG's currentColor */
  pointer-events: none;
}

/* Lap the wavy crest UP over the row above the band (mirrors the footer's
   .wave--overlap): taken out of flow and lifted by its own height, so the green
   body butts straight against the previous row and the wave paints across that
   seam. .cta (position:relative) is the containing block, so it stays the band's
   width — no viewport-width reliance like the footer wave. */
.cta__wave--top {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  transform: translateY(-100%);
  z-index: 2;                                  /* paints over the previous row */
}

.cta__wave svg {
  display: block;
  width: 100%;
  height: var(--cta-wave-height);              /* preserveAspectRatio="none" → stretches */
  fill: currentColor;
}

/* --cta-padding-block is the band's vertical inset (bumped at desktop below).
   The bottom edge adds --surface-reserve-end so that when the footer wave laps up
   over a CTA that is the last row on the page, the reserve lands HERE — extending
   the band's own green under the crest — rather than on the padding:0 .vc_row that
   wraps it (which would open a transparent gap below the band). See the
   footer-wave clearance rules in components/page-content.css. */
.cta__body {
  --cta-padding-block: var(--space-l);
  background-color: var(--cta-color);
  margin-block: -1px;                          /* overlap the edges to kill sub-pixel seams */
  padding-block: var(--cta-padding-block)
                 calc(var(--cta-padding-block) + var(--surface-reserve-end, 0px));
}

.cta__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

/* Trim the WYSIWYG's outer margins so the band padding stays even. */
.cta__content > :first-child {
  margin-block-start: 0;
}

.cta__content > :last-child {
  margin-block-end: 0;
}

.cta__actions {
  margin-block-start: var(--space-l);
  margin-block-end: 0;
}

.cta__form {
  margin-block-start: var(--space-l);
}

/* Inline submit field: align the button to the top of the input so a validation
   message growing below the input doesn't drag the button out of alignment. */
/* On the light-green band the default GF danger red lacks contrast, so validation
   text/borders use the CTA body colour. Set on the GF theme element itself — GF
   defines these custom props there, so an inherited value from .cta is shadowed.
   --gf-color-danger-rgb feeds GF's rgba() usages; --color-text is black here. */
.cta .gform-theme--foundation {
  --gf-color-danger: var(--color-text);
  --gf-color-danger-rgb: 0, 0, 0;
}

.cta__form .gform-theme--foundation #field_submit {
  align-items: start;
}

.cta__media {
  position: relative;
}

.cta__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);             /* 2rem = 32px, per design */
}

/* Decorative dashed "flight-path" curve — Figma "Vector 12". DESKTOP ONLY: inlines
   the pre-rotated svg (cta-curve-desktop.svg) whose box hugs the curve so the top
   aligns, pulled up over the wave. Dark-green dashes, purely decorative
   (aria-hidden), section-level. (On mobile the curve is a right-aligned background
   on the green band instead — see the mobile block.) Geometry is driven by the
   custom properties below. */
.cta__curve {
  position: absolute;
  z-index: 3;
  inline-size: var(--curve-w, 7rem);
  aspect-ratio: var(--curve-ar, 363.721 / 495.26);
  inset-block-start: var(--curve-top, auto);
  inset-block-end: var(--curve-bottom, auto);
  inset-inline-end: var(--curve-right, auto);
  inset-inline-start: var(--curve-left, auto);
  margin-block-start: var(--curve-mt, 0);
  transform: rotate(var(--curve-rotate, 0deg));
  color: var(--color-green-dark);
  pointer-events: none;
}

.cta__curve svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Shown only on desktop (mobile uses the background image — see the mobile block). */
.cta__curve--desktop {
  display: none;
}

/* ── Desktop: text left, image right ──────────────────────────────────────── */
@media (min-width: 48rem) {
  .cta__body {
    --cta-padding-block: var(--space-2xl);
  }

  .cta__grid {
    grid-template-columns: 1fr 1fr;
  }

  .cta__image {
    aspect-ratio: 3 / 2;
  }

  /* Push the button down to line up with the input below its label (no label
     row on mobile, where the field stacks instead of sitting inline). */
  .cta__form .gform-theme--foundation #field_submit {
    margin-block-start: 2rem;
  }

  /* One long pre-rotated curve at the top-right; its own box hugs the curve (no
     CSS rotation), so the top stays put. Pulled up by the row spacer so it sweeps
     over the wave into the gap above. */
  .cta__curve--desktop {
    display: block;
    --curve-ar: 600 / 108;                     /* cta-curve-desktop.svg viewBox ratio */
    --curve-w: clamp(18rem, 30vw, 100%);
    --curve-top: 0;
    --curve-right: 0%;
    --curve-mt: calc(-1 * var(--row-spacer));
  }
}

/* ── Mobile: image on top, the green band's wavy edge falling DOWN over its
      bottom (mirrors the footer wave lapping over the content above it). The
      section's own top wave is dropped here — the image becomes the band's top
      element, with nothing above it. ──────────────────────────────────────── */
@media (max-width: 47.999rem) {
  /* No wave above the image; it's now the very top of the band. */
  .cta__wave--top {
    display: none;
  }

  .cta__body {
    padding-block-start: 0;                    /* image sits flush at the band top */
    /* The dashed curve becomes a right-aligned background on the green band
       (Figma "nieuwsbrief" mobile). cta-curve-mobile.svg has its colour baked in,
       since a CSS background can't take currentColor. Fixed 170px wide, nudged
       40px off the right edge (bleeds into the corner, clipped by the band's
       overflow) and lifted --cta-padding-block off the bottom so its foot lines
       up with the content inset. */
    background-image: url("../../svg/cta-curve-mobile.svg");
    background-repeat: no-repeat;
    background-position: right -40px bottom var(--cta-padding-block);
    background-size: 170px;
  }

  .cta__media {
    order: -1;                                 /* image first / on top */
    /* Full-bleed: cancel .container's inline padding so the image reaches the
       band edges, with no green showing down its sides. */
    margin-inline: calc(-1 * var(--distance-to-edge));
  }

  /* The green wavy crest, masked from the band SVG, lapping UP over the image's
     bottom. It is the same green as the band continuing below, so the image
     reads as dipping under one continuous green edge. */
  .cta__media::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--cta-wave-height);
    background-color: var(--cta-color);
    -webkit-mask: url("../../svg/wave-band-top.svg") no-repeat center / 100% 100%;
    mask: url("../../svg/wave-band-top.svg") no-repeat center / 100% 100%;
  }

  .cta__image {
    aspect-ratio: 4 / 3;
    border-radius: 0;                          /* full-bleed image — square, no green around it */
  }

}