/* ═══════════════════════════════════════════════════
   YAVAPAI-APACHE NATION — Component Library: Core
   Section anatomy, eyebrows, pull quotes, spirit line,
   closing declaration. The smallest, most-shared
   component primitives — used on every page.
   Requires: variables.css, base.css
   Split from the original css/components.css (573 ln)
   on 2026-09-01 — see lessons.md "File Size Doctrine".
   Original preserved at docs/archives/components.css.
═══════════════════════════════════════════════════ */

/* ── SECTION ANATOMY ────────────────────────────── */

.eyebrow {
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mesa-dusk);       /* was --sacred-red; WCAG: 4.61:1 AA at 9px vs prior 2.49:1 */
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mesa-dusk);  /* matches eyebrow text color */
  opacity: 0.18;
  max-width: 120px;
}

.eyebrow--turquoise { color: var(--turquoise-pale); }         /* was --turquoise-sky; WCAG: 6.7:1 AAA vs prior 3.76:1 */
.eyebrow--turquoise::after { background: var(--turquoise-pale); }

.eyebrow--gold { color: var(--sunray-gold); }
.eyebrow--gold::after { background: var(--sunray-gold); }

.eyebrow--mauve { color: var(--cloud-mauve); }
.eyebrow--mauve::after { background: var(--cloud-mauve); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.6vw, 38px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--white-eagle);
  line-height: 1.18;
  margin-bottom: 36px;
}

.section-body {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.1vw + 13.5px, 18px);  /* fluid: 16px@375 → 18px@409 → 18px@1440 */
  color: var(--canyon-sand);
  line-height: 1.88;
  max-width: var(--max-body);
}

.section-body + .section-body { margin-top: 24px; }

/* ── PULL QUOTE ─────────────────────────────────── */

.pull-quote {
  border-left: 2px solid var(--sunray-gold);
  margin: 48px 0;
  padding: 20px 32px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--sunray-light);
  line-height: 1.72;
  max-width: 640px;
}

.pull-quote--turquoise {
  border-left-color: var(--turquoise-sky);
  color: var(--turquoise-pale);
}

/* ── SPIRIT LINE ────────────────────────────────── */

.spirit-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--sacred-red) 20%,
    var(--sunray-gold) 50%,
    var(--turquoise-sky) 80%,
    transparent
  );
  opacity: 0.18;
}

/* ── CLOSING DECLARATION ────────────────────────── */

.closing-statement {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--sunray-light);
  line-height: 1.75;
  max-width: 640px;
  margin-top: 40px;
}