/* Talata people: coach cards, photo strips and video links (15 Oct 2026).
 *
 * The December camp page's coach block set the look Deng wanted
 * for every coach: a card with bullets, photos with captions, and videos as
 * a still that links out to YouTube. One copy here, used by /coaches and the
 * coach pages under /coaches/. Plain look: flat, no shadows, no gradients.
 * Colours come from the --td-* tokens so light and dark both read.
 */

/* the card: photo left, words right */
.person { background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px; overflow:hidden; margin-top:20px; display:grid; grid-template-columns:260px 1fr; }
.person-photo { position:relative; background:#0B1F3A; aspect-ratio:4 / 5; align-self:start; overflow:hidden; }
.person-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.person-initials { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#0B1F3A; color:#FFFFFF; font-family:'Montserrat','Montserrat Fallback',sans-serif; font-size:2.6rem; font-weight:900; }
.person-body { padding:26px 26px 24px; }
.person-body .role { font-size:0.85rem; font-weight:700; color:var(--td-muted); margin-bottom:4px; }
.person-body h3 { font-size:1.4rem; font-weight:900; margin-bottom:4px; color:var(--td-text); }
.person-body .sub { font-size:0.9rem; color:var(--td-muted); margin-bottom:14px; }
.person-body p { font-size:0.95rem; color:var(--td-muted); margin-bottom:12px; }
.person-facts { list-style:disc; margin:0 0 14px 18px; padding:0; }
.person-facts li { font-size:0.92rem; color:var(--td-muted); line-height:1.6; padding:2px 0; }
.person-facts li strong { color:var(--td-text); }
.person-more { font-size:0.92rem; font-weight:700; color:var(--td-link); }
@media (max-width:720px) {
  .person { grid-template-columns:1fr; }
  .person-photo { aspect-ratio:4 / 3; }
  .person-body { padding:22px 16px; }
}

/* a feature block: the card, then the story, photos and video under it */
.feature { margin-top:8px; padding-bottom:40px; border-bottom:1px solid var(--td-line); margin-bottom:40px; }
.feature:last-of-type { border-bottom:0; margin-bottom:0; }
.feature > p { font-size:1rem; color:var(--td-muted); line-height:1.7; margin-top:16px; }
.feature > p strong { color:var(--td-text); }

/* photos with captions */
.photo { margin:0; }
.photo img { display:block; width:100%; height:auto; border-radius:8px; background:#0B1F3A; }
.photo figcaption { font-size:0.82rem; color:var(--td-muted); margin-top:8px; }
.photo-inline { margin-top:20px; }
.photo-strip { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.photo-strip .photo img { aspect-ratio:4 / 5; object-fit:cover; }
@media (max-width:480px) { .photo-strip { grid-template-columns:1fr; } .staff-grid { grid-template-columns:1fr 1fr; } }

/* video: a still and a link out to YouTube. No embed, so nothing loads
   from Google before the consent banner is answered. */
.video-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.video { display:block; text-decoration:none; color:var(--td-text); }
.video-thumb { position:relative; display:block; border-radius:8px; overflow:hidden; background:#0B1F3A; aspect-ratio:16 / 9; }
.video-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.video-play { position:absolute; left:50%; top:50%; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; background:rgba(10,10,10,0.75); }
.video-play::after { content:""; position:absolute; left:22px; top:17px; border-style:solid; border-width:11px 0 11px 17px; border-color:transparent transparent transparent #FFFFFF; }
.video:hover .video-play, .video:focus-visible .video-play { background:#1E40AF; }
.video:focus-visible { outline:3px solid #7DD3FC; outline-offset:3px; border-radius:8px; }
.video-cap { display:block; font-size:0.9rem; font-weight:700; margin-top:8px; color:var(--td-text); }
.video-cap small { display:block; font-weight:400; font-size:0.82rem; color:var(--td-muted); }
@media (max-width:560px) { .video-grid { grid-template-columns:1fr; } }

/* the rest of the staff: role and a photo, all the same size */
.staff-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap:16px; margin-top:20px; }
.staff { background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px; overflow:hidden; }
.staff .person-photo { aspect-ratio:4 / 5; }
.staff-body { padding:16px 16px 18px; }
.staff-body h3 { font-size:1.1rem; font-weight:900; color:var(--td-text); margin-bottom:2px; }
.staff-body .role { font-size:0.85rem; font-weight:700; color:var(--td-muted); margin-bottom:8px; }
.staff-body p { font-size:0.9rem; color:var(--td-muted); line-height:1.55; margin:0; }