/*
 * Estilos residuais do front do blog. Após a migração para Tailwind, as views
 * usam utilitários do front.css do base; aqui fica SÓ o que não expressa bem
 * em utilitário: a barra fixa de progresso de leitura (largura controlada por
 * JS) e a máscara de fade do teaser do paywall. Servido same-origin por rota
 * (blog.assets.css) para funcionar sob a CSP padrão. Reaproveita os tokens
 * (:root) do front.css do base.
 */

/* Barra de progresso de leitura (topo fixo; width setada pelo blog.js) */
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent,#4f46e5);z-index:50;transition:width .1s linear}

/* Capa do post (hooks `cover`/`cover--thumb` do PostCoverTest): imagem
   responsiva com proporção fixa, cantos do kit e respiro abaixo. Na página do
   post a capa ganha sombra suave (nível do redesign). */
.cover{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:14px;margin-bottom:24px;box-shadow:0 14px 30px rgba(17,24,39,.08)}
.cover--thumb{aspect-ratio:16/9;border-radius:8px;margin-bottom:14px;box-shadow:none}

/* Dentro da área de mídia do card (`.card-media`, post-card redesenhado), a
   capa preenche o contêiner — proporção/cantos ficam por conta do wrapper. */
.card-media .cover--thumb{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;margin:0;transition:transform .3s ease}
.card-media:hover .cover--thumb,article:hover .card-media .cover--thumb{transform:scale(1.04)}

/* Paywall / conteúdo exclusivo: teaser com fade via mask (o CTA é utilitário) */
.paywall{position:relative}
.paywall__teaser{max-height:320px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}