/* 260829 — P5: o case abre DENTRO da página de projetos, sem navegar.
   Pedido do Henrique: "cada um sua página mas em vez de clicar e ir pra outra
   página, fica nessa página principal, mas não carrega enquanto não tiver hover".

   POR QUE IFRAME, e não markup inline:
   o /among-us/ é um documento COMPLETO — tem o próprio <!DOCTYPE>, <head>, um
   <style> de 10 KB com `html,body{overflow:hidden}` e um palco `position:fixed`
   que ocupa a viewport inteira. Injetar isso na página de projetos exigiria
   reescrever o case como componente e ainda assim brigaria por CSS global.
   O iframe isola por construção, e o case continua funcionando exatamente como
   foi testado — mesma URL, mesmo código, uma fonte só.
   Custo aceito: o conteúdo do case não conta para o SEO da página de projetos.
   Não se perde nada, porque /among-us/ já é uma URL própria e indexável.

   O carregamento preguiçoso está no JS (260829_projeto-inline.js): o iframe
   nasce SEM src. Antes do hover, o que existe é só a imagem nativa do editor
   como pôster; o link para /among-us/ continua sendo o fallback sem JavaScript. */

body.hs-projetos .hs-projeto-inline{
  position:relative;
  margin:0 auto;
  max-width:1320px;
  /* 260905 pedido 11 (L3, medido em Chrome 1920x920): altura 1080 -> 540.
     Largura continua 100vw (alignfull do GeneratePress vence o max-width:1320).
     Conteudo interno e absoluto/encoberto: escala junto sem corte de rotulo. */
  height:28.125vw;                    /* 540px @1920 */
  max-height:540px;
  border-radius:8px;
  overflow:hidden;
  background:#0b0b10;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  isolation:isolate;
}

/* ── pôster: o que se vê antes do hover ─────────────────────────── */
body.hs-projetos .hs-projeto-inline .hs-pi-poster{
  position:absolute; inset:0; z-index:2;
  margin:0!important; overflow:hidden;
  transition:opacity .5s ease, filter .5s ease;
  cursor:pointer;
}
body.hs-projetos .hs-projeto-inline .hs-pi-poster img{
  display:block; width:100%; height:100%; object-fit:cover;
}
/* véu para o rótulo ter contraste sobre qualquer arte */
body.hs-projetos .hs-projeto-inline .hs-pi-poster::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,6,26,.15) 0%, rgba(10,6,26,.72) 100%);
}
body.hs-projetos .hs-projeto-inline .hs-pi-rotulo{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:28px 32px; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
body.hs-projetos .hs-projeto-inline .hs-pi-titulo{
  display:block; margin:0;
  font-weight:800; letter-spacing:-.01em; line-height:1.05;
  font-size:clamp(22px,2.4vw,38px); color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
body.hs-projetos .hs-projeto-inline .hs-pi-sub{
  display:block; margin:6px 0 0; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.72; font-weight:600;
}
body.hs-projetos .hs-projeto-inline .hs-pi-dica{
  display:block; margin:0;
}
body.hs-projetos .hs-projeto-inline .hs-pi-dica .wp-block-button__link{
  display:block; padding:0; border:0; border-radius:0; background:transparent;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.6; white-space:nowrap; color:#fff; pointer-events:auto;
}

/* ── estados ─────────────────────────────────────────────────────── */
/* carregando: o pôster desfoca de leve — sinal de que algo está vindo */
body.hs-projetos .hs-projeto-inline.carregando .hs-pi-poster{ filter:blur(6px) brightness(.7); }
body.hs-projetos .hs-projeto-inline.carregando .hs-pi-dica::after{
  content:" · carregando"; opacity:.8;
}
/* pronto: o pôster sai e o case assume */
body.hs-projetos .hs-projeto-inline.pronto .hs-pi-poster{ opacity:0; pointer-events:none; }
body.hs-projetos .hs-projeto-inline.pronto .hs-pi-rotulo{ opacity:0; transition:opacity .4s ease; }

body.hs-projetos .hs-projeto-inline iframe{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; border:0; display:block;
}

/* ── mobile: sem hover, o pôster vira botão (o JS trata o clique) ── */
@media (pointer:coarse){
  body.hs-projetos .hs-projeto-inline .hs-pi-dica .wp-block-button__link{ font-size:11px; }
}

@media (prefers-reduced-motion:reduce){
  body.hs-projetos .hs-projeto-inline .hs-pi-poster{ transition:none; }
  body.hs-projetos .hs-projeto-inline.carregando .hs-pi-poster{ filter:brightness(.7); }
}

/* ── 260909 (W1 · Fable) — altura dobrada SÓ no case Among Us ─────────
   Pedido do Henrique: "duplique a altura" da seção Among na central.
   Regra genérica da linha 26 fica intacta (outros cases continuam 28.125vw/540).
   Dois seletores independentes para o mesmo bloco:
   1. `:has()` não depende de JS — o bloco do post 63 tem o link nativo
      `.hs-pi-open a[href="/among-us/"]` (fallback sem JavaScript).
   2. `#hs-among-us` é o id que 260909_among-parent.js injeta em runtime.
   Regras separadas de propósito: se um navegador antigo não entender `:has()`,
   descarta só essa regra e a do id continua valendo. */
/* 260909 (revisao) — altura REDUZIDA em 30% a pedido do Henrique: "a altura da tela do
   projeto among us tenha uma altura 30% menor". 56,25vw -> 39,375vw e 1080 -> 756 px.
   O ganho de presenca do caderno central NAO vem daqui e sim da escala/enquadramento em
   260909_among-interaction.js (SCALE.central + FILL_V) — reduzir a moldura e aumentar o
   produto dentro dela e o que resolve o vazio vertical que ele apontou. Ver DECISOES 106. */
body.hs-projetos .hs-projeto-inline:has(a[href*="/among-us/"]){
  height:39.375vw;                    /* 756px @1920 (era 56.25vw / 1080px) */
  max-height:756px;
}
body.hs-projetos #hs-among-us.hs-projeto-inline{
  height:39.375vw;
  max-height:756px;
}

/* 260912 — 1003:2216: sem sombra separadora entre setores. */
body.hs-projetos .hs-projeto-inline{box-shadow:none}