/* ==========================================================================
   W2 Websites — Blog v2 (STAGING)
   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 e o CTA de WhatsApp.
   ========================================================================== */

.w2b-page{background:#fff}
.w2b-no-top{padding-top:0!important}

/* ---- Cabeçalho da listagem ---- */
.w2b-archive-head{background:var(--slate-50);border-bottom:1px solid var(--slate-200);position:relative;overflow:hidden}
.w2b-archive-head::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 0%,#000 40%,transparent 85%);pointer-events:none}
.w2b-archive-head .wrap{max-width:760px;text-align:center;position:relative;z-index:1}
.w2b-archive-head h1{font-size:clamp(32px,4.4vw,48px);line-height:1.05;font-weight:700;margin-top:16px;color:var(--slate-900)}
.w2b-archive-head p{margin-top:16px;color:var(--slate-500);font-size:18px;line-height:1.55}

/* ---- 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:var(--slate-100);aspect-ratio:16/10;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}
@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}}

/* ---- Cabeçalho do artigo ---- */
.w2b-article-head{margin-bottom:28px}
.w2b-article-head h1{font-size:clamp(28px,4vw,42px);line-height:1.12;font-weight:700;color:var(--slate-900);margin-top:14px}
.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:22px}
.w2b-article-body li{margin-bottom:8px}
.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}
}