/* ==========================================================================
   CTA BAND
   --------------------------------------------------------------------------
   Reference (29 Sep): a soft blurred-gradient field, headline top-left,
   actions bottom-left, and a stepped pyramid of vertical bars on the right.

   The page supplies the look through custom properties on .cta:
     --cta-bg     background layers (radial blobs over a base colour)
     --cta-bar    bar colour — the bars are an SVG MASK (cta-bars.svg,
                  from tools/ctabars.py), so one file serves every theme
   plus the usual --heading / --ink / --brand overrides for the text and
   buttons. No literal colours here.
   ========================================================================== */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cta-bg, var(--ground));
  color: var(--ink);
}

.cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: clamp(360px, 32vw, 480px);
}

.cta h2 {
  max-width: 17ch;
  font-size: var(--size-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.cta .lede {
  margin-top: var(--space-5);
  max-width: 46ch;
  font-size: var(--size-body);
  color: var(--ink);
}

/* Bars: anchored bottom-right, full band height. The wrapper fades them in
   from the left so they never sit hard against the copy. */
.cta__bars {
  position: absolute;
  right: 0; bottom: 0;
  height: 100%;
  aspect-ratio: 1000 / 640;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 34%);
          mask-image: linear-gradient(to right, transparent 0%, black 34%);
}
.cta__bars::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--cta-bar, var(--heading));
  -webkit-mask: url(../img/art/cta-bars.svg) center bottom / 100% 100% no-repeat;
          mask: url(../img/art/cta-bars.svg) center bottom / 100% 100% no-repeat;
}

/* Pixel-nature variant (v1): a pixel-art landscape strip across the bottom
   (tools/pixelscape.py, transparent sky), in place of the procedural bars.
   Rule since 29 Sep: v1 speaks pixelated nature, v2 procedural art. */
.cta__scape {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  width: 100%;
  height: clamp(160px, 20vw, 280px);
  object-fit: cover; object-position: 50% 0;
  image-rendering: pixelated;
  pointer-events: none; user-select: none;
}

@media (max-width: 860px) {
  .cta__inner { min-height: 0; gap: var(--space-7); }
  /* Narrow screens: the bars keep to the bottom strip beside the button,
     clear of the copy, and fade in further from the left. */
  .cta__scape { height: 150px; }
  .cta__bars {
    height: 34%;
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60%);
            mask-image: linear-gradient(to right, transparent 0%, black 60%);
  }
}