/* Página /espalhar (13/10): posts, artes, figurinhas e textos em trilho lateral, vídeos e grupos.
   Mesmos componentes da home (peca, temas, abas, balão, botões, .carrossel[data-trilho]); aqui só o que muda de lugar.
   Regra do iPad e desktop: cada seção cabe na altura útil da tela (100svh menos o topo fixo). */

/* Botões que a home não tem: claro (borda) e tinta (fundo preto), no formato dos outros */
.btn-tinta,.btn-claro{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:0 1.15em;border:2.5px solid var(--tinta);border-radius:999px;font:800 1rem/1 var(--texto);font-stretch:86%;text-decoration:none;cursor:pointer}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-claro{background:#fff;color:var(--tinta)}
.btn-tinta.mini,.btn-claro.mini{min-height:44px;padding:0 .9em;font-size:.92rem}

/* Âncoras do topo: pílulas que levam a cada bloco. Quebram em linhas, sem rolagem lateral. */
.esp-ancoras{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(4px,1vw,12px)}
.esp-ancoras a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.05em;border:2px solid var(--linha);border-radius:999px;background:#fff;color:var(--tinta);font:700 15px/1 var(--texto);font-stretch:88%;text-decoration:none}
@media (hover:hover){.esp-ancoras a:hover{border-color:var(--tinta);background:var(--amarelo)}}
.bloco[id]{scroll-margin-top:calc(var(--topo) + 8px)}

/* Densidade pela altura da tela (iPad e desktop): respiro, título, apoio e crédito encolhem junto com a área visível,
   para o trilho de cada seção ter o que sobra. Valores contínuos em svh, sem degraus. */
@media (min-width:700px){
  main > .bloco[id]{
    --P:clamp(12px,3.6svh,56px);--G:clamp(8px,1.6svh,16px);--T:min(clamp(30px,5.4vw,72px),6svh);--S:clamp(14px,2.3svh,19px);--C:clamp(12px,1.9svh,14px);--btn:clamp(34px,6svh,44px);
    padding-block:var(--P);gap:var(--G);
    /* O que sobra da área visível depois do topo, do respiro, do título (caixa de 1,38 em), do apoio (até 2 linhas de 1,3)
       e de 12 px de margem de segurança. Cada seção ainda desconta os seus filtros, créditos e vãos. */
    --sobra:calc(100svh - var(--topo) - 2 * var(--P) - 1.38 * var(--T) - 2.6 * var(--S) - 12px);
  }
  main > .bloco[id] .titulo-caixa{font-size:var(--T)}
  main > .bloco[id] .bloco-sub{max-width:none;font-size:var(--S);line-height:1.3}
  main > .bloco[id] .credito{max-width:none;font-size:var(--C);line-height:1.35}
}

/* Posts do Pode Espalhar: o trilho da home (.pecas dentro de .carrossel[data-trilho]); aqui só o botão de tentar de novo
   e a altura reservada, para a página não pular quando os posts chegam */
.esp-mais[hidden]{display:none}
#acervo{--w:min(72vw,300px)}
#acervo .pecas{min-height:calc(var(--w) * 1.25 + 88px)}
@media (min-width:700px){
  /* Largura do post pela altura da tela: título, filtro, trilho e crédito cabem juntos na altura útil */
  #acervo{--filtros:calc(2 * var(--btn) + 15px);--trilho:calc(var(--sobra) - 4 * var(--G) - 12px - var(--filtros) - 2.7 * var(--C));--w:clamp(120px,calc((var(--trilho) - 92px) * .8),280px)}
  #acervo .pecas{grid-auto-columns:var(--w)}
  /* Botões do post acompanham a largura do cartão: no cartão mínimo o texto cabe dentro do botão, sem passar da borda */
  #acervo .peca-acoes .mini{font-size:clamp(11px,calc(var(--w) * .095),14px);padding-inline:.3em}
  #acervo .bloco-sub{max-width:68ch}
  /* Filtros: o formato e os temas quebram linha juntos (display:contents põe os botões do tema no mesmo fluxo das abas) */
  #acervo .filtros{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;align-items:center;gap:8px;min-height:var(--filtros)}
  #acervo .temas{display:contents}
  #acervo .temas button,#acervo .abas button{min-height:var(--btn)}
  /* Chips menores em janela baixa (acervo e textos da campanha), para os temas ficarem em poucas linhas desde 700 px, mesmo com tema novo */
  :is(#acervo,#textos-campanha) .temas button{min-height:var(--btn);padding-inline:clamp(10px,min(2.1svh,1.9vw),17px);font-size:clamp(13px,min(2.4svh,1.95vw),15px)}
  #acervo .abas button{min-height:calc(var(--btn) - 6px)}
}

/* Trilho lateral das outras listas: mesma mecânica do .pecas (rola de lado, encaixa no item, sem barra) */
.esp-rail{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;align-items:start;gap:12px;width:calc(100% + 2 * var(--margem));margin:6px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none}
.esp-rail::-webkit-scrollbar{display:none}
.esp-rail>*{min-width:0;scroll-snap-align:start}
@media (min-width:700px){.esp-rail{gap:20px}}

/* Artes: altura única para todas as miniaturas (Feed 4:5, Stories 9:16), que cabe na tela junto do título e do filtro */
.esp-artes{--alt:clamp(240px,46svh,340px)}
@media (min-width:700px){.esp-artes{--alt:clamp(130px,calc(var(--sobra) - 4 * var(--G) - 54px - 2.7 * var(--C) - 125px),440px)}}
.esp-arte{width:max(150px,calc(var(--alt) * .8))}
.esp-arte.story{width:max(150px,calc(var(--alt) * .5625))}
.esp-arte.story .esp-arte-img{width:calc(var(--alt) * .5625)}
.esp-arte[hidden]{display:none}
.esp-arte a{display:grid;gap:8px;color:var(--tinta);text-decoration:none}
.esp-arte-img{display:block;height:var(--alt);width:calc(var(--alt) * .8);overflow:hidden;border:2.5px solid var(--tinta);border-radius:var(--raio);background:var(--cinza);line-height:0;box-shadow:3px 4px 0 var(--tinta)}
.esp-arte-img img{display:block;width:100%;height:100%;object-fit:cover}
.esp-arte-nome{font:600 13px/1.25 var(--texto);overflow-wrap:anywhere;color:var(--tinta-2)}
.esp-baixar{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .9em;border:2.5px solid var(--tinta);border-radius:999px;background:var(--tinta);color:#fff;font:800 .92rem/1 var(--texto);font-stretch:86%;text-align:center}
@media (hover:hover){.esp-arte a:hover .esp-baixar{background:var(--vermelho)}}
.esp-arte a:focus-visible{outline:3px solid var(--azul);outline-offset:4px;border-radius:var(--raio)}
.esp-arte-perfil .esp-arte-img{display:grid;place-items:center;padding:18%;background:var(--amarelo)}
.esp-arte-perfil .esp-arte-img img{width:100%;height:auto}
.esp-filtro{margin-top:2px}

/* Figurinhas: quadrados claros para o fundo transparente aparecer */
.esp-figurinhas{--lado:clamp(112px,16svh,156px);grid-auto-columns:var(--lado)}
@media (min-width:700px){.esp-figurinhas{--lado:clamp(96px,calc(var(--sobra) - 4 * var(--G) - 48px - 2.7 * var(--C) - 59px),170px)}}
.esp-figurinhas a{display:grid;gap:6px;justify-items:center;padding:8px 8px 10px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;color:var(--tinta);font:800 14px/1 var(--texto);text-decoration:none;box-shadow:3px 4px 0 var(--tinta);min-height:44px}
.esp-figurinhas img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
@media (hover:hover){.esp-figurinhas a:hover{background:var(--amarelo)}}
.esp-figurinhas a:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.esp-detalhe{width:min(720px,100%);padding:14px 18px;border:2px solid var(--linha);border-radius:var(--raio);background:#fff}
.esp-detalhe summary{display:flex;align-items:center;min-height:44px;font:800 16px/1.3 var(--texto);cursor:pointer}
.esp-detalhe p{margin:10px 0 0;font:500 15px/1.5 var(--texto)}

/* Textos: balão do WhatsApp com os botões embaixo, um por cartão do trilho (cartões da mesma altura) */
.esp-textos{grid-auto-columns:clamp(270px,82vw,330px);align-items:stretch}
@media (min-width:700px){.esp-textos{grid-auto-columns:clamp(300px,max(30vw,78svh),480px)}.esp-texto .balao-voce{font-size:clamp(14px,2.3svh,16px)}}
.esp-texto{display:grid;gap:10px;align-content:space-between;padding:14px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:var(--fundo-2);box-shadow:4px 5px 0 var(--tinta)}
.esp-texto .balao-voce{align-self:start;max-width:none;margin:0;font-size:16px}
.esp-texto .acoes{gap:8px}
.esp-sub{margin:clamp(20px,3vw,36px) 0 0;font:900 clamp(20px,3.2vw,28px)/1.1 var(--tit);text-transform:uppercase}
.esp-roteiro-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.esp-roteiro-etq{padding:.24em .55em .2em;background:var(--amarelo);border:2px solid var(--tinta);font:900 14px/1 var(--tit);text-transform:uppercase}
.esp-roteiro-tempo{font:700 14px/1 var(--texto);color:var(--tinta-2)}
.esp-roteiro-fonte{margin:0}
.esp-fonte{display:inline-flex;align-items:center;min-height:44px;padding:0 .9em;border:2px solid var(--linha);border-radius:999px;background:#fff;color:var(--tinta-2);font:700 14px/1.2 var(--texto);text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover){.esp-fonte:hover{border-color:var(--tinta);color:var(--tinta)}}

/* Vídeos: no iPad e desktop o vídeo e a legenda ficam lado a lado, e a altura do vídeo cabe na tela */
.esp-videos{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,40px);justify-items:center;width:100%;margin:6px 0 0;padding:0;list-style:none}
.esp-videos li{display:grid;gap:10px;justify-items:start;width:min(300px,100%)}
.esp-videos video{display:block;width:100%;height:auto;aspect-ratio:9/16;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#111;box-shadow:4px 5px 0 var(--tinta)}
.esp-video-txt{display:grid;gap:10px;justify-items:start}
.esp-videos p{margin:0;font:500 16px/1.4 var(--texto)}
@media (min-width:700px){
  .esp-videos{--alt:clamp(180px,calc(var(--sobra) - 2 * var(--G) - 12px),460px);grid-template-columns:repeat(2,minmax(0,460px));justify-content:center}
  .esp-videos li{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;width:100%;container-type:inline-size}
  /* O vídeo cabe pela altura (--alt) e nunca passa de 46% da coluna: sobra largura para a legenda e o botão */
  .esp-videos video{width:min(calc(var(--alt) * 9 / 16),46cqw);height:auto}
}

/* Grupos */
.esp-grupos{justify-content:center}

/* Vídeos e áudios no iPad e desktop (14/10): vídeos à esquerda, roteiros à direita, para a seção caber na altura útil mesmo com 7 roteiros.
   O cartão do roteiro tem altura limitada (--cartao); o texto que não couber rola dentro do balão (nada some). Celular segue em uma coluna. */
.esp-roteiros{display:contents}
.esp-roteiro-pe{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@media (min-width:700px){
  main > #criadores{
    --H:calc(var(--sobra) - 2 * var(--G) - 12px);
    --cg:clamp(20px,3.4vw,64px);--vw:clamp(120px,min(calc((var(--H) - 130px) * 9 / 16),calc((100vw - 2 * var(--margem) - var(--cg) - 16px - 300px) / 2)),260px);
    --cartao:calc(var(--H) - 1.15 * clamp(18px,3svh,26px) - 3.9 * clamp(13px,2.1svh,16px) - 2 * var(--G) - 22px);
    grid-template-columns:auto minmax(0,1fr);column-gap:var(--cg);align-items:start;justify-items:start;
  }
  main > #criadores > .titulo-caixa,main > #criadores > .titulo-caixa + .bloco-sub{grid-column:1 / -1;justify-self:center}
  main > #criadores .esp-videos{grid-column:1;display:grid;grid-template-columns:repeat(2,var(--vw));gap:16px;width:auto;margin:0;justify-items:start}
  main > #criadores .esp-videos li{display:grid;grid-template-columns:none;gap:8px;align-items:start;width:var(--vw);container-type:normal}
  main > #criadores .esp-videos video{width:100%;height:auto}
  main > #criadores .esp-video-txt{gap:8px}
  main > #criadores .esp-videos p{font-size:clamp(13px,1.9svh,15px);line-height:1.35}
  main > #criadores .esp-videos .mini{min-height:clamp(36px,5.6svh,44px);padding-inline:.6em;font-size:clamp(12px,1.9svh,14px)}
  main > #criadores .esp-roteiros{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--G);justify-items:start;min-width:0;width:100%}
  main > #criadores .esp-sub{margin:0;font-size:clamp(18px,3svh,26px);line-height:1.15}
  main > #criadores .esp-roteiros .bloco-sub{justify-self:start;margin:0;text-align:left;text-wrap:pretty;font-size:clamp(13px,2.1svh,16px)}
  /* A seta de trás fica no vão entre os vídeos e o trilho; o trilho só sangra para a direita */
  main > #criadores .esp-roteiros .carrossel{margin-top:0}
  main > #criadores .esp-textos{width:calc(100% + var(--margem));margin:0 calc(-1 * var(--margem)) 0 0;padding:4px var(--margem) 10px 4px;scroll-padding-inline:4px var(--margem);grid-auto-columns:max(260px,min(400px,88%));align-items:stretch}
  main > #criadores .carrossel-seta.anterior{left:calc(-1 * var(--cg) + 2px)}
  main > #criadores .esp-roteiro{max-height:var(--cartao);grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;gap:clamp(5px,1.1svh,10px);padding:clamp(9px,1.7svh,14px)}
  main > #criadores .esp-roteiro .balao-voce{align-self:stretch;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;font-size:clamp(13px,2.1svh,16px);line-height:1.4}
  main > #criadores .esp-roteiro .balao-voce:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
  main > #criadores .esp-roteiro-etq{font-size:13px}
  main > #criadores .esp-roteiro-tempo{font-size:13px}
  main > #criadores .esp-fonte,main > #criadores .esp-roteiro .btn-claro.mini{min-height:clamp(36px,5.6svh,44px)}
  main > #criadores .esp-fonte{font-size:13px}
}