/* ==========================================================================
   People: teachers and team members. Two designs on purpose.

   TEACHERS (picker slot "teachers": Home, For schools, About, a program page)
     1  Full profile cards     everything on the card
     2  Cards + "More about"   About and Speciality up front, the rest one tap away
     3  Profile rows           a wide row per teacher, label and fact side by side
   Sage and white, rectangular photo, labelled facts, in the order a parent
   reads them: About, Background, Speciality, Outside class.

   TEAM (picker slot "about-team": About)
     1  Role cards             arch portrait, role first, everything shown
     2  Founder-led            the founder large, the rest compact with "More about"
     3  Roster rows            round portrait left, two columns of rows
   Gold and terracotta, role before name, no labels.

   "More about X" is a plain <details>: it opens in place, never in a pop-up.
   ========================================================================== */

/* ---- Teachers: shared ---------------------------------------------------- */
.tp__heading, .tm__heading { margin: 0 0 14px; font: 800 1.1rem/1.3 var(--font-head); color: var(--ink); }
.tp__name { margin: 0; font: 800 1.15rem/1.25 var(--font-head); color: var(--ink); }
.tp__role { margin: 2px 0 0; font: 700 .9rem/1.4 var(--font-head); color: var(--sage-deep); }

.tp__photo { position: relative; display: block; overflow: hidden; background: var(--sage-tint); }
.tp__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.tp__photo--mono { display: grid; place-items: center; background: var(--sage-deep); color: #fff; font: 800 2.2rem/1 var(--font-head); }

.tp__facts { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; }
.tp__fact { margin: 0; }
.tp__fact dt { margin: 0 0 3px; font: 800 .78rem/1.3 var(--font-head); letter-spacing: .02em; color: var(--sage-deep); }
.tp__fact dd { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.tp__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.tp__tags li { padding: 3px 11px; border-radius: var(--r-pill); background: var(--sage-tint); color: var(--ink); font: 600 .82rem/1.5 var(--font-body); }

.tp__more { margin-top: 10px; border-top: 1px solid var(--line); }
.tp__more summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font: 700 .92rem var(--font-head); color: var(--brand-dark); }
.tp__more summary::-webkit-details-marker { display: none; }
.tp__more summary::after { content: "+"; font: 700 1.3rem/1 var(--font-head); }
.tp__more[open] summary::after { content: "\2212"; }
.tp__more summary:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; border-radius: var(--r-sm); }
.tp__more .tp__facts { margin: 2px 0 8px; }

/* ---- Teachers 1 and 2: cards --------------------------------------------- */
.tp--1 .tp__list, .tp--2 .tp__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); align-items: start; }
.tp--1 .tp__list { align-items: stretch; }
.tp__card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.tp__card .tp__photo { aspect-ratio: 4 / 3; }
.tp__card .tp__photo--mono { font-size: 3rem; }
.tp__body { padding: 16px 18px 18px; }

/* ---- Teachers 3: rows ---------------------------------------------------- */
.tp--3 .tp__list { padding: 4px clamp(16px, 2.4vw, 28px); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.tp__row { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; padding: 20px 0; }
.tp__row + .tp__row { border-top: 1px solid var(--line); }
.tp__who { display: flex; align-items: center; gap: 14px; }
.tp__who .tp__photo { flex: none; width: 88px; height: 88px; border-radius: var(--r-md); }
.tp__who .tp__photo--mono { font-size: 1.8rem; }
.tp__row .tp__facts { margin: 0; gap: 10px; }
.tp__row .tp__fact { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
.tp__row .tp__fact dt { padding-top: 2px; margin: 0; }

/* ---- A program page's teacher: same facts, same look ---------------------- */
.mp-teacher { align-items: flex-start; }
.mp-teacher--row .mp-teacher__bio { display: block; -webkit-line-clamp: unset; overflow: visible; }
.mp-teacher .tp__facts { margin-top: 8px; gap: 10px; }
.mp-teacher--card .tp__more { margin-top: 8px; }
@media (min-width: 900px) {
  .mp-teacher--row .tp__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
}

/* ---- Team: shared -------------------------------------------------------- */
.tm__heading { text-align: left; color: var(--brand-dark); }
.tm__role { margin: 0 0 2px; font: 700 .88rem/1.35 var(--font-head); color: var(--brand-dark); }
.tm__name { margin: 0; font: 800 1.12rem/1.25 var(--font-head); color: var(--ink); }
.tm__bio { margin: 8px 0 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.tm__points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.tm__points li { position: relative; padding-left: 16px; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.tm__points li::before { content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 2px; background: var(--brand); }

.tm__photo { position: relative; display: block; flex: none; overflow: hidden; background: var(--surface); }
.tm__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.tm__photo--mono { display: grid; place-items: center; background: var(--brand); color: #fff; font: 800 2.2rem/1 var(--font-head); }

.tm__more { margin-top: 8px; border-top: 1px solid rgba(36, 26, 18, .12); }
.tm__more summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font: 700 .9rem var(--font-head); color: var(--brand-dark); }
.tm__more summary::-webkit-details-marker { display: none; }
.tm__more summary::after { content: "+"; font: 700 1.3rem/1 var(--font-head); }
.tm__more[open] summary::after { content: "\2212"; }
.tm__more summary:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; border-radius: var(--r-sm); }
.tm__more .tm__bio { margin-top: 2px; }

.tm--advisor { margin-top: clamp(24px, 3vw, 36px); }
.tm__list { display: grid; gap: clamp(14px, 1.8vw, 22px); }

/* ---- Team 1: role cards -------------------------------------------------- */
.tm--1 .tm__list, .tm--2 .tm__list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.tm--1 .tm__card, .tm--2 .tm__card { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 22px 24px; background: var(--gold-tint); border-radius: var(--r-lg); }
.tm--1 .tm__photo { width: 116px; height: 144px; margin-bottom: 14px; border-radius: 999px 999px var(--r-md) var(--r-md); box-shadow: 0 0 0 3px var(--surface); }
.tm--1 .tm__body { min-width: 0; }

/* ---- Team 2: founder-led ------------------------------------------------- */
.tm--2 .tm__photo { width: 88px; height: 88px; margin-bottom: 12px; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface); }
.tm--2 .tm__card--lead { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 36px); padding: clamp(22px, 3vw, 32px); }
.tm--2 .tm__card--lead .tm__photo { width: 190px; height: 236px; margin: 0; border-radius: 999px 999px var(--r-lg) var(--r-lg); }
.tm--2 .tm__card--lead .tm__name { font-size: 1.6rem; }
.tm--2 .tm__card--lead .tm__role { font-size: 1rem; }
.tm--2 .tm__card--lead .tm__bio { font-size: 1.02rem; max-width: 62ch; }
.tm--2 .tm__card--lead .tm__points li { font-size: .98rem; }

/* ---- Team 3: roster rows ------------------------------------------------- */
.tm--3 .tm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.tm--3 .tm__card { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; border-top: 2px solid var(--accent-yellow); }
.tm--3 .tm__photo { width: 96px; height: 96px; border-radius: 50%; background: var(--gold-tint); }
.tm--3 .tm__body { min-width: 0; }

@media (max-width: 1000px) {
  .tp--1 .tp__list, .tp--2 .tp__list, .tm--1 .tm__list, .tm--2 .tm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tp__row { grid-template-columns: 1fr; gap: 14px; }
  .tp__row .tp__fact { grid-template-columns: 1fr; gap: 0; }
  .tm--3 .tm__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tp--1 .tp__list, .tp--2 .tp__list, .tm--1 .tm__list, .tm--2 .tm__list { grid-template-columns: 1fr; }
  .tm--2 .tm__card--lead { flex-direction: column; align-items: flex-start; }
  .tm--2 .tm__card--lead .tm__photo { width: 150px; height: 186px; }
  .tm--3 .tm__photo { width: 80px; height: 80px; }
}

/* ---- Compact teachers, in a carousel ------------------------------------ */
.tp__head { display: flex; align-items: center; gap: 12px; }
.tp__head .tp__photo { flex: none; width: 68px; height: 68px; border-radius: var(--r-md); }
.tp__head .tp__photo--mono { font-size: 1.5rem; }
.tp__body { padding: 14px 16px 12px; }
.tp__name { font-size: 1.05rem; }
.tp__role { font-size: .84rem; }
.tp__facts { gap: 8px; margin-top: 10px; }
.tp__fact dt { font-size: .72rem; margin-bottom: 1px; }
.tp__fact dd { font-size: .85rem; line-height: 1.5; }
.tp__tags li { padding: 2px 9px; font-size: .78rem; }
.tp__more summary { min-height: 40px; font-size: .86rem; }

.tp .tp__list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px; align-items: flex-start; }
.tp .tp__list::-webkit-scrollbar { display: none; }
.tp .tp__list:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.tp--1 .tp__slide, .tp--2 .tp__slide { flex: 0 0 calc((100% - 28px) / 3); scroll-snap-align: start; min-width: 0; }
.tp--1 .tp__slide, .tp--1 .tp__card { align-self: stretch; }
.tp--1 .tp__card { height: 100%; }
.tp--3 .tp__list { padding: 0; background: none; box-shadow: none; border-radius: 0; gap: 0; }
.tp--3 .tp__slide { flex: 0 0 100%; scroll-snap-align: start; padding: 4px clamp(16px, 2.4vw, 28px); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.tp__row { padding: 14px 0; }
.tp__who .tp__photo { width: 64px; height: 64px; }
.tp__row .tp__fact { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.tp__row .tp__facts { gap: 6px; }

.tp__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.tp__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); color: var(--brand-dark); box-shadow: var(--shadow-sm); cursor: pointer; }
.tp__btn:hover:not(:disabled) { background: var(--brand); color: #fff; }
.tp__btn:disabled { opacity: .4; cursor: default; }
.tp__btn:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }
.tp__count { min-width: 6ch; text-align: center; font: 700 .88rem var(--font-head); color: var(--ink); }

@media (max-width: 1000px) { .tp--1 .tp__slide, .tp--2 .tp__slide { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 640px) { .tp--1 .tp__slide, .tp--2 .tp__slide { flex-basis: 88%; } }

/* ---- Team: four to a row, like the current site ---------------------------- */
.tm--1.tm--team .tm__list, .tm--2.tm--team .tm__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tm--1 .tm__card, .tm--2 .tm__card { padding: 18px 16px 20px; }
.tm--1 .tm__photo { width: 104px; height: 130px; }
.tm__name { font-size: 1.05rem; }
.tm__bio, .tm__points li { font-size: .86rem; }
@media (max-width: 1100px) { .tm--1.tm--team .tm__list, .tm--2.tm--team .tm__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .tm--1.tm--team .tm__list, .tm--2.tm--team .tm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tm--1.tm--team .tm__list, .tm--2.tm--team .tm__list { grid-template-columns: 1fr; } }