/* ==========================================================================
   Página /palestras — camada de layout
   Usa os tokens/componentes de design-system.css. Nada aqui redefine o sistema;
   isto é só a "montagem dos slides" do mídia kit em formato de página.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Placeholders de mídia (trocar por imagem/vídeo reais depois)
   -------------------------------------------------------------------------- */
.pl-ph {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--sand-400);
  border: 1px solid var(--line-strong);
  color: var(--slate-400);
  overflow: hidden;
  min-height: 200px;
}
.pl-ph::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--line-strong) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line-strong) 50%, transparent calc(50% + .5px));
}
.pl-ph > span {
  position: relative; z-index: 1;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  background: var(--sand-200);
  border: 1px solid var(--line-strong);
}

.pl-ph-dark { background: var(--slate-900); border-color: var(--slate-700); color: var(--slate-300); }
.pl-ph-dark::before {
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--slate-700) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--slate-700) 50%, transparent calc(50% + .5px));
}
.pl-ph-dark > span { background: var(--slate-800); border-color: var(--slate-700); }

/* Proporções */
.pl-ratio-portrait { aspect-ratio: 3 / 4; }
.pl-ratio-landscape { aspect-ratio: 4 / 3; }
.pl-ratio-wide { aspect-ratio: 21 / 9; }
.pl-ratio-square { aspect-ratio: 1; }

/* --------------------------------------------------------------------------
   Capa (slide 01) — nome ao centro + vídeo em loop à direita
   -------------------------------------------------------------------------- */
.pl-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--slate-900);
  color: var(--sand-300);
  overflow: hidden; /* o vídeo sangra até a borda direita */
}

.pl-hero-top {
  width: 100%; /* filho de flex column: sem isto, margin auto encolhe o container */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.pl-hero-seal { height: 3.25rem; width: auto; }

.pl-hero-body {
  width: 100%;
  flex: 1;
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-6);
}
@media (min-width: 900px) {
  .pl-hero-body {
    grid-template-columns: 1.1fr .9fr;
    align-items: stretch;
    gap: var(--space-10);
  }
}

.pl-hero-id { align-self: center; }
.pl-hero-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  letter-spacing: -0.025em;
  line-height: .98;
  color: var(--sand-300);
}
.pl-hero-creds {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-3);
  color: rgba(237,234,227,.85);
  font-size: 1.0625rem;
}
.pl-slash { color: var(--amber-500); font-weight: 700; margin-right: var(--space-2); }

/* Coluna do vídeo: sangra até a borda direita da viewport em telas largas.
   O vídeo original é vertical; exibimos quadrado, cortando apenas a parte
   inferior (conteúdo ancorado no topo). */
.pl-hero-video {
  position: relative;
  aspect-ratio: 1 / 1;
  align-self: center;
  /* sem width explícito: o stretch do grid + margem negativa fazem a sangria */
}
@media (min-width: 900px) {
  /* Puxa até a borda direita da viewport: distância = metade da sobra fora
     do container + o padding lateral. (100% aqui seria a coluna, não o
     container — por isso a conta usa 100vw e --container.) */
  .pl-hero-video {
    margin-right: calc(-1 * ((100vw - min(var(--container), 100vw)) / 2 + 1.5rem));
  }
}
.pl-hero-video .pl-ph { position: absolute; inset: 0; min-height: 0; }
.pl-hero-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}

.pl-hero-foot {
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(237,234,227,.25);
  padding-bottom: var(--space-6);
}
.pl-hero .ds-meta { color: rgba(237,234,227,.65); }

/* --------------------------------------------------------------------------
   Slides internos
   -------------------------------------------------------------------------- */
/* Índice do slide: a numeração aqui é informação real (é um deck traduzido) */
.pl-index {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.pl-index::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.ds-band-dark .pl-index::after { background: var(--slate-700); }

.pl-slide {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .pl-slide { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); align-items: center; }
  .pl-slide-rev > :first-child { order: 2; }
}

.pl-slide-text { max-width: var(--measure); }
.pl-slide-text .ds-lead { color: var(--ink); }

/* Citação de virada (slide 05): texto exato, só a voz tipográfica muda */
.pl-pull {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-m);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

/* Bloco de leitura centralizado (podcast) */
.pl-center { margin-inline: auto; text-align: center; }

/* Box escuro dentro de seção clara (slide 06) */
.pl-box {
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-2);
}

/* --------------------------------------------------------------------------
   Colagem do podcast (slide 07) — 3 fotos com "crop reveal" de baixo para cima
   -------------------------------------------------------------------------- */
.pl-collage {
  display: grid;
  gap: var(--space-8);
  max-width: 60rem;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}
@media (min-width: 900px) {
  .pl-collage {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .pl-collage-a { grid-column: 1; grid-row: 1 / span 2; margin-top: 30%; } /* retrato à esquerda desce, como no print */
  .pl-collage-b { grid-column: 2; grid-row: 1; }
  .pl-collage-c { grid-column: 2; grid-row: 2; }
}
.pl-collage img { width: 100%; height: auto; display: block; }

/* Entrada das fotos: fade-in subindo (usa o .ds-reveal do design system,
   com deslocamento um pouco maior e atraso escalonado entre as três). */
.pl-collage .ds-reveal { transform: translateY(28px); }
.pl-collage .ds-reveal.is-in { transform: none; }
.pl-collage .ds-reveal:nth-child(2) { transition-delay: 200ms; }
.pl-collage .ds-reveal:nth-child(3) { transition-delay: 400ms; }

/* --------------------------------------------------------------------------
   Carrossel automático (slide 08)
   -------------------------------------------------------------------------- */
.pl-carousel { overflow: hidden; }
.pl-track {
  display: flex;
  width: max-content;
  animation: pl-marquee 32s linear infinite;
}
.pl-track .pl-ph {
  width: clamp(280px, 36vw, 520px);
  margin-right: var(--space-4);
  flex-shrink: 0;
}
.pl-track img {
  height: clamp(240px, 34vw, 400px);
  width: auto;
  margin-right: var(--space-4);
  flex-shrink: 0;
  display: block;
}
@keyframes pl-marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pl-track { animation: none; }
  .pl-carousel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --------------------------------------------------------------------------
   Repertório (slide 09) — numeração editorial + título na fonte de corpo
   -------------------------------------------------------------------------- */
.pl-temas { border-top: 1px solid var(--line); }

.pl-tema {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-fast) var(--ease);
}
@media (min-width: 900px) {
  .pl-tema {
    grid-template-columns: var(--rail) 1fr;
    gap: var(--space-8);
    align-items: start;
    padding-inline: var(--space-4);
    margin-inline: calc(var(--space-4) * -1);
  }
}
.pl-tema:hover { background: var(--sand-200); }

.pl-tema-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber-700);
}

.pl-tema-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.35;
  letter-spacing: 0;
  max-width: var(--measure);
}

.pl-tema-pub {
  margin-top: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--fs-small);
}
.pl-tema-pub .ds-meta {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--slate-300);
}

/* --------------------------------------------------------------------------
   CTA final (slide 10)
   -------------------------------------------------------------------------- */
.pl-cta-title {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.pl-social {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-8);
}
.pl-social .ds-btn { border: 1px solid rgba(237,234,227,.35); background: transparent; color: var(--sand-300); }
.pl-social .ds-btn:hover { background: rgba(237,234,227,.08); }

.pl-contact {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   Ajustes por tamanho de tela
   -------------------------------------------------------------------------- */
/* Desktop: textos descritivos das seções com imagem maiores (~22px) */
@media (min-width: 1024px) {
  .pl-slide-text .ds-lead,
  .pl-center .ds-lead {
    font-size: 1.375rem;
    line-height: 1.65;
  }
}

/* Mobile: selo da capa 30% menor */
@media (max-width: 640px) {
  .pl-hero-seal { height: 2.25rem; }
}

/* Mobile: vídeo da capa vem antes do nome */
@media (max-width: 899px) {
  .pl-hero-body .pl-hero-video { order: -1; }
}

/* Mobile: no contato, a foto vem antes do "Vamos conversar?";
   redes sociais viram botões empilhados de largura total */
@media (max-width: 899px) {
  #contato .pl-slide > img { order: -1; }
  .pl-social { flex-direction: column; }
  .pl-social .ds-btn { width: 100%; justify-content: center; }
}
.pl-contact-row dt { color: var(--slate-300); margin-bottom: var(--space-1); }
.pl-contact-row dd { color: var(--sand-300); }
.pl-contact-row dd a { text-decoration: underline; text-decoration-color: rgba(237,234,227,.35); text-underline-offset: 4px; }
.pl-contact-row dd a:hover { text-decoration-color: var(--amber-400); }