/* ============================================================
   AXIS WEBPRO | components/intro.css
   Shared prose-intro section. Used on /programmatic-seo/,
   /about/, /results/ (and any future page emitting a section
   of type "intro").

   Markup contract (from axis_render_section_intro):
     <section class="intro-section">
       <div class="container">
         <span class="eyebrow">{optional eyebrow}</span>
         <h2>{heading}</h2>
         <p>{body para}</p>   (one per blank-line block, via wpautop)
         <p>{body para}</p>
       </div>
     </section>

   Design intent:
     - Eyebrow + h2 centered, follows the site's section-header convention
       (matches services-section, process-section, kpi-band).
     - Body prose left-aligned in a 66ch centered column for readability
       (refactoring-ui line-length heuristic).
     - Section block padding matches the project's section rhythm.

   References tokens.css. Zero hardcoded hex.
   ============================================================ */

.intro-section {
  padding-block: clamp(48px, 6vw, 80px);
}

/* Narrow the inner container from the global 1200px to a prose-readable
   column. .container.margin-inline: auto from base.css still centers it. */
.intro-section .container {
  max-inline-size: 66ch;
}

.intro-section .eyebrow {
  display: block;
  text-align: center;
}

.intro-section h2 {
  text-align: center;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  max-inline-size: 30ch;
  margin-inline: auto;
  margin-block-end: var(--space-5);
  color: var(--color-primary);
}

.intro-section p {
  font-size: var(--fs-body);
  line-height: var(--lh-long-form);
  color: var(--color-text-body);
  margin-block-end: var(--space-4);
}

.intro-section p:last-child {
  margin-block-end: 0;
}