/* ===========================================================================
   Confere.la · ANÚNCIO LOCAL
   A folha das seis posições publicitárias. Ela desenha a moldura, os cinco
   formatos e o controle de cidade, e não decide onde nenhuma posição fica na
   página: isso é assunto da tela que a hospeda, como manda `sistema.css`.

   Carrega SEMPRE depois de `/sistema.css`, de quem herda todos os tokens.
   Nunca junto de `arena.css`, que é estrutural e prende a página inteira.

   Três coisas que esta folha não faz, por decisão do DESIGN.md:
   · nenhuma sombra difusa. Profundidade aqui é régua e moldura, igual ao resto
     do sistema: o anúncio ganha borda de 1px e canto de 14px, e nada mais.
   · nenhum gradiente colorido e nenhuma quarta cor. O anúncio tem dois tons,
     claro e escuro, que são os dois legítimos do sistema. Verde, vermelho e
     neutro morno são das cores de estado da checagem e não entram em peça
     comercial: um anúncio verde ao lado de um veredito verde confunde o que a
     tela está afirmando.
   · nenhum itálico.

   O DESENHO COMEÇA EM 375px. Tudo o que está fora de media query é a tela do
   telefone. As três consultas abaixo só sobem (min-width), e cada uma existe
   porque um formato novo entra naquela largura, não porque "ficou apertado".
   =========================================================================== */

/* ==================================================== 1 · A MOLDURA
   Uma caixa só serve os dois estados: com peça e sem peça. É a mesma moldura,
   e é de propósito. Se a moldura de espera fosse outra caixa, a página mudaria
   de altura toda vez que um anunciante entrasse ou saísse do rodízio, e o
   texto que a pessoa está lendo escaparia de baixo do dedo dela. */

.anuncio {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  width: 100%;
  margin: 0;
  padding: var(--gap-sm);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  /* A caixa nunca estica além da arte: peça de 320px de largura esticada para
     1200px vira imagem borrada e cartaz com linha de texto longa demais. */
  max-width: 100%;
  overflow: hidden;
}

/* Sem peça, a moldura fica tracejada e o fundo some. É o mesmo vocabulário que
   a arena usa hoje no espaço livre dela, e é o mesmo que o `sem_base` da
   checagem usa: contorno tracejado quer dizer "não tenho o que afirmar aqui". */
.anuncio[data-estado='vazio'] {
  border-style: dashed;
  background: transparent;
}

/* ==================================================== 2 · OS CINCO FORMATOS
   A altura vem da proporção declarada no servidor, e ela é reservada ANTES de
   a peça chegar. É o que impede o salto de layout no carregamento. */

.anuncio-peca,
.anuncio-espera {
  display: flex;
  width: 100%;
  border-radius: var(--radius-sm);
}

.anuncio-espera {
  align-items: center;
  justify-content: center;
  color: var(--faint);
  text-align: center;
}

/* faixa de telefone: 320 por 100. O formato de partida das três posições em
   faixa, porque é o único que cabe inteiro numa tela de 375 com respiro. */
.anuncio[data-formato='faixa-movel'] .anuncio-peca,
.anuncio[data-formato='faixa-movel'] .anuncio-espera { aspect-ratio: 320 / 100; }

.anuncio[data-formato='faixa'] .anuncio-peca,
.anuncio[data-formato='faixa'] .anuncio-espera { aspect-ratio: 728 / 90; }

.anuncio[data-formato='faixa-larga'] .anuncio-peca,
.anuncio[data-formato='faixa-larga'] .anuncio-espera { aspect-ratio: 970 / 120; }

/* retângulo: 300 por 250. O formato de encaixe, que entra no meio de uma grade
   ou de uma coluna sem quebrar o ritmo dela. */
.anuncio[data-formato='retangulo'] .anuncio-peca,
.anuncio[data-formato='retangulo'] .anuncio-espera { aspect-ratio: 300 / 250; }

/* meia página: 300 por 600. Só existe acima de 1000px, onde há coluna lateral
   para ela. No telefone a posição que a pede recebe o retângulo. */
.anuncio[data-formato='meia-pagina'] .anuncio-peca,
.anuncio[data-formato='meia-pagina'] .anuncio-espera { aspect-ratio: 300 / 600; }

.anuncio[data-formato='retangulo'],
.anuncio[data-formato='meia-pagina'] { max-width: 316px; }

/* ==================================================== 3 · A PEÇA
   Dois caminhos: arte pronta do anunciante, ou cartaz de texto montado com as
   fontes do sistema. O segundo existe porque padaria de bairro não tem
   departamento de criação, e sem ele o anúncio local não seria vendável para
   quem ele foi desenhado para atender. */

.anuncio-peca {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: var(--gap-sm) var(--gap-md);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--tempo) var(--ease);
}

.anuncio-peca:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* A arte pronta preenche a caixa inteira e não ganha padding: o anunciante
   desenhou até a borda e o respiro dele já está dentro do arquivo. */
.anuncio-arte {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.anuncio-peca:has(.anuncio-arte) { padding: 0; }

/* --- os dois tons -----------------------------------------------------
   Claro é o papel do sistema, escuro é a massa do card de candidato. São os
   dois que o DESIGN.md já legitima, e o cadastro escolhe por peça. Duas peças
   de tons diferentes na mesma posição também fazem o rodízio ficar visível: a
   tela muda de cor quando o anunciante muda. */

.anuncio-peca[data-tom='claro'] {
  background: var(--surface-2);
  border: var(--rule) solid var(--line-soft);
  color: var(--ink);
}
.anuncio-peca[data-tom='claro'] .anuncio-linha { color: var(--ink-3); }

.anuncio-peca[data-tom='escuro'] {
  background: var(--card-bg);
  border: var(--rule) solid var(--card-line);
  color: var(--card-ink);
}
.anuncio-peca[data-tom='escuro'] .anuncio-titulo { color: var(--card-ink); }
.anuncio-peca[data-tom='escuro'] .anuncio-linha { color: var(--card-mid); }
.anuncio-peca[data-tom='escuro'] .anuncio-chamada {
  background: var(--card-ink);
  color: var(--card-bg);
}

/* --- as três vozes do cartaz -------------------------------------------
   As mesmas três de `sistema.css`, sem inventar tamanho novo: o nome do
   anunciante usa a fonte de cartaz, a linha usa a de conversa e a chamada é um
   chip. Na faixa de telefone, que tem 100px de altura, os três precisam caber
   juntos, então o nome encolhe. */

.anuncio-titulo {
  font-size: clamp(19px, 5.4vw, 26px);
  line-height: 1.05;
  color: var(--ink);
}

.anuncio-linha {
  font-size: var(--t-nota);
  line-height: 1.35;
  /* Duas linhas no telefone. Uma terceira empurraria a chamada para fora da
     faixa de 100px, e a chamada é a parte que o anunciante compra. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.anuncio-chamada {
  align-self: flex-start;
  padding: 3px 9px;
  font-size: var(--t-lab);
}

/* Na faixa deitada, o cartaz vira linha: nome e texto à esquerda, chamada à
   direita. Empilhar três blocos numa caixa de 90px de altura não cabe. */
.anuncio[data-formato='faixa'] .anuncio-peca,
.anuncio[data-formato='faixa-larga'] .anuncio-peca {
  flex-direction: row;
  align-items: center;
  gap: var(--gap-md);
}
.anuncio[data-formato='faixa'] .anuncio-titulo,
.anuncio[data-formato='faixa-larga'] .anuncio-titulo { flex: 0 0 auto; font-size: 24px; }
.anuncio[data-formato='faixa'] .anuncio-linha,
.anuncio[data-formato='faixa-larga'] .anuncio-linha { flex: 1 1 auto; -webkit-line-clamp: 2; line-clamp: 2; }
.anuncio[data-formato='faixa'] .anuncio-chamada,
.anuncio[data-formato='faixa-larga'] .anuncio-chamada { flex: 0 0 auto; align-self: center; }

/* A meia página tem altura de sobra: o texto respira e ganha uma linha. */
.anuncio[data-formato='meia-pagina'] .anuncio-peca { justify-content: flex-start; gap: var(--gap-md); padding: var(--gap-lg) var(--gap-md); }
.anuncio[data-formato='meia-pagina'] .anuncio-linha { -webkit-line-clamp: 6; line-clamp: 6; font-size: var(--t-corpo); }

/* ==================================================== 4 · O PÉ DA MOLDURA
   Duas informações, e as duas são obrigação e não enfeite:

   o selo   diz que aquilo é publicidade. Um cartaz de texto desenhado com as
            fontes do site se confunde com conteúdo editorial se nada disser o
            contrário, e num site de checagem essa confusão custa credibilidade.
   o lugar  é o controle de cidade. Ele aparece nas seis posições, inclusive nas
            vazias, porque quem está numa cidade sem anunciante também precisa
            poder dizer que a inferência errou. */

.anuncio-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin: 0;
  min-height: 20px;
}

.anuncio-selo { color: var(--faint); }

.anuncio-lugar {
  /* Alvo de toque de 44px, com a área invisível saindo por fora do texto: o
     rótulo é pequeno de propósito (não é ele o assunto da tela), mas o dedo
     não mira em 12px. */
  position: relative;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.anuncio-lugar::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto auto;
  width: 100%;
  height: var(--toque);
  transform: translateY(-50%);
}
.anuncio-lugar:hover { text-decoration-color: var(--ink); }
.anuncio-lugar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* A cidade que a pessoa escolheu à mão fica marcada. É a diferença entre
   "achamos que você está aqui" e "você disse que está aqui", e ela importa:
   sem a marca, ninguém sabe se a escolha pegou. */
.anuncio-lugar[data-fonte='manual'] {
  color: var(--ink);
  font-weight: var(--peso-forte);
  text-decoration-color: var(--ink);
}

/* ================================================ 5 · O SELETOR DE CIDADE
   Nasce fechado e é montado no primeiro toque. Empilhado no telefone, que é o
   único jeito de caber campo de texto e lista de 27 estados em 375px. */

.anuncio-seletor {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--gap-md);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}

.anuncio-seletor-titulo { margin: 0; color: var(--ink-2); }
.anuncio-seletor-espera { margin: 0; }

.anuncio-seletor-nota {
  margin: 0;
  font-size: var(--t-nota);
  color: var(--muted);
}

.anuncio-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.anuncio-select,
.anuncio-input {
  min-height: var(--toque);
  padding: 0 10px;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  /* 16px e nem um pixel menos: abaixo disso o Safari do iPhone dá zoom sozinho
     ao focar o campo, e a página sai do lugar na cara de quem foi digitar. */
  font-size: 16px;
}
.anuncio-select:focus-visible,
.anuncio-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.anuncio-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.anuncio-botao {
  flex: 1 1 auto;
  min-height: var(--toque);
  padding: 0 var(--gap-md);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-lab);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-lab-tight);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--tempo) var(--ease), color var(--tempo) var(--ease);
}
.anuncio-botao:hover { background: var(--bg-3); }
.anuncio-botao:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.anuncio-botao--forte {
  background: var(--chip-bg);
  border-color: var(--chip-bg);
  color: var(--chip-ink);
  font-weight: var(--peso-forte);
}
.anuncio-botao--forte:hover { background: var(--ink-2); border-color: var(--ink-2); }

/* ==================================================== 6 · A TELA CRESCE
   As duas larguras abaixo são as mesmas que o servidor usa para escolher o
   formato (720 e 1000). Elas estão aqui e lá porque são a mesma decisão vista
   dos dois lados: mudar uma sem a outra faria a folha reservar a altura de um
   formato e o servidor mandar outro. */

@media (min-width: 720px) {
  .anuncio { padding: var(--gap-md); gap: var(--gap-md); }

  /* A faixa larga é o formato de tela grande. Ela cresce até a medida de
     projeto e para: esticar 970px até um monitor de 2560 é imagem borrada. */
  .anuncio[data-formato='faixa'] { max-width: 760px; }
  .anuncio[data-formato='faixa-larga'] { max-width: 1002px; }

  .anuncio-seletor { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .anuncio-seletor-titulo { flex: 1 0 100%; }
  .anuncio-campo { flex: 1 1 180px; }
  .anuncio-acoes { flex: 1 1 100%; }
  .anuncio-acoes .anuncio-botao { flex: 0 1 auto; }
  .anuncio-seletor-nota { flex: 1 0 100%; }
}

@media (min-width: 1000px) {
  /* Acima daqui existe coluna lateral, e é onde a meia página passa a ser
     servida. A caixa não muda de regra: ela só recebe o formato mais alto. */
  .anuncio[data-formato='meia-pagina'] { max-width: 332px; }
}

/* ==================================================== 7 · MOVIMENTO
   Uma transição só, e ela carrega um dado: a peça trocou. Fora isso o anúncio
   é estático, porque anúncio que se mexe sozinho ao lado de uma checagem ao
   vivo rouba a atenção do que a pessoa veio ler. */

@media (prefers-reduced-motion: no-preference) {
  .anuncio[data-estado='cheio'] .anuncio-peca {
    animation: anuncio-entra .34s var(--ease-out) both;
  }
  @keyframes anuncio-entra {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ==================================================== 7 · O ENCAIXE DA PISTA
   No guia, uma das posições anda DENTRO da prateleira, entre os cartões, como
   um cartão. Era uma célula de grade até 31/08, e a mudança tem consequência
   de layout que precisa ser dita: numa grade a célula recebia largura do
   `grid-template-columns`; numa pista de flex ela não recebe largura de
   ninguém.

   Sem a linha de baixo o marcador nasce com a largura do conteúdo, que antes
   de `/anuncio.js` responder é ZERO, e a pessoa vê um risco de trinta pixels
   espremido entre dois cartões. A largura é a MESMA fórmula do cartão do guia
   de propósito: a peça vendida ocupa um lugar de cartão, nem mais nem menos. */

.anuncio--celula {
  flex: 0 0 clamp(158px, 21vw, 268px);
  scroll-snap-align: start;
  align-self: start;
}

/* O retângulo tem 300 pixels e o encaixe pode ser mais estreito que isso.
   `max-width: 100%` já vem da regra geral lá em cima; o que falta é ele não
   encostar à esquerda deixando um vão do lado direito, que a pessoa lê como
   cartão quebrado e não como anúncio. */
.anuncio--celula > .anuncio { margin-inline: auto; }