/* =====================================================================
   AI Light · team photos (About only) · v0.1 (klara, Oct 30 2026) · ADDITIVE, load after components.css
   Card modifier: .ail-trust-person--photo  (About team cards that have items[].photo)
   Media: <figure class="ail-trust-person__media"> holds the initials (.ail-trust-person__mark) BEHIND the photo.
     - no photo in the data  → output no <picture>/<img>: the initials fill the frame
     - photo still loading    → initials show through until it paints
     - photo fails to load    → img::after covers the broken-image icon with the same initials look (Chrome, Firefox, Safari 17+)
   Crops: brand/team/crops/<name>-sq.(webp|jpg) 800x800 for ≥761px, <name>-45.(webp|jpg) 800x1000 for ≤760px.
   No JS, no onerror. Home team cards never get photos (initials only).
   ===================================================================== */
.ail-trust-person--photo{grid-template-columns:1fr;row-gap:var(--ail-space-1);padding:var(--ail-space-5)}
.ail-trust-person--photo > *{grid-column:1}
.ail-trust-person--photo > .ail-trust-person__media{grid-row:auto;margin:0 0 var(--ail-space-4)}

.ail-trust-person__media{position:relative;margin:0;inline-size:100%;aspect-ratio:1 / 1;overflow:hidden;
  border-radius:var(--ail-radius);background:var(--t-accent-soft,var(--ail-primary-soft))}
/* initials, behind the photo */
.ail-trust-person__media > .ail-trust-person__mark{position:absolute;inset:0;inline-size:auto;block-size:auto;border-radius:0;
  display:grid;place-items:center;font-size:clamp(2rem,4vw,3rem);background:none}
/* the photo, on top */
.ail-trust-person__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;display:block;
  object-fit:cover;object-position:50% 30%;   /* crops are face-centred; 30% keeps headroom if the frame ratio changes */
  color:transparent}                          /* hide alt text painting over the initials if the file fails */
/* broken image: draw the initials over the browser's broken-image icon (pseudo-elements only render on a broken <img>) */
.ail-trust-person__media img::after{content:attr(data-initials);position:absolute;inset:0;display:grid;place-items:center;
  background:var(--t-card,var(--ail-surface-light));
  background-image:linear-gradient(var(--t-accent-soft,var(--ail-primary-soft)),var(--t-accent-soft,var(--ail-primary-soft)));
  color:var(--t-accent,var(--ail-primary));font:600 clamp(2rem,4vw,3rem)/1 var(--ail-font-head-en);letter-spacing:.02em}

/* photo-approval note while photo_verify is still a [VERIFY] (review view only; .al-ph never renders live) */
.ail-trust-person__photo-note{margin:calc(var(--ail-space-2) * -1) 0 var(--ail-space-2);font-size:.75rem;color:var(--t-muted)}

/* About grid: 2 cards, capped so square photos stay a calm size */
.ail-trust-team:has(.ail-trust-person--photo) .ail-trust-team__list{max-inline-size:46rem}
@media (max-width:760px){
  .ail-trust-person__media{aspect-ratio:4 / 5}            /* the <picture> switches to the -45 crop here */
  .ail-trust-team:has(.ail-trust-person--photo) .ail-trust-team__list{max-inline-size:26rem;margin-inline:auto}
}