/* ————— O CONVITE EM TELA GRANDE (computador) —————
 *
 * 07/11/2026 — 🔵 ele: "pelo celular está excelente, mas pelo computador está estranho. Parece que
 * foi diminuído pra caber num celular." Medido no Chrome a 1370 px: o convite é uma coluna fixa de
 * 620 px (`.wrap{max-width:620px}`) com letra de celular — uma tira estreita no meio da tela.
 *
 * O celular foi aprovado como está, então o computador recebe A MESMA composição, só maior:
 * `zoom` na coluna inteira (letra, espaço, desenho, botões — tudo na mesma proporção).
 * Abaixo de 1100 px nada muda: celular, tablet em pé e as capturas dos reels (360/390/1080 px).
 * A conta do nome que cabe (`cabe.js`) usa razão scrollWidth/clientWidth — não muda com o zoom.
 *
 * UMA cópia, carregada pelas 6 páginas de /modelos e por todo convite servido em /c/<slug>
 * (o `[slug].js` injeta nos convites já guardados no KV; os novos já nascem com ela).
 */
@media (min-width:1100px){ .wrap{ --z:1.15; } }
@media (min-width:1280px){ .wrap{ --z:1.25; } }
@media (min-width:1500px){ .wrap{ --z:1.35; } }
@media (min-width:1800px){ .wrap{ --z:1.5; } }
@media (min-width:1100px){
  /* dentro do zoom, 100vh também é multiplicado: divide de volta pra a coluna seguir com a altura da tela */
  .wrap{ zoom:var(--z); min-height:calc(100vh / var(--z)); }
}

/* Herói com desenho (proporção 206:366): a 620 px de largura ele tinha ~1.100 px de altura —
   no computador via-se uma faixa cortada. Aqui ele cabe INTEIRO na altura da tela, como um
   cartão. Era regra só do trocador (modelos); o convite vendido não tinha — agora os dois têm.
   A conta divide pelo zoom; nos modelos desconta também a barra de montagem embaixo. */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  header.hero-lay{ display:flex; justify-content:center; padding:28px 0 34px !important; }
  header.hero-lay > .lay{ width:auto; height:calc((100vh - 110px) / var(--z, 1)); max-width:100%;
    border-radius:18px; box-shadow:0 10px 40px rgba(40,30,20,.16); }
  body:has(#fx-id) header.hero-lay > .lay{ height:calc((100vh - 170px) / var(--z, 1)); }
}

/* CAPA COM ARTE: CARTAZ NO CELULAR, CLÁSSICA NO COMPUTADOR — 08/11/2026, 🔵 ele escolheu
 * "Clássico no PC": o cartaz é desenhado numa caixa de 206:366 (proporção de tela de celular) e, no
 * computador, era exatamente um celular no meio do monitor. Quem tem arte traz as DUAS capas: o
 * cartaz (`header.hero-lay`) e logo depois a clássica (`header.hero-sob-arte`).
 * O cartaz só some quando a clássica está ao lado (`:has`) — convite vendido ANTES desta data está
 * guardado no KV sem a clássica e continua com o cartaz (a regra acima) em vez de ficar sem capa. */
@media not all and (min-width:900px) and (min-aspect-ratio:1/1){
  header.hero-sob-arte{ display:none; }
}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  header.hero-lay:has(+ header.hero-sob-arte){ display:none !important; }
  /* página de modelo: com a aba Desenho ou Arrumação aberta, a capa vira PRÉVIA do cartaz — senão
     escolher arte no computador não mudaria nada na tela */
  body:has(#fx-id:is([data-aberta="arte"], [data-aberta="layout"])) header.hero-lay{ display:flex !important; }
  body:has(#fx-id:is([data-aberta="arte"], [data-aberta="layout"])) header.hero-sob-arte{ display:none; }
}

/* CAPA DEITADA NO COMPUTADOR — 09/11/2026, 🔵 ele: "as capas estão estreitas ainda" (e "tem nos de
 * Lingerie também"). 🟢 Medido a 1366 px: com a aba Desenho aberta a capa era um cartão em pé de
 * ~234 px. Convite novo traz, dentro do cartaz, uma 2ª caixa DEITADA (`.lay-larga`, 640:366, gerada
 * pelo mesmo layout em _layouts.js). Quando ela existe, o computador mostra a arte DEITADA — com ou
 * sem aba aberta — e a clássica sai. Convite sem ela (vendido antes) segue nas regras acima.
 * A largura acompanha a altura livre da tela, pra a capa inteira caber acima da dobra. */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  header.hero-lay:has(> .lay-larga), header.hero-lay:has(> .lay-larga):has(+ header.hero-sob-arte){ display:flex !important; }
  header.hero-lay:has(> .lay-larga) + header.hero-sob-arte,
  body:has(#fx-id) header.hero-lay:has(> .lay-larga) + header.hero-sob-arte{ display:none !important; }
  header.hero-lay:has(> .lay-larga) > .lay:not(.lay-larga){ display:none; }
  header.hero-lay > .lay.lay-larga{ display:block; height:auto; margin:0 auto;
    width:min(100%, calc((100vh - 110px) / var(--z, 1) * 640 / 366)); box-shadow:0 6px 26px rgba(40,30,20,.10); }
  /* height:auto de novo AQUI: a regra da página de modelo `body:has(#fx-id) header.hero-lay > .lay{height:…}`
     (com #id) pesa mais que a de cima e esticava a deitada — 🟢 medido 09/11 no ar, casamento a 1366:
     775×598 em vez de 775×443, o desenho espalhado na vertical. Convite vendido (sem #fx-id) não tinha. */
  body:has(#fx-id) header.hero-lay > .lay.lay-larga{ height:auto; width:min(100%, calc((100vh - 170px) / var(--z, 1) * 640 / 366)); }
}

/* A TIRA DE CELULAR NO MEIO DA TELA — 08/11/2026, 🔵 ele: "Chá de Lingerie no computador está
 * com layout de celular". Medido no Chrome a 1370 px: a coluna tinha um gradiente rosé
 * (`radial-gradient(circle at 80% 0, … transparent 45%)` sem tamanho → o "brilho de canto" vira 45%
 * da diagonal da coluna INTEIRA e tinge tudo) e as laterais só a cor lisa: tira rosa no meio.
 * As outras 6 têm o mesmo gradiente, em dourado 6-8% — por isso quase não se via.
 * Regra: a partir de 621 px a coluna para de encher a tela, então tudo o que ela pinta tem que
 * valer pras laterais também. Aqui: sem gradiente nem sombra na coluna. A textura do fundo vai
 * pras laterais pela regra canônica (`regraDoFundo` em functions/api/_identidade.js → body::before).
 * O celular (<621 px) não muda.
 * As faixas com fundo próprio viram CARTÃO (quina redonda) em vez de tira cortada reta. */
@media (min-width:621px){
  .wrap{ background-image:none !important; box-shadow:none !important; }
  .wrap :is(.count, .vote, .story, .dress, .gifts, .fx-faixa, .rsvp),
  .wrap > section[style*="background"]{ border-radius:22px; overflow:hidden; }
}