.lib-section-heading {
  display: grid;
  gap: var(--lib-space-3);
  width: 100%;
}

.lib-section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.lib-section-heading--left {
  text-align: left;
}

/* Responsive Measure System, 2026-09-08: UI-012 human review at 1280/
   1440/1920 found the heading using essentially the same measure at all
   three -- root cause was these three tiers being frozen rem values
   with zero further growth once a viewport exceeds them (896px stays
   896px whether the viewport is 1024 or 1920 wide). Same clamp()
   technique as --lib-container-standard/--lib-gutter (core/tokens.css): each
   floor is the ORIGINAL fixed value unchanged (so nothing below
   ~1024px viewport moves -- mobile/tablet composition is untouched),
   each ceiling is a real, still-professional cap (not unlimited), and
   the middle term grows the container gradually across the real
   desktop range instead of saturating immediately after the floor. */
.lib-section-heading--width-sm {
  max-width: var(--lib-section-heading-width-sm, clamp(36rem, calc(11vw + 29rem), 42rem));
}

.lib-section-heading--width-md {
  max-width: var(--lib-section-heading-width-md, clamp(44rem, calc(16vw + 34rem), 53rem));
}

.lib-section-heading--width-lg {
  max-width: var(--lib-section-heading-width-lg, clamp(56rem, calc(20vw + 43rem), 67.5rem));
}

.lib-section-heading--width-full {
  max-width: none;
}

.lib-section-heading__kicker,
.lib-section-heading__title,
.lib-section-heading__description {
  margin: 0;
}

/* UI-012 Final Closure, 2026-09-08, corrected Group C 2026-09-09: the
   original 76% ratio was only ever verified against Canvas Dark's
   SURFACE background -- this kicker is real-used inside sections
   composed on a PANEL background (e.g. blog-preview-section's card,
   found by this pass's own axe sweep), where 76% measured a real
   3.04:1 failure. Recomputed via the real WCAG relative luminance
   formula: 45% clears all 3 real Canvas-tracked backgrounds (surface/
   panel/panel-soft) in both Light and Dark with real margin (worst
   case, panel Dark: 5.41:1) -- the same ratio already proven for
   meta-tag/Marquee/Bento's identical brand-on-Canvas-neutral case. */
.lib-section-heading__kicker {
  color: var(--lib-section-heading-kicker-color, color-mix(in srgb, var(--lib-text-brand) 45%, var(--lib-text-primary)));
  font-size: var(--lib-section-heading-kicker-size, var(--lib-font-size-caption));
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.lib-section-heading__title {
  color: var(--lib-text-primary);
  font-family: var(--lib-font-heading);
  /* Responsive Measure System, 2026-09-08: 6vw with no offset reaches
     its own 3rem ceiling at a 800px viewport (48px / 0.06) -- every real
     desktop tier this component ships at (1024-1920) rendered the exact
     same, already-maxed-out font-size, the Rule 4 "jumps rigidly between
     breakpoints" symptom (in this case: doesn't move at all). The floor
     crossover point (where 6vw first exceeds 1.75rem) was ~467px, well
     under the smallest real breakpoint (360/390) -- so mobile/small-
     tablet rendering is mathematically unchanged below that; only the
     growth curve from ~467px up through desktop was recalibrated so it
     keeps growing across the real 1024-1920 range instead of freezing
     at 800px, reaching its new (still bounded, still professional)
     3.5rem ceiling right around 1920 instead of 800px. */
  font-size: var(--lib-section-heading-title-size, clamp(1.75rem, 2.6vw, 3.25rem));
  line-height: 1.12;
}

.lib-section-heading__description {
  max-width: var(--lib-section-heading-description-md, var(--lib-measure-heading));
  color: var(--lib-text-secondary);
}

.lib-section-heading--description-lg .lib-section-heading__description {
  max-width: var(--lib-section-heading-description-lg, 54rem);
}

.lib-section-heading--description-xl .lib-section-heading__description {
  max-width: var(--lib-section-heading-description-xl, 60rem);
}

.lib-section-heading--description-full .lib-section-heading__description {
  max-width: none;
}

.lib-section-heading--center .lib-section-heading__description {
  margin-inline: auto;
}

/* On desktop, a wide/full heading container gives the description more
   room too — it doesn't stay capped at its own nominal tier when there's
   visibly more space available next to it. */
@media (min-width: 1024px) {
  .lib-section-heading--width-lg.lib-section-heading--description-md .lib-section-heading__description,
  .lib-section-heading--width-full.lib-section-heading--description-md .lib-section-heading__description {
    max-width: var(--lib-section-heading-description-lg, 54rem);
  }

  .lib-section-heading--width-lg.lib-section-heading--description-lg .lib-section-heading__description,
  .lib-section-heading--width-full.lib-section-heading--description-lg .lib-section-heading__description,
  .lib-section-heading--width-lg.lib-section-heading--description-xl .lib-section-heading__description,
  .lib-section-heading--width-full.lib-section-heading--description-xl .lib-section-heading__description {
    max-width: var(--lib-section-heading-description-xl, 60rem);
  }

  .lib-section-heading--width-lg.lib-section-heading--description-full .lib-section-heading__description,
  .lib-section-heading--width-full.lib-section-heading--description-full .lib-section-heading__description {
    max-width: none;
  }
}

.lib-section-heading--dark .lib-section-heading__kicker {
  color: color-mix(in srgb, var(--lib-eyebrow-accent) 76%, white);
}

/* Semantic Retrofit Group A2 Batch 1 (Typography), 2026-09-08:
   deliberately NOT migrated. inverse here is the same real,
   pre-existing, Canvas-independent fixed-dark-identity pattern already
   disclosed in core/foundation/utilities.css's .lib-surface--deep (see
   that file's own comment) -- generic "text for a manually dark-styled
   variant", not text-on-primary/-secondary/-accent (those are
   contrast-checked against a specific brand color this modifier doesn't
   set). No existing semantic role fits without inventing one; out of
   this batch's scope. */
.lib-section-heading--dark .lib-section-heading__title,
.lib-section-heading--dark .lib-section-heading__description {
  color: var(--lib-color-inverse);
}