/* ============================================================
   presentation.css — Modo apresentação (uso do docente em aula)
   Cada seção do tópico vira um "slide" em tela cheia.
   ============================================================ */

.presentation-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
}

.presentation-layer[hidden] {
  display: none;
}

/* ---------- Slide ---------- */
.slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* "safe" evita que o início do slide fique inalcançável quando o
     conteúdo estoura a tela; navegadores antigos mantêm a linha acima */
  justify-content: safe center;
  padding: var(--space-7) clamp(var(--space-5), 8vw, 8rem);
  overflow-y: auto;
  font-size: 1.35rem; /* texto ampliado para projeção */
}

/* O cartão da demonstração é material da página de leitura, não de projeção.
   Antes de 2026-08-07 a regra escondia a própria demo, montada no tópico. */
.presentation-layer .lab-card {
  display: none;
}

/* Aviso fixo no rodapé do slide quando ele não coube inteiro na tela */
.slide.has-overflow::after {
  content: "▼ Role — o slide continua";
  position: sticky;
  bottom: 0;
  align-self: center;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.slide h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--color-brand);
}

.slide h2 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  margin-bottom: var(--space-5);
}

.slide li {
  margin-bottom: var(--space-3);
}

/* ---------- Figura e tabela vindas da seção (slides[].ref) ---------- */
/* Na projeção o que limita a figura é a altura da tela, não a largura: em 4:3
   uma figura larga demais empurra o texto de apoio para fora do slide. Os
   valores saíram de medição em 1024x768, o pior projetor de sala em uso. */
.presentation-layer .figura svg {
  max-width: 100%;
  max-height: 46vh;
}

/* Slide que junta figura e texto: a figura cede altura para os dois caberem, e a
   legenda sai. Ela foi escrita para quem lê e diria de novo o que os itens do
   slide já dizem. Na figura sozinha a legenda fica, porque é o único comentário. */
.presentation-layer .slide-misto .figura svg {
  max-height: 32vh;
}

.presentation-layer .slide-misto .figura figcaption {
  display: none;
}

/* A legenda e a tabela da leitura têm corpo fixo em rem (14px), pequeno demais
   projetado. Aqui os dois acompanham o corpo ampliado do slide. A tabela ainda
   fica menor que o texto, com linha mais justa, porque é o elemento mais alto
   que um slide recebe. */
.presentation-layer .figura figcaption {
  font-size: 0.8em;
}

.presentation-layer .tabela-conteudo {
  font-size: 0.7em;
  /* A entrelinha de leitura (1.7) é generosa demais para dado tabular projetado, e
     era ela, mais que o corpo, que fazia a tabela de seis linhas estourar o slide. */
  line-height: 1.45;
}

.presentation-layer .tabela-conteudo th,
.presentation-layer .tabela-conteudo td {
  padding: 0.3em 0.5em;
}

/* Slide de capa do tópico */
.slide-cover {
  text-align: center;
}

.slide-cover .slide-course-name {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ---------- Barra de controle ---------- */
.presentation-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
  background-color: var(--color-bg-elevated);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.presentation-controls .slide-counter {
  font-variant-numeric: tabular-nums;
}

.presentation-controls .controls-hint {
  display: none;
}

@media (min-width: 700px) {
  .presentation-controls .controls-hint {
    display: inline;
  }
}