/**
 * AM2027 — committee roster block.
 * A heading bar over a grid of circular headshots. Placeable in any region, so
 * it carries its own width constraint rather than relying on a page wrapper.
 */

.committee{max-width:var(--maxw);margin:0 auto;padding:clamp(28px,4vw,44px) 28px}

.committee-head{
  text-align:center;margin:0 0 clamp(26px,3.5vw,40px);
  margin:0 0 clamp(26px,3.5vw,40px);
  padding:15px 24px;border-radius:9px;
  color:#0e4a5a;
  font-size:calc((clamp(14px,1.7vw,18px)) * var(--fs,1));font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.25;

}

.committee-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:clamp(24px,3vw,36px) clamp(16px,2vw,26px);
}

.cm{display:flex;flex-direction:column;align-items:center;text-align:center}

.cm-shot{
  width:min(100%,168px);aspect-ratio:1;margin:0 0 16px;
  border-radius:50%;overflow:hidden;background:var(--line-soft);
}
.cm-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* Keeps a photo-less member the same size as the rest so rows stay aligned. */
.cm-shot.is-empty{
  background:
    radial-gradient(circle at 50% 38%, #C9D3DC 0 26%, transparent 27%),
    radial-gradient(circle at 50% 108%, #C9D3DC 0 46%, transparent 47%),
    var(--line-soft);
}

.cm-role{
  margin:0 0 7px;font-size:calc((14.5px) * var(--fs,1));line-height:1.35;font-weight:500;
  color:var(--purple);max-width:22ch;
}
/* Focus area drops to its own line, as in the reference roster. */
.cm-focus{display:block}

.cm-name{margin:0;font-size:calc((14.5px) * var(--fs,1));line-height:1.4;color:var(--navy);max-width:22ch}

@media(max-width:700px){
  .committee{padding-left:20px;padding-right:20px}
  .committee-grid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:24px 14px}
  .cm-role,.cm-name{font-size:calc((13.5px) * var(--fs,1))}
}