/*
 * Roadmap Hero component -- production styles.
 *
 * Per Product Design System §5.1: "Full-width band, content
 * constrained to the 760-820px reading column." "Generous top/bottom
 * padding (64/48 rhythm); never let Key Facts touch the intro text
 * without at least 24px separation."
 *
 * Key Facts spacing is owned via a Hero-owned wrapper
 * (.sr-roadmap-hero__key-facts) rather than a cross-component
 * descendant selector reaching into Key Facts' own class -- this
 * project avoids selectors like ".roadmap-hero .key-facts ...".
 *
 * Colour/typography (Stage 7.5 Visual Parity): category label styled
 * as the legacy "eyebrow" (red text, red-tinted pill, uppercase,
 * verbatim index.html `.eyebrow`); title in Fraunces/ink (legacy h1);
 * intro in Inter/text-secondary (legacy `.hero-sub`); primary action
 * styled as the legacy `.btn-red` primary button.
 */

@import url("../../config/tokens/tokens.generated.css");

.sr-roadmap-hero {
  width: 100%;
  max-width: 820px;
  box-sizing: border-box;
  margin-inline: auto;
  padding-block: var(--space-xxl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.sr-roadmap-hero__category {
  font-family: var(--font-family-body);
  font-size: var(--font-label-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-label-tracking);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-primary);
  background: var(--color-primary-light);
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-large);
}

a.sr-roadmap-hero__category:hover {
  text-decoration: underline;
}

.sr-roadmap-hero__title {
  margin: 0;
  word-break: break-word;
  font-family: var(--font-family-display);
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-line-height);
  font-weight: var(--font-h1-weight);
  color: var(--color-text-primary);
}

.sr-roadmap-hero__intro {
  margin: 0;
  word-break: break-word;
  max-width: 65ch;
  font-family: var(--font-family-body);
  font-size: var(--font-body-large-size);
  line-height: var(--font-body-large-line-height);
  color: var(--color-text-secondary);
  /* ROOT CAUSE FIX (Final Production QA & Corrections Sprint -- shared
     issue: "initial text runs together, needs paragraph breaks",
     requested for nearly every roadmap -- DNV #1, Non-Lucrative #3,
     EU Family #2, CUE #3, TIE #2, Bringing Pets #2, Healthcare #2,
     Cl@ve #2, Digital Certificate #2, Renting #2, Empadronamiento #2,
     Banking #2, etc.). Every roadmap's canonical `overview` string
     already contains "\n\n" at exactly the paragraph breaks the
     corrections document asks for (verified against the Digital Nomad
     Visa ES/EN source: it already splits at "Según dónde solicites" /
     "SpainReady te ayuda"), but this element renders it via
     `textContent` into a single <p>, and default `white-space: normal`
     collapses "\n\n" to a single space -- so the intro always looked
     like one run-on paragraph regardless of the source data. This is a
     rendering defect, not a content defect: no wording changes, no new
     DOM elements, just letting the existing paragraph breaks display. */
  white-space: pre-line;
}

.sr-roadmap-hero__key-facts {
  margin-top: var(--space-m);
}

.sr-roadmap-hero__primary-action {
  display: inline-block;
  margin-top: var(--space-m);
  width: fit-content;
  font-family: var(--font-family-body);
  font-size: var(--font-button-size);
  font-weight: var(--font-button-weight);
  text-decoration: none;
  color: var(--color-surface);
  background: var(--color-primary);
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius-medium);
  transition: opacity var(--motion-functional-duration) var(--motion-functional-easing),
    transform var(--motion-functional-duration) var(--motion-functional-easing);
}

.sr-roadmap-hero__primary-action:hover {
  opacity: 0.87;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .sr-roadmap-hero__primary-action {
    transition: none;
  }
  .sr-roadmap-hero__primary-action:hover {
    transform: none;
  }
}