/* ==========================================================================
   Palestrantes · Figma 1:59 (1920 × 908, fundo #efefef)
   D6: cabeçalho no container de 1180; o carrossel começa alinhado a ele e
   "sangra" até a borda direita da tela (no Figma o container é 1496).
   Cards 1:89 (268 × 380) gerados do cadastro js/data/pessoas.js (ordem em DESTAQUES).
   ========================================================================== */

.cn-palestrantes { background: var(--bg-muted); padding-block: var(--palestrantes-pad); }

/* ---------- Cabeçalho (1:61) ---------- */
.cn-palestrantes__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-32); }
.cn-palestrantes__intro { display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; }
.cn-palestrantes__intro .t-h2 { margin-top: var(--space-20); }
.cn-palestrantes__guests { display: flex; align-items: center; gap: var(--space-10); margin-top: var(--space-20); }
.cn-palestrantes__avatars { display: flex; }
.cn-palestrantes__avatars li + li { margin-left: -28px; }
.cn-palestrantes__avatars img {
  width: 51px; height: 51px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  border: 2px solid var(--gray-300); box-shadow: var(--shadow-avatar);
}
.cn-palestrantes__guests p { max-width: 170px; font: var(--fw-regular) var(--fs-body-xl)/1 var(--font-sans); color: var(--ink); }
.cn-palestrantes__guests strong { font-weight: var(--fw-semibold); }

.cn-palestrantes__controls { display: flex; align-items: center; gap: var(--space-16); flex: none; }
.cn-palestrantes__count { min-width: 3ch; font: var(--fw-regular) var(--fs-body-l)/1.55 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Trilho (scroll-snap nativo + setas + arraste) ---------- */
.cn-palestrantes__track {
  --bleed: max(var(--gutter), calc((100% - var(--container)) / 2));
  position: relative;
  display: flex; gap: var(--space-20);
  margin-top: 38px; /* 48 do Figma − 10 de folga para o hover */
  padding: var(--space-10) var(--bleed);
  scroll-padding-inline: var(--bleed);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline-offset: -3px;
}
.cn-palestrantes__track::-webkit-scrollbar { display: none; }
.cn-palestrantes__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.cn-palestrantes__track.is-dragging * { pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .cn-palestrantes__track { cursor: grab; } }

.cn-palestrantes__foot { margin-top: 22px; } /* 32 do Figma − 10 de folga */
.cn-palestrantes.is-static .cn-palestrantes__controls,
.cn-palestrantes.is-static .cn-palestrantes__foot { visibility: hidden; }

/* ---------- Card (1:89) ---------- */
.cn-speaker {
  flex: 0 0 var(--speaker-card-w); height: var(--speaker-card-h);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--space-14);
  padding: var(--space-14);
  border-radius: var(--radius-card);
  background: var(--lilac-400);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* borboleta grande no canto superior direito, cortada pela borda do card (símbolo #s-borboleta) */
.cn-speaker { position: relative; overflow: hidden; isolation: isolate; }
.cn-speaker__butterfly {
  position: absolute; z-index: -1; top: -34px; right: -96px; width: 200px; height: 175px; pointer-events: none;
  color: color-mix(in srgb, var(--purple-700) 10%, transparent); rotate: -12deg;
}
.cn-speaker__photo {
  width: var(--speaker-photo-w); height: var(--speaker-photo-h); flex: none;
  border: 3px solid var(--white); border-radius: var(--radius-photo); overflow: hidden;
  background: var(--gray-300);
}
.cn-speaker__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .6s var(--ease-out); }
/* sem foto ainda: iniciais sobre o lilás */
.cn-speaker__iniciais, .cn-speaker-modal__iniciais {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(140deg, var(--lilac-200), var(--lilac-400));
  font: var(--fw-semibold) 32px/1 var(--font-sans); color: var(--purple-700); letter-spacing: .02em;
}
.cn-speaker-modal__iniciais { width: 220px; aspect-ratio: 4 / 5; height: auto; border: 4px solid var(--white); border-radius: var(--radius-card); font-size: 56px; }
.cn-speaker-modal__iniciais[hidden], .cn-speaker-modal__photo[hidden] { display: none; }
.cn-speaker__info {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10);
  padding: var(--space-16); border-radius: var(--radius-photo); background: var(--surface-card);
}
.cn-speaker__name { font: var(--fw-semibold) var(--fs-card-title)/var(--lh-card-title) var(--font-sans); color: var(--purple-550); }
/* Descrição: até 4 linhas; quando o texto não cabe, as últimas se dissolvem num
   degradê (convite ao "Ver mais"). .is-clipped vem do JS só quando há corte. */
.cn-speaker__desc {
  max-height: calc(var(--fs-body-s) * var(--lh-body-s) * 4);
  flex: 0 1 auto; min-height: calc(var(--fs-body-s) * var(--lh-body-s) * 2); /* nome longo (3 linhas): a descrição cede espaço ao "Ver mais" */
  overflow: hidden;
  font: var(--fw-regular) var(--fs-body-s)/var(--lh-body-s) var(--font-sans); color: var(--speaker-desc);
}
.cn-speaker__desc.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 35%, transparent 100%);
}
.cn-speaker__more {
  margin-top: auto; /* encosta embaixo do bloco */
  font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--text-strong);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color var(--dur-fast);
}
.cn-speaker__more span { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }

/* Hover/foco (Figma 1:98: borda 3px #924eed): sobe, borda e zoom na foto */
@media (hover: hover) {
  .cn-speaker:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 3px var(--purple-525); }
  .cn-speaker:hover .cn-speaker__photo img { transform: scale(1.08); }
  .cn-speaker:hover .cn-speaker__more { color: var(--purple-700); }
  .cn-speaker:hover .cn-speaker__more span { transform: translateX(4px); }
}
.cn-speaker:focus-within { box-shadow: inset 0 0 0 3px var(--purple-525); }

/* ---------- Modal "Ver mais" (estrutura do wireframe 18:97, visual da marca) ----------
   Esquerda: painel com o degradê roxo, silhueta da borboleta e foto em moldura;
   direita: chip, nome, titulação, tema, barra lima, minibio e CTA.
   Ao trocar de palestrante: foto revelada na direção da navegação + texto em sequência. */
.cn-speaker-modal__card {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); /* rola por dentro se a minibio for longa */
  padding: 0; overflow-y: auto;
}
.cn-speaker-modal__media {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: var(--space-40) var(--space-28);
  background: var(--grad-panel);
}
.cn-speaker-modal__shape {
  position: absolute; z-index: -1; right: -70px; bottom: -40px; width: 300px; height: 262px;
  color: var(--purple-600); opacity: .55; rotate: -12deg;
}
.cn-speaker-modal__photo {
  width: 220px; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 20%;
  border: 4px solid var(--white); border-radius: var(--radius-card);
  background: var(--lilac-200);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--purple-900) 45%, transparent);
}
.cn-speaker-modal__pos {
  margin-top: var(--space-20);
  font: italic var(--fw-semibold) var(--fs-card-title)/1 var(--font-serif); font-variation-settings: var(--fraunces-axes);
  color: var(--white); letter-spacing: .04em;
}
.cn-speaker-modal__pos small { font-size: .7em; opacity: .7; }

.cn-speaker-modal__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-48) var(--space-64) var(--space-40) var(--space-40);
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--lilac-100) 80%, transparent), transparent 60%), var(--white);
}
.cn-speaker-modal__name { margin-top: var(--space-4); font: var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-sans); color: var(--purple-900); }
.cn-speaker-modal__meta { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--text-muted); }
.cn-speaker-modal__tema { font: var(--fw-regular) var(--fs-body-s)/var(--lh-body-s) var(--font-sans); color: var(--text-muted); }
.cn-speaker-modal__tema strong { color: var(--purple-700); font-weight: var(--fw-semibold); }
.cn-speaker-modal__bar { width: 56px; height: 4px; margin-block: var(--space-8) var(--space-4); border-radius: var(--radius-pill); background: var(--grad-cta-lime); }
.cn-speaker-modal__bio { font: var(--fw-regular) var(--fs-body-l)/var(--lh-body-l) var(--font-sans); color: var(--text-body); white-space: pre-line; /* minibio com quebras da mensagem */ }
.cn-speaker-modal__cta { margin-top: var(--space-16); }
.cn-speaker-modal [hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .cn-speaker-modal.is-in .cn-speaker-modal__photo { animation: cn-speaker-photo .7s var(--ease-out) both; }
  .cn-speaker-modal.is-in .cn-speaker-modal__body > * { animation: cn-hero-up .55s var(--ease-out) calc(.08s + var(--i, 0) * .06s) both; }
  .cn-speaker-modal.is-in .cn-speaker-modal__shape { animation: cn-speaker-shape 1s var(--ease-out) both; }
}
@keyframes cn-speaker-photo {
  from { clip-path: inset(0 0 0 100% round var(--radius-card)); transform: scale(1.06); }
  to   { clip-path: inset(0 0 0 0 round var(--radius-card)); }
}
.cn-speaker-modal[data-dir="prev"].is-in .cn-speaker-modal__photo { animation-name: cn-speaker-photo-prev; }
@keyframes cn-speaker-photo-prev {
  from { clip-path: inset(0 100% 0 0 round var(--radius-card)); transform: scale(1.06); }
  to   { clip-path: inset(0 0 0 0 round var(--radius-card)); }
}
@keyframes cn-speaker-shape { from { opacity: 0; transform: translate(30px, 20px) scale(.9); } }

/* ---------- ≤767 ---------- */
@media (max-width: 767px) {
  .cn-palestrantes { padding-block: var(--space-64); }
  .cn-palestrantes__head { flex-direction: column; align-items: flex-start; }
  /* com 37 palestrantes, setas também no celular (antes só pontos + arraste): à direita, acima dos cards */
  .cn-palestrantes__controls { align-self: flex-end; gap: var(--space-12); margin-top: calc(-1 * var(--space-8)); }
  .cn-palestrantes__count { font-size: var(--fs-body); }
  .cn-palestrantes__guests p { font-size: var(--fs-body-l); }
  .cn-palestrantes__track { margin-top: var(--space-24); scroll-padding-inline: var(--gutter); }

  .cn-speaker-modal__card { grid-template-columns: minmax(0, 1fr); }
  .cn-speaker-modal__media { flex-direction: row; justify-content: flex-start; align-items: flex-end; gap: var(--space-16); padding: var(--space-24) var(--space-20); }
  .cn-speaker-modal__photo { width: 112px; border-width: 3px; border-radius: var(--radius-tile); }
  .cn-speaker-modal__pos { margin: 0 0 var(--space-4); }
  .cn-speaker-modal__shape { width: 200px; height: 175px; right: -50px; bottom: -50px; }
  .cn-speaker-modal__body { padding: var(--space-24) var(--space-20) var(--space-28); }
  .cn-speaker-modal__cta { width: 100%; }
}

/* ---------- Destaque: os 3 palestrantes principais (pessoas.js › destaque) ---------- */
/* sem sombra externa: o trilho do carrossel corta (overflow) */
.cn-speaker--destaque {
  background: var(--glow-speaker-destaque), var(--grad-speaker-destaque);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 16%, transparent);
}
.cn-speaker--destaque .cn-speaker__butterfly { color: color-mix(in srgb, var(--lilac-400) 14%, transparent); }
/* borda em degradê lilás claro (padding-box/border-box respeita o raio) */
.cn-speaker--destaque .cn-speaker__photo {
  border-color: transparent;
  background: linear-gradient(var(--gray-300), var(--gray-300)) padding-box, var(--grad-speaker-photo) border-box;
}
.cn-speaker--destaque .cn-speaker__info { background: var(--white); }
.cn-speaker--destaque .cn-speaker__name { color: var(--purple-900); }
.cn-speaker__badge {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: -4px;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--lilac-100); color: var(--purple-700);
  font: var(--fw-semibold) 10px/1 var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.cn-speaker__badge svg { width: 9px; height: 9px; }
@media (hover: hover) {
  .cn-speaker--destaque:hover { box-shadow: inset 0 0 0 3px var(--lilac-300); }
}