/* ==========================================================================
   USAIndiaCFO — people: the leadership list (/leadership/) and the
   departments + roster section (/team/). Rendered by blk_people / blk_roster
   in site/build.py, driven by js/people.js. Tokens only (clay.css), so the
   blue theme reaches every colour here.
   ========================================================================== */

/* portraits are shown as published — no colour grade (round 3, L8) */

/* the quiet line under the team hero */
.phero__aside { margin-top: 22px; }

/* ── who holds what: one leader per row ─────────────────────────────────── */
.lead-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lead { position: relative; display: grid; grid-template-columns: 208px minmax(0, 1fr);
  column-gap: clamp(28px, 4.5vw, 72px); padding: 34px 0; border-bottom: 1px solid var(--line); }
.lead-list[data-ready] .lead { cursor: pointer; }
.lead__photo { width: 208px; height: 260px; overflow: hidden; border-radius: var(--r-lg);
  box-shadow: var(--clay-md); background: var(--ground-sink); }
.lead__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.lead__ini { display: grid; place-items: center; height: 100%;
  font: 300 3rem/1 Newsreader, Georgia, serif; color: var(--bronze-deep); }
.lead__body { min-width: 0; align-self: start; padding-top: 6px; }
.lead__head { margin: 0; font: inherit; }
.lead__btn { position: static; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; width: 100%; padding: 0; border: 0; background: none; color: inherit;
  text-align: left; cursor: pointer; font: inherit; }
.lead__btn:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 6px; border-radius: 6px; }
.lead__name { font: 350 clamp(1.625rem, 2.4vw, 2.25rem)/1.12 Newsreader, Georgia, serif;
  letter-spacing: -.012em; color: var(--ink); }
.lead__toggle { position: relative; flex: 0 0 auto; width: 44px; height: 44px; margin-top: -4px;
  border-radius: 50%; background: var(--ground-flat); box-shadow: var(--clay-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.lead__toggle i { position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px;
  background: var(--bronze-deep); border-radius: 2px; transition: transform .35s var(--ease); }
.lead__toggle i + i { transform: rotate(90deg); }
.lead__btn[aria-expanded="true"] .lead__toggle { box-shadow: var(--clay-in); }
.lead__btn[aria-expanded="true"] .lead__toggle i + i { transform: rotate(0deg); }
.lead:hover .lead__toggle { box-shadow: var(--clay-hover); }
.lead:hover .lead__btn[aria-expanded="true"] .lead__toggle { box-shadow: var(--clay-in); }
.lead__role { margin: 12px 0 0; font: 500 11px/1.6 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bronze-deep); }
.lead__creds { margin: 6px 0 0; font: 400 13px/1.6 Inter, sans-serif; color: var(--ink-soft); }
.lead__sum { margin: 16px 0 0; max-width: 64ch; font: 400 15.5px/1.7 Inter, sans-serif; color: var(--ink-muted); }

/* the disclosure: a real height animation (grid rows 0fr → 1fr); closed
   panels are visibility:hidden, so they leave the tab order and the a11y tree */
.lead__bio { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease), visibility 0s; }
.lead__bio-in { min-height: 0; overflow: hidden; max-width: 68ch; }
.lead__bio-in p { margin: 0; padding-top: 14px; font: 400 14.5px/1.72 Inter, sans-serif; color: var(--ink-muted); }
.lead__bio-in p:first-child { padding-top: 22px; margin-top: 4px; border-top: 1px solid var(--line-soft); }
.lead__link { margin-top: 20px; margin-bottom: 2px; }
.lead-list[data-ready] .lead:not([data-open]) .lead__bio {
  grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--ease), visibility 0s .45s; }

@media (max-width: 720px) {
  .lead { grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; padding: 26px 0; }
  .lead__photo { width: 112px; height: 140px; border-radius: var(--r-sm); }
  .lead__body { padding-top: 0; }
  .lead__name { font-size: 1.375rem; }
  .lead__toggle { width: 36px; height: 36px; margin-top: 0; }
  .lead__role { margin-top: 8px; font-size: 10px; letter-spacing: .14em; }
  .lead__creds { font-size: 12.5px; }
  /* summary + bio take the full row width under the photo */
  .lead__sum, .lead__bio { grid-column: 1 / -1; }
  .lead__body { display: contents; }
  .lead__head, .lead__role, .lead__creds { grid-column: 2; }
  .lead__head { grid-row: 1; align-self: start; }
  .lead__photo { grid-row: 1 / span 3; }
  .lead__sum { margin-top: 18px; font-size: 14.5px; }
}

/* ── departments: the index on top ───────────────────────────────────────── */
.dept__tiles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
/* a clay tile: the department's name and its headcount, nothing else */
.dept__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0;
  min-height: 108px; padding: 18px 16px 16px; border: 0; border-radius: var(--r); cursor: pointer; text-align: left;
  background: var(--ground-flat); box-shadow: var(--clay-sm); color: var(--ink);
  scroll-margin-top: calc(var(--head-h) + 16px);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease); }
.dept__tile:hover { box-shadow: var(--clay-hover); transform: translateY(-2px); }
.dept__tile:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 3px; }
.dept__tile[aria-pressed="true"] { background: var(--ground-sink); box-shadow: var(--clay-in); transform: none; }
.dept__name { font: 400 1.125rem/1.2 Newsreader, Georgia, serif; color: var(--ink);
  min-width: 0; overflow-wrap: anywhere; }
.dept__n { margin-top: auto; font: 500 11px/1 Inter, sans-serif; letter-spacing: .14em; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.dept__tile[aria-pressed="true"] .dept__name { color: var(--bronze-deep); }
.dept__tile[aria-pressed="true"] .dept__n { color: var(--bronze-deep); }
/* deep links (/team/#dept-vcfo, #departments, #ppl-list) land under the fixed header otherwise */
#departments, [data-dept-root], .ppl__list { scroll-margin-top: calc(var(--head-h) + 16px); }
@media (max-width: 1200px) { .dept__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .dept__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dept__tile { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px;
    min-height: 0; padding: 14px 14px 13px; border-radius: var(--r-sm); }
  .dept__name { font-size: 1.0625rem; }
  .dept__n { margin-top: 0; font-size: 10.5px; flex: 0 0 auto; }
}

/* ── roster: sticky portrait panel + the list ───────────────────────────── */
.ppl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 80px);
  align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.ppl__stage { position: sticky; top: calc(var(--head-h) + 24px); }
.ppl__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--head-h) - 120px);
  margin-inline: auto; border-radius: var(--r-lg); box-shadow: var(--clay-md); background: var(--ground-flat); }
.ppl__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  opacity: 0; transition: opacity .4s var(--ease); }
.ppl__img.on { opacity: 1; }
.ppl__ini { position: absolute; inset: 0; display: grid; place-items: center;
  font: 300 clamp(3.5rem, 6vw, 5.5rem)/1 Newsreader, Georgia, serif; letter-spacing: .02em; color: var(--bronze-deep);
  background: var(--ground-sink); box-shadow: var(--clay-in); }
.ppl__ini[hidden], .ppl__img[hidden] { display: none; }
.ppl__cap { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 0 4px; min-height: 52px; }
.ppl__cap b { font: 400 1.25rem/1.2 Newsreader, Georgia, serif; color: var(--ink); }
.ppl__cap span { font: 500 10.5px/1.6 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bronze-deep); }

.ppl__group + .ppl__group { margin-top: 40px; }
.ppl__group[hidden] { display: none; }
.ppl__ghead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0;
  padding: 0 2px 12px; border-bottom: 1px solid var(--line);
  font: 500 11px/1.6 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-deep); }
.ppl__gn { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ppl__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 40px); }
.ppl__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  border-bottom: 1px solid var(--line-soft); }
.ppl__btn { display: flex; align-items: center; gap: 14px; min-width: 0; width: 100%; padding: 12px 2px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: 10px; transition: background-color .25s var(--ease), padding-left .3s var(--ease); }
.ppl__btn:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 2px; }
.ppl__row[data-on="true"] .ppl__btn, .ppl__btn:hover { background: rgba(var(--ground-rgb), .7); padding-left: 10px; }
.ppl__thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: var(--ground-flat); box-shadow: var(--clay-sm); display: grid; place-items: center; }
.ppl__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.ppl__tini { font: 400 .875rem/1 Newsreader, Georgia, serif; color: var(--bronze-deep); }
.ppl__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ppl__name { font: 400 1.0625rem/1.25 Newsreader, Georgia, serif; color: var(--ink); overflow-wrap: anywhere; }
.ppl__role { font: 500 10px/1.5 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ppl__row[data-on="true"] .ppl__role { color: var(--bronze-deep); }
.ppl__in { display: grid; place-items: center; width: 36px; height: 36px; margin-left: 4px; border-radius: 50%;
  color: var(--ink-faint); transition: color .25s var(--ease), background-color .25s var(--ease); }
.ppl__in:hover, .ppl__in:focus-visible { color: var(--bronze-deep); background: rgba(var(--bronze-rgb), .1); }
/* the inline photo: only used where there is no side panel */
.ppl__more { grid-column: 1 / -1; display: none; }

@media (max-width: 940px) {
  /* no sticky card on narrow screens (it covered the list): tapping a row
     opens a larger photo inline instead — same rows, same thumbs */
  .ppl { grid-template-columns: 1fr; }
  .ppl__stage { display: none; }
  .ppl__more { display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows .4s var(--ease), visibility 0s .4s; }
  .ppl__more-in { min-height: 0; overflow: hidden; }
  .ppl__row[data-open="true"] .ppl__more { grid-template-rows: 1fr; visibility: visible;
    transition: grid-template-rows .4s var(--ease), visibility 0s; }
  .ppl__big { width: min(220px, 62%); aspect-ratio: 4 / 5; margin: 4px 0 16px 54px; overflow: hidden;
    border-radius: var(--r); box-shadow: var(--clay-md); background: var(--ground-sink); }
  .ppl__big img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  .ppl__bini { display: grid; place-items: center; height: 100%;
    font: 300 3rem/1 Newsreader, Georgia, serif; color: var(--bronze-deep); box-shadow: var(--clay-in); }
  .ppl__row[data-open="true"] .ppl__role { color: var(--bronze-deep); }
}
@media (max-width: 600px) {
  .ppl__rows { grid-template-columns: 1fr; }
}

/* phones: the departments as an accordion, one open at a time (js/people.js adds
   [data-acc] and turns each group head into a button; imp-pages 17 Oct). The tiles
   repeat the heads' name + headcount, so they step aside. No JS: the full list. */
@media (max-width: 720px) {
  .dept[data-acc] .dept__tiles { display: none; }
  .dept[data-acc] .ppl { margin-top: 0; }
  .dept[data-acc] .ppl__group + .ppl__group { margin-top: 0; }
  .dept[data-acc] .ppl__ghead { padding: 0; border-bottom: 1px solid var(--line); }
  .dept[data-acc] .ppl__group:first-child .ppl__ghead { border-top: 1px solid var(--line); }
  .ppl__gbtn { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
    min-height: 56px; padding: 14px 2px; border: 0; background: none; cursor: pointer; text-align: left;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
  .ppl__gbtn > span:first-child { flex: 1 1 auto; font-size: 12px; }
  .ppl__gbtn::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 6px 4px 2px;
    border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
    transform: rotate(45deg); transition: transform .3s var(--ease); }
  .ppl__gbtn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -4px; }
  .ppl__gbtn:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 2px; border-radius: 6px; }
  .dept[data-acc] .ppl__group[data-open] .ppl__rows { padding-bottom: 18px; }
  .ppl__rows[hidden] { display: none; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .ppl__gbtn::after { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .lead__bio, .lead-list[data-ready] .lead:not([data-open]) .lead__bio,
  .ppl__more, .ppl__row[data-open="true"] .ppl__more,
  .lead__toggle, .lead__toggle i, .dept__tile, .ppl__btn, .ppl__img { transition: none !important; }
  .dept__tile:hover { transform: none; }
}

/* Compare team-all b (owner 22 Oct 2026): no "All" tile */
html[data-v-team-all="b"] #dept-all { display: none; }