/* ═══════════════════════════════════════════════════════════════════════════
   blog-elevated.css — template de blog estilo revista (2026-07-19, founder:
   "não podemos ser standard"). Foto-hero grande com título sobreposto + chip de
   meta no canto. Depende dos tokens de design-system.final10.css.

   CASCATA: carrega POR ÚLTIMO (a seguir a print.css) e as regras de override
   são scoped em `.blog-elevated` (sobe a especificidade acima de `main h1` e
   `.article-header` do country-redesign.css, que usam !important). A foto vem de
   /assets/blog/hero/{slug}.jpg (fallback: gradiente verde quando ainda não há).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- HERO ---------------------------------------------------------------- */
/* Banner FULL-BLEED (largura 100%) com altura controlada — nada de aspect-ratio
   aqui: o <main> é flex-column e não estica os filhos, e aspect-ratio+max-height
   fazia a largura ser derivada da altura (hero a meio ecrã). width:100% garante
   full-bleed; a altura fica num intervalo editorial (não domina, não é fita). */
.blog-elevated .blog-hero{position:relative;width:100%;box-sizing:border-box;height:clamp(360px,38vw,480px);display:flex;align-items:flex-end;
  background:linear-gradient(180deg,rgba(12,46,43,.05) 0%,rgba(12,46,43,.24) 40%,rgba(12,46,43,.88) 100%),
    var(--blog-hero-photo,linear-gradient(135deg,var(--primary,#1A5C50),var(--ink,#0C2E2B)));
  background-size:cover;background-position:center 40%;margin:0}
.blog-elevated .blog-hero__in{max-width:860px;margin:0 auto;padding:0 28px 52px;width:100%}
.blog-elevated .blog-hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 var(--text-label,12px)/1 var(--font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-dark,#FFB37A);margin:0 0 16px}
.blog-elevated .blog-hero__eyebrow img{width:26px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.blog-elevated .blog-hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(32px,5vw,54px);line-height:1.03;letter-spacing:-.02em;color:#fff!important;margin:0!important;text-wrap:balance;max-width:20ch;display:block;text-shadow:0 1px 30px rgba(0,0,0,.38)}
.blog-elevated .blog-hero h1 .flag-img{display:none}  /* a bandeira vive no eyebrow */
.blog-elevated .blog-hero__meta{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:12px;background:rgba(12,46,43,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:9px 16px;font:600 12px/1 var(--font-data);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.blog-elevated .blog-hero__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--accent-on-dark,#FFB37A)}
.blog-elevated .blog-hero__credit{position:absolute;bottom:9px;right:13px;font:500 10px/1 var(--font-data);color:rgba(255,255,255,.5)}

/* ---- COLUNA ABAIXO DO HERO (autor + bridge + corpo) --------------------- */
/* O header (perde tag+h1 → foram para o hero) fica com autor + quiz-bridge.
   Dois formatos no site: .article-header (posts novos) e .hero-blog (listicles
   antigos) — tratam-se igual. */
.blog-elevated .article-header,
.blog-elevated .hero-blog{max-width:760px!important;margin:0 auto!important;padding:30px 28px 0!important;border:0!important;text-align:left!important}
.blog-elevated .hero-blog > .container{max-width:none!important;padding:0!important;margin:0!important}
.blog-elevated .article-body{max-width:760px!important;margin:0 auto!important;padding:6px 28px 72px!important}
.blog-elevated .article-author{margin:6px 0 20px!important}
.blog-elevated .article-header__meta{margin-top:4px}
/* CTA do quiz-bridge: fundo laranja → texto SEMPRE branco. Nos listicles o
   botão cai dentro de .article-body e o country-redesign.css
   `.article-body a:not(.btn):not(.download-card):not(.tier__cta)` (esp. 0,0,4,1
   !important) pintava-o de laranja → texto invisível sobre laranja (CTA pago
   morto). Preciso de esp. >4 classes: uso atributos que o pill sempre tem. */
.blog-elevated .quiz-bridge a[href][style*="background"][style*="border-radius"]{color:#fff!important}
@media(max-width:640px){
  .blog-elevated .blog-hero h1{font-size:30px}
  .blog-elevated .blog-hero__in{padding:0 20px 36px}
  .blog-elevated .article-header,.blog-elevated .hero-blog,.blog-elevated .article-body{padding-left:20px!important;padding-right:20px!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULOS PÓS-ARTIGO — cartão ÚNICO (2026-07-20, founder: "nada casa com nada").
   Os 4 blocos que se empilhavam depois do artigo (fontes, recently-published,
   faixa de ferramentas, bridge de país) tinham 4 fundos e 3 larguras inline
   diferentes + emojis. Agora partilham .post-aside: MESMA largura (alinha com a
   coluna 760), MESMO fundo, MESMA borda/raio → tudo casa. Sem emojis.
   !important porque o markup original tinha estilo inline (esp. 1,0,0,0) e há
   regras antigas em blog.css/country-redesign p/ .ymyl-sources etc.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Largura dos módulos: MAIS larga que o texto (760) mas IGUAL entre todos, para
   emoldurar a coluna de leitura e a página não parecer só um corredor central.
   O texto do artigo mantém-se estreito (leitura); os cartões respiram a 900. */
.blog-elevated .post-aside{max-width:900px!important;margin:26px auto 0!important;padding:22px 26px!important;
  background:#fff!important;border:1px solid #E7E5DE!important;border-radius:12px!important;box-sizing:border-box!important;
  box-shadow:0 1px 2px rgba(12,46,43,.03)!important}
/* TODOS os módulos pós-artigo à MESMA largura 900, centrados no ecrã (breakout),
   quer estejam dentro do article-body (760) quer soltos no main. É isto que os faz
   "casar": mesma largura E mesmo eixo central. O texto do artigo fica nos 760. */
.blog-elevated .related-articles,
.blog-elevated .article-cta,
.blog-elevated .ymyl-disclaimer,
.blog-elevated .nl-capture,
.blog-elevated .article-faq,
.blog-elevated .data-sources,
.blog-elevated .affiliate-tools,
.blog-elevated .wte-related-guides,
.blog-elevated .blog-email-cta,
.blog-elevated .related-pages{max-width:none!important;width:min(900px,calc(100vw - 48px))!important;
  margin-left:0!important;margin-right:0!important;position:relative;left:50%;transform:translateX(-50%);box-sizing:border-box!important}
/* FAQ: caixa a 900 mas o texto das respostas fica legível (não a toda a largura) */
.blog-elevated .article-faq details,.blog-elevated .article-faq .faq-item{max-width:none}
.blog-elevated .related-articles{margin-top:40px!important}
.blog-elevated .related-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;gap:14px!important}
/* REGRA do CTA dos cartões (founder 20-jul): texto + seta CENTRADOS no cartão,
   como um botão. Simétrico e igual em todos os cartões. */
.blog-elevated .related-card{justify-content:center!important;text-align:center!important;gap:8px!important;min-height:64px!important}
.blog-elevated .related-card__title{flex:0 1 auto!important}
.blog-elevated .post-aside > *:first-child{margin-top:0!important}
.blog-elevated .post-aside > *:last-child{margin-bottom:0!important}
/* título interno uniforme (Fontes / Recently published) */
.blog-elevated .post-aside__h,
.blog-elevated .post-aside > h2:first-child,
.blog-elevated .post-aside > h3:first-child,
.blog-elevated .post-aside > strong:first-child{display:block;font:600 var(--text-label,12px)/1 var(--font-data,'DM Mono',monospace)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--primary,#1A5C50)!important;margin:0 0 14px!important}
/* faixa de ferramentas: era um <p> emoji; agora cartão com links a par */
.blog-elevated .post-aside--tools{font:500 14px/1.5 var(--font-body,Inter,system-ui,sans-serif)!important;color:var(--ink,#0C2E2B)!important}
.blog-elevated .post-aside--tools a{color:var(--primary,#1A5C50)!important;text-decoration:none;font-weight:600}
.blog-elevated .post-aside--tools a:hover{text-decoration:underline}
/* bridge de país: link centrado, sem emoji, mesma moldura */
.blog-elevated .post-aside--bridge{text-align:left!important;font:600 15px/1.45 var(--font-body,Inter,system-ui,sans-serif)!important}
.blog-elevated .post-aside--bridge a{color:var(--primary,#1A5C50)!important;text-decoration:none}
.blog-elevated .post-aside--bridge a:hover{text-decoration:underline}
/* a bridge de país fica FORA do <main>; o padding-bottom de 96px do main criava
   um vão morto de 122px antes dela. Zera-se p/ o gap ficar nos mesmos 26px que
   separam os outros cartões. A bridge ganha margem inferior p/ respirar do footer. */
.blog-elevated main#main{padding-bottom:0!important}
.blog-elevated .post-aside--bridge{margin-bottom:40px!important}
@media(max-width:640px){.blog-elevated .post-aside{margin-left:20px!important;margin-right:20px!important;max-width:none!important}}