/* Blog do Nosso Clã: lista, destaques, categorias e artigo. Usa os componentes do style.css
   (.cartao-img, .grade, .tag, .meta, .prosa) e acrescenta só o que é do blog. */

/* capa sem foto (textos antigos sem imagem) */
.capa-vazia{display:grid!important;place-content:center;gap:8px;text-align:center;background:var(--petroleo)!important;color:#fff;
  background-image:radial-gradient(circle at 80% 20%,rgba(167,228,250,.25),transparent 55%)!important}
.capa-vazia span{font:400 13px/1 var(--mono);color:var(--lima)}
.capa-vazia b{font-weight:800;font-size:22px;letter-spacing:-.03em}

/* cartões do blog: título mais forte, resumo com no máximo 3 linhas */
.grade-blog .cartao-img h3{font-size:clamp(19px,1.7vw,21px)}
.grade-blog .cartao-img .corpo{align-content:start}
.grade-blog .cartao-img .corpo p:not(.meta){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.grade-blog .tag{justify-self:start}
.grade-blog [hidden]{display:none}

/* destaques */
.blog-hero{padding-bottom:clamp(40px,6vw,72px)}
.blog-hero .wrap{display:grid;gap:22px}
@media (min-width:960px){.blog-hero .wrap{grid-template-columns:1.6fr 1fr;align-items:stretch}}
.hero-principal{position:relative;display:grid;background:var(--preto);color:#F4F4F4;border-radius:var(--raio);overflow:hidden}
.hero-principal figure{margin:0;aspect-ratio:16/9;background:#111}
.hero-principal figure img{width:100%;height:100%;object-fit:cover}
.hero-texto{padding:clamp(22px,3vw,36px);display:grid;gap:12px;align-content:start}
.hero-texto .chapeu{color:var(--lima)}
.hero-texto h2{font-size:clamp(26px,3.2vw,40px);max-width:22ch}
.hero-texto h2 a{text-decoration:none}
.hero-texto .lide{color:#B9B9B9;margin-top:0;font-size:17px}
.hero-texto .meta{color:#9a9a9a}
.esticar::after{content:"";position:absolute;inset:0}
.hero-principal:hover h2 a,.hero-lado:hover h3 a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hero-pilha{display:grid;gap:22px;align-content:start}
.hero-lado{position:relative;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:14px;transition:border-color .15s}
.hero-lado:hover{border-color:var(--preto)}
.hero-lado figure{margin:0;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--linha)}
.hero-lado figure img{width:100%;height:100%;object-fit:cover}
.hero-lado .capa-vazia b{font-size:14px}
.hero-lado > div{display:grid;gap:8px}
.hero-lado h3{font-size:18px}
.hero-lado h3 a{text-decoration:none}
@media (min-width:960px){
  .hero-lado{grid-template-columns:1fr;padding:0;overflow:hidden}
  .hero-lado figure{aspect-ratio:16/8;border-radius:0}
  .hero-lado > div{padding:4px 20px 20px}
}

/* filtro por categoria */
.filtros{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:26px;scrollbar-width:thin}
.filtros a{flex:none;font:400 13px/1 var(--mono);text-decoration:none;padding:11px 14px;border-radius:999px;border:1.5px solid var(--linha);background:#fff;color:var(--preto)}
.filtros a:hover{border-color:var(--preto)}
.filtros a[aria-current]{background:var(--preto);border-color:var(--preto);color:#fff}
.conta-cat{margin:-10px 0 20px}
.voltar{display:table;font:400 13px/1 var(--mono);color:var(--azul);text-decoration:none;margin-bottom:18px}

/* artigo */
.artigo-cab{padding-bottom:28px}
.artigo-cab h1{max-width:22ch;font-size:clamp(32px,5vw,56px)}
.artigo-cab .meta{margin-top:20px;font-size:13px}
.trilha{font:400 13px/1.3 var(--mono);color:var(--cinza);margin:0 0 14px}
.trilha a{color:var(--azul);text-decoration:none}.trilha a:hover{text-decoration:underline}
.artigo-capa figure{margin:0 auto;max-width:1000px;border-radius:var(--raio);overflow:hidden;background:var(--linha)}
.artigo-capa img{width:100%;height:auto}
.artigo-miolo{padding-block:clamp(32px,5vw,56px) clamp(48px,7vw,88px)}
.artigo-miolo .prosa{max-width:none}
.prosa h2{scroll-margin-top:90px}
.prosa figure{margin:1.8em 0}
.prosa figure img{margin-inline:auto;max-height:80vh;width:auto}
.prosa figcaption{font:400 13px/1.4 var(--mono);color:var(--cinza);margin-top:8px;text-align:center}
.prosa hr{border:0;border-top:1px solid var(--linha);margin:2em 0}
.prosa li + li{margin-top:.4em}
.prosa strong{font-weight:700}
.tabela{overflow-x:auto;margin:1.6em 0;border:1px solid var(--linha);border-radius:10px}
.tabela table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45}
.tabela td{padding:10px 12px;border-bottom:1px solid var(--linha);vertical-align:top;min-width:140px}
.tabela tr:first-child td{font-weight:700;background:var(--fundo)}
.tabela tr:last-child td{border-bottom:0}
.aviso-arquivo{font:400 13px/1.5 var(--mono);background:var(--fundo);border:1px dashed var(--linha);border-radius:10px;padding:12px 14px;margin-bottom:28px;color:var(--grafite)}

/* vídeo do YouTube: miniatura até o clique */
.video-yt{position:relative;aspect-ratio:16/9;border-radius:var(--raio);overflow:hidden;background:#000;margin:1.8em 0}
.video-yt a{display:block;width:100%;height:100%;color:#fff;text-decoration:none}
.video-yt img{width:100%;height:100%;object-fit:cover;opacity:.8;border-radius:0}
.video-yt span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--lima);color:var(--preto);font:400 14px/1 var(--mono);padding:14px 18px 14px 40px;border-radius:999px}
.video-yt span::before{content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-left:11px solid var(--preto);border-right:0}
.video-yt iframe{width:100%;height:100%;border:0}

/* chamada no fim do artigo */
.artigo-cta{display:grid;gap:16px;margin-top:clamp(40px,6vw,64px)}
@media (min-width:700px){.artigo-cta{grid-template-columns:1fr 1fr}}
.artigo-cta > div{border-radius:var(--raio);padding:26px;display:grid;gap:12px;align-content:start}
.artigo-cta > div:first-child{background:var(--azul);color:#fff}
.artigo-cta > div:first-child .chapeu{color:var(--lima)}
.artigo-cta > div:first-child p{color:#DCD8FF}
.artigo-cta > div:last-child{background:var(--preto);color:#F4F4F4}
.artigo-cta > div:last-child .chapeu{color:var(--ceu)}
.artigo-cta > div:last-child p{color:#B9B9B9}
.artigo-cta h2{font-size:clamp(22px,2.4vw,28px)}
.artigo-cta .btn{justify-self:start;margin-top:4px}
.artigo-cta > div:first-child .btn-azul{background:#fff;color:var(--azul)}
.artigo-cta > div:first-child .btn-azul:hover{background:var(--lima);color:var(--preto)}
.fontes{font-size:15px}