/* salas.css: as salas do estúdio, cada uma com nome de lugar do Rio, no jeito do Gotham (salas com nome de prédio da
   cidade) e da Capuzzo (cada sala com tamanho e quantas pessoas cabem). Cada sala é um cartão-foto com o pé escuro e,
   por cima, o nome, pra que serve e a ficha em pílulas. No computador a primeira sala é grande, à esquerda, e as
   outras quatro fazem um 2 por 2 ao lado; no telefone elas deslizam de lado (.desliza, faixa.css).
   Depende de: base.css, secoes-do-estudio.css e faixa.css. Telefone nas regras soltas, computador no @media do fim. */

.sala {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  border-radius: var(--raio); background: var(--preto); color: var(--branco);
}

.sala__foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }

.sala::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 35%, rgba(17, 17, 17, .78) 70%, rgba(17, 17, 17, .95) 100%);
}

.sala__texto { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 18px; }

.sala__nome { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }

.sala__uso { font-size: 14px; color: rgba(255, 255, 255, .86); }

.sala__ficha { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sala__ficha li {
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}

@media (min-width: 900px) {
  .salas__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 250px); gap: 16px; }
  .sala { aspect-ratio: auto; height: 100%; }
  .salas__lista > :first-child { grid-column: span 2; grid-row: span 2; }
  .salas__lista > :first-child .sala__texto { padding: 28px; }
  .salas__lista > :first-child .sala__nome { font-size: 36px; }
  .salas__lista > :first-child .sala__uso { font-size: 16px; }
  .sala__nome { font-size: 22px; }
  .sala__uso { font-size: 13px; }
}