/*
Theme Name: Netiz Blog
Theme URI: https://netiz.com.br/blog/
Author: MKT Netiz
Author URI: https://netiz.com.br
Description: Tema personalizado do Blog da Netiz — desenvolvido a partir do design system e guia de estilo da página Para Você. Inclui carrossel de destaques configurável, editorias coloridas, tempo de leitura automático e schema.org para SEO/AEO.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: netiz-blog
*/

:root{
  --navy: #0B2A45;
  --blue: #2589CD;
  --blue-dark: #163C56;
  --blue-darker: #0F2C41;
  --gold: #FDC62A;
  --gold-dark: #F0B300;
  --ink: #0B2540;
  --muted: #5B7690;
  --bg: #F4F7FB;
  --white: #FFFFFF;
  --line: #E3EAF2;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 10px 24px -10px rgba(11,42,69,.12);
  --shadow-soft: 0 4px 14px -6px rgba(11,42,69,.08);
  --ff-display: 'Baloo 2', sans-serif;
  --ff-body: 'Inter', sans-serif;

  /* Cores das editorias (badges dos cards) */
  --cat-eventos: #00327F;
  --cat-indica: #1E6297;
  --cat-descomplica: #1E6297;
  --cat-podcast: #2896D3;
  --cat-novidades: #FDC62A;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--ff-body);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;
}
img{max-width:100%;display:block;}
.container{max-width:1240px;margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{font-family:var(--ff-display);color:var(--navy);margin:0;}
p{margin:0;}
a{color:inherit;}
button{font-family:var(--ff-body);}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:999;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* ============ HEADER FIXO (sticky, igual ao site principal) ============ */
.site-header{position:sticky;top:0;z-index:100;background:var(--bg);}

/* ============ TOPBAR ============
   Fundo igual ao --bg da página (mesmo padrão da Para Você). O header
   principal (barra gold) NÃO carrega esse fundo — fica "solto" sobre a
   página, exatamente como a barra azul da Para Você.
   Alinhamento: telefone à esquerda do container; mensagem centralizada
   em relação à página inteira (independente da largura do texto do
   telefone), replicando o layout do site institucional. */
.topbar{background:var(--bg);font-size:13px;color:var(--blue-dark);padding:6px 0;}
.topbar .container{position:relative;display:flex;align-items:center;min-height:20px;}
.topbar .tb-phone{text-align:left;}
.topbar .tb-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;}
.topbar strong{font-weight:700;}
@media(max-width:640px){ .topbar{display:none;} }

/* ============ HEADER (gold — identidade do blog, sem fundo da página) ============ */
.main-header{padding:6px 0 0;}
.main-header .header-bar{
  padding:13px 28px;background:var(--gold);border-radius:22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  box-shadow:0 12px 20px -14px rgba(11,42,69,.35);
}
.blog-logo{display:flex;align-items:center;text-decoration:none;flex:none;}
.blog-logo svg{height:46px;width:auto;display:block;}
.header-actions{display:flex;align-items:center;gap:22px;}
/* Ícones sociais no mesmo estilo do site principal: sem fundo, direto na barra colorida */
.social-row{display:flex;align-items:center;gap:18px;}
.social-row a{
  display:flex;align-items:center;justify-content:center;color:#1E6297;line-height:0;
}
.social-row svg{width:22px;height:22px;}
@media(max-width:640px){ .social-row{display:none;} }

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:99px;font-weight:700;font-size:14.5px;border:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;white-space:nowrap;
  font-family:var(--ff-body);text-decoration:none;
}
.btn:hover{transform:translateY(-2px);}
.btn-navy{background:var(--blue-dark);color:#fff;}
.btn-navy:hover{background:var(--blue-darker);}

/* Botão "Quero ser Netiz" — mesmo padrão do "Sou Netiz" da Para Você:
   fundo gold claro + a carinha aparece com uma animaçãozinha simpática. */
.btn-cta{background:#fbd784;color:var(--blue-darker);padding:11px 22px;}
.btn-cta:hover{background:#f9cd63;}
.btn-cta .btn-emoji{
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  width:0;opacity:0;transform:scale(.4) rotate(-20deg);margin-left:0;
  transition:width .32s cubic-bezier(.34,1.56,.64,1), opacity .28s ease, transform .32s cubic-bezier(.34,1.56,.64,1), margin-left .32s ease;
}
.btn-cta .btn-emoji svg{width:26px;height:26px;flex:none;}
.btn-cta:hover .btn-emoji{width:26px;opacity:1;transform:scale(1) rotate(0deg);margin-left:4px;}
@keyframes emoji-wiggle{
  0%,100%{transform:rotate(0deg);}
  25%{transform:rotate(-8deg);}
  75%{transform:rotate(8deg);}
}
.btn-cta:hover .btn-emoji svg{animation:emoji-wiggle .5s ease .32s;}

@media(max-width:640px){ .main-header{padding:12px 0 0;} .main-header .header-bar{padding:10px 18px;} .btn-cta{padding:11px 18px;font-size:13.5px;} .blog-logo svg{height:38px;} }

/* ============ HERO SLIDER ============ */
/* Respiro lateral: mesmo recuo horizontal extra que a barra gold do header
   tem (.main-header padding:20px), pra hero/filtro/cards não ficarem mais
   largos que o header — não é proporcional ao header, é o mesmo valor fixo. */
.hero-section{padding:24px 0 8px;}
.hero-slider{position:relative;border-radius:var(--radius-lg);overflow:hidden;height:380px;box-shadow:var(--shadow-card);}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;}
.hero-slide.active{opacity:1;z-index:2;}
.hero-slide-inner{display:grid;grid-template-columns:1.3fr 1fr;height:100%;}
.hero-slide-media{position:relative;overflow:hidden;}
.hero-slide-media img{width:100%;height:100%;object-fit:cover;}
.hero-slide-panel{
  display:flex;flex-direction:column;justify-content:center;padding:0 44px;color:#fff;background:#1C5A8C;
}
.hero-slide-panel[data-cat="eventos"]{background:var(--cat-eventos);}
.hero-slide-panel[data-cat="indica"]{background:var(--cat-indica);}
.hero-slide-panel[data-cat="descomplica"]{background:var(--cat-descomplica);}
.hero-slide-panel[data-cat="podcast"]{background:var(--cat-podcast);}
.hero-slide-panel[data-cat="novidades"]{background:var(--cat-novidades);color:var(--blue-darker);}
.hero-slide-panel h2{font-family:var(--ff-display);font-size:clamp(19px,1.9vw,26px);line-height:1.32;font-weight:700;color:inherit;}
.hero-slide-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:700;font-size:14px;
  color:inherit;text-decoration:none;opacity:.95;
}
.hero-slide-cta:hover{opacity:1;text-decoration:underline;}
@media(max-width:820px){
  .hero-slider{height:auto;}
  .hero-slide{position:relative;inset:auto;display:none;opacity:1;}
  .hero-slide.active{display:block;}
  .hero-slide-inner{display:block;}
  .hero-slide-media{aspect-ratio:16/9;}
  .hero-slide-panel{padding:26px 24px 30px;}
  .hero-slide-panel h2{font-size:20px;}
}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;
  background:rgba(11,37,64,.55);color:#fff;border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .18s ease;
}
.hero-arrow:hover{background:rgba(11,37,64,.8);}
.hero-arrow.prev{left:16px;} .hero-arrow.next{right:16px;}
.hero-arrow svg{width:20px;height:20px;fill:#fff;}
@media(max-width:820px){ .hero-arrow{width:36px;height:36px;top:calc(9/16 * (100% - 0px) / 2);} .hero-arrow{top:22%;} }

.hero-dots{position:absolute;bottom:16px;left:0;right:0;z-index:5;display:flex;justify-content:center;gap:8px;}
.hero-dot{width:9px;height:9px;border-radius:50%;background:rgba(11,42,69,.25);border:none;cursor:pointer;padding:0;}
.hero-dot.active{background:var(--gold);width:22px;border-radius:6px;transition:width .25s ease;}

/* ============ FILTRO DE EDITORIAS + BUSCA ============ */
.filter-section{padding:22px 0 6px;}
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.filter-pills{display:flex;gap:10px;flex-wrap:wrap;}
.filter-pill{
  background:#fff;border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:14px;
  padding:10px 20px;border-radius:99px;text-decoration:none;transition:all .18s ease;cursor:pointer;
}
.filter-pill:hover{border-color:var(--blue);color:var(--blue);}
.filter-pill.active{background:var(--gold);border-color:var(--gold);color:var(--blue-darker);}

.search-form{position:relative;flex:none;width:min(280px, 100%);}
.search-form input{
  width:100%;padding:12px 44px 12px 18px;border-radius:99px;border:1px solid var(--line);
  background:#fff;font-family:var(--ff-body);font-size:14px;color:var(--ink);
}
.search-form input:focus{outline:2px solid var(--blue);outline-offset:1px;}
.search-form button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:none;
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);
}
.search-form button:hover{color:var(--blue);}
.search-form svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;}
@media(max-width:640px){ .filter-bar{flex-direction:column;align-items:stretch;} .search-form{width:100%;} .filter-pills{flex-wrap:wrap;min-width:0;width:100%;gap:8px;} .filter-pill{flex:none;padding:8px 14px;font-size:13px;} }

/* ============ CATEGORY BADGE ============ */
.cat-badge{
  position:absolute;top:16px;left:16px;z-index:2;color:#fff;font-weight:700;font-size:12.5px;
  padding:6px 16px;border-radius:99px;letter-spacing:.01em;
}
.cat-badge[data-cat="eventos"]{background:var(--cat-eventos);}
.cat-badge[data-cat="indica"]{background:var(--cat-indica);}
.cat-badge[data-cat="descomplica"]{background:var(--cat-descomplica);}
.cat-badge[data-cat="podcast"]{background:var(--cat-podcast);}
.cat-badge[data-cat="novidades"]{background:var(--cat-novidades);color:var(--blue-darker);}

/* ============ GRID DE POSTS ============ */
.posts-section{padding:32px 0 24px;}
/* Recuo extra do CORPO (hero/filtro/cards) em relação à barra do header —
   propositalmente mais estreito que o header, conforme referência do cliente. */
.hero-section .container,
.filter-section .container,
.posts-section .container{padding:0 64px;}
@media(max-width:640px){ .hero-section .container, .filter-section .container, .posts-section .container{padding:0 24px;} }
.post-meta{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:13px;margin-top:14px;}
.post-meta span{display:flex;align-items:center;gap:6px;}
.post-meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex:none;}

.post-featured{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;
  text-decoration:none;display:block;margin-bottom:22px;padding:20px 20px 28px;
}
.post-featured-media{position:relative;aspect-ratio:16/6.2;overflow:hidden;border-radius:20px;}
.post-featured-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.post-featured:hover .post-featured-media img{transform:scale(1.04);}
.post-featured-body{padding:16px 4px 0;}
.post-featured-body h2{font-size:clamp(23px,2.7vw,32px);line-height:1.24;margin-top:10px;}
.post-featured-cta{display:flex;justify-content:flex-end;margin-top:14px;color:var(--blue-dark);font-weight:700;font-size:14.5px;}

.posts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.post-card{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;grid-column:span 2;padding:16px 16px 20px;
}
.post-card-media{position:relative;aspect-ratio:16/8.4;overflow:hidden;border-radius:17px;}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.post-card:hover .post-card-media img{transform:scale(1.05);}
.post-card-body{padding:14px 2px 0;flex:1;display:flex;flex-direction:column;}
.post-card-body h3{font-size:19px;line-height:1.3;margin-top:4px;}
.post-card-cta{display:flex;justify-content:flex-end;margin-top:auto;padding-top:14px;color:var(--blue-dark);font-weight:700;font-size:13.5px;}

@media(max-width:900px){ .posts-grid{grid-template-columns:1fr 1fr;} .post-card{grid-column:span 1;} }
@media(max-width:640px){ .posts-grid{grid-template-columns:1fr;} .post-featured{padding:16px 16px 22px;} }

/* ============ PAGINAÇÃO ============ */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;padding:36px 0 12px;flex-wrap:wrap;}
.page-link{
  min-width:40px;height:40px;padding:0 12px;border-radius:99px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:700;font-size:14px;color:var(--muted);background:#fff;border:1px solid var(--line);
}
.page-link:hover{border-color:var(--blue);color:var(--blue);}
.page-link.current{background:var(--gold);border-color:var(--gold);color:var(--blue-darker);}
.page-link.next{gap:6px;color:var(--blue-dark);}

/* Compatibilidade com a paginação nativa do WordPress (paginate_links) —
   mesma aparência dos .page-link, sem precisar de markup customizado. */
.pagination .page-numbers{
  min-width:40px;height:40px;padding:0 12px;border-radius:99px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:700;font-size:14px;color:var(--muted);background:#fff;border:1px solid var(--line);
}
.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue);}
.pagination .page-numbers.current{background:var(--gold);border-color:var(--gold);color:var(--blue-darker);}
.pagination .page-numbers.dots{border:none;background:none;}
.pagination .page-numbers.next,.pagination .page-numbers.prev{padding:0 16px;}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* ============ FOOTER ============ */
footer{background:var(--navy);color:#C9D8E5;padding:52px 0 0;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;}
.footer-logo-svg{height:28px;width:auto;margin-bottom:16px;display:block;}
.footer-col h4{color:#fff;font-family:var(--ff-body);font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.footer-col a{display:block;color:#B7C9DB;text-decoration:none;font-size:14.5px;padding:5px 0;}
.footer-col a:hover{color:var(--gold);}
.footer-addr-title{color:#fff;font-weight:700;font-size:14px;margin-bottom:8px;}
.footer-addr p{font-size:14px;line-height:1.6;color:#B7C9DB;}
.footer-addr .maps-link{color:var(--gold);font-weight:700;font-size:13px;text-decoration:none;display:inline-block;margin-top:8px;}
.footer-social{display:flex;align-items:center;gap:18px;margin-top:18px;}
.footer-social a{display:flex;align-items:center;justify-content:center;line-height:0;}
.footer-social svg{width:20px;height:20px;}
.footer-phone{color:var(--gold);font-weight:700;text-decoration:none;font-size:15px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:13px;color:#8FA4B8;display:flex;justify-content:center;text-align:center;flex-wrap:wrap;gap:8px;}
.footer-bottom .credit{color:var(--gold);text-decoration:none;font-weight:700;}
.footer-bottom .credit:hover{text-decoration:underline;}
.footer-bottom strong{color:#B7C9DB;}
.footer-bottom a{color:#8FA4B8;text-decoration:underline;}
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .footer-grid{grid-template-columns:1fr;} }


/* ============ COOKIE BANNER + MODAL ============ */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;background:#fff;border-radius:18px;
  box-shadow:0 20px 50px -14px rgba(11,42,69,.35);padding:18px 22px;display:flex;align-items:center;
  gap:20px;flex-wrap:wrap;transform:translateY(140%);transition:transform .4s ease;max-width:900px;margin:0 auto;
}
.cookie-banner.show{transform:translateY(0);}
.cookie-banner p{font-size:13.5px;color:var(--muted);flex:1;min-width:220px;line-height:1.55;}
.cookie-banner a{color:var(--blue);font-weight:700;text-decoration:underline;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn-sm{padding:10px 18px;font-size:13.5px;}
.btn-outline-sm{background:transparent;border:1.5px solid var(--line);color:var(--muted);}

.modal-overlay{
  position:fixed;inset:0;background:rgba(6,18,30,.72);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:250;
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.prefs-modal{
  background:#fff;border-radius:26px;max-width:560px;width:100%;max-height:82vh;
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(16px) scale(.97);opacity:0;transition:transform .35s ease, opacity .35s ease;
}
.modal-overlay.open .prefs-modal{transform:translateY(0) scale(1);opacity:1;}
.prefs-head{flex:none;padding:22px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.prefs-head h3{font-size:18px;}
.prefs-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;}
.prefs-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px 26px;}
.pref-row{padding:14px 0;border-bottom:1px solid var(--line);}
.pref-row:last-child{border-bottom:none;}
.pref-row-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pref-row-head strong{font-size:14.5px;color:var(--navy);}
.pref-row p{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5;}
.toggle{position:relative;display:inline-block;width:42px;height:24px;flex:none;}
.toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:#CBD6E1;border-radius:99px;transition:.2s;cursor:pointer;}
.toggle-slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;}
.toggle input:checked + .toggle-slider{background:var(--blue);}
.toggle input:checked + .toggle-slider::before{transform:translateX(18px);}
.toggle input:disabled + .toggle-slider{opacity:.6;cursor:not-allowed;}
.prefs-footer{flex:none;padding:18px 26px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}/* ============ PÁGINA DE ARTIGO ============ */
.article-section{padding:32px 0 0;}
.article-media-section{padding:0 0 40px;}
.article-wrap{max-width:760px;margin:0 auto;}

.article-cat-badge{
  display:inline-block;color:#fff;font-weight:700;font-size:13px;
  padding:7px 18px;border-radius:99px;margin-bottom:16px;letter-spacing:.01em;
}
.article-cat-badge[data-cat="eventos"]{background:var(--cat-eventos);}
.article-cat-badge[data-cat="indica"]{background:var(--cat-indica);}
.article-cat-badge[data-cat="descomplica"]{background:var(--cat-descomplica);}
.article-cat-badge[data-cat="podcast"]{background:var(--cat-podcast);}
.article-cat-badge[data-cat="novidades"]{background:var(--cat-novidades);color:var(--blue-darker);}

.article-title{font-family:var(--ff-display);font-size:clamp(28px,4vw,44px);line-height:1.16;color:var(--navy);margin-bottom:22px;}

.article-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:30px;}
.article-author{display:flex;align-items:center;gap:14px;}
.author-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--line);}
.article-author span{font-weight:700;color:var(--navy);font-size:17px;}
.article-meta-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.article-meta-right .meta-item{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:15px;}
.article-meta-right .meta-item svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;flex:none;}

.article-cover{margin:0;}
.article-cover img{width:100%;border-radius:var(--radius-lg);display:block;aspect-ratio:16/8.5;object-fit:cover;box-shadow:var(--shadow-card);}

.image-credit{font-size:12.5px;color:var(--muted);font-style:italic;margin:10px 0 30px;}

.article-body{font-size:16.5px;line-height:1.85;color:#33475A;}
.article-body p{margin-bottom:22px;}
.article-body p:last-child{margin-bottom:0;}

.article-inline-image{margin:28px 0 0;}
.article-inline-image img{width:100%;border-radius:var(--radius-md);display:block;aspect-ratio:16/9;object-fit:cover;}

/* ============ VÍDEO EMBUTIDO (YouTube) ============
   Facade clicável: só carrega o iframe (e os cookies de terceiro do
   YouTube) depois que a pessoa clica em play — melhora performance e
   é mais respeitoso com privacidade, no mesmo espírito do cookie
   banner do site. Usa youtube-nocookie.com quando ativado. */
.article-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;background:#0B2540;margin:28px 0 0;box-shadow:var(--shadow-soft);}
.article-video img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;}
.article-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;
  background:rgba(11,37,64,.7);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}
.video-play-btn:hover{background:rgba(11,37,64,.88);transform:translate(-50%,-50%) scale(1.06);}
.video-play-btn svg{width:28px;height:28px;fill:#fff;margin-left:3px;}
@media(max-width:640px){ .video-play-btn{width:58px;height:58px;} .video-play-btn svg{width:22px;height:22px;} }

.read-more-heading{font-family:var(--ff-display);font-size:26px;color:var(--navy);margin:52px 0 22px;}

@media(max-width:640px){
  .article-title{font-size:26px;}
  .article-meta{gap:14px 20px;justify-content:flex-start;} .article-meta-right{gap:16px;} .author-avatar{width:46px;height:46px;} .article-author span{font-size:15.5px;} .article-meta-right .meta-item{font-size:13.5px;}
  .read-more-heading{margin:40px 0 18px;font-size:22px;}
}


/* ============ COMPATIBILIDADE COM O EDITOR DO WORDPRESS ============
   Estiliza automaticamente o que o editor de blocos gera dentro do
   corpo do post, sem precisar de nenhuma marcação manual:
   - Imagem com legenda (bloco "Imagem", campo Legenda) -> mesmo visual
     de .article-inline-image + .image-credit
   - Link do YouTube colado na própria linha -> embed responsivo com
     cantos arredondados e sombra, igual ao .article-video
   - Botões, listas e citações do editor, pra manter a tipografia. */
.article-body figure.wp-caption,
.article-body .wp-block-image{margin:28px 0 0;}
.article-body figure.wp-caption img,
.article-body .wp-block-image img{width:100%;border-radius:var(--radius-md);display:block;}
.article-body .wp-caption-text,
.article-body .wp-block-image figcaption{font-size:12.5px;color:var(--muted);font-style:italic;margin:10px 0 0;text-align:left;}
.article-body .wp-block-image + p,
.article-body figure.wp-caption + p{margin-top:30px;}

.article-body .wp-block-embed{margin:28px 0 0;}
.article-body .wp-block-embed iframe,
.article-body .wp-embed-aspect-16-9 .wp-block-embed__wrapper{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-soft);}
.article-body .wp-block-embed__wrapper{position:relative;}

.article-body ul,.article-body ol{margin:0 0 22px;padding-left:22px;}
.article-body li{margin-bottom:8px;}
.article-body blockquote{border-left:4px solid var(--gold);margin:28px 0;padding:4px 0 4px 20px;font-style:italic;color:var(--blue-dark);}
.article-body a{color:var(--blue);text-decoration:underline;}
.article-body h2,.article-body h3{color:var(--navy);margin:36px 0 16px;}