/* Blog SCBA: capa editorial, lista, newsletter e páginas de matéria. Usa só os tokens de /shared/scba.css */

/* capa (1ª dobra escura): texto + retrato em moldura */
.b-capa{padding-block:calc(var(--hdr) + var(--rbar) + clamp(2.5rem,6vw,4.5rem)) clamp(3rem,7vw,5.5rem)}
.b-capa .wrap{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:900px){.b-capa--retrato .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.b-capa h1{font-size:clamp(2.1rem,4.6vw,3.9rem);max-width:19ch;margin:0 0 1.1rem;color:#fff}
.b-capa h1 a{text-decoration:none}
.b-capa h1 a:hover{text-decoration:underline;text-decoration-color:var(--sol);text-decoration-thickness:2px;text-underline-offset:.14em}
.b-capa .lead{max-width:52ch;margin:0}
.b-capa .crumb a{color:var(--sobre-noite-2)}
.b-capa .btns{margin-top:clamp(1.6rem,3vw,2.2rem)}

/* metadados: categoria · data · leitura */
.b-meta{display:flex;flex-wrap:wrap;gap:.45rem 1.6rem;margin:1.6rem 0 0;padding:0;list-style:none;font:400 .72rem/1.3 var(--f-num);letter-spacing:.08em;text-transform:uppercase;color:var(--sobre-noite-2)}
.b-meta li:first-child{color:var(--sol-claro)}


/* retrato: foto quadrada inteira (sem esticar), moldura com fio dourado que se desenha ao abrir */
.retrato{position:relative;margin:0;justify-self:center;width:min(100%,430px)}
.retrato .quadro{position:relative;aspect-ratio:1;border-radius:var(--r-g);overflow:hidden;background:var(--noite-2);box-shadow:0 50px 90px -40px rgba(7,11,38,.85)}
.retrato img{width:100%;height:100%;object-fit:cover}
.retrato::before{content:"";position:absolute;inset:-14px -14px 14px 14px;border:1px solid var(--sol);border-radius:calc(var(--r-g) + 6px);opacity:.75;pointer-events:none;z-index:-1}
.retrato figcaption{margin-top:1.1rem;display:grid;gap:.2rem;color:var(--sobre-noite)}
.retrato figcaption b{font:700 1.05rem/1.2 var(--f-disp);color:#fff}
.retrato figcaption span{font-size:.88rem;color:var(--sobre-noite-2)}
.js .retrato .quadro{animation:abre-retrato 1.3s var(--ease) .15s both}
.js .retrato::before{animation:fio 1.6s var(--ease) .45s both}
@keyframes abre-retrato{from{clip-path:inset(100% 0 0 0 round 18px);scale:1.06}to{clip-path:inset(0 0 0 0 round 18px);scale:1}}
@keyframes fio{from{clip-path:inset(0 100% 100% 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:.75}}
@media(max-width:899px){.retrato{width:min(78%,340px)}}

/* categorias (só visual por enquanto) */
.b-cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 clamp(2rem,4vw,3rem);padding:0;list-style:none}
.b-cats a,.b-cats span{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.5rem 1rem;border-radius:99px;border:1px solid var(--linha);font:600 .85rem/1 var(--f-txt);text-decoration:none;color:var(--tinta-2);transition:background-color .25s,color .25s,border-color .25s}
.b-cats a:hover{border-color:var(--navy);color:var(--navy)}
.b-cats a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.b-cats span{border-style:dashed}
.b-cats small{font:400 .66rem var(--f-num);letter-spacing:.06em;text-transform:uppercase;opacity:.8}

/* newsletter (sem envio real) */
.b-news .wrap{display:grid;gap:2rem;align-items:end}
@media(min-width:900px){.b-news .wrap{grid-template-columns:1fr 1fr;gap:4rem}}
.b-news h2{margin:0 0 .8rem}
.b-news p{margin:0;color:var(--sobre-noite-2)}
.b-news form{display:grid;gap:.6rem}
.b-news label{font:600 .85rem var(--f-txt);color:var(--sobre-noite)}
.b-news .campo{display:flex;flex-wrap:wrap;gap:.6rem;padding:.4rem;border:1px solid var(--linha-noite);border-radius:99px;background:rgba(255,255,255,.04)}
.b-news input{flex:1 1 12rem;min-width:0;min-height:44px;padding:0 1rem;border:0;background:transparent;color:var(--sobre-noite);font:400 1rem var(--f-txt)}
.b-news input::placeholder{color:var(--sobre-noite-2)}
.b-news button[disabled]{cursor:not-allowed;opacity:.85;box-shadow:none}
.b-news button[disabled]:hover{transform:none}
.b-news .nota{font-size:.85rem}
@media(max-width:520px){.b-news .campo{border-radius:var(--r-g)}.b-news .campo .btn{flex:1 1 100%}}

/* ---------- página de matéria ---------- */
.b-capa--sobe{padding-bottom:clamp(5.5rem,10vw,8.5rem)}
.b-capa--sobe h1{max-width:22ch}
.capa-foto{margin:clamp(-4.5rem,-6vw,-2.5rem) auto 0;position:relative;z-index:2}
.capa-foto .foto{--ar:16/8;box-shadow:0 40px 80px -45px rgba(7,11,38,.7)}
.capa-foto .foto img{object-position:50% 45%}
.capa-foto figcaption{margin-top:.8rem;font-size:.82rem;color:var(--tinta-2)}
@media(max-width:600px){.capa-foto .foto{--ar:4/3}}

.materia{padding-block:clamp(3rem,7vw,5.5rem)}
.materia .wrap{display:grid;gap:2rem}
@media(min-width:1024px){.materia .wrap{grid-template-columns:180px minmax(0,68ch);justify-content:center;gap:clamp(3rem,6vw,6rem)}}

/* compartilhar: fixo ao lado do texto no desktop, faixa acima do texto no celular */
.compartilhar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;align-self:start}
@media(min-width:1024px){.compartilhar{position:sticky;top:calc(var(--hdr) + 2rem);flex-direction:column;align-items:stretch}}
.compartilhar p{margin:0 .4rem 0 0;font:400 .7rem var(--f-num);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
@media(min-width:1024px){.compartilhar p{margin:0 0 .3rem}}
.compartilhar :is(a,button){display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.55rem .95rem;border:1px solid var(--linha);border-radius:99px;background:var(--papel);color:var(--navy);font:600 .85rem/1 var(--f-txt);text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background-color .25s,color .25s,border-color .25s}
.compartilhar :is(a,button):hover{background:var(--navy);border-color:var(--navy);color:#fff}
.compartilhar svg{width:18px;height:18px;flex:none}
.compartilhar [role=status]{font-size:.8rem;color:var(--tinta-2);min-height:1.2em}

.corpo{font-size:1.125rem;line-height:1.75;color:var(--tinta);min-width:0}
.corpo p{max-width:68ch;margin:0 0 1.35em}
.corpo h2{font-size:clamp(1.4rem,2.3vw,1.9rem);max-width:28ch;margin:2.4em 0 .7em;scroll-margin-top:calc(var(--hdr) + 1.5rem)}
.corpo a{color:var(--navy);font-weight:600;text-decoration-color:var(--sol);text-decoration-thickness:2px}
.corpo a:hover{color:var(--tinta)}
.corpo ul{margin:0 0 1.35em;padding-left:1.2em}
.corpo li{margin-bottom:.4em}
.corpo li::marker{color:var(--sol)}

/* linha do tempo (matéria 1): fio que se acende com a rolagem, marcos entrando um a um */
.tempo{margin:2rem 0 2.6rem;padding:clamp(1.5rem,4vw,2.5rem);border-radius:var(--r-g);background:var(--org);color:var(--sobre-noite);position:relative;overflow:hidden;isolation:isolate}
.tempo h3{color:#fff;margin:0 0 1.6rem;font-size:clamp(1.15rem,1.8vw,1.4rem)}
.tempo ol{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:1.15rem}
.tempo ol::before,.tempo ol::after{content:"";position:absolute;left:5px;top:.5rem;bottom:.5rem;width:2px;border-radius:2px}
.tempo ol::before{background:var(--linha-noite)}
.tempo ol::after{background:linear-gradient(180deg,var(--sol),var(--sol-claro) 60%,var(--eletrico-claro));transform-origin:50% 0}
@supports (animation-timeline:view()){.js .tempo ol::after{animation:acende-fio linear both;animation-timeline:view();animation-range:entry 30% cover 65%}}
@keyframes acende-fio{from{scale:1 0}to{scale:1 1}}
.tempo li{position:relative;padding-left:2rem;display:grid;gap:.15rem;font-size:1rem;line-height:1.5}
@media(min-width:600px){.tempo li{grid-template-columns:8.5rem 1fr;gap:1rem}}
.tempo li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--abismo);border:2px solid var(--sobre-noite-2);z-index:1;transition:background-color .5s,border-color .5s,box-shadow .5s}
.tempo li.on::before{background:var(--sol);border-color:var(--sol);box-shadow:0 0 0 5px rgba(243,146,0,.18)}
.tempo li b{font:600 .95rem/1.5 var(--f-num);color:var(--sol-claro);letter-spacing:-.01em;white-space:nowrap}
.tempo li span{color:var(--sobre-noite)}
.tempo li:last-child span{color:#fff;font-weight:600}

/* leia também */
.leia{display:grid;gap:1.5rem;text-decoration:none;color:inherit;align-items:center}
@media(min-width:900px){.leia{grid-template-columns:5fr 7fr;gap:3rem}}
.leia .foto{--ar:16/10}
.leia .foto img{object-position:50% 30%}
.leia h3{font-size:clamp(1.4rem,2.4vw,2rem);max-width:24ch;margin:.9rem 0 .7rem;transition:color .25s}
.leia:hover h3{color:var(--navy)}
.leia:hover .foto img{scale:1.04}
.leia .post-resumo{margin-bottom:1rem}
.leia:focus-visible{outline:3px solid var(--sol);outline-offset:8px;border-radius:var(--r-g)}
.leia .post-meta{margin-top:0}

/* banner de inscrição no meio da matéria (anúncio próprio do SCBA) */
.b-anuncio{display:grid;margin:2.6em 0;border-radius:var(--r-g);overflow:hidden;background:var(--noite);color:var(--sobre-noite);box-shadow:0 30px 60px -36px rgba(7,11,38,.7)}
.b-anuncio img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.b-anuncio div{padding:clamp(1.4rem,3vw,2rem);align-self:center}
.b-anuncio p{margin:0;font-size:1rem;line-height:1.5;color:var(--sobre-noite)}
.b-anuncio .b-anuncio-tit{margin-bottom:.5rem;font:700 clamp(1.7rem,3vw,2.2rem)/1.05 var(--f-disp);letter-spacing:-.02em;color:#fff}
.b-anuncio .btn{margin-top:1.3rem;color:var(--noite);text-decoration:none}
@media(min-width:640px){.b-anuncio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.b-anuncio img{height:100%;aspect-ratio:auto}}
/* capa clara com o banner do Hermano (mesma identidade do card); faixa escura só no topo para o menu */
.b-capa--banner{position:relative;isolation:isolate;background:#eef4fa url(/img/hermano-banner.webp) right center/cover no-repeat;min-height:min(78svh,720px);display:flex;align-items:center}
.b-capa--banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,16,48,.55) 0,rgba(11,16,48,0) 22%),linear-gradient(90deg,rgba(240,246,252,.9) 0%,rgba(240,246,252,.4) 48%,transparent 66%)}
.b-capa--banner .wrap>div{max-width:620px}
.b-capa--banner h1{color:var(--navy)}
.b-capa--banner h1 em{color:var(--sol)}
.b-capa--banner .lead{color:var(--tinta-2)}
.b-capa--banner .crumb,.b-capa--banner .crumb a,.b-capa--banner .b-meta{color:var(--tinta-2)}
@media(max-width:899px){.b-capa--banner{background-position:86% top;align-items:flex-end;min-height:92svh}.b-capa--banner::before{background:linear-gradient(180deg,rgba(11,16,48,.55) 0,rgba(11,16,48,0) 18%),linear-gradient(0deg,rgba(240,246,252,.97) 0%,rgba(240,246,252,.88) 50%,rgba(240,246,252,0) 74%)}}
.b-capa--banner .b-meta li:first-child{color:var(--sol)}
/* capa com foto centralizada abaixo: título e textos centralizados para acompanhar a imagem */
.b-capa--sobe .wrap>div{text-align:center;margin-inline:auto}
.b-capa--sobe h1,.b-capa--sobe .lead{margin-inline:auto}
.b-capa--sobe .b-meta{justify-content:center}