.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;
}

/* LINE-WRAP LAW (owner HARD LAW, 2026-11-07): never leave on two rows what
   fits on one. From 1024px up, a heading never carries a fixed width cap:
   the title and the description use the whole width the section container
   offers (the container tiers already bound it). Below 1024px the measure
   tiers above stay, so mobile and tablet composition does not move.
   Enforced by qa:line-wrap (real render, rows at the offered width). */
@media (min-width: 1024px) {
  .lib-section-heading.lib-section-heading--width-sm,
  .lib-section-heading.lib-section-heading--width-md,
  .lib-section-heading.lib-section-heading--width-lg {
    max-width: none;
  }

  .lib-section-heading.lib-section-heading .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);
}


/* Kicker capsule variant: composition only. Surface, border and text come
   from tokens (default: the brand accent through --lib-eyebrow-accent), so
   every business adopts its own color without touching this file. The
   capsule hugs its text, wraps instead of overflowing on a narrow screen
   and never stretches inside a flex or grid parent. */
.lib-section-heading--kicker-capsule {
  grid-template-columns: minmax(0, 1fr);
}

.lib-section-heading--kicker-capsule .lib-section-heading__kicker {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: var(--lib-section-heading-capsule-gap, var(--lib-space-2));
  padding: var(--lib-section-heading-capsule-pad-block, 0.4rem) var(--lib-section-heading-capsule-pad-inline, 0.9rem);
  border: 1px solid var(--lib-section-heading-capsule-border, color-mix(in srgb, var(--lib-eyebrow-accent) 45%, transparent));
  border-radius: var(--lib-section-heading-capsule-radius, var(--lib-radius-pill));
  background: var(--lib-section-heading-capsule-surface, color-mix(in srgb, var(--lib-eyebrow-accent) 12%, transparent));
  color: var(--lib-section-heading-capsule-color, color-mix(in srgb, var(--lib-eyebrow-accent) 55%, var(--lib-text-primary)));
}

.lib-section-heading--center.lib-section-heading--kicker-capsule .lib-section-heading__kicker {
  justify-self: center;
}

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

/* Kicker rule variant: a plain label led by a short line. Composition only;
   the line takes the kicker color through tokens, so a brand adopts it for
   free. Centered headings get the line on both sides. */
.lib-section-heading--kicker-rule .lib-section-heading__kicker {
  display: flex;
  align-items: center;
  gap: var(--lib-section-heading-rule-gap, var(--lib-space-3));
  min-width: 0;
}

.lib-section-heading--kicker-rule .lib-section-heading__kicker::before,
.lib-section-heading--center.lib-section-heading--kicker-rule .lib-section-heading__kicker::after {
  content: "";
  flex: 0 0 var(--lib-section-heading-rule-length, 2.5rem);
  height: var(--lib-section-heading-rule-weight, 2px);
  background: var(--lib-section-heading-rule-color, currentColor);
}

.lib-section-heading--center.lib-section-heading--kicker-rule .lib-section-heading__kicker {
  justify-content: center;
}

/* Page-level editorial design (template design variant, page key). One wrapper
   attribute restyles every heading of the page, so no section needs its own
   copy: bracket label (PAT-2026-10-001), serif emphasis (PAT-2026-10-004) and a
   larger heading scale. Brand fonts arrive through --lib-font-accent and
   --lib-font-label; the library carries neutral defaults only. */
[data-lib-page-scale="large"] {
  --lib-section-heading-title-size: clamp(2.25rem, 5.2vw, 4.5rem);
}

[data-lib-page-accent="serif"] :is(.hhds-title-highlight, .text-highlight) {
  font-family: var(--lib-font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

[data-lib-page-kicker="bracket"] .lib-section-heading__kicker {
  display: inline-flex;
  gap: var(--lib-space-0);
  font-family: var(--lib-font-label);
  font-size: var(--lib-font-size-caption);
  font-weight: 500;
  letter-spacing: 0.1em;
}

[data-lib-page-kicker="bracket"] .lib-section-heading--center .lib-section-heading__kicker {
  justify-content: center;
}

[data-lib-page-kicker="bracket"] .lib-section-heading__kicker::before {
  flex: none;
  width: auto;
  height: auto;
  background: none;
  content: "[\00a0";
}

[data-lib-page-kicker="bracket"] .lib-section-heading__kicker::after {
  flex: none;
  width: auto;
  height: auto;
  background: none;
  content: "\00a0]";
}