/* About template (design/templates/about/about.css without its shared tail, which is in the global stylesheet). Rules
   sit on the hooks ab-hero, ab-who, ab-mission and ab-reviews; the slot label rules show until the photos exist. */
/* ---------- Placeholder slot label: slot ID, ratio, one line (aid-device's rule). Shown until the photo exists ---------- */
.lv-slot .slot span { max-width: 34em; line-height: 1.5; }
.lv-slot .slot b { font-weight: 700; }

/* ---------- Hero (hook ab-hero on lv-hero--page): LIFESTYLE-01 keeps the woman and her magnifier in frame when the
   hero crops the 3:2 photo ---------- */
.ab-hero .lv-media img { object-position: 68% 40%; }

/* ---------- Who We Are: the split reads down from the heading ---------- */
.ab-who .grid { align-items: start; }
.ab-who h2 { margin-bottom: var(--s3); }
.ab-who .lead { font-weight: 600; color: var(--c-head); }
.ab-who .grid p { max-width: var(--measure); }

/* ---------- Our Mission (hook ab-mission): the section head as home and the finder set it, H2 then the first
   sentence as the lead; the rest of the statement at body size ---------- */
.ab-mission .lv-head { margin-bottom: 0; }
.ab-mission .lv-head p + p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); }
/* The statement fills the band: the head on the left, the rest of it on the right */
@media (min-width: 901px) {
  .ab-mission .lv-head > div { max-width: none; flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; }
  .ab-mission .lv-head h2, .ab-mission .lv-head p:first-of-type { grid-column: 1; }
  .ab-mission .lv-head p + p { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* ---------- Reviews (hook ab-reviews): stacked lv-patient under the large quote ---------- */
.ab-reviews .big + .lv-patient { margin-top: var(--s5); }
.ab-reviews .lv-patient blockquote p + p { margin-top: var(--s2); }
.ab-reviews .intro p { margin-top: var(--s3); }
/* The state in each credit links to that state's specialist page (Raksha to confirm): a 48px target that does not
   move the line */
.ab-reviews figcaption a { display: inline-block; min-width: 48px; padding: 12px 0; margin: -12px 0; }
/* Each review's text and divider run the lead quote's width (#90) */
.ab-reviews .lv-patient { max-width: none; }
/* The credit opens with the reviewer's avatar (#90): their initials in a 56px circle, under the photo of their slot
   once one exists. An empty slot box (editor, fixture) stays out of sight: the initials stand in for it */
.ab-reviews figcaption { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.ab-reviews figcaption .credit { min-width: 0; }
.ab-avatar { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; background: var(--c-sky); box-shadow: inset 0 0 0 1px var(--c-hairline); }
.ab-avatar .initials { font: 700 20px/1 var(--font-body); color: var(--c-head); letter-spacing: 0.02em; }
.ab-avatar .lv-media { position: absolute; inset: 0; border-radius: 50%; }
.ab-avatar .lv-media:not(:has(img)) { display: none; }
.ab-avatar .lv-media > img { display: block; }