/* ============================================================================
 * AlterSmoke — Checkout V2 · per-step editorial heading
 * ----------------------------------------------------------------------------
 * Reference: Claude Design "Checkout AlterSmoke V2" (app-v2.jsx `PageHeading`).
 * Each step shows an eyebrow ("ÉTAPE x sur N") + a large editorial title + a
 * lead sentence, ABOVE the step content. Rendered in the step wrapper override
 * templates/checkout/_partials/steps/checkout-step.tpl.
 *
 * Only the CURRENT step shows the editorial block; the native accordion title
 * (.step-title) is visually collapsed for that step (kept for a11y + checkout.js
 * step navigation). Completed / unreachable steps keep the small native title.
 *
 * Brand tokens only (Brockmann via --as-font-family, ink --as-grey-900, muted
 * greys) — NOT the maquette's DM Sans / approximate colours.
 * ========================================================================== */

/* Hidden by default — only the current step reveals it. */
.ck-step-edito {
  display: none;
}

.checkout-step.-current > .ck-step-edito {
  display: block;
  margin: 2px 0 24px;
}

/* Current step: collapse the native accordion title but keep it in the DOM
   (screen readers + checkout.js). Completed steps keep their visible title. */
.checkout-step.-current > .step-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ck-step-edito__eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: var(--as-font-family, 'Brockmann', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--as-grey-300, #777777);
}

.ck-step-edito__title {
  margin: 0 0 8px;
  font-family: var(--as-font-family, 'Brockmann', sans-serif);
  font-size: clamp(25px, 3.2vw, 34px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--as-grey-900, #0F0F0F);
}

.ck-step-edito__lead {
  margin: 0;
  max-width: 54ch;
  font-family: var(--as-font-family, 'Brockmann', sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--as-grey-500, #353535);
}

@media (max-width: 575px) {
  .checkout-step.-current > .ck-step-edito {
    margin-bottom: 18px;
  }
  .ck-step-edito__title {
    font-size: 23px;
  }
  .ck-step-edito__lead {
    font-size: 14px;
  }
}