/* Section-title LAYOUTS — the shared, reusable module (like pricing_layouts.css).
   Loaded anywhere a section title renders: the standalone design lab, the
   dashboard picker, and the public vendor page. Carries ONLY the `.stitle`
   system — the base eyebrow/title/subtitle type, the alignment axis, and the 8
   named `.st-*` styles. It has NO page chrome, so it never touches the host
   page's body/background.

   Every color is driven through the --st-* palette variables set by the host
   (the lab canvas, the dashboard sample scale, or the agent's section_title_style
   on the public page): --st-primary / --st-ink / --st-ink-rgb / --st-accent /
   --st-on-primary plus the --st-hf / --st-bf / --st-tw typography variables.
   Each named style restyles the same markup and layers a decoration; the
   .st-align-* classes are an independent left/center/right axis.

   TYPE: Zulli Typography Kit v1.0, section 06 (title stacks), section level.
     eyebrow  --section-eyebrow : mono 500, +0.14em, MUTED (was bold sans in
                                  the vendor's primary)
     title    --type-display-m  : 26-32px, was 30-46px
     subtitle --type-body       : 15px, measure --measure-body
     gaps     --stack-eb-gap / --stack-sh-gap

   The title stays sized in cqi here because this module has three hosts with
   very different widths — the public page, the standalone lab, and the small
   dashboard picker samples — and a sample should scale to its canvas. On the
   public page that would make the same heading level render at two sizes (a
   section that breaks out to 1024px vs one in the 680px column), so
   agent_bio.css pins it there to a single viewport-based --fs-h2. Both were
   retuned together; changing one without the other splits them again. */

/* ============================================================ */
/* Section title — base                                         */
/* ============================================================ */
.stitle {
  /* Query container so the eyebrow/title/subtitle scale to the block's own
     width (bio column, dashboard sample, or lab canvas) rather than the raw
     viewport — same cqi fluid system as the other layout modules. */
  container-type: inline-size;
  color: var(--st-ink);
  font-family: var(--st-bf, 'Inter', system-ui, sans-serif);
/* Secondary text now comes from the derived --*-muted role (see
   _muted_text in style_templates.py) instead of a hardcoded alpha. A fixed
   fade put 43 of 72 themes under AA; the derived value mutes as far as each
   palette allows and stops there. Fallback keeps the old look off-theme. */
  /* This module already owned the --st-muted NAME, so the mapper's derived
     value arrives as an inline style on .section-head and simply wins over
     the declaration below. The rgba stays as the lab/picker fallback, where
     no mapper runs. */
  --st-muted: rgba(var(--st-ink-rgb), .74);
}
/* Eyebrow, title, and subtitle all scale responsively via clamp() so the whole
   block grows and shrinks together on resize — the eyebrow tracks the title
   rather than sitting at a fixed px while the title moves. */
/* --section-eyebrow. Colour is the kit's "muted, or brand for the number
   only" rule — this used to be the vendor's primary at weight 700, which is
   both the wrong face and the wrong lane (an eyebrow is furniture, not a
   signal). Card badges keep the brand colour; see service_layouts.css. */
.st-eyebrow { display: inline-block; margin-bottom: var(--stack-eb-gap, clamp(8px, 1vw, 12px));
  font-family: var(--st-mf, ui-monospace, monospace);
  font-size: clamp(10.5px, 2.6cqi, 12px); line-height: 1.2; font-weight: 500;
  letter-spacing: var(--track-eyebrow, .14em);
  text-transform: uppercase; color: var(--st-muted); }
/* --type-display-m. 46px was above every other heading in the system and had
   no step on the scale; the vendor page never saw it (pinned), but the lab and
   the dashboard picker did. */
.st-title { margin: 0; font-family: var(--st-hf, 'Fraunces', serif); font-weight: var(--st-tw, 600);
  font-size: clamp(26px, 3.4cqi, 32px); line-height: 1.18;
  letter-spacing: var(--track-display-m, -.016em); color: var(--st-ink); }
/* --type-body at the kit's running-text measure (was 16.5px / 52ch). */
.st-subtitle { margin: var(--stack-sh-gap, clamp(7px, .9vw, 10px)) 0 0; font-family: var(--st-bf, 'Inter', sans-serif);
  font-size: 15px; line-height: 1.6; color: var(--st-muted); max-width: var(--measure-body, 68ch); }

/* ---- alignment axis ---- */
.st-align-left  { text-align: left; }
.st-align-center { text-align: center; }
.st-align-left  .st-subtitle { margin-right: auto; margin-left: 0; }
.st-align-center .st-subtitle { margin-left: auto; margin-right: auto; }

/* ============================================================ */
/* Named styles                                                 */
/* ============================================================ */

/* 01 · Stack — a plain stack with no decoration; the alignment axis does the work. */

/* 02 · Underline — a short accent rule under the title; it follows the alignment
   axis (left edge when left, centered when centered, right edge when right). */
.st-underline .st-title { position: relative; padding-bottom: 16px; }
.st-underline .st-title::after { content: ""; position: absolute; bottom: 0; left: 0;
  width: 58px; height: 3px; border-radius: 3px; background: var(--st-primary); }
.st-align-center.st-underline .st-title::after { left: 50%; transform: translateX(-50%); }

/* 03 · Overline — an accent rule floats above the eyebrow (follows align). */
.st-overline .st-eyebrow { position: relative; padding-top: 18px; }
.st-overline .st-eyebrow::before { content: ""; position: absolute; top: 0; left: 0;
  width: 42px; height: 3px; border-radius: 3px; background: var(--st-primary); }
.st-align-center.st-overline .st-eyebrow::before { left: 50%; transform: translateX(-50%); }

/* 04 · Accent Bar — a thick accent bar hugs the left edge. */
.st-accent-bar { position: relative; padding-left: 22px; }
.st-accent-bar::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 5px; border-radius: 3px; background: var(--st-primary); }

/* 05 · Pill Kicker — the eyebrow sits in a tinted pill. */
.st-pill-kicker .st-eyebrow { padding: 6px 14px; border-radius: 999px; letter-spacing: .14em;
  background: color-mix(in srgb, var(--st-primary) 15%, transparent); color: var(--st-primary-text, var(--st-primary)); }

/* 06 · Stamp — the eyebrow framed by top and bottom rules, like a stamped seal. */
.st-stamp .st-eyebrow { padding: 8px 0; border-top: 2px solid var(--st-primary);
  border-bottom: 2px solid var(--st-primary); }

/* 07 · Trailing Rule — the eyebrow, then a hairline filling the rest of the row.
   Left-only: the rule grows rightward from a left-set eyebrow. */
.st-trailing-rule .st-eyebrow { display: flex; align-items: center; gap: 12px; }
.st-trailing-rule .st-eyebrow::after { content: ""; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--st-ink) 16%, transparent); }

/* 08 · Bracketed — two L-shaped corner marks frame the block (opposite corners). */
.st-bracketed { position: relative; padding: 24px 22px; }
.st-bracketed::before, .st-bracketed::after { content: ""; position: absolute;
  width: 16px; height: 16px; border: 1.5px solid var(--st-primary); }
.st-bracketed::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.st-bracketed::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }