/* Página /fica-de-olho (16/10): um dossiê por seção, cabeçalho do assunto e trilho lateral de notícias.
   Mesmo padrão da /nao-deixe: cartões de borda tinta e sombra dura, trilho também no celular, seção na altura útil (--u). */

.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)}

/* ---------- Índice dos assuntos, no cabeçalho da página ---------- */
.fo-indice{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fo-indice:empty{display:none}
.fo-indice a{display:inline-flex;align-items:center;min-height:44px;padding:0 1em;border:2.5px solid var(--tinta);border-radius:999px;background:#fff;color:var(--tinta);font:900 15px/1 var(--tit);text-transform:uppercase;text-decoration:none;box-shadow:2px 3px 0 var(--tinta)}
.fo-indice a:hover,.fo-indice a:focus-visible{background:var(--amarelo)}

/* ---------- Cabeçalho do dossiê ---------- */
.fo-cabeca{display:grid;justify-items:center;gap:8px;text-align:center}
.fo-tag{margin:0;padding:.3em .6em .25em;background:var(--azul);color:#fff;font:900 12px/1 var(--tit);text-transform:uppercase;letter-spacing:.03em;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.fo-tese{max-width:60ch;margin:0;text-wrap:balance}
.fo-conta{margin:0;font:800 14px/1.3 var(--texto);color:var(--tinta-2)}
.fo-compartilhar{justify-content:center}

/* ---------- Trilho: um cartão por vez no celular, vários no desktop ---------- */
.fo-lista{--mi:0px;--mf:0px;display:grid;grid-auto-flow:column;grid-auto-columns:min(86%,360px);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;
  -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)}
.fo-lista::-webkit-scrollbar{display:none}

/* ---------- Cartão de notícia: lado, data, título, resumo, fonte e compartilhar ---------- */
.fo-item{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:4px 5px 0 var(--tinta)}
.fo-marcas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.fo-lado{padding:.3em .6em .25em;border:2px solid var(--tinta);font:900 13px/1 var(--tit);text-transform:uppercase;letter-spacing:.03em}
.fo-lula .fo-lado{background:var(--vermelho);color:#fff}
.fo-flavio .fo-lado{background:var(--tinta);color:#fff}
.fo-contexto .fo-lado{background:var(--cinza);color:var(--tinta)}
.fo-flavio{background:#f3f3f3}
.fo-marcas time{padding:0 .35em;background:var(--tinta);color:#fff;font:700 13px/1.5 var(--texto)}
.fo-item h3{margin:0;font:900 clamp(17px,1.5vw,20px)/1.15 var(--tit);letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:break-word;text-wrap:balance}
.fo-resumo{margin:0;font:600 15px/1.42 var(--texto);overflow-wrap:break-word}
.fo-links{display:flex;flex-wrap:wrap;gap:0 14px;margin:0}
.fo-fonte,.fo-interno{display:inline-flex;align-items:center;min-height:44px;font:800 14px/1.2 var(--texto);overflow-wrap:anywhere}
.fo-fonte{color:var(--vermelho-t)}
.fo-interno{color:var(--tinta)}
.fo-acoes{margin-top:auto}
.fo-acoes .mini{flex:1 1 auto;padding:0 .8em}

/* ---------- Desktop e tablet: três cartões à vista ---------- */
@media (min-width:700px){
  .fo-lista{grid-auto-columns:clamp(300px,calc((100vw - 2 * var(--margem) - 64px) / 3),380px);gap:20px}
  .carrossel:has(.anterior:not([hidden],:disabled)) .fo-lista{--mi:72px}
  .carrossel:has(.proxima:not([hidden],:disabled)) .fo-lista{--mf:96px}
}

/* ---------- Densidade pela altura útil (cada seção cabe numa tela) ---------- */
@media (min-width:700px){
  .fo-dossie{--u:calc(100svh - var(--topo));gap:clamp(6px,calc(var(--u) * .011),14px);padding-block:min(clamp(36px,4vw,64px),clamp(14px,calc(var(--u) * .03),64px))}
  .fo-dossie .titulo-caixa{font-size:min(clamp(30px,5vw,64px),clamp(26px,calc(var(--u) * .055),64px))}
  .fo-tese{font-size:min(clamp(16px,1.5vw,19px),clamp(15px,calc(var(--u) * .028),19px))}
  .fo-item{gap:clamp(5px,calc(var(--u) * .01),8px);padding:clamp(10px,calc(var(--u) * .02),16px) clamp(14px,calc(var(--u) * .024),18px)}
  .fo-resumo{font-size:min(15px,clamp(13.5px,calc(var(--u) * .02),15px))}
  .fo-acoes .mini{min-height:clamp(38px,calc(var(--u) * .06),44px)}
}

/* ---------- Desktop largo: assunto à esquerda, trilho à direita (a seção cabe numa tela) ---------- */
@media (min-width:1024px){
  .fo-dossie{grid-template-columns:minmax(260px,330px) minmax(0,1fr);justify-items:stretch;align-items:center;column-gap:clamp(24px,3vw,44px)}
  .fo-cabeca{justify-items:start;text-align:left}
  .fo-cabeca .titulo-caixa{max-width:100%}
  .fo-tese{text-align:left;text-wrap:pretty}
  .fo-compartilhar{justify-content:flex-start}
  .fo-dossie .carrossel{min-width:0}
  .fo-dossie .fo-lista{grid-auto-columns:clamp(270px,calc((100vw - 2 * var(--margem) - 330px - 44px) / 2.4),340px);width:100%;margin:0;padding:4px 4px 14px;scroll-padding-inline:4px}
  .fo-item h3{font-size:min(clamp(16px,1.25vw,18px),clamp(15px,calc(var(--u) * .024),18px))}
}