/* ═══════════════════════════════════════════════════════════════════════════
   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}}

/* ═══════════════════════════════════════════════════════════════════════════
   BARE-CLASS FOR .quiz-bridge / .ymyl-disclaimer / .wte-eeat (2026-08-06,
   MOVE-FROM-REBUILD). These 3 blocks never had a class-only rule anywhere —
   every page that uses them (blog + countries, ~1,000+) carries the box
   styling as a per-page style="" attribute baked in by the generator, not a
   shared rule. build_move_from_guide.py is the first generator to emit the
   class WITHOUT the inline style, so it needs a real home for the same
   values. Existing pages are UNCHANGED: their inline style="" (specificity
   1,0,0,0) still wins over a plain class selector here — this only "shows
   through" on markup that carries the class with no competing style=.
   Values below are copy-exact from the inline pattern blog.css/countries
   already ship (see blog.css §5/§6 and design-system.final10.css's
   .article-cta) — same tokens where a token exists (--primary-10/-30/--ink/
   --primary/--font-body), same literal hex where no token exists yet
   (ymyl-disclaimer's blue tint, wte-eeat's neutral card — sitewide as-is,
   not introduced here). */
.blog-elevated .quiz-bridge{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--primary-10);border:1px solid var(--primary-30);border-radius:10px;padding:12px 16px;margin:14px 0 18px;font:400 14px/1.5 var(--font-body);color:var(--ink)}
.blog-elevated .quiz-bridge__cta{background:var(--primary)!important;color:#fff!important;text-decoration:none!important;font-weight:600!important;padding:9px 16px!important;border-radius:8px!important;white-space:nowrap!important}

.blog-elevated .ymyl-disclaimer{background:#EEF4FF;border:1px solid #BBD0F5;border-radius:10px;padding:12px 16px;margin:16px 0 20px;font-size:14px;line-height:1.6;color:#1E3A66}

.blog-elevated .wte-eeat{margin:44px 0 8px;padding:20px 22px;border:1px solid #e3e8e6;border-radius:12px;background:#f7faf9;font:400 15px/1.6 var(--font-body);color:#25332f}
.blog-elevated .wte-eeat__label{margin:0 0 6px;font-weight:700;color:var(--primary)}
.blog-elevated .wte-eeat__bio{margin:0 0 12px}
.blog-elevated .wte-eeat__links{margin:0;font-size:13.5px;color:#4a5a55}
.blog-elevated .wte-eeat__links a{color:var(--primary)}