/* aula-aberta: texto à esquerda, dois capítulos em alturas diferentes à direita.
   Sem player na página: o vídeo abre no <dialog> único. */

.aula-aberta {
  position: relative;
  z-index: 2; /* A linha L3 entra no topo do tour */
  padding-block: var(--respiro);
}

.aula-aberta__abertura { padding-inline: var(--margem); }
.aula-aberta__abertura .titulo em { display: inline-block; } /* A expressão não quebra no "a" */
.aula-aberta__abertura .apoio { margin-top: 1.25rem; }
.aula-aberta__abertura .link-seta { margin-top: .75rem; }

.aula-aberta__capitulos {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
  padding-inline: var(--margem);
}

.capitulo {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: 1.125rem;
  align-items: end;
  color: var(--navy);
  text-decoration: none;
}
.capitulo--barra { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
.capitulo--barra .capitulo__poster { order: 2; }

.capitulo__poster {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--navy);
}
.capitulo__poster img {
  width: 100%;
  height: auto;
  aspect-ratio: 608 / 1080;
  object-fit: cover;
  transition: transform .6s var(--ease-controle);
}
.capitulo .play { left: .75rem; bottom: .75rem; width: 48px; height: 48px; }

.capitulo__texto { display: flex; flex-direction: column; gap: .5rem; }
.capitulo__rotulo {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 5.6vw, 1.75rem);
  line-height: 1.18;
  color: var(--navy);
}
.capitulo__descricao { font-size: 1.0625rem; line-height: 1.45; color: var(--grafite); }
.capitulo__duracao { font-size: 1.0625rem; font-weight: 800; color: var(--navy); }

/* Sem JS, o texto do link deixa claro que ele abre o vídeo */
.capitulo__sem-js { font-weight: 800; text-decoration: underline; }
html.js .capitulo__sem-js { display: none; }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .aula-aberta__capitulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
  .capitulo,
  .capitulo--barra { grid-template-columns: 1fr; align-items: start; }
  .capitulo--barra { margin-top: 4rem; }
  .capitulo--barra .capitulo__poster { order: 0; }
}

@media (min-width: 1024px) {
  .aula-aberta__moldura {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-inline: var(--margem);
    align-items: start;
  }
  .aula-aberta__abertura {
    grid-column: 1 / span 6;
    position: sticky;
    top: calc(var(--header-altura) + 3rem);
    padding-inline: 0;
  }
  .aula-aberta__abertura .apoio { margin-top: 1.75rem; }
  .aula-aberta__abertura .link-seta { margin-top: 1.25rem; }

  .aula-aberta__capitulos {
    grid-column: 7 / -1;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: 0;
    padding-inline: 0;
    align-items: start;
  }
  .capitulo,
  .capitulo--barra { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .capitulo--barra { margin-top: clamp(7rem, 16vw, 15rem); }
  .capitulo--barra .capitulo__poster { order: 0; }

  .capitulo:hover .capitulo__poster img { transform: scale(1.02); }
  .capitulo .play { left: 1rem; bottom: 1rem; width: 60px; height: 60px; }
  .capitulo__rotulo { font-size: clamp(1.5rem, 1.9vw, calc(1.875rem + var(--folga) * .0095)); }
  .capitulo__descricao { font-size: 1.0625rem; }
}