/* Hero block deltas (plan §5.1) — web-only layout on top of SDS type/buttons.
 * @layer web so it sorts above the SDS layers. Matches V2: a giant uppercase
 * stacked title with the accent word in brand gold, a hairline rule, then a
 * lead + CTA row that stacks on mobile. */
@layer web {
  .hero__eyebrow {
    margin-bottom: clamp(1rem, 3vw, 1.75rem);
  }

  /* The signature: oversized, uppercase, tightly stacked. The accent word
     (from {accent}…{/accent} → .sph-accent) takes the brand primary. */
  .hero__title {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    text-transform: uppercase;
    /* Floor chosen so the longest single brand word (INTELLIGENCE, unbreakable)
       still fits a 320px viewport inside the measure padding (bead vqt.4). */
    font-size: clamp(2.5rem, 10vw, 7.5rem);
    line-height: 0.9;
    letter-spacing: var(--sph-tracking-tight);
    color: var(--sph-text);
    margin: 0;
    max-width: 12ch;
  }
  .hero__title .sph-accent { color: var(--sph-primary); }
  /* Long titles (> 40 chars, class set by hero.html) step down one display size
     and widen the measure, so a sentence-length headline sets in ~4 balanced
     lines instead of a 7-line wall (design review §P2, July 2026). The floor
     keeps "A SPREADSHEET" (13ch with its no-break space) inside 320px. */
  .hero__title--long {
    font-size: clamp(2.125rem, 7vw, 5.25rem);
    max-width: 16ch;
  }

  .hero__rule {
    border: 0;
    border-top: 1px solid var(--sph-border);
    margin-block: clamp(1.5rem, 4vw, 2.5rem);
    max-width: 40rem;
  }

  .hero__lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }
  .hero__lead { max-width: 36rem; margin: 0; }
  .hero__lower--split { grid-template-columns: 1fr; align-items: start; }
  .hero__leads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--sph-space-5), 4vw, var(--sph-space-10));
  }
  .hero__leads > .hero__lead { max-width: none; }
  /* The CTAs stack vertically; hero__ctas--<align> (from the block's cta_align
     param, default left) sets how the stacked elements line up with each other. */
  .hero__ctas {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }
  .hero__ctas--left   { align-items: flex-start; }
  .hero__ctas--center { align-items: center; }
  .hero__ctas--right  { align-items: flex-end; }
  /* Quiet secondary link (V2's "→" affordance). Deliberately NOT a .sph-btn: the
     SDS dark pin-back reverts role tokens to their light values for any .sph-btn
     (it assumes a light button background), which makes a transparent link variant
     low-contrast on charcoal. A plain link escapes the pin-back, so --sph-info
     themes correctly — link red in light, lifted to its WCAG dark value on charcoal.
     WORKAROUND for SDS bug saphirion_design_system-hxv; remove once fixed —
     tracked here by www_saphirion_com_value_intelligence_hugo-awo. */
  .hero__more {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-semibold);
    font-size: var(--sph-fs-sm);
    color: var(--sph-info);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    white-space: nowrap;
  }
  .hero__more:hover { color: var(--sph-primary-deep); }

  /* Second-level hero: expose the lead and CTA group as separate children of
     the shared heading grid. Lead height controls its bounded bottom alignment;
     CTAs occupy the following row and therefore never pull medium copy upward. */
  .hero-secondary__aside {
    display: contents;
  }
  .hero-secondary__leads {
    display: grid;
    gap: var(--sph-space-4);
  }
  .hero-secondary__lead { max-width: none; margin: 0; }
  .hero-secondary__actions {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: clamp(1.25rem, 3vw, 2rem);
  }
  .hero-secondary__actions:first-child {
    grid-row: 1;
    align-self: end;
    margin-top: 0;
  }

  @media (max-width: 44rem) {
    .hero__lower { grid-template-columns: 1fr; align-items: start; }
    .hero__leads { grid-template-columns: 1fr; }
    .hero-secondary__actions,
    .hero-secondary__actions:first-child {
      grid-column: 1;
      grid-row: auto;
      align-self: start;
      margin-top: 0;
    }
  }
}