/* depoimentos-video: "escada" de 5 pôsteres, sem carrossel, para os 5 ficarem visíveis.
   Celular: Rodrigo em largura total e os outros 4 em grade com desnível. */

.depoimentos-video { padding-block: var(--respiro); }

.depoimentos-video__moldura { padding-inline: var(--margem); }
.depoimentos-video__topo .apoio { margin-top: 1rem; }

.escada {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1rem;
  margin-top: 2.5rem;
}

.depo { min-width: 0; }
.depo__link { display: block; color: var(--branco); text-decoration: none; }
.depo__poster {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--navy-profundo);
}
.depo__poster img {
  width: 100%;
  height: auto;
  aspect-ratio: 420 / 746;
  object-fit: cover;
  transition: transform .6s var(--ease-controle);
}
.depo .play { left: .75rem; bottom: .75rem; width: 48px; height: 48px; }

.depo__nome {
  display: block;
  margin-top: .75rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
}
.depo__tema {
  display: block;
  margin-top: .25rem;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: rgb(255 255 255 / .86);
}

.depo__citacao {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.28;
  color: var(--coral);
  text-wrap: pretty;
}

/* Rodrigo em largura total, até 70svh */
.depo--rodrigo { grid-column: 1 / -1; }
.depo--rodrigo .depo__poster img { max-height: 70vh; max-height: 70svh; object-position: 50% 15%; }
.depo--rodrigo .depo__citacao { margin-top: 1.25rem; font-size: 1.625rem; }

/* Grade 2x2 com desnível na segunda coluna. A citação de Vera fica na célula
   dela; a de Quézia atravessa a largura, entre os blocos */
.depo--vera { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 1rem; }
.depo--vera .depo__citacao { order: -1; font-size: 1.375rem; }

.depo--quezia { display: contents; }
.depo--quezia .depo__link { grid-column: 2; grid-row: 2; align-self: end; }
.depo--quezia .depo__citacao { grid-column: 1 / -1; grid-row: 3; font-size: 1.5rem; }

.depo--telma { grid-column: 1; grid-row: 4; }
.depo--silvio { grid-column: 2; grid-row: 4; margin-top: 2.5rem; }

.depoimentos-video__cta { margin-top: 3rem; width: 100%; }

@media (min-width: 480px) {
  .depoimentos-video__cta { width: auto; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .depo--rodrigo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: end; }
  .depo--rodrigo .depo__citacao { margin-top: 0; font-size: 2rem; }
}

@media (min-width: 1024px) {
  .depoimentos-video__topo {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
  }
  .depoimentos-video__topo .titulo { grid-column: 1 / span 8; }
  .depoimentos-video__topo .apoio { grid-column: 9 / -1; margin-top: 0; padding-bottom: .5rem; }

  /* Larguras de referência em 1440px: 340, 240, 240, 200, 200 */
  .escada {
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, 1.7vw, 1.625rem);
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
  }
  .depo { display: block; margin-top: 0; }
  .depo--rodrigo { flex: 34 1 0; display: block; }
  .depo--vera    { flex: 24 1 0; display: flex; margin-top: 3vh; }
  .depo--quezia  { flex: 24 1 0; display: block; margin-top: 3vh; }
  .depo--quezia .depo__citacao { font-size: clamp(1.25rem, 1.65vw, calc(1.5rem + var(--folga) * .007)); }
  .depo--telma   { flex: 20 1 0; margin-top: 14vh; }
  .depo--silvio  { flex: 20 1 0; margin-top: 6vh; }

  .depo--rodrigo .depo__poster img { max-height: none; }

  .depo__link:hover .depo__poster img { transform: scale(1.02); }

  .depo--rodrigo .depo__citacao,
  .depo--quezia .depo__citacao,
  .depo--vera .depo__citacao { margin-top: 1rem; font-size: clamp(1.25rem, 1.65vw, calc(1.5rem + var(--folga) * .007)); }
  .depo--rodrigo .depo__citacao { font-size: clamp(1.5rem, 2vw, calc(1.875rem + var(--folga) * .0095)); }
  .depo--vera .depo__citacao { margin-top: 0; }

  .depo .play { width: 52px; height: 52px; }
  .depo--rodrigo .play { width: 64px; height: 64px; left: 1.25rem; bottom: 1.25rem; }

  /* A coluna de Rodrigo é a mais alta: o botão ocupa o vazio embaixo, à direita */
  .depoimentos-video__moldura { position: relative; }
  .depoimentos-video__cta {
    position: absolute;
    right: var(--margem);
    bottom: 0;
    margin-top: 0;
  }
}