/* People cards (speakers on the main page, contributors page) and the biography dialog.
   Self-contained: works with styles.css (main page) and forms.css (contributors page). */
:root { --pc-green:#154734; --pc-deep:#0d3427; --pc-mint:#bfe1db; --pc-aqua:#009a93; --pc-blue:#46bfe0; --pc-lime:#bccf00; --pc-ink:#12231b; --pc-muted:#5d6b65; }

.speaker-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:70px 0 30px; padding:0; border:0; }
.speaker { position:relative; display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid rgba(21,71,52,.12); box-shadow:0 1px 0 rgba(21,71,52,.04); transition:transform .25s, box-shadow .25s, border-color .25s; color:var(--pc-ink); }
.speaker::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--pc-aqua),var(--pc-blue),var(--pc-lime)); transform:scaleX(0); transform-origin:left; transition:transform .35s; z-index:5; }
.speaker:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(13,52,39,.14); border-color:rgba(0,154,147,.35); }
.speaker:hover::after, .speaker:focus-visible::after { transform:scaleX(1); }
.speaker[role=button] { cursor:pointer; }
.speaker[role=button]:focus-visible { outline:3px solid var(--pc-blue); outline-offset:2px; }

/* Square portrait frame: the face stays visible at every width. */
.speaker-media { position:relative; aspect-ratio:1/1; overflow:hidden; background:linear-gradient(135deg,var(--pc-green),#2d6a52); }
.speaker-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; z-index:2; transition:transform .6s; }
.speaker:hover .speaker-media img { transform:scale(1.03); }
.speaker-initials { position:absolute; inset:0; display:grid; place-items:center; color:var(--pc-lime); font:600 clamp(36px,4vw,56px) 'Space Grotesk',sans-serif; background-image:linear-gradient(rgba(191,225,219,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(191,225,219,.08) 1px,transparent 1px); background-size:22px 22px; }

.speaker-main { position:relative; flex:1; padding:18px 20px 62px; }
.speaker .number { display:block; font-size:12px; color:#7a8a82; font-variant-numeric:tabular-nums; }
.speaker h3 { font:600 clamp(19px,1.55vw,23px)/1.12 'Space Grotesk',sans-serif; margin:10px 0 8px; color:var(--pc-ink); letter-spacing:-.01em; }
.speaker-main > p { color:var(--pc-muted); font-size:14px; line-height:1.45; margin:0; }
.speaker .tag { position:absolute; left:20px; bottom:20px; margin:0; padding:6px 10px; border-radius:100px; background:var(--pc-mint); color:var(--pc-green); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.speaker-bio { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; padding:18px 20px 62px; background:var(--pc-green); color:#fff; transform:translateY(101%); transition:transform .35s; }
.speaker-bio b { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--pc-lime); }
.speaker-bio p { color:#e1ece6; font-size:14px; line-height:1.5; margin:10px 0 0; }
.speaker:hover .speaker-bio, .speaker:focus-visible .speaker-bio { transform:translateY(0); }
@media (hover:none) { .speaker-bio { display:none; } }

.linkedin-icon { position:absolute; right:16px; bottom:16px; z-index:6; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#0a66c2; color:#fff !important; transition:transform .2s, filter .2s; }
.linkedin-icon svg { width:17px; height:17px; fill:currentColor; }
.linkedin-icon:hover { transform:translateY(-2px); filter:brightness(1.12); }
.linkedin-icon:focus-visible { outline:3px solid var(--pc-blue); outline-offset:2px; }

@media (max-width:1200px) { .speaker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .speaker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } }
@media (max-width:600px) {
  .speaker-grid { gap:10px; margin-top:50px; }
  .speaker-main { padding:12px 12px 52px; }
  .speaker h3 { font-size:16.5px; margin:6px 0; }
  .speaker-main > p { font-size:12.5px; line-height:1.4; }
  .speaker .tag { left:12px; bottom:14px; max-width:calc(100% - 58px); padding:5px 7px; border-radius:10px; font-size:9px; letter-spacing:.03em; line-height:1.25; }
  .linkedin-icon { right:10px; bottom:10px; width:30px; height:30px; }
  .linkedin-icon svg { width:15px; height:15px; }
}
@media (max-width:340px) { .speaker-grid { grid-template-columns:1fr; } }

/* Biography dialog */
html.bio-open { overflow:hidden; }
.bio-modal { position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:22px; background:rgba(4,21,15,.87); backdrop-filter:blur(4px); }
.bio-modal.open { display:grid; }
.bio-dialog { position:relative; width:min(760px,100%); max-height:88vh; overflow:auto; background:#fff; color:var(--pc-ink); padding:44px 48px; border-top:6px solid var(--pc-aqua); }
.bio-close { position:absolute; right:14px; top:10px; border:0; background:none; font-size:34px; line-height:1; cursor:pointer; color:var(--pc-ink); padding:6px 10px; }
.bio-head { display:flex; gap:24px; align-items:center; }
.bio-photo { flex:0 0 120px; width:120px; height:120px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--pc-green),#2d6a52); box-shadow:0 0 0 4px var(--pc-mint); }
.bio-photo[hidden] { display:none; }
.bio-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; }
.bio-credit { margin:14px 0 0; font-size:12px; color:#7a8a82; }
.bio-tag { margin:0; text-transform:uppercase; letter-spacing:.14em; color:var(--pc-aqua); font-size:11px; font-weight:700; }
.bio-dialog h2 { font:700 clamp(30px,4.4vw,52px)/1 'Space Grotesk',sans-serif; letter-spacing:-.04em; margin:12px 0 10px; color:var(--pc-ink); }
.bio-role { margin:0; font-weight:700; color:var(--pc-green); }
.bio-copy { font-size:17px; line-height:1.7; margin-top:26px; }
.bio-footer { margin-top:24px; }
.bio-link { display:inline-flex; align-items:center; gap:10px; background:#0a66c2; color:#fff; text-decoration:none; font-weight:700; padding:10px 16px 10px 12px; border-radius:100px; }
.bio-link svg { width:16px; height:16px; fill:currentColor; }
@media (max-width:600px) {
  .bio-dialog { padding:40px 22px 28px; }
  .bio-head { flex-direction:column; align-items:flex-start; gap:16px; }
  .bio-photo { flex-basis:auto; width:96px; height:96px; }
  .bio-copy { font-size:16px; }
}