/* Mídia paga: banners e tiles do painel.
 *
 * Folha própria (ligada no layout ao lado da `application`) porque este é um
 * assunto que cresce sozinho — formato novo, tamanho novo — e não tem por que
 * engordar o CSS de todas as telas.
 *
 * Só tokens do design system aqui: os valores vivem no `:root` da
 * `application.css` e não se repetem em hexadecimal. */

/* ======================================================================== */
/* O ESPAÇO PAGO NO PAINEL                                                  */
/* ======================================================================== */

.midias {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}

/* ---- carrossel de banners ----------------------------------------------- */

/* A altura é da CAIXA, não da imagem: com a altura vindo de cada arquivo, a
   troca de peça empurrava os números do painel para cima e para baixo a cada
   poucos segundos. A proporção fixa segura o layout e a imagem se ajusta. */
.carrossel {
  position: relative;
  border-radius: var(--radius-cards);
  overflow: hidden;
  background: var(--color-cloud-gray);
  aspect-ratio: 4 / 1;
}

.carrossel:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* No celular um banner 4:1 vira uma tira de 90px em que não se lê nada. */
@media (max-width: 700px) {
  .carrossel { aspect-ratio: 2 / 1; }
}

.carrossel__peca {
  margin: 0;
  height: 100%;
}

.carrossel__link {
  display: block;
  height: 100%;
}

.carrossel__imagem {
  display: block;
  width: 100%;
  height: 100%;
  /* `cover`: a peça preenche a caixa e o excesso sai pelas bordas. O cadastro
     avisa o anunciante que o corte é pelo centro. */
  object-fit: cover;
}

/* A troca é um aparecer, não um deslizar: `hidden` tira a peça do fluxo (e do
   caminho do clique), então não há como animar posição. A animação só entra na
   peça que ACABA de aparecer. */
.carrossel__peca:not([hidden]) {
  animation: midia-aparece 320ms ease-out;
}

@keyframes midia-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- indicadores -------------------------------------------------------- */

.carrossel__indicadores {
  position: absolute;
  right: var(--spacing-16);
  bottom: var(--spacing-12);
  display: flex;
  gap: var(--spacing-8);
  /* Faixa escura por baixo: a bolinha branca sumia em cima de peça clara. */
  padding: 6px var(--spacing-12);
  border-radius: var(--radius-tags);
  background: rgba(0, 0, 0, 0.35);
}

.carrossel__indicador {
  /* 20px de alvo com só 10px de bolinha visível: o dedo erra um alvo de 10px,
     e um indicador maior tapa a peça. */
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.carrossel__indicador::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-tags);
  background: var(--color-paper-white);
  opacity: 0.5;
  transition: opacity 160ms ease, transform 160ms ease;
}

.carrossel__indicador:hover::before { opacity: 0.8; }

.carrossel__indicador--atual::before {
  opacity: 1;
  background: var(--color-coral-pulse);
  transform: scale(1.2);
}

.carrossel__indicador:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-radius: var(--radius-tags);
}

/* ---- faixa de tiles ----------------------------------------------------- */

/* `auto-fit` em vez de três colunas fixas: com uma peça só, ela ocuparia um
   terço da largura e as outras duas seriam buraco. Com `auto-fit` cada tile
   ocupa a fatia que lhe cabe, sejam um, dois ou três. */
.tiles {
  display: grid;
  gap: var(--spacing-16);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tile {
  border-radius: var(--radius-cards-sm);
  overflow: hidden;
  background: var(--color-cloud-gray);
  aspect-ratio: 16 / 9;
}

.tile__link {
  display: block;
  height: 100%;
}

.tile__imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

.tile__link:hover .tile__imagem { transform: scale(1.03); }

.tile__link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* No celular a faixa empilha: três tiles lado a lado numa tela de 390px dão
   peças de 110px, em que a arte não se lê. */
@media (max-width: 700px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 21 / 9; }
}

/* Quem pediu menos movimento não recebe animação nenhuma — a troca automática
   o Stimulus já desliga; aqui morrem o aparecer e o zoom do tile. */
@media (prefers-reduced-motion: reduce) {
  .carrossel__peca:not([hidden]) { animation: none; }
  .tile__imagem, .carrossel__indicador::before { transition: none; }
  .tile__link:hover .tile__imagem { transform: none; }
}

/* ======================================================================== */
/* O CADASTRO DA MÍDIA                                                      */
/* ======================================================================== */

/* A lista carrega a peça em si: sem ver a arte, "NutriPet — 20%" não diz qual
   das três campanhas do anunciante é. */
.midia__peca {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.midia__miniatura {
  width: 72px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-icons);
  background: var(--color-cloud-gray);
  flex-shrink: 0;
}

.midia__destino {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

/* Está no ar HOJE, ou não está. Duas cores só: verde de sistema para no ar,
   cinza para fora — nada de amarelo, que aqui não existe "quase no ar". */
.midia__situacao {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-tags);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.midia__situacao--no-ar {
  background: var(--color-mint-wash);
  color: #0a5c38;
}

.midia__situacao--fora {
  background: var(--color-cloud-gray);
  color: var(--text-meta);
}

/* ---- formulário --------------------------------------------------------- */

.midia-arquivo {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  flex-wrap: wrap;
}

/* A prévia nasce escondida e o Stimulus a mostra quando há arquivo. Reservar o
   espaço dela vazio deixaria um retângulo cinza sem explicação no formulário
   de peça nova. */
.midia-arquivo__previa {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-cloud-gray);
  border: 1px solid var(--border-hairline);
}

.midia__marca {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

/* O `.campo input` da folha principal manda 100% de largura em todo input —
   numa caixa de marcar isso vira uma barra atravessando o formulário. */
.midia__marca input[type="checkbox"] {
  width: auto;
  margin: 0;
}