/* ==========================================================================
   CTA BAND — the closing call to action
   ==========================================================================
   Article `cta-band band`. Two layouts:
     centred  + cta-band--center, one text element: <h2> + <p> + <p><a.btn>
              (or separate h2 / text / button elements). --cta-max caps the
              content where a design draws it narrower than the column.
     split    one element_group `row` (toolbox): col-1-2 (eyebrow? + h2) |
              col-1-2 (copy + button), the pair held to a centred 900px
              measure, 44/56.
   Colours come from --grad-cta (defaults to the hero gradient) and
   --cta-heading for the statement (white by default; a brand with a light
   accent sets `--cta-heading: var(--accent)`). A site sets the band height with --cta-min where its
   design draws the band taller than its content.
   ========================================================================== */
.cta-band {
  display: grid;
  align-content: center;
  min-height: var(--cta-min, 0);
  padding-block: clamp(56px, 4.5vw, 72px);
  background: var(--grad-cta, var(--grad-hero));
  color: var(--text-on-dark);

  /* children keep the full column (auto margins would shrink them in the grid) */
  > * { width: 100%; }

  h2 {
    margin: 0;
    color: var(--cta-heading, var(--text-on-dark));
    font-size: clamp(2rem, 3.2vw, 2.875rem);
    line-height: 1.12;
  }
  p { margin: 0 0 1.25em; color: var(--text-on-dark); text-wrap: balance; }
  p:last-child { margin-bottom: 0; }
  .eyebrow { margin-bottom: 0.75em; color: var(--cta-heading, var(--text-on-dark)); }
  a.btn { margin: 0; }

  /* Widen the gutter through --gap-x: the column widths subtract it, so a
     plain column-gap would overflow the row and wrap the pair */
  .row {
    --gap-x: clamp(28px, 2.5vw, 40px);
    max-width: calc(900px + 2 * var(--page-gutter));
    margin-inline: auto;
  }
  .row .rte > p:has(> a.btn):not(:first-child) { margin-top: 24px; }
}

/* The default button hover (--prime) vanishes on the band: go white instead.
   A .light button keeps its own hover. */
.cta-band :is(a.btn:not(.light), .btn:not(.light) a):hover { background-color: var(--white); color: var(--heading); }

@media (min-width: 993px) {
  /* the copy starts level with the statement's first line, not centred on it */
  .cta-band > .row { align-items: flex-start; }
  .cta-band .row > .col-1-2:first-child { flex-basis: calc(44% - var(--gap-x) * 0.44); }
  .cta-band .row > .col-1-2:last-child  { flex-basis: calc(56% - var(--gap-x) * 0.56); }
}

.cta-band--center {
  text-align: center;

  > * { max-width: var(--cta-max, none); margin-inline: auto; }

  h2 { margin-bottom: 0.4em; }
  .rte { max-width: 64rem; margin-inline: auto; }
  .rte > p { max-width: 48rem; margin-inline: auto; }
}