/* ==========================================================================
   W2 Blog — CSS do tema (blog-integration/theme-w2-blog/assets/blog.css)
   Estende assets/style.css do site principal (mesmas variáveis de cor,
   .wrap/.section/.card/.tag/.eyebrow/.btn já vêm de lá). Este arquivo só
   adiciona os componentes específicos do blog: grid de posts, sidebar,
   breadcrumb, tipografia do corpo do artigo, 404 e o CTA de WhatsApp.
   Origem: templates-v2/blog-v2.css (Blog v2), com pequenos acréscimos.
   ========================================================================== */

.w2b-page{background:#fff}
.w2b-no-top{padding-top:0!important}

/* ---- Página 404 (mesmo padrão do 404.html do site principal) ---- */
.error-page{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:80px 20px}
.error-code{font-family:'Space Grotesk',sans-serif;font-size:120px;font-weight:700;line-height:1;background:linear-gradient(135deg,#2563EB,#06B6D4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.error-title{font-size:28px;font-weight:700;color:var(--slate-900);margin:16px 0 12px}
.error-desc{font-size:16px;color:var(--slate-500);line-height:1.65;max-width:420px;margin:0 auto 32px}
.error-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- Hero escuro (listagem e artigo) — mesmo padrão das seções on-dark do site ---- */
.w2b-hero{position:relative;overflow:hidden;padding:56px 0 136px}
.w2b-hero-inner{position:relative;z-index:2}
.w2b-hero-center{max-width:860px;text-align:center}
.w2b-glow-a{background:#2563EB;width:560px;height:560px;top:-45%;left:-8%;opacity:.22}
.w2b-glow-b{background:#06B6D4;width:440px;height:440px;bottom:-60%;right:-8%;opacity:.14}
.w2b-hero h1{color:#fff;font-size:clamp(30px,4.4vw,50px);line-height:1.08;font-weight:700;letter-spacing:-.02em;margin-top:18px;max-width:920px}
.w2b-hero-center h1{margin-left:auto;margin-right:auto}
.w2b-hero .w2b-hero-sub{margin:18px auto 0;color:rgba(226,232,240,.72);font-size:18px;line-height:1.55;max-width:640px}
.w2b-hero .w2b-breadcrumb{margin-bottom:22px;font-size:13.5px}
.w2b-hero .w2b-breadcrumb nav,.w2b-hero .w2b-breadcrumb .last{color:rgba(226,232,240,.55)}
.w2b-hero .w2b-breadcrumb a{color:rgba(226,232,240,.82)}
.w2b-hero .w2b-breadcrumb a:hover{color:#fff}
.w2b-hero .w2b-cat-tag{background:rgba(6,182,212,.12);color:#BFE5FF;border:1px solid rgba(6,182,212,.28);text-decoration:none}
.w2b-hero .w2b-article-meta{color:rgba(226,232,240,.6);margin-top:26px;font-size:14px;gap:12px}
.w2b-hero .w2b-author{color:#E2E8F0;text-decoration:none;gap:12px}
.w2b-hero .w2b-author img{width:48px;height:48px;border-radius:999px;object-fit:cover;border:2px solid rgba(255,255,255,.22);box-shadow:0 6px 18px -6px rgba(2,6,23,.6)}
.w2b-author-text{display:flex;flex-direction:column;line-height:1.25}
.w2b-author-name{font-weight:700;color:#fff;font-size:14.5px}
.w2b-author-title{font-size:12.5px;color:rgba(226,232,240,.6);font-weight:500}
.w2b-hero .w2b-author:hover .w2b-author-name{color:#BFE5FF}
@media(max-width:560px){.w2b-meta-sep{display:none}.w2b-hero .w2b-article-meta{row-gap:8px}.w2b-hero .w2b-author{width:100%}}

/* ---- Caixa de autor (nativa do tema, inc/author.php) ---- */
.w2b-author-box{display:flex;gap:24px;align-items:flex-start;margin-top:48px;padding:28px 30px;border:1px solid var(--slate-200);border-radius:18px;background:linear-gradient(180deg,#fff,var(--slate-50));box-shadow:var(--shadow-card)}
.w2b-author-box-media{flex-shrink:0}
.w2b-author-box-media img{width:96px;height:96px;border-radius:999px;object-fit:cover;display:block;border:3px solid #fff;box-shadow:0 8px 24px -8px rgba(15,23,42,.25)}
.w2b-author-box-body{flex:1;min-width:0}
.w2b-author-box-eyebrow{display:inline-block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-600);margin-bottom:6px}
.w2b-author-box-name{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:700;line-height:1.2;margin:0}
.w2b-author-box-name a{color:var(--slate-900);text-decoration:none}
.w2b-author-box-name a:hover{color:var(--blue-600)}
.w2b-author-box-title{font-size:13.5px;color:var(--slate-500);font-weight:600;margin-top:4px}
.w2b-author-box-bio{font-size:15px;line-height:1.65;color:var(--slate-600);margin-top:12px}
.w2b-author-box-bio p{margin:0 0 8px}
.w2b-author-box-bio p:last-child{margin-bottom:0}
.w2b-author-box-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:16px;font-size:13.5px;font-weight:600}
.w2b-author-box-more{display:inline-flex;align-items:center;gap:5px;color:var(--blue-600);text-decoration:none}
.w2b-author-box-more:hover{text-decoration:underline;text-underline-offset:3px}
.w2b-author-box-social{display:inline-flex;align-items:center;gap:5px;color:var(--slate-500);text-decoration:none}
.w2b-author-box-social:hover{color:var(--slate-900)}
@media(max-width:560px){.w2b-author-box{flex-direction:column;padding:22px 20px}.w2b-author-box-media img{width:72px;height:72px}}
/* Se o PublishPress Authors for reativado, esconde a caixa dele pra não duplicar */
.w2b-article-body .pp-multiple-authors-boxes-wrapper{display:none}
.w2b-hero-archive{padding-bottom:150px}
.w2b-hero-archive.w2b-hero-flat{padding-bottom:64px}

/* Bloco que "salta" por cima da base do hero (capa do post / card de destaque) */
.w2b-overlap{margin-top:-88px;position:relative;z-index:3;padding-top:0!important}
.w2b-after-hero{padding-top:40px!important}
.w2b-overlap .w2b-article-media{margin:0 0 36px;border-radius:20px;overflow:hidden;background:var(--slate-100);aspect-ratio:16/9;box-shadow:0 24px 60px -24px rgba(2,6,23,.55),0 8px 24px -12px rgba(2,6,23,.35)}
.w2b-overlap .w2b-article-media img{width:100%;height:100%;object-fit:cover;display:block}
.w2b-overlap .w2b-sidebar{margin-top:112px}
.w2b-featured.w2b-overlap .w2b-featured-card{box-shadow:0 24px 60px -24px rgba(2,6,23,.5),0 8px 24px -12px rgba(2,6,23,.3)}
.w2b-no-media .w2b-hero{padding-bottom:64px}
.w2b-no-media .w2b-overlap{margin-top:0;padding-top:48px!important}
.w2b-no-media .w2b-overlap .w2b-sidebar{margin-top:0}
@media(max-width:960px){.w2b-overlap .w2b-sidebar{margin-top:0}}
@media(max-width:640px){
  .w2b-hero{padding:40px 0 104px}
  .w2b-hero-archive{padding-bottom:112px}
  .w2b-overlap{margin-top:-64px}
  .w2b-overlap .w2b-article-media{border-radius:14px}
}

/* ---- Post em destaque ---- */
.w2b-featured-card{display:grid;grid-template-columns:1.1fr 1fr;gap:0;overflow:hidden;padding:0;text-decoration:none;color:inherit}
.w2b-featured-media{background:#0B1426;aspect-ratio:1200/630;overflow:hidden}
.w2b-featured-media img{width:100%;height:100%;object-fit:cover;display:block}
.w2b-featured-body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.w2b-featured-body h2{font-size:clamp(24px,3vw,32px);line-height:1.15;font-weight:700;color:var(--slate-900)}
.w2b-featured-body p{color:var(--slate-500);font-size:16px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:900px){
  .w2b-featured-card{grid-template-columns:1fr}
  .w2b-featured-body{padding:24px}
}

/* ---- Tag de categoria (usa .tag do site principal) ---- */
.w2b-cat-tag{background:rgba(37,99,235,.08);color:var(--blue-700);align-self:flex-start}

/* ---- Meta (data / tempo de leitura) ---- */
.w2b-meta{display:flex;align-items:center;gap:8px;color:var(--slate-400);font-size:13px;margin-top:4px}

/* ---- Filtro de categorias (uma linha só, rolagem horizontal) ---- */
.w2b-cat-filter{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.w2b-cat-filter::-webkit-scrollbar{display:none;height:0}
.w2b-cat-pill{display:inline-flex;align-items:center;flex-shrink:0;white-space:nowrap;padding:8px 16px;border-radius:999px;border:1px solid var(--slate-200);color:var(--slate-600);font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.w2b-cat-pill:hover{border-color:var(--slate-300);background:var(--slate-50)}
.w2b-cat-pill.is-active{background:var(--blue-600);border-color:var(--blue-600);color:#fff}

/* ---- Grid de posts ---- */
.w2b-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
@media(max-width:1024px){.w2b-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.w2b-grid{grid-template-columns:1fr}}

.w2b-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.w2b-card-media{display:block;aspect-ratio:16/10;background:var(--slate-100);overflow:hidden}
.w2b-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.w2b-card:hover .w2b-card-media img{transform:scale(1.04)}
.w2b-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.w2b-card-body h3{font-size:19px;line-height:1.3;font-weight:700}
.w2b-card-body h3 a{color:var(--slate-900);text-decoration:none}
.w2b-card-body h3 a:hover{color:var(--blue-600)}
.w2b-card-body p{color:var(--slate-500);font-size:14.5px;line-height:1.55;flex:1}

/* ---- Paginação ---- */
.w2b-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px}
.w2b-pagination a,.w2b-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border-radius:8px;border:1px solid var(--slate-200);color:var(--slate-600);font-size:14px;font-weight:600;text-decoration:none}
.w2b-pagination a:hover{border-color:var(--slate-300);background:var(--slate-50)}
.w2b-pagination span.current{background:var(--blue-600);border-color:var(--blue-600);color:#fff}

/* ==========================================================================
   Artigo individual
   ========================================================================== */

.w2b-breadcrumb{margin-bottom:24px;font-size:13.5px}
.w2b-breadcrumb nav{color:var(--slate-400)}
.w2b-breadcrumb a{color:var(--slate-500);text-decoration:none}
.w2b-breadcrumb a:hover{color:var(--blue-600)}
.w2b-breadcrumb .last{color:var(--slate-700)}

.w2b-single-grid{display:grid;grid-template-columns:1fr 320px;gap:56px;align-items:start}
@media(max-width:960px){.w2b-single-grid{grid-template-columns:1fr}}

/* ---- Meta do artigo (autor / data / leitura) ---- */
.w2b-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--slate-400);font-size:13.5px;margin-top:16px}
.w2b-author{display:flex;align-items:center;gap:8px;color:var(--slate-600);font-weight:600}
.w2b-author img{border-radius:999px;width:32px;height:32px}

.w2b-article-media{margin:28px 0;border-radius:16px;overflow:hidden;background:var(--slate-100)}
.w2b-article-media img{width:100%;height:auto;display:block}

/* ---- Corpo do artigo (tipografia do conteúdo do post) ---- */
.w2b-article-body{color:var(--slate-700);font-size:17px;line-height:1.75}
.w2b-article-body h2{font-size:26px;font-weight:700;color:var(--slate-900);margin:40px 0 16px}
.w2b-article-body h3{font-size:21px;font-weight:700;color:var(--slate-900);margin:32px 0 14px}
.w2b-article-body p{margin:0 0 20px}
.w2b-article-body ul,.w2b-article-body ol{margin:0 0 20px;padding-left:28px}
.w2b-article-body ul{list-style:disc outside}
.w2b-article-body ol{list-style:decimal outside}
.w2b-article-body ul ul{list-style:circle outside;margin-top:8px}
.w2b-article-body ol ol{list-style:lower-alpha outside;margin-top:8px}
.w2b-article-body li{display:list-item;margin-bottom:8px;padding-left:2px}
.w2b-article-body img{max-width:100%;height:auto;border-radius:12px;margin:8px 0}
.w2b-article-body a{color:var(--blue-600);text-decoration:underline;text-underline-offset:2px}
.w2b-article-body blockquote{border-left:3px solid var(--cyan-500);padding:4px 0 4px 20px;color:var(--slate-600);font-style:italic;margin:24px 0}
/* Preserva os blocos de CTA já existentes nos posts (herdam a estilização
   inline própria, então aqui só garantimos que não colidam com o layout) */
.w2b-article-body div[style*="display:none"]{display:none!important}

/* ---- Artigos relacionados ---- */
.w2b-related{margin-top:56px;padding-top:40px;border-top:1px solid var(--slate-200)}
.w2b-related h2{font-size:22px;font-weight:700;color:var(--slate-900);margin-bottom:20px}
.w2b-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:640px){.w2b-related-grid{grid-template-columns:1fr}}
.w2b-related-card{display:block;padding:0;overflow:hidden;text-decoration:none}
.w2b-related-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.w2b-related-card h3{padding:16px 18px;font-size:15.5px;line-height:1.35;font-weight:700;color:var(--slate-900)}

/* ---- Sidebar ---- */
.w2b-sidebar{display:flex;flex-direction:column;gap:32px}
.w2b-sidebar-block{padding-bottom:28px;border-bottom:1px solid var(--slate-200)}
.w2b-sidebar-block:last-of-type{border-bottom:none}
.w2b-sidebar-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-400);margin-bottom:16px}

.w2b-search{display:flex;border:1px solid var(--slate-200);border-radius:10px;overflow:hidden}
.w2b-search input{flex:1;border:none;padding:12px 14px;font-size:14px;font-family:inherit;outline:none}
.w2b-search button{border:none;background:var(--slate-100);padding:0 16px;cursor:pointer;color:var(--slate-600)}
.w2b-search button:hover{background:var(--slate-200)}

.w2b-sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.w2b-sidebar-list a{display:flex;justify-content:space-between;color:var(--slate-600);text-decoration:none;font-size:14.5px}
.w2b-sidebar-list a:hover{color:var(--blue-600)}
.w2b-sidebar-list a span{color:var(--slate-400)}

.w2b-sidebar-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.w2b-sidebar-posts a{display:flex;align-items:center;gap:12px;text-decoration:none}
.w2b-sidebar-posts img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0}
.w2b-sidebar-posts span{color:var(--slate-700);font-size:14px;line-height:1.35;font-weight:600}
.w2b-sidebar-posts a:hover span{color:var(--blue-600)}
.w2b-empty{color:var(--slate-400);font-size:13.5px}

/* ---- CTA WhatsApp fixo (paleta pedida) ---- */
.w2b-whatsapp-cta{background:#f7fafc;border-left:3px solid #1e9fd6;border-radius:0 12px 12px 0;padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.w2b-whatsapp-cta p{margin:0;color:var(--slate-700);font-size:14.5px;line-height:1.5;font-weight:600}
.w2b-whatsapp-cta .btn-whats{justify-content:center;width:100%}

/* ---- Sticky da sidebar em telas grandes ---- */
@media(min-width:961px){
  .w2b-sidebar{position:sticky;top:24px}
}

/* ---- Acréscimos do tema (não existiam no Blog v2) ---- */
.w2b-empty-grid{grid-column:1/-1;color:var(--slate-500);text-align:center;padding:40px 0}
.w2b-page-article{max-width:820px}
.w2b-article-body h4{font-size:18px;font-weight:700;color:var(--slate-900);margin:24px 0 10px}
.w2b-article-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.w2b-article-body th,.w2b-article-body td{border:1px solid var(--slate-200);padding:10px 12px;text-align:left;vertical-align:top}
.w2b-article-body th{background:var(--slate-50);font-weight:700;color:var(--slate-900)}
.w2b-article-body pre{background:var(--slate-900);color:#e2e8f0;padding:18px 20px;border-radius:12px;overflow:auto;font-size:14px;line-height:1.6;margin:0 0 24px}
.w2b-article-body code{font-family:'JetBrains Mono',monospace;font-size:.92em}
.w2b-article-body p code{background:var(--slate-100);padding:2px 6px;border-radius:6px}
.w2b-article-body figure{margin:8px 0 24px}
.w2b-article-body figcaption{font-size:13.5px;color:var(--slate-400);margin-top:8px;text-align:center}
.w2b-article-body iframe,.w2b-article-body video{max-width:100%}
.w2b-article-body .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto}
/* Caixa de autor do PublishPress Authors (appendada ao conteúdo) */
.w2b-article-body .pp-multiple-authors-boxes-wrapper{margin-top:40px;padding-top:28px;border-top:1px solid var(--slate-200)}
