/**
 * A página da peça — a arte de um lado, o que fazer com ela do outro.
 *
 * Par de `single-peca.php` e `peca/js/peca.js`. Depende de
 * `compartilhado/css/tokens.css` e de `base.css`; os valores próprios estão em
 * `peca/css/tokens.css`.
 *
 * A regra que manda nesta folha: NENHUMA arte tem os dois lados fixados. A
 * imagem entra com as medidas do arquivo e recebe só tetos (`max-width` e
 * `max-height`), o vídeo do YouTube vai num quadro 16:9 onde o próprio YouTube
 * letterboxa o que for vertical, e o `<video>` local usa `object-fit: contain`.
 * Em nenhum caminho a proporção é reescrita — foi o pedido explícito de quem
 * encomendou a página, e é o que separa "peça de campanha" de "peça esticada".
 */

/* ==========================================================================
   moldura
   ========================================================================== */

.peca-pg {
  background: var(--cor-fundo);
}

.peca-pg__container {
  display: grid;
  /* A arte manda na largura; o painel tem medida de coluna de leitura. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: stretch;
  width: min(100% - 2 * var(--gutter), var(--container-max));
  margin-inline: auto;
  margin-block: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--raio-g);
  overflow: hidden;
}

/* ==========================================================================
   a peça
   ========================================================================== */

.peca-pg__midia {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.5vw, 2rem);
  background: var(--p-palco);
}

/*
 * Imagem e vídeo local. `height: auto` com `max-height` é o par que preserva a
 * proporção: o navegador escolhe a largura que couber e a arte nunca é
 * espremida. O `object-fit` cobre o `<video>`, que ao contrário da imagem tem
 * dimensão intrínseca própria e ignoraria o `auto`.
 */
.peca-pg__arte {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--p-midia-altura);
  object-fit: contain;
  border-radius: var(--raio-m);
}

/* O quadro do YouTube. `aspect-ratio` em vez do truque do padding-bottom: é a
   mesma geometria, legível, e sem elemento extra. */
.peca-pg__palco {
  width: 100%;
  max-width: calc(var(--p-midia-altura) * 16 / 9);
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-m);
  overflow: hidden;
}

.peca-pg__video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   o painel
   ========================================================================== */

.peca-pg__lado {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--p-painel);
  color: var(--p-texto);
}

.peca-pg__chapeu {
  align-self: start;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--cor-marca-terciaria);
  color: var(--cor-rodape);
  font-family: var(--fonte-titulo);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.peca-pg__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

.peca-pg__texto {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--p-apoio);
}

.peca-pg__texto > * + * {
  margin-top: var(--espaco-2);
}

.peca-pg__texto a {
  color: var(--cor-marca-terciaria);
}

/* Rótulo de seção do painel: "Compartilhar agora", "Baixar". */
.peca-pg__rotulo {
  margin-top: var(--espaco-3);
  font-family: var(--fonte-titulo);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-apoio);
}

/* ==========================================================================
   compartilhar
   ========================================================================== */

.peca-pg__zap {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-height: 3.25rem;
  padding: 0.8em 1.2em;
  border-radius: var(--raio-m);
  background: var(--p-zap);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--dur-rapida) var(--ease-padrao);
}

.peca-pg__zap:hover {
  background: var(--p-zap-fundo);
}

.peca-pg__redes {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--espaco-1);
}

/* 44px de alvo de toque, quadrado, como no mosaico da referência. */
.peca-pg__rede {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--p-borda);
  border-radius: var(--raio-m);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition:
    border-color var(--dur-rapida) var(--ease-padrao),
    background-color var(--dur-rapida) var(--ease-padrao);
}

.peca-pg__rede:hover {
  border-color: var(--p-borda-forte);
  background: rgb(255 255 255 / 10%);
}

/* As duas cores de marca que existem de verdade; o terceiro botão é o "copiar
   link", que não é rede nenhuma e fica neutro. */
.peca-pg__rede--facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
}

.peca-pg__rede--x:hover {
  background: #000;
  border-color: #000;
}

/* O recado do "copiar link". Vazio ele não ocupa linha — senão abriria um
   buraco no painel o tempo todo por causa de uma frase que aparece uma vez. */
.peca-pg__aviso {
  font-size: 0.8125rem;
  color: var(--cor-marca-terciaria);
}

.peca-pg__aviso:empty {
  display: none;
}

/* ==========================================================================
   baixar
   ========================================================================== */

.peca-pg__baixar {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.9em 1.1em;
  border: 1px solid var(--p-borda);
  border-radius: var(--raio-m);
  color: #fff;
  text-decoration: none;
  transition:
    border-color var(--dur-rapida) var(--ease-padrao),
    background-color var(--dur-rapida) var(--ease-padrao);
}

.peca-pg__baixar:hover {
  border-color: var(--p-borda-forte);
  background: rgb(255 255 255 / 8%);
}

.peca-pg__baixar span {
  display: grid;
}

.peca-pg__baixar strong {
  font-family: var(--fonte-titulo);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--cor-marca-terciaria);
}

.peca-pg__baixar small {
  font-size: 0.8125rem;
  color: var(--p-apoio);
}

/* ==========================================================================
   volta
   ========================================================================== */

/* `margin-top: auto` empurra para a base do painel: em peça sem texto o painel
   sobra, e a volta ancorada embaixo fecha o bloco em vez de deixá-lo boiando. */
.peca-pg__volta {
  margin-top: auto;
  padding-top: var(--espaco-3);
  font-size: 0.875rem;
}

.peca-pg__volta a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--p-apoio);
}

.peca-pg__volta a:hover {
  color: #fff;
}

/* ==========================================================================
   uma coluna
   ========================================================================== */

@media (width < 60rem) {
  .peca-pg__container {
    grid-template-columns: minmax(0, 1fr);
  }

  /* No celular a tela é a altura toda: a arte ganha menos espaço para os
     botões não ficarem abaixo da dobra, que é o que a página tem de entregar. */
  .peca-pg {
    --p-midia-altura: 52vh;
  }
}