/* ABOUT LAYOUT MODULE — bio / "meet the vendor" styles.
   Every color is driven through the vendor's theme via the --ab-* palette
   variables (set by the consumer: the gallery canvas here, a dashboard sample,
   or the public page) so the color swatch themes them.

   Markup: `.about.ab-<layout>` > `.ab-portrait` (the headshot) + `.ab-body`
   (`.ab-name` + `.ab-role` + `.ab-copy` paragraphs + `.ab-sign` signature).
   Every layout carries the SAME slots — layouts rearrange, resize, or hide
   parts, but the markup is identical, so a block switches look by changing ONE
   class. No section eyebrow here — the "About" heading is the separate
   section-title component, tuned in its own lab (/section-titles/). Same
   discipline as faq_layouts.css / link_elements.css / pricing_layouts.css.

   TYPE: Zulli Typography Kit v1.0. Type steps are fixed or clamped to real kit
   values; the role and signature caption move to the mono utility face; running
   copy takes --type-body and gains the kit's 68ch measure. Structural layout
   gaps stay in cqi — they size off the component, which is correct, and they
   were never the problem. --c-r follows the vendor's corner_style. */

.about{
  container-type: inline-size;
  font-family: var(--ab-bf, 'Inter', system-ui, sans-serif);
  color: rgba(var(--ab-ink-rgb), .72);
  max-width: 760px;
  margin-inline: auto;
  /* Design tokens — all derived from the theme palette. */
  --c-ink: var(--ab-ink);
/* 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. */
  --c-muted: var(--ab-muted, rgba(var(--ab-ink-rgb), .68));
  --c-soft: rgba(var(--ab-ink-rgb), .74);
  --c-line: rgba(var(--ab-ink-rgb), .15);
  --c-line-soft: rgba(var(--ab-ink-rgb), .08);
  --c-surface: color-mix(in srgb, var(--ab-ink) 4%, var(--ab-bg));
  --c-accent: var(--ab-primary);
  --c-accent-ink: var(--ab-on-primary);
  --c-accent-text: var(--ab-primary-text, var(--ab-primary));
  --c-accent-soft: color-mix(in srgb, var(--ab-primary) 12%, var(--ab-bg));
  --c-accent-line: color-mix(in srgb, var(--ab-primary) 40%, var(--ab-bg));
  --c-shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 8px 18px -10px rgba(0,0,0,.20);
  --c-shadow-lg: 0 2px 6px rgba(0,0,0,.06), 0 24px 48px -24px rgba(0,0,0,.30);
  --c-r: var(--ab-radius, 6px);
}

/* ---- shared primitives ---- */
/* Consumers set --ab-photo on the .about ROOT (not the figure) so both the
   portrait and the ab-signature sign-off avatar resolve it. */
.ab-portrait{ margin:0; }

/* No portrait at all (no About photo and no avatar): hide the photo slots and
   collapse the two-column layouts to a single column. */
.about.ab-nophoto .ab-portrait{ display:none; }
.about.ab-nophoto{ grid-template-columns:1fr; }
.about.ab-nophoto.ab-signature .ab-sign::before{ display:none; }
/* The photo itself — a soft two-stop gradient stands in for an uploaded
   headshot on the gallery (set via --ab-photo on the figure). */
.ab-photo{ display:block; width:100%; aspect-ratio:4/5; background:var(--ab-photo, var(--c-accent-soft));
  background-size:cover; background-position:center; border-radius:var(--c-r); }

/* Capped at 28px — one step below the page's pinned section-H2 size
   (agent_bio.css's --fs-h2 maxes at 32px) so the vendor's name (an H3, one
   level below the "About" heading above it) never renders larger than its
   own section title. */
.ab-name{ margin:0; font-family:var(--ab-hf, 'Fraunces', serif); font-weight:var(--ab-tw, 600);
  font-size:clamp(24px, 5.4cqi, 28px); line-height:1.18; letter-spacing:-0.016em; color:var(--c-ink); }
/* --type-label */
.ab-role{ margin:var(--stack-eb-gap-sm, clamp(6px,.8vw,9px)) 0 0; font-family:var(--ab-mf, ui-monospace, monospace);
  font-size:12px; line-height:1.2; font-weight:500;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--c-accent-text); }
.ab-copy{ margin-top:clamp(14px, 3cqi, 20px); display:grid; gap:0.85em; }
/* --type-body, capped at the kit's running-text measure. A bio runs the full
   760px column in several layouts, which is the readability failure the measure
   rule exists for. */
.ab-copy p{ margin:0; font-size:15px; line-height:1.6; color:var(--c-soft);
  max-width:var(--measure-body, 68ch); }

/* Signature — the vendor's name set in the heading face, italicised for a
   handwritten feel, with a small caption below. */
.ab-sign{ margin-top:clamp(16px, 3.4cqi, 22px); display:flex; flex-direction:column; gap:2px; }
.ab-sign-mark{ font-family:var(--ab-hf, 'Fraunces', serif); font-style:italic; font-weight:500;
  font-size:clamp(24px, 5.4cqi, 28px); line-height:1.18; color:var(--c-ink); }
/* --type-label */
.ab-sign-cap{ font-family:var(--ab-mf, ui-monospace, monospace); font-size:12px; line-height:1.2;
  font-weight:500; text-transform:uppercase; letter-spacing:0.08em; color:var(--c-muted); }

/* ============================================================ */
/* Named layouts                                                */
/* ============================================================ */

/* 01 · Side by Side — portrait left, text right. The classic, safe default. */
.ab-sidebyside{ display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1fr);
  gap:clamp(20px, 5cqi, 40px); align-items:center; }
@container (max-width: 420px){ .ab-sidebyside{ grid-template-columns:1fr; } }

/* 02 · Portrait Right — text leads, headshot follows. Same grid, reversed. */
.ab-portrait-right{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.82fr);
  gap:clamp(20px, 5cqi, 40px); align-items:center; }
.ab-portrait-right .ab-portrait{ order:2; }
@container (max-width: 420px){ .ab-portrait-right{ grid-template-columns:1fr; }
  .ab-portrait-right .ab-portrait{ order:0; } }

/* 03 · Centered Stack — headshot on top, text centered below. Warm, personal. */
.ab-stacked{ text-align:center; max-width:600px; }
.ab-stacked .ab-portrait{ max-width:340px; margin:0 auto clamp(20px, 4cqi, 28px); }
.ab-stacked .ab-copy{ justify-items:center; }
.ab-stacked .ab-sign{ align-items:center; }

/* 04 · Minimal — no headshot; quiet, left-aligned editorial text under a thin
   rule. Lets busy type systems stay calm. */
.ab-minimal{ max-width:640px; }
.ab-minimal .ab-portrait{ display:none; }
.ab-minimal .ab-name{ padding-bottom:clamp(14px, 3cqi, 18px); border-bottom:1px solid var(--c-line); }
.ab-minimal .ab-role{ margin-top:12px; }

/* 05 · Signature — text-led with a small round headshot tucked beside the
   sign-off, leaning on the handwritten mark. Intimate. */
.ab-signature{ max-width:620px; }
.ab-signature .ab-portrait{ display:none; }
.ab-signature .ab-sign{ flex-direction:row; align-items:center; gap:14px; margin-top:clamp(20px,4cqi,28px);
  padding-top:clamp(18px,3.4cqi,24px); border-top:1px solid var(--c-line); }
.ab-signature .ab-sign::before{ content:""; flex-shrink:0; width:54px; height:54px; border-radius:50%;
  background:var(--ab-photo, var(--c-accent-soft)); background-size:cover; background-position:center; }
.ab-signature .ab-sign-mark{ font-size:clamp(24px,5.4cqi,28px); }

/* 06 · Banner — a wide, short headshot banner up top with the name overlapping
   its lower corner; text sits below. Landing-page energy. */
.ab-banner .ab-portrait{ position:relative; }
.ab-banner .ab-photo{ aspect-ratio:16/6; }
.ab-banner .ab-name{ position:relative; margin:-0.55em 0 0 clamp(12px,3cqi,24px); display:inline-block;
  background:var(--ab-bg); padding:8px 16px; border-radius:var(--c-r); box-shadow:var(--c-shadow-sm); }
.ab-banner .ab-role{ margin-left:clamp(12px,3cqi,24px); }
.ab-banner .ab-body{ margin-top:4px; }

/* 07 · Split Tint — portrait one side, the copy on a tinted panel the other,
   flush like a two-up card. Structured and bold. */
.ab-split-tint{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1fr);
  align-items:stretch; border-radius:calc(var(--c-r) + 2px); overflow:hidden; border:1px solid var(--c-line); }
.ab-split-tint .ab-photo{ height:100%; aspect-ratio:auto; min-height:100%; border-radius:0; }
.ab-split-tint .ab-portrait{ display:flex; }
.ab-split-tint .ab-body{ background:var(--c-accent-soft); padding:clamp(22px, 5cqi, 40px); }
@container (max-width: 420px){ .ab-split-tint{ grid-template-columns:1fr; }
  .ab-split-tint .ab-photo{ aspect-ratio:16/9; min-height:0; } }

@media (prefers-reduced-motion: reduce){
  .about *{ transition:none; }
}