/* ============================================================
   LV / CAMADA 4 - A PAGINA `/site-de-casamento`

   So' o que existe NELA. O resto vem das mesmas camadas das landings, e ela
   carrega `lv-criar-lista.css` junto porque divide com elas o esqueleto de
   secao, os cartoes de beneficio e o FAQ.

   POR QUE ESTE ARQUIVO NASCEU

   As regras abaixo moravam no `lv-criar-lista.css`, e ali eram MORTAS nas sete
   landings: medido com `querySelectorAll` na pagina renderizada e por grep no
   fonte, `.lv-endereco`, `.lv-temas` e a familia `.lv-tema-*` casavam so' em
   `/site-de-casamento`. Sete paginas de conversao carregavam um bloco de
   amostra de tema que nunca desenham.

   E o cabecalho daquele arquivo dizia "o que existe SO nas oito landings", o
   que deixou de ser verdade no dia em que a oitava pagina passou a ser de outro
   tipo. A frase que o CLAUDE.md abre a secao de CSS continua valendo: o
   problema nao e a folha, e carregar uma folha inteira para usar dez classes
   dela.
   ============================================================ */

/* O endereco proprio, em faixa. */
.lv-endereco {
  display: inline-block;
  background: var(--lv-surface);
  border: 1px solid var(--lv-line);
  border-radius: 14px;
  padding: 22px 26px;
  font-family: var(--lv-font-display);
  font-size: 20px; color: var(--lv-muted);
}
.lv-endereco b { color: var(--lv-accent-strong); }

/* A janela de navegador: uma captura REAL do site de exemplo, gerada por
   tools/mockup-site-casamento.mjs, com barra de tres bolinhas e o endereco.
   A grande rola por dentro (a captura vai do hero ate' os presentes); a
   pequena (.is-pequena) e' a mostra de cada variante de cor. Antes eram
   celulares de 250px com a tela encolhida 3 vezes: texto ilegivel, e o leitor
   entendia como imagem ruim. */
.lv-janela {
  border: 1px solid var(--lv-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--lv-surface);
  box-shadow: 0 30px 60px -30px rgba(20, 16, 40, .35), 0 8px 24px -12px rgba(20, 16, 40, .18);
  text-align: left;
}
.lv-janela-barra {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: var(--lv-bg);
  border-bottom: 1px solid var(--lv-line);
}
.lv-janela-barra span { width: 11px; height: 11px; border-radius: 50%; }
.lv-janela-barra span:nth-child(1) { background: #f26d5b; }
.lv-janela-barra span:nth-child(2) { background: #f5bf4f; }
.lv-janela-barra span:nth-child(3) { background: #5ec269; }
.lv-janela-barra b {
  flex: 1; margin-left: 10px;
  max-width: 420px;
  font-weight: 500; font-size: 12.5px; color: var(--lv-muted);
  background: var(--lv-surface); border: 1px solid var(--lv-line); border-radius: 8px;
  padding: 5px 12px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv-janela-tela { height: 640px; overflow-y: auto; overscroll-behavior: contain; }
.lv-janela-tela img { display: block; width: 100%; height: auto; }
.lv-janela.is-pequena .lv-janela-tela { height: auto; overflow: hidden; }
.lv-janela.is-pequena .lv-janela-barra { padding: 8px 12px; }
.lv-janela.is-pequena .lv-janela-barra span { width: 9px; height: 9px; }
.lv-janela.is-pequena .lv-janela-barra b { font-size: 11.5px; padding: 3px 10px; }
.lv-janela-abrir { margin: 32px 0 0; }

/* As duas variantes de cor, lado a lado. Os tons das bolinhas NAO sao tokens
   da marca: sao os temas do produto, definidos em
   `convites/templates/casamento-pagina/manifest.php`. */
.lv-mostras {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 28px; align-items: start;
}
.lv-mostra { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lv-mostra .lv-janela { width: 100%; }
.lv-mostra figcaption {
  font-family: var(--lv-font-display); font-weight: 700; font-size: 15px; color: var(--lv-ink);
  display: flex; align-items: center; gap: 8px;
}
.lv-mostra-cor { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.lv-mostra-cor-salvia  { background: #7c8a6e; }
.lv-mostra-cor-dourado { background: #b8925a; }

@media (max-width: 767px) {
  .lv-janela-tela { height: 420px; }
  .lv-janela-barra b { max-width: none; }
  .lv-mostras { grid-template-columns: 1fr; }
}

/* Linha de apoio com respiro acima, quando ela vem depois de um bloco e nao de
   um titulo. Era `style="margin-top:22px"`. */
.lv-linha-abaixo { margin-top: 22px; }