/* cta_banner.css — call-to-action band (centered transparent variant + dark
   rounded card variant). Values from the spec ## Computed Styles: 1440 = base
   rules; 768 → @media(max-width:991px); 375 → @media(max-width:479px).
   Run breakpoint boundary set {479,767,991,1919}.
   Typography via var(--font-*) (framework-11 E1 lock; source family already
   matches the frozen tokens).

   Vertical registration (documented in report.md): the representative diff
   target is the CENTERED variant on /accessibility. The <h2> heading sits below
   the capture's depth-5 DOM cap, so its size is measured from the 1440 source
   crop — line-height 48px, 2 lines, weight 500. The box model that lands the
   CTA button at the source's measured position (band-relative top=232 at 1440)
   is: padding-top 96 + heading block (2×48=96) + cta margin-top 40 = 232. The
   768/375 source captures show the heading INVISIBLE (an un-triggered Webflow
   scroll-reveal on the heading at those viewports) while the button still
   renders — the heading nonetheless occupies its normal line box in the source,
   so the type ramp below is tuned so the rendered button registers on the
   source button (measured band-relative top: 224 @768, 201 @375). */

/* border-box for every box — the Webflow source uses a global border-box reset,
   so the padding values here sit INSIDE the declared widths. */
.c-cta_banner__section-cta-banner,
.c-cta_banner__section-cta-banner * {
  box-sizing: border-box;
}

/* ---------------- Section root (source: .section_cta-banner) ---------------- */
.c-cta_banner__section-cta-banner {
  display: block;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes the body margin on
     composed pages — the .region-content reset restores it there). On a
     width:auto block the negative margin resolves to a viewport-wide box at
     x=0, so it adds no horizontal scroll. */
  margin: -8px;
}
.region-content .c-cta_banner__section-cta-banner {
  margin: 0;
  width: 100%;
}

/* -------- padding-global + padding-section-* (source: .padding-global.padding-section-*)
   padding-global owns the horizontal gutter, padding-section-* the vertical.
   The div carries both canonical tokens; scope each section token under the
   section root so the band's own values win the cascade (rule 9). --------- */
/* centered → padding-section-medium (canonical: c-accordion__heading-wrap-2) */
.c-cta_banner__section-cta-banner .c-accordion__heading-wrap-2 {
  display: block;
  padding: 96px var(--space-40);
}
/* card → padding-section-small (canonical: c-about_info__heading-wrap-6) */
.c-cta_banner__section-cta-banner .c-about_info__heading-wrap-6 {
  display: block;
  padding: var(--space-64) var(--space-40);
}

/* ---------------- container-large (source: .container-large) -----------------
   Centred with the shared margin-inline primitive; the side gutter comes from
   the padding-global wrapper above, so the container needs only the cap. */
.c-cta_banner__section-cta-banner .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* content-wrapper (source: .cta-banner_content-wrapper) — lifted to the shared
   atom_c_cta_banner_cta_banner_content_wrapper SDC (WS-FE-1). Its selector block
   now lives in css/atoms.css and the element is embedded from cta_banner.twig;
   do NOT re-declare it here (the merge gate hard-fails a scoped duplicate). */

/* =========================== Centered variant ============================== */
/* max-width-xlarge — the fixed-width child inside the flex-centred parent —
   lifted to the shared atom_c_cta_banner_max_width_xlarge SDC (WS-FE-1). Its
   selector block now lives in css/atoms.css and the element is embedded from
   cta_banner.twig; do NOT re-declare it here. */
/* text-align-center (source class dropped by the map → builder BEM). */
.c-cta_banner__section-cta-banner .c-cta_banner__text-align-center {
  text-align: center;
}

/* Heading — measured from the 1440 source crop (40px/48px, weight 500). */
.c-cta_banner__section-cta-banner .c-cta_banner__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  color: var(--color-text-primary);
}

/* CTA gap — 40px below the heading block lands the button at the source's
   measured band-relative top (232 @1440). */
.c-cta_banner__section-cta-banner .c-cta_banner__cta {
  margin-top: var(--space-40);
}

/* CTA appearance — a sharp-cornered near-black rectangle (~180×52 at desktop).
   atom_button (R10) owns the theme's ONE interactive-effect rule
   (transition/hover); only the box appearance is set here. */
.c-cta_banner__section-cta-banner .c-atom-button {
  padding: var(--space-16) 49px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-inverse);
  background-color: rgb(0, 0, 0);
}

/* =========================== Card variant ================================= */
/* unlabeled wrapper div (source: no class) — fixed-width child of the flex
   parent; spec recorded width 1280/688/343 = full parent width. */
.c-cta_banner__section-cta-banner .c-cta_banner__card-inner {
  display: block;
  width: 100%;
}
/* div-block-57 — the dark rounded card surface. Spec: display grid, 3 fixed
   tracks (heading in the wide leading track, CTA at the trailing edge,
   justify-content space-between), gap 16px, padding 60px, black, 15px radius.
   The 2-visible-children/3-declared-tracks mapping is not resolvable from the
   capture (spec note); reproduced as the described visual — heading fills the
   leading track (minmax(0,1fr), rule 18) with the CTA at the trailing edge
   (auto) — robust to Drupal-seeded content width. */
.c-cta_banner__section-cta-banner .c-cta_banner__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  padding: 60px;
  background-color: rgb(0, 0, 0);
  border-radius: var(--radius-15);
}
.c-cta_banner__section-cta-banner .c-cta_banner__group > * {
  min-width: 0;
}
/* Card heading — white on the dark surface (overrides the centered heading
   colour; extra .c-cta_banner__group scope raises specificity to win). */
.c-cta_banner__section-cta-banner .c-cta_banner__group .c-cta_banner__heading {
  color: var(--color-text-inverse);
}
/* Card CTA — no top gap (grid row), inverted button (light on dark). */
.c-cta_banner__section-cta-banner .c-cta_banner__group .c-cta_banner__cta {
  margin-top: 0;
}
.c-cta_banner__section-cta-banner .c-cta_banner__group .c-atom-button {
  color: rgb(0, 0, 0);
  background-color: var(--color-text-inverse);
}

/* ============================ Tablet: 768 band ==============================
   Container narrows to 688; centred padding drops to 64px 40px, card padding
   stays 64px 40px. Heading scales to 32px/40px so it occupies ~3 lines in the
   688 column and the button registers on the source button (top 224). */
@media (max-width: 991px) {
  .c-cta_banner__section-cta-banner .c-accordion__heading-wrap-2 {
    padding: var(--space-64) var(--space-40);
  }
  .c-cta_banner__section-cta-banner .c-cta_banner__heading {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ============================ Mobile: 375 band ==============================
   Container narrows to 343; centred padding 48px 16px, card padding 32px 16px
   on the outer wrapper. Heading scales to 26px/32px; CTA gap tightens. Card
   grid collapses to a single column (heading stacks above CTA) with 60px 30px
   inner padding. Button horizontal padding tightens (source button 151px). */
@media (max-width: 479px) {
  .c-cta_banner__section-cta-banner .c-accordion__heading-wrap-2 {
    padding: 48px var(--space-16);
  }
  .c-cta_banner__section-cta-banner .c-about_info__heading-wrap-6 {
    padding: 32px var(--space-16);
  }
  .c-cta_banner__section-cta-banner .c-cta_banner__heading {
    font-size: 26px;
    line-height: 32px;
  }
  .c-cta_banner__section-cta-banner .c-cta_banner__cta {
    margin-top: var(--space-24);
  }
  .c-cta_banner__section-cta-banner .c-atom-button {
    padding: var(--space-16) 35px;
  }
  .c-cta_banner__section-cta-banner .c-cta_banner__group {
    grid-template-columns: minmax(0, 1fr);
    padding: 60px 30px;
  }
}