/* Call to action (library block, T23).
   A rounded band (T02 .band) inset from the page edges: centred heading
   (t-band, last word bold), an optional line and one pill button. The
   band's ground, text, focus and button colours come from the section
   theme class (themes.css); this file sets layout only. Mobile first,
   tokens only (prototype sizes noted beside the token maths). */

.cta {
  padding-inline: var(--page-gutter);
  margin-block: var(--section-space);
}

.cta__band {
  max-width: var(--container-wide);
  /* prototype clamp(360px, 34vw, 520px) */
  min-height: clamp(calc(var(--space-40) * 2.25), 34vw, calc(var(--space-40) * 3.25));
  margin-inline: auto;
  display: flex;
  align-items: center;
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* prototype clamp(24px, 3vw, 36px) */
  gap: clamp(var(--space-6), 3vw, calc(var(--space-8) + var(--space-1)));
  width: 100%;
  /* prototype clamp(56px, 7vw, 110px) clamp(24px, 5vw, 72px) */
  padding:
    clamp(calc(var(--space-12) + var(--space-2)), 7vw, calc(var(--space-24) + var(--space-3) + var(--space-1) / 2))
    clamp(var(--space-6), 5vw, calc(var(--space-16) + var(--space-2)));
  text-align: center;
}

.cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  /* prototype 820px: the text measure plus 180px */
  max-width: calc(var(--container-text) + var(--space-40) + var(--space-5));
}

.cta__heading { margin: 0; }

.cta__line {
  margin: 0;
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-body-tight);
  color: var(--color-text);
  overflow-wrap: break-word;
}