/* ===== 2026 Speakers (home section + speaker.html) ===== */
.spk2 {
  background: #f5f4ef;
  color: #1d1b26;
  font-family: 'Manrope', sans-serif;
  padding: 96px 32px 110px;
}

.spk2-in {
  max-width: 1280px;
  margin: 0 auto;
}

.spk2-over {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4b4857;
}

.spk2-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px 48px;
  margin-bottom: 56px;
}

.spk2-head h2,
.spk2-head h1 {
  margin: 0 0 26px;
  /* same type as the hero headline (.wais-h1-lg in style.css) */
  font-family: 'Manrope', Arial, sans-serif;
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #1d1b26;
}

/* Second line in the brand gradient: the global `h1 em, h2 em` rule in style.css paints it.
   The padding keeps the descenders of g/p inside the painted (and, when animated, clipped)
   box; the negative margin cancels it out so the layout doesn't move. */
.spk2-head em {
  padding: 0 .06em .16em 0;
  margin: 0 -.06em -.16em 0;
}

.spk2-lead {
  max-width: 640px;
  margin: 0;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  color: #5a5766;
}

.spk2-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid #8f84d6;
  color: #1d1b26;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.spk2-all i {
  font-style: normal;
  transition: transform .25s ease;
}

.spk2-all:hover i {
  transform: translate(3px, -3px);
}

.spk2-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 44px 28px;
}

.spk2-card {
  min-width: 0;
}

.spk2-photo {
  position: relative;
  display: block;
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 10px;
  background: #e7e2ef;
}

/* photo at its own proportions — no fixed box, no cropping */
.spk2-photo img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .4s ease;
}

a.spk2-photo:hover img {
  transform: scale(1.04);
}

.spk2-profile {
  position: absolute;
  left: 50%;
  bottom: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #1d1b26;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .25s ease, transform .25s ease;
}

a.spk2-photo:hover .spk2-profile,
a.spk2-photo:focus-visible .spk2-profile {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* "Chief Guest" tag on the featured card */
.spk2-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: 999px;
  background: #1d1b26;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

.spk2-card h3 {
  margin: 0 0 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #1d1b26;
}

.spk2-card h3 a {
  color: inherit;
  text-decoration: none;
}

.spk2-role {
  margin: 0 0 5px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #5f5c6b;
}

.spk2-org {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #5b3fa0;
}

.spk2-foot {
  margin-top: 64px;
  text-align: center;
}

/* ---- Entrance animation ----
   speakers.js adds .spk2-js to the section (only when it can animate), then .is-in to the
   heading block and to each card as they come into view, and removes it again once they are
   fully off screen so the animation replays. Headline words rise in one by one, the same
   motion as the hero headline; the label, intro, link and cards follow. */
.spk2-js .spk2-head .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.6em) rotate(2deg);
}

.spk2-js .spk2-rise {
  opacity: 0;
  transform: translateY(24px);
}

/* the gradient line wipes in left to right as one piece, like the hero's accent line
   (gradient text can't be split into separately animated words) */
.spk2-js .spk2-head em {
  display: inline-block;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.spk2-js .spk2-head.is-in em {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s cubic-bezier(.2, .7, .2, 1) .4s, opacity .2s linear .4s;
}

/* the transition lives on the revealed state only: revealing animates, while hiding
   (when the script starts, or once off screen) is instant — no fade-out in view */
.spk2-js .spk2-head.is-in .w,
.spk2-js .spk2-head.is-in .spk2-rise,
.spk2-js .spk2-rise.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}

.spk2-js .spk2-head.is-in .w {
  transition-delay: calc(.1s + var(--i) * .08s);
}

.spk2-js .spk2-head.is-in .spk2-rise,
.spk2-js .spk2-rise.is-in {
  transition-delay: var(--d, 0s);
}

/* ---- Loading placeholders while the speaker list is fetched ---- */
.spk2-skel .spk2-photo,
.spk2-skel-line {
  background: linear-gradient(100deg, #e7e2ef 30%, #f4f1f8 50%, #e7e2ef 70%);
  background-size: 300% 100%;
  animation: spk2-shimmer 1.4s ease-in-out infinite;
}

/* the API photos are 400x400, so the placeholder is square too */
.spk2-skel .spk2-photo {
  aspect-ratio: 1;
}

.spk2-skel-line {
  display: block;
  height: 14px;
  margin-bottom: 10px;
  border-radius: 6px;
}

.spk2-skel-name {
  width: 70%;
  height: 16px;
}

.spk2-skel-role {
  width: 85%;
}

.spk2-skel-org {
  width: 55%;
}

@keyframes spk2-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .spk2-skel .spk2-photo,
  .spk2-skel-line {
    animation: none;
  }
}

@media (max-width: 1200px) {
  .spk2-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .spk2-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .spk2 {
    padding: 64px 16px 72px;
  }

  .spk2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 16px;
  }

  .spk2-photo {
    margin-bottom: 8px;
  }

  .spk2-role,
  .spk2-org {
    font-size: 14px;
  }
}