/* === g-about-bio — greenfield canonical, slot-contract form === */
/* Conform of legacy about-bio. Archetype C (Testimonial-adjacent profile card). */
/* Consumes the core: one surface token (--ssla-bg-color), shared tone authority */
/* (no per-section --tone-* rule), no bespoke .sab-* classes, no private surface  */
/* token used as a background value. Display delta vs g-testimonial-single: bio   */
/* body + identity stack + accented callout instead of a single big quote.        */

/* ── Base layout ── */
.ssla-g-about-bio {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: var(--ssla-bg-color, transparent);
  color:            var(--g-about-bio-fg);
}
.ssla-g-about-bio-inner {
  max-width: var(--g-about-bio-content-max-width);
  margin: 0 auto;
  padding: var(--g-about-bio-section-padding) 24px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* ── Fullbleed ── */
.alignfull .ssla-g-about-bio-inner {
  max-width: 100%;
  padding-left: 48px;
  padding-right: 48px;
}

/* ── Header (eyebrow + heading) ── */
.ssla-g-about-bio-header { display: flex; flex-direction: column; gap: 12px; }
.ssla-g-about-bio-eyebrow {
  color:           var(--g-about-bio-eyebrow);
  font-size:       var(--g-about-bio-eyebrow-size);
  letter-spacing:  var(--g-about-bio-eyebrow-letter);
  font-weight:     800;
  text-transform:  uppercase;
  margin:          0;
}
.ssla-g-about-bio-heading {
  font-family:    var(--g-about-bio-heading-family);
  font-size:      var(--g-about-bio-heading-size);
  font-weight:    var(--g-about-bio-heading-weight);
  letter-spacing: var(--g-about-bio-heading-letter);
  line-height:    1.2;
  margin:         0;
}

/* ── Identity card (avatar + name + role) ── */
.ssla-g-about-bio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ssla-g-about-bio-avatar {
  width:  var(--g-about-bio-avatar-size);
  height: var(--g-about-bio-avatar-size);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--g-about-bio-accent-line);
}
.ssla-g-about-bio-avatar img,
.ssla-g-about-bio-avatar video,
.ssla-g-about-bio-avatar iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.ssla-ov-editing .ssla-g-about-bio-avatar:empty {
  border: 2px dashed var(--g-about-bio-accent-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssla-g-about-bio-ident { display: flex; flex-direction: column; gap: 4px; }
.ssla-g-about-bio-author {
  font-family: var(--g-about-bio-heading-family);
  font-size:   var(--g-about-bio-author-size);
  font-weight: 700;
  color:       var(--g-about-bio-author);
  line-height: 1.2;
}
.ssla-g-about-bio-role {
  font-size:      var(--g-about-bio-role-size);
  letter-spacing: var(--g-about-bio-role-letter);
  font-weight:    700;
  text-transform: uppercase;
  color:          var(--g-about-bio-eyebrow);
}

/* ── Bio body ── */
.ssla-g-about-bio-body {
  font-family: var(--g-about-bio-body-family);
  font-size:   var(--g-about-bio-body-size);
  line-height: var(--g-about-bio-body-line-height);
  max-width: 600px;
  margin: 0;
}
.ssla-g-about-bio-body p { margin: 0 0 14px; }
.ssla-g-about-bio-body p:last-child { margin-bottom: 0; }

/* ── Callout (mapped from legacy callout → quote) ── */
.ssla-g-about-bio-quote {
  max-width: 600px;
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--g-about-bio-eyebrow);
  text-align: left;
  font-style: italic;
  color: var(--g-about-bio-quote);
  font-size: var(--g-about-bio-quote-size);
  line-height: 1.7;
}
.ssla-g-about-bio-quote p { margin: 0; }
.ssla-g-about-bio-quote:has(p:empty) { display: none; }

/* ── Structural variant: density ── */
.ssla-g-about-bio--density-minimal .ssla-g-about-bio-header,
.ssla-g-about-bio--density-minimal .ssla-g-about-bio-body,
.ssla-g-about-bio--density-minimal .ssla-g-about-bio-quote { display: none; }
.ssla-g-about-bio--density-standard .ssla-g-about-bio-eyebrow,
.ssla-g-about-bio--density-standard .ssla-g-about-bio-quote { display: none; }
/* density-rich: all visible */

/* ── Mobile ── */
@media (max-width: 768px) {
  .ssla-g-about-bio-inner { padding: 60px 24px; gap: 20px; }
}

/* ═══ Skeleton state per preset-architecture §3.5 ═══ */
/* Maps every private token to a --brand-* so the shared tone authority         */
/* (launch-sections.css §7.1 block) flips fg/bg with the tone attribute — no     */
/* per-section tone rule needed.                                                 */
.ssla-section.ssla-g-about-bio {
  --g-about-bio-fg:               var(--brand-fg);
  --g-about-bio-eyebrow:          var(--brand-accent);
  --g-about-bio-author:           var(--brand-fg);
  --g-about-bio-quote:            var(--brand-fg);
  --g-about-bio-heading-family:   var(--brand-heading-family);
  --g-about-bio-heading-size:     var(--brand-h2-size-clamp);
  --g-about-bio-heading-weight:   var(--brand-heading-weight);
  --g-about-bio-heading-letter:   var(--brand-letter-spacing-h2);
  --g-about-bio-body-family:      var(--brand-body-family);
  --g-about-bio-body-size:        var(--brand-body-size);
  --g-about-bio-body-line-height: var(--brand-body-line-height);
  --g-about-bio-eyebrow-size:     var(--brand-eyebrow-size);
  --g-about-bio-eyebrow-letter:   var(--brand-letter-spacing-eyebrow);
  --g-about-bio-author-size:      var(--brand-h3-size, 1.4rem);
  --g-about-bio-role-size:        var(--brand-eyebrow-size);
  --g-about-bio-role-letter:      var(--brand-letter-spacing-eyebrow);
  --g-about-bio-quote-size:       var(--brand-body-size);
  --g-about-bio-section-padding:  var(--paint-section-padding, var(--brand-section-padding, 80px));
  --g-about-bio-content-max-width:var(--brand-content-max-width);
  --g-about-bio-avatar-size:      160px;
  --g-about-bio-accent-line:      var(--brand-line);
}