/* ════════════════════════════════════════════════════════════════════════════
   CtaV1 — "Cta Buttons - Dark" (SEE AN ANT TRAIL TODAY?)
   Dark near-black band (var(--lt-txt)) with a faint dimmed photo overlay; two equal
   columns. LEFT: lime highlighter swash behind an 88px display headline (white
   line + near-black accent word), 16px copy, lime flair. RIGHT: lime primary
   button + white-outline secondary + uppercase microcopy.
   Framework-first; SEMANTIC tokens only (no raw hex / custom fonts); px ÷ 18.
   ════════════════════════════════════════════════════════════════════════════ */

.cta.v1 {

  /* ── local sizing tokens (artifact px ÷ 18) ─────────────────────────── */
  --cta-v1-col-gap:   4.444rem;   /* 80px gap between the two columns */
  --cta-v1-pad-y:     2.222rem;   /* 40px section vertical padding */
  --cta-v1-left-py:   4.444rem;   /* 80px left column inner padding */
  --cta-v1-text-gap:  1.333rem;   /* 24px between text-box items */
  --cta-v1-right-gap: 0.889rem;   /* 16px between stacked buttons (matches steps-panel gp_sp-sml) */
  --cta-v1-head-s:    4.889rem;   /* 88px headline */
  --cta-v1-head-trk: -0.0978rem;  /* -1.76px headline tracking */
  --cta-v1-body-s:    0.889rem;   /* 16px supporting copy */
  --cta-v1-micro-trk: 0.222rem;   /* 4px microcopy tracking */
  border-block-start: var(--bdr-w) var(--bdr-stl) hsl(from var(--bdr-clr) h s l / var(--bdr-clr-o));
  overflow: clip;

  /* Dimmed photo over the dark surface (artifact: image ~15% opacity). */
  picture.bg img {
    object-fit: cover;
    opacity: 0.15 !important;
  }

  /* Second overlay: same photo, mix-blend-multiply @20% (artifact, line 2685). */
  picture.bg.cta-v1-bg-mult {
    mix-blend-mode: multiply;

    img {
      opacity: 0.2 !important;
    }
  }

  /* ── row: two equal, centered columns 80px apart ────────────────────── */
  .cta-v1-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cta-v1-col-gap);
    padding-block: var(--cta-v1-pad-y);
  }

  /* ── LEFT: text box, vertically centered, 80px inner padding ────────── */
  .cta-v1-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: var(--cta-v1-left-py);
  }

  /* Text Box: items-start (left), gap-24, full width; relative anchor for swash. */
  .cta-v1-textbox {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cta-v1-text-gap);
  }

  /* Headline: Archivo Black 88px, line-height 0.9, tracking -1.76px.
     White body (light on dark palette) with a near-black accent word. */
  .cta-v1-head {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--fnt-t);            /* Archivo */
    line-height: 1; /* was 0.9 — policy: never < 1 */
    letter-spacing: var(--cta-v1-head-trk);
    color: var(--text-color);             /* white on dark palette */
    text-transform: uppercase;
  }

  /* Accent word — artifact near-black var(--lt-txt) (paired dark ink), sitting on
     the lime highlighter swash below. */
  .cta-v1-head .cta-v1-head-accent {
    position: relative;
    color: var(--btn-pry-txt);
  }

  /* Lime highlighter swash — anchored to the accent word so it tracks "TODAY?" at
     every breakpoint (was a fixed-position box tuned to the desktop wrap). Lime
     regardless of palette → var(--accent); z-index -1 keeps it behind the text. */
  .cta-v1-head .cta-v1-head-accent::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -0.08em -0.28em;      /* slight overhang past the word, like a highlighter */
    background: var(--accent);
    transform: rotate(-2.52deg);
    transform-origin: center;
    pointer-events: none;
  }

  /* Supporting copy: SUSE 16px, leading 1.6, fixed 520px column (artifact). */
  .cta-v1-body {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--fnt-m);            /* SUSE */
    font-size: var(--cta-v1-body-s);
    line-height: 1.6;
    color: var(--text-color);
    max-width: 28.889rem;                 /* 520px */
  }

  /* Brand flair (FlairLeft theme element) — ~24px tall, matching mainstage/banner. */
  .cta-v1-flair {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
  }

  /* flair svg sized centrally by .flr-lft in theme.css */

  /* ── RIGHT: buttons stacked + microcopy, left-aligned, 16px button gap ─── */
  .cta-v1-right {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--cta-v1-right-gap);
  }

  /* Microcopy: SUSE 16px tracking-4px uppercase, 520px column.
     +16px top margin keeps its 32px separation from the buttons now that the
     column gap tightened to 16px for the stacked buttons. */
  .cta-v1-micro {
    margin: 0;
    margin-top: 0.889rem;                 /* 16px + 16px column gap = 32px below buttons */
    font-family: var(--fnt-m);            /* SUSE */
    font-size: var(--cta-v1-body-s);      /* 16px */
    line-height: 1.4;
    letter-spacing: var(--cta-v1-micro-trk);
    text-transform: uppercase;
    color: var(--text-color);             /* white on dark palette */
    max-width: 28.889rem;                 /* 520px */
  }

  /* ── responsive: stack the two columns below 1280 (no mobile design in the
        artifact; use the breakpoint convention). ─────────────────────────── */
  @media screen and (max-width: 1279px) {
    .cta-v1-row {
      flex-direction: column;
      align-items: stretch;
      gap: 2.222rem;        /* 40px */
    }

    .cta-v1-left {
      padding-block: 0;
    }

  }

  @media screen and (min-width: 1280px) {
    .cta-v1-head {
      font-size: var(--cta-v1-head-s);   /* 88px display headline (desktop) */
    }
  }
}