/* gravaram.css: quem já gravou no estúdio, na variação que o dono escolheu em 17/10/2026, o mural de fotos: numa
   seção cor de mural, cada convidado é uma foto revelada com moldura branca, um pouco torta (três inclinações que se
   repetem), com o nome e o que faz escritos na moldura. Cada foto leva pro episódio. A lista é a dos convidados do
   podcast (o comum preenche); a .faixa (faixa.css) cuida do deslizar, das setas e do sem fim.
   Depende de: base.css, secoes-do-estudio.css e faixa.css. Telefone nas regras soltas, computador no @media do fim. */

.gravaram { --mural: #ece7dc; background: var(--mural); }

/* o trilho ganha folga em cima e embaixo, pra a foto torta e a sombra não serem cortadas pela fileira que desliza */
.gravaram__trilho { padding-block: 14px 26px; }

.revelada { --largura-no-telefone: 68%; }

.revelada__link {
  display: grid; gap: 4px; padding: 10px 10px 16px; background: var(--branco); color: var(--texto); text-decoration: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .16); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.revelada:nth-child(3n + 1) .revelada__link { transform: rotate(-2deg); }
.revelada:nth-child(3n + 2) .revelada__link { transform: rotate(1.6deg) translateY(6px); }
.revelada:nth-child(3n) .revelada__link { transform: rotate(-1deg); }
.revelada .revelada__link:hover { transform: rotate(0) translateY(-4px); }

.revelada__moldura { display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 8px; background: var(--bloco-escuro); }
.revelada__foto { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; }

/* nome e papel numa linha só cada um; o que não couber termina em reticências */
.revelada__nome,
.revelada__papel { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.revelada__nome { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.revelada__papel { font-size: 13px; font-style: italic; color: var(--texto-suave); }
.revelada__papel::first-letter { text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .revelada__link { transition: none; }
}

@media (min-width: 900px) {
  .gravaram__trilho { padding-block: 18px 34px; }
  .revelada__link { padding: 14px 14px 20px; }
  .revelada__nome { font-size: 14px; }
  .revelada__papel { font-size: 14px; }
}