/* About page people sections (client deck slides 3-7): Executive Committee, Universities / R&D, Advisory Committee,
   Conference Organization & Leadership, Event Management Organization. Every card is the site's own .speaker
   component (round portrait, name, role); this file only lays them out. Loaded by pages listing "people" in extras. */
/* flex rather than grid so a short last row sits centred instead of hanging off the left edge */
.people-grid {
  --cols: 6; --gap-x: calc(12 * var(--pt));
  list-style: none; margin: calc(22 * var(--pt)) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: calc(24 * var(--pt)) var(--gap-x);
}
.people-grid > li { display: flex; justify-content: center; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols)); }
.people-grid .speaker { width: 100%; }
.people-grid .speaker__body { padding: 0 calc(2 * var(--pt)); }
.people-grid .speaker__role + .speaker__role { margin-top: calc(-1 * var(--pt)); }
.people-grid--lead { --cols: 4; --gap-x: calc(20 * var(--pt)); max-width: calc(640 * var(--pt)); margin-inline: auto; }
/* the seven-person groups read better as 4 + 3 than 6 + 1 */
.people-grid--4 { --cols: 4; max-width: calc(600 * var(--pt)); margin-inline: auto; }
.speaker--lead .speaker__photo { max-width: calc(140 * var(--pt)); }
.speaker--lead .speaker__name { font-size: calc(12 * var(--pt)); }
.people__subhead { margin-top: calc(40 * var(--pt)); text-align: center; margin-inline: auto; }
@media (max-width: 959px) {
  .people-grid, .people-grid--4 { --cols: 3; --gap-x: 14px; row-gap: 26px; margin-top: 22px; max-width: none; }
  .people-grid--lead { --cols: 2; max-width: 520px; }
  .speaker--lead .speaker__photo { max-width: 170px; }
  .speaker--lead .speaker__name { font-size: 15px; }
  .people__subhead { margin-top: 36px; }
}
@media (max-width: 559px) {
  .people-grid, .people-grid--4 { --cols: 2; --gap-x: 12px; row-gap: 24px; }
}
.speaker__quote { margin: calc(8 * var(--pt)) 0 0; font-family: var(--f-alex); font-weight: 300; font-style: italic; font-size: calc(9 * var(--pt)); line-height: 1.45; color: rgba(255, 255, 255, .85); }
@media (max-width: 959px) { .speaker__quote { font-size: 13px; margin-top: 8px; } }

/* If a portrait ever fails to load, the browser prints the alt text across the circle (this happened on
   dev.primedigital.dev, where one upload landed as a 0-byte file). Keep the ring clean: the name is
   printed under the photo anyway, and alt text is still exposed to screen readers. */
.people .speaker__photo, .leader .speaker__photo { color: transparent; font-size: 0; }

/* a slider needs the same breathing room under a heading that the old grid had */
.people .carousel--speakers { margin-top: calc(40 * var(--pt)); }
.people .people__subhead + .carousel--speakers { margin-top: calc(40 * var(--pt)); }
@media (max-width: 959px) {
  .people .carousel--speakers { margin-top: 40px; }
  .people .people__subhead + .carousel--speakers { margin-top: 36px; }
}

/* Conference Organization & Leadership: the four leaders keep their portraits, with name, role and a quote
   beside each one. The quote is a placeholder until the client sends the real text. */
.leaders { list-style: none; margin: calc(40 * var(--pt)) auto 0; padding: 0; display: flex; flex-direction: column; gap: calc(16 * var(--pt)); max-width: calc(600 * var(--pt)); }
.leader { display: flex; align-items: center; gap: calc(20 * var(--pt)); }
.leader .speaker { flex: 0 0 calc(96 * var(--pt)); }
.leader .speaker--lead .speaker__photo { max-width: calc(96 * var(--pt)); }
.leader__body { flex: 1 1 auto; min-width: 0; }
.leader__name { margin: 0; font-family: var(--f-mont); font-weight: 700; font-size: calc(12 * var(--pt)); line-height: 1.3; color: #fff; }
.leader__roles { margin: calc(2 * var(--pt)) 0 0; display: flex; flex-direction: column; }
.leader__role { font-family: var(--f-pop); font-size: calc(9.5 * var(--pt)); line-height: 1.35; color: rgba(255, 255, 255, .62); }
.leader__quote {
  margin: calc(9 * var(--pt)) 0 0; padding: calc(12 * var(--pt)) calc(18 * var(--pt)) calc(12 * var(--pt)) calc(30 * var(--pt));
  position: relative; border-radius: calc(8 * var(--pt)); min-height: calc(46 * var(--pt));
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(120, 190, 215, .22);
}
.leader__quote::before {
  content: "\201C"; position: absolute; left: calc(9 * var(--pt)); top: calc(4 * var(--pt));
  font-family: var(--f-alex); font-size: calc(28 * var(--pt)); line-height: 1; color: rgba(120, 190, 215, .5);
}
.leader__quote-text { margin: 0; font-family: var(--f-alex); font-weight: 300; font-style: italic; font-size: calc(10.5 * var(--pt)); line-height: 1.55; color: rgba(255, 255, 255, .88); }
/* an empty slot reads as waiting for copy, never as a real statement */
.leader__quote--empty { border-style: dashed; background: rgba(255, 255, 255, .02); }
.leader__quote-text--empty { font-style: normal; color: rgba(255, 255, 255, .42); }
.leader__quote-text--empty::after {
  content: ""; display: block; margin-top: calc(9 * var(--pt));
  height: calc(1 * var(--pt)); width: 72%; background: rgba(255, 255, 255, .11);
}
@media (max-width: 959px) {
  .leaders { gap: 18px; max-width: 520px; margin-top: 36px; }
  .leader { gap: 14px; }
  .leader .speaker, .leader .speaker--lead .speaker__photo { flex-basis: 96px; max-width: 96px; }
  .leader__name { font-size: 15px; }
  .leader__role { font-size: 13px; }
  .leader__quote { margin-top: 8px; min-height: 0; padding: 12px 14px 12px 26px; border-radius: 8px; }
  .leader__quote::before { font-size: 28px; left: 8px; top: 2px; }
  .leader__quote-text { font-size: 13.5px; }
}
@media (max-width: 559px) {
  .leader { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .leader__body { width: 100%; }
  .leader__roles { align-items: center; }
  .leader__quote { text-align: left; }
}

/* Executive Committee: a dozen faces a page, six across and two deep, so more of the committee shows
   at once than the five that fitted in a single row. */
.people-page {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: calc(20 * var(--pt)) calc(10 * var(--pt)); justify-items: center;
}
.people-page > li { width: 100%; }
.people-page .speaker { width: 100%; }
.people-page .speaker__photo { max-width: calc(70 * var(--pt)); }
/* every committee photo is the same size as the grid above it, so no section looks bigger than another */
.people .carousel--speakers .speaker__photo { max-width: calc(70 * var(--pt)); }
.people-page .speaker__name { font-size: calc(10 * var(--pt)); }
.people-page .speaker__role { font-size: calc(8.4 * var(--pt)); line-height: 1.35; }
.carousel--pages .carousel__arrow { top: 34%; }
@media (max-width: 959px) {
  .people-page { grid-template-columns: repeat(3, 1fr); gap: 22px 10px; }
  .people-page .speaker__photo { max-width: 120px; }
  .people .carousel--speakers .speaker__photo { max-width: 120px; }
  .people-page .speaker__name { font-size: 14px; }
  .people-page .speaker__role { font-size: 12.5px; }
}
@media (max-width: 559px) {
  .people-page { grid-template-columns: repeat(2, 1fr); }
}