/**
 * Section: Call to action (split)
 *
 * Ported from _mockups/our-team.html `.card.tm-join` and `.tm-join-cta`, its
 * only region in the 27 signed-off pages, so nothing here is a compromise
 * between copies.
 *
 * THIS FILE REPLACES THE STARTER'S, IT DOES NOT EXTEND IT. The starter painted
 * a full-bleed `--brand-primary` band with `--surface` text, off a `.contact-cta`
 * block from a design reference that is not this project's. PASIA's composition
 * is a paper `.card` on the default mist band. Nothing of the old file survives
 * except the id.
 *
 * WHAT components.css ALREADY OWNS, and must not be re-declared here:
 *
 *   .card       the --paper ground, the --line hairline, --r-lg and --shadow-s.
 *               `.tm-join` re-states `border-radius: var(--r-lg)` on top of
 *               `.card`; that is the mock-up repeating itself, not a second
 *               value, so it is dropped rather than ported.
 *   .note       the --text-sm, --ink-soft line the outstanding-detail note uses.
 *   .ph-badge   the "Client to supply" badge, already correct on paper.
 *   .btn-primary  the solid forest button.
 *   .eyebrow    the small gold line, from tokens.css.
 *
 * ---------------------------------------------------------------------------
 * CONTRAST, MEASURED, NOT ESTIMATED
 *
 * The band is --mist and the card is --paper, so every value is taken on
 * --paper #ffffff:
 *
 *   --gold-deep  #7e622e   the eyebrow and the heading's `em`      5.72:1
 *   --ink        #14231f   the heading                           16.28:1
 *   --ink-soft   #45524d   the body and the note                  8.18:1
 *   .btn-primary #ffffff on --forest                             11.61:1
 *   .ph-badge    --gold-deep on its --gold-tint-10 stripe over
 *                --paper                                          5.17:1
 *
 * The card's own hairline, --line on --mist, measures 1.20:1. That is a
 * decorative edge and not a control boundary: the card is not interactive, the
 * only control inside it is a solid button with its own 11.61:1 label, so
 * SC 1.4.11's 3:1 does not attach to it. Named rather than left unsaid, because
 * a reader checking the numbers will see it.
 *
 * Nothing in this section sits on a dark ground, so hard rule 7 has no surface
 * here.
 *
 * THE FOCUS RING, MEASURED AGAINST WHAT IS ACTUALLY BEHIND IT. tokens.css draws
 * `outline: 3px solid var(--gold-deep)` at `outline-offset: 2px` plus a 6px
 * --gold-tint-20 halo from the border box outward. The halo FILLS the 2px gap,
 * so quoting the bare card's 5.72:1 overstates it: measured against the
 * composited halo the ring is 4.74:1 on the card and 4.39:1 on the mist band
 * around it. Both clear SC 1.4.11's 3:1, so the conclusion holds on the
 * stricter reading. The halo itself is 1.21:1 against --paper, which is
 * decoration: the 3px outline carries the criterion alone.
 *
 * ONE ESCALATION, NOT A DEFECT. The padding clamp below is the fifth distinct
 * card-or-panel padding clamp in the theme, against four different value sets:
 * clamp(2.5rem, 6vw, 4.5rem) and clamp(2.25rem, 5vw, 3.75rem) in components.css
 * for the band and the panel, clamp(1.5rem, 3.5vw, 2.75rem) in team-roster.css,
 * this one, and service-blocks.css, which has already tokenised its own as
 * clamp(var(--s-4), 4vw, var(--s-6)). Hard rule 1 says a value with no token
 * gets one; tokens.css is not this agent's file, so it is raised rather than
 * added. Until a --pad-card ladder exists, the mock-up's own distance is
 * carried here verbatim, which is what every other section stylesheet does.
 * ------------------------------------------------------------------------- */

/* `1.4fr auto` is the mock-up's, and it is the composition: the text column
   takes the width it needs and the button column takes none it does not. The
   clamp padding is the mock-up's own distance and has no token, in the same way
   `.pasia-cta-band`'s does. */
.cta-split-card {
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  padding: clamp(1.75rem, 4.5vw, 3rem);
}

/* The mock-up spaces this column with margins on the heading rather than a flex
   gap on the parent, and the two are not interchangeable here: the eyebrow gap
   and the paragraph gap are different values, --s-3 and --s-2. Ported as
   written. */
.cta-split-card h2 {
  margin: var(--s-3) 0 var(--s-2);
  font-size: var(--text-2xl);
}

/* The gold italic clause the heading's field instruction promises. `.head h2 em`
   in base.css cannot reach it: that rule is scoped to the section-head component
   and this heading is inside a card, not a `.head`. Same three declarations,
   one consumer, so it lives here rather than being widened into a shared file.
   --gold-deep and never --gold-bright, which measures 1.83:1 on a light ground.
   No mock-up exercises it, `.tm-join`'s heading carries no `<em>`, but the field
   promises it and an unkept promise in an instruction is what base.css's own
   note calls out. */
.cta-split-card h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-deep);
}

.cta-split-card p {
  max-width: 58ch;
  color: var(--ink-soft);
}

/* The button column. Left-aligned rather than stretched, so a short label does
   not become a full-width slab beside a paragraph. */
.cta-split-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}

/* The note wraps as a unit rather than letting the badge sit alone on one line
   with its explanation on the next. */
.cta-split-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
}

/* The mock-up's own breakpoint. Below it the button column drops under the
   text rather than squeezing the paragraph to nothing. */
@media (max-width: 620px) {
  .cta-split-card {
    grid-template-columns: 1fr;
  }
}