/* Página /rede (13/10): cartões de atos e de iniciativas no padrão da home (borda tinta, sombra dura). */

.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;background:#fff;color:var(--tinta);font:800 1rem/1 var(--texto);font-stretch:86%;text-decoration:none;cursor:pointer}
.btn-claro.mini{min-height:44px;padding:0 .9em;font-size:.92rem}
.bloco[id]{scroll-margin-top:calc(var(--topo) + 8px)}

/* Escolha do estado: rótulo, lista e contagem numa linha (quebra no celular) */
.rede-filtro{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;width:100%}
.rede-filtro label{font:800 15px/1.2 var(--texto)}
.rede-filtro select{width:min(300px,100%);min-height:48px;padding:0 2.4em 0 1em;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .8em center/18px no-repeat;color:var(--tinta);font:700 16px/1 var(--texto);appearance:none;-webkit-appearance:none;cursor:pointer}
.rede-filtro select:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.rede-filtro .estado{margin:0}
.rede-vazio{max-width:52ch}

/* Trilho lateral (regra do Thiago, 13/10): atos e iniciativas rolam para o lado, o próximo aparece pela metade.
   Borda a borda no celular; de 700px em diante, setas nas laterais (.carrossel, nova.css). */
.rede-grade{display:grid;grid-auto-flow:column;grid-auto-columns:min(84%,320px);gap:16px;width:calc(100% + 2 * var(--margem));margin:6px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 14px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none;align-items:start}
.rede-grade::-webkit-scrollbar{display:none}
@media (min-width:700px){.rede-grade{grid-auto-columns:clamp(280px,26vw,360px);gap:20px}}
/* Janela baixa: cartão mais largo, o texto quebra em menos linhas e o cartão fica mais baixo (largura segue a altura útil) */
@media (min-width:700px){.rede-grade{grid-auto-columns:clamp(280px,max(26vw,min(calc((100svh - var(--topo)) * .8),62vw)),420px)}}
.rede-cartao{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0;padding:18px 18px 16px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:4px 5px 0 var(--tinta)}
.rede-cartao[hidden]{display:none}
.rede-cartao h3{margin:0;font:900 clamp(18px,1.6vw,22px)/1.15 var(--tit);letter-spacing:-.02em;text-transform:uppercase;overflow-wrap:anywhere}
.rede-cartao p{margin:0;font:500 15px/1.45 var(--texto);overflow-wrap:anywhere}
.rede-cartao .rede-fonte{font-size:14px;color:var(--tinta-2)}
.rede-cartao .link{min-height:44px;margin-top:auto} /* link, botões e fonte ficam no pé do cartão: os pés se alinham no trilho */
.rede-cartao .acoes{width:100%;margin-top:2px}
.rede-fim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;width:100%;margin-top:auto}
.rede-fim .link{margin-top:0}
.rede-data{display:inline-block;padding:.35em .6em .3em;background:var(--amarelo);font:900 14px/1 var(--tit);text-transform:uppercase;letter-spacing:-.01em;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.rede-lugar{font:800 14px/1.2 var(--texto);color:var(--tinta-2);text-transform:uppercase;letter-spacing:.03em}
.rede-etiqueta{display:inline-block;padding:.3em .6em .25em;background:var(--azul);color:#fff;font:900 12px/1 var(--tit);text-transform:uppercase;letter-spacing:.02em;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}

/* Fonte da inclusão */
.rede-fontes{flex:0 1 auto;min-width:0}
.rede-fontes[open]{flex:1 1 100%;border-top:2px solid var(--linha);padding-top:4px}
.rede-fontes summary{display:flex;align-items:center;min-height:44px;font:800 14px/1.2 var(--texto);cursor:pointer}
.rede-fontes div{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 8px}
.rede-pilula{display:inline-flex;align-items:center;min-height:44px;padding:0 .9em;border:2px solid var(--linha);border-radius:999px;color:var(--tinta);font:700 14px/1 var(--texto);text-decoration:none;overflow-wrap:anywhere}

.pg-acoes{grid-template-columns:minmax(0,1fr)} /* o texto longo não alarga a coluna */
/* Como sugerir: os passos da home, centralizados */
.rede-passos{grid-area:auto;grid-template-columns:minmax(0,1fr);justify-self:center;width:min(720px,100%);gap:clamp(18px,2.4vw,28px)}
.rede-passos li{grid-template-columns:auto minmax(0,1fr)}
.rede-passos h3{margin:2px 0 4px}
.rede-passos p{font-size:clamp(16px,1.4vw,19px)}

/* Antes de o JS montar as listas, cada uma já ocupa a altura que terá (sem isso, a página pula quando os cartões chegam).
   Valores medidos com o acervo atual (de 1000px em diante, uma reta sobre a altura útil); só valem enquanto a lista está vazia. */
.reserva{visibility:hidden}
.rede-filtro .estado:empty,[data-turma-estado]:empty{display:block}
[data-tipos]:empty{min-height:56px}
[data-atos]:empty,[data-turma]:empty{min-height:441px}
@media (min-width:700px){[data-atos]:empty{min-height:450px}[data-turma]:empty{min-height:480px}}
@media (min-width:1000px){[data-atos]:empty{min-height:min(442px,calc((100svh - var(--topo)) * .35 + 125px))}[data-turma]:empty{min-height:min(430px,calc((100svh - var(--topo)) * .2 + 232px))}}

/* Densidade pela altura útil (regra do Thiago de 13/10: cada seção cabe numa tela). Em vez de degraus de altura medidos,
   cada medida escala com a altura útil --u (janela menos o topo fixo) e nunca passa do tamanho original: título, respiro
   e cartões encolhem de forma contínua quando a janela é baixa (zoom, barra do navegador, notebook). Só de 700px em diante. */
@media (min-width:700px){
  main>.bloco[id]{--u:calc(100svh - var(--topo));gap:clamp(6px,calc(var(--u) * .011),14px);padding-block:min(clamp(44px,5vw,72px),clamp(14px,calc(var(--u) * .034),72px))}
  main>.bloco[id] .titulo-caixa{font-size:min(clamp(30px,5.4vw,72px),clamp(26px,calc(var(--u) * .06),72px))}
  main>.bloco[id] .bloco-sub{max-width:min(100ch,100%);font-size:min(clamp(16px,1.5vw,19px),clamp(15px,calc(var(--u) * .03),19px))}
  .rede-grade{margin-top:0;padding-bottom:10px}
  [data-tipos]{padding-bottom:2px}
  .rede-cartao{gap:clamp(3px,calc(var(--u) * .008),8px);padding:clamp(10px,calc(var(--u) * .022),18px) clamp(14px,calc(var(--u) * .026),18px) clamp(8px,calc(var(--u) * .018),16px)}
  .rede-cartao h3{font-size:min(clamp(18px,1.6vw,22px),clamp(15px,calc(var(--u) * .028),22px))}
  .rede-cartao p{font-size:min(15px,clamp(14px,calc(var(--u) * .021),15px));line-height:1.4}
  .rede-cartao .rede-fonte{font-size:clamp(13px,calc(var(--u) * .02),14px)}
  .rede-cartao .link,.rede-fontes summary{min-height:clamp(40px,calc(var(--u) * .06),44px)}
}

/* Borda do trilho: onde ainda há cartões para rolar, a ponta esmaece sob a seta, em vez de a seta cobrir texto legível */
@media (min-width:700px){
  .rede-grade{--mi:0px;--mf:0px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--mi),#000 calc(100% - var(--mf)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--mi),#000 calc(100% - var(--mf)),transparent)}
  .carrossel:has(.anterior:not([hidden],:disabled)) .rede-grade{--mi:72px}
  .carrossel:has(.proxima:not([hidden],:disabled)) .rede-grade{--mf:96px}
}