/* Capa do blog (/blog/, categorias e paginadas): só o que é desta página.
   Os componentes comuns (pg-topo, migalhas, linha-fina, chips, posts/post, ver-todos, link-seta, newsletter, carrossel)
   vêm do previa.css e não são redefinidos aqui, só ajustados. */

/* ---------- topo: trilha, H1, linha fina e busca (uma coluna; a busca fica à direita do texto no desktop) ---------- */
.blog-topo .caixa{grid-template-columns:minmax(0,1fr);gap:0;padding-block:clamp(28px,4vw,48px) clamp(44px,5.5vw,72px)}  /* em cima, o mesmo do .pg-topo: a trilha fica na altura das outras páginas */
.blog-topo .migalhas{margin-bottom:clamp(20px,3vw,34px)}
.blog-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:20px clamp(28px,5vw,64px);align-items:end}
.blog-topo h1{margin-top:0}

/* busca: campo em pílula com o botão da lupa dentro */
.blog-busca{position:relative}
.blog-busca input{display:block;width:100%;height:50px;padding:0 58px 0 20px;font:inherit;font-size:16px;color:var(--tinta);background:#fff;border:1.5px solid #8A887E;border-radius:999px;-webkit-appearance:none;appearance:none}
.blog-busca input::placeholder{color:var(--tinta-2);opacity:1}
.blog-busca input::-webkit-search-cancel-button{-webkit-appearance:none}
.blog-busca input:focus{border-color:var(--roxo);outline:none;box-shadow:0 0 0 3px rgba(132,30,127,.18)}
.blog-busca button{position:absolute;right:5px;top:5px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--roxo);cursor:pointer;display:grid;place-items:center;transition:background .15s ease}
.blog-busca button:hover{background:var(--roxo-900)}
.blog-busca button::before{content:"";width:17px;height:17px;background:#fff;-webkit-mask:url(../assets-marca/icones/busca.svg) center/contain no-repeat;mask:url(../assets-marca/icones/busca.svg) center/contain no-repeat}

/* ---------- temas (categorias): pílulas .chips maiores, com a atual em roxo cheio ---------- */
.blog-temas{display:flex;flex-wrap:wrap;gap:7px;margin-top:clamp(24px,3vw,34px)}
.blog-temas.chips>a{display:inline-flex;align-items:center;flex:none;padding:9px 13px;font-size:14.5px;line-height:20px;white-space:nowrap;background:rgba(255,255,255,.8);border-color:#DAD8CC}
.blog-temas.chips>a:hover,.blog-temas.chips>a[aria-current]{background:var(--roxo);border-color:var(--roxo);color:#fff}

/* ---------- vitrine: o post mais recente em cartão grande e os 2 seguintes ao lado ---------- */
.vitrine{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(0,1fr);gap:clamp(22px,2.8vw,36px);margin-top:clamp(26px,3.2vw,40px)}
.vit-destaque{position:relative;display:flex;flex-direction:column;background:var(--card);color:var(--card-fg);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden;text-decoration:none}
/* a capa aparece inteira, na proporção original (1224 × 512); se sobrar altura, quem cresce é o texto */
.vit-destaque img{width:100%;height:auto;aspect-ratio:1224/512;flex:none;object-fit:cover;background:var(--roxo-900);transition:transform .35s ease}
.vit-destaque:hover img{transform:scale(1.025)}
.vit-selo{position:absolute;left:16px;top:16px;z-index:1;padding:6px 12px;border-radius:999px;background:var(--oliva);color:var(--roxo-900);font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.vit-txt{position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:var(--card);padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px) clamp(20px,2.4vw,28px)}
.vit-txt small{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.vit-txt h3{margin-top:8px;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.16;color:var(--tinta)}
.vit-txt p{margin-top:10px;font-size:1rem;line-height:1.55;color:var(--tinta-2);max-width:62ch}
/* quando a coluna ao lado é mais alta, a sobra se divide acima e abaixo do texto (sem buraco entre o resumo e o link) */
.vit-txt p{margin-bottom:16px}
.vit-txt .link-seta{display:inline-block;color:var(--roxo)}
.vit-destaque:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.vit-destaque:hover .link-seta::after{transform:translateX(4px)}
.posts.vit-lado{margin-top:0;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,28px);align-content:space-between}
.vit-lado .post img{aspect-ratio:1224/512}

/* ---------- lista: os outros posts da página ---------- */
/* respiro das seções: a escala das páginas internas (a mesma dos cases e do hub) */
.blog-lista,.blog-materiais.sec{padding-block:clamp(48px,6vw,88px)}
.blog-lista .posts{gap:clamp(28px,3.4vw,44px) clamp(18px,2.2vw,28px)}

/* paginação: números em pílula e o botão para a página seguinte */
.paginacao{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(36px,4.5vw,56px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--linha)}
.paginacao ol{display:flex;align-items:center;gap:8px}
.paginacao li>a,.paginacao li>[aria-current]{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:999px;border:1px solid #DAD8CC;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;text-decoration:none;transition:background .15s ease,color .15s ease,border-color .15s ease}
.paginacao li>a:hover{background:var(--roxo-claro);border-color:var(--roxo);color:var(--roxo)}
.paginacao li>[aria-current]{background:var(--roxo);border-color:var(--roxo);color:#fff}
.pag-pulo{min-width:24px;text-align:center;color:var(--fg2);font-weight:700}
.pag-prox::after{content:"→";display:inline-block;transition:transform .15s ease}
.pag-prox:hover::after{transform:translateX(4px)}

/* chamada para os cases */
.blog-cases{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:clamp(22px,3vw,30px);padding:18px 24px;border-radius:var(--raio);background:var(--papel);border:1px solid var(--linha)}
a.blog-cases{text-decoration:none;color:inherit;transition:border-color .15s ease,background .15s ease}
a.blog-cases:hover{border-color:var(--roxo);background:var(--roxo-claro)}
a.blog-cases:hover .link-seta::after{transform:translateX(4px)}
.blog-cases b{font-size:1.05rem;color:var(--titulo)}
/* "Ver todos os materiais": a área de toque cresce para 44px sem mudar o desenho do link */
.blog-materiais .ver-todos .link-seta{position:relative}
.blog-materiais .ver-todos .link-seta::before{content:"";position:absolute;inset:-11px -8px}

/* ---------- materiais: cartões brancos com a capa do material "impressa" sobre um palco claro ---------- */
.mats{margin-top:36px}
.mat{display:flex;flex-direction:column;background:var(--card);color:var(--card-fg);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden;text-decoration:none}
.mat-capa{display:grid;place-items:center;padding:26px 24px 24px;background:var(--roxo-claro)}
.mat-capa img{width:min(100%,300px);height:auto;border-radius:6px;box-shadow:0 16px 26px -14px rgba(42,8,40,.6),0 2px 5px rgba(42,8,40,.16);transform:rotate(-2deg);transition:transform .25s ease}
.mat:nth-child(even) .mat-capa img{transform:rotate(1.5deg)}
.mat:hover .mat-capa img{transform:rotate(0) scale(1.03)}
.mat h3{padding:20px 22px 0;margin-bottom:18px;font-size:1.12rem;line-height:1.32;color:var(--tinta)}
.mat:hover h3{text-decoration:underline;text-underline-offset:3px}
.mat-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:auto 22px 22px;padding:.62em 1.15em;border-radius:999px;background:var(--oliva);color:var(--roxo-900);font-size:15px;font-weight:700;line-height:1.2;transition:background .15s ease}
.mat:hover .mat-btn{background:var(--oliva-esc)}
.mat-btn::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--ic-baixar) center/contain no-repeat;mask:var(--ic-baixar) center/contain no-repeat;--ic-baixar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E")}
@media (min-width:621px){
  .mats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
}

/* ---------- responsivo ---------- */
@media (min-width:621px) and (max-width:1239px){
  /* abaixo de 1240 os 10 temas não cabem numa linha: a largura máxima força uma quebra equilibrada (6 + 4), sem tema órfão */
  .blog-temas{max-width:46rem}
}
@media (max-width:980px){
  .vitrine{grid-template-columns:minmax(0,1fr)}
  /* toque: temas e lupa com 44px também no tablet */
  .blog-temas{gap:8px}
  .blog-temas.chips>a{padding:11px 15px}
  .blog-busca input{height:52px}
  .blog-busca button{width:44px;height:44px;right:4px;top:4px}
}
@media (min-width:901px) and (max-width:980px){
  .blog-cab{grid-template-columns:minmax(0,1fr) minmax(220px,300px)}
}
@media (max-width:900px){
  /* a busca desce para baixo do texto: a linha fina usa a largura toda */
  .blog-cab{grid-template-columns:minmax(0,1fr)}
  .blog-busca{max-width:420px}
}
@media (min-width:621px) and (max-width:980px){
  /* tablet: grade em 2 colunas, sem o primeiro cartão esticado (com 6 cartões ele deixaria um buraco) */
  .posts.blog-linhas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posts.blog-linhas>.post:first-child{grid-column:auto}
  /* empilhada, a dupla da vitrine fica logo acima da grade: usa a mesma proporção de capa dela */
  .vit-lado .post img{aspect-ratio:669/435}
}
@media (min-width:621px) and (max-width:900px){
  /* materiais: uma coluna de cartões deitados (capa à esquerda) */
  .mats{grid-template-columns:minmax(0,1fr)}
  .mat{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);grid-template-rows:auto auto;align-content:center}
  .mat-capa{grid-row:1/span 2;align-self:stretch;padding:20px}
  .mat h3{align-self:end;padding-top:0}
  .mat-btn{align-self:start;justify-self:start;margin:0 22px}
}
@media (max-width:620px){
  /* a busca vai para depois da vitrine: o post em destaque aparece na primeira tela */
  .blog-cab{display:contents}
  .blog-busca{order:1;max-width:none;margin-top:22px}
  /* temas: uma linha só, com rolagem lateral dentro da barra (a página não rola de lado) e um esmaecido avisando que há mais */
  .blog-temas{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .blog-temas::-webkit-scrollbar{display:none}
  .blog-temas::after{content:"";flex:0 0 28px}
  .vit-txt h3{font-size:1.35rem;line-height:1.2}
  .vit-txt p{font-size:15px}
  .vit-selo{left:12px;top:12px;padding:5px 10px}
  /* posts em linhas compactas: miniatura à esquerda, tema, data e título à direita */
  .posts.blog-linhas{grid-template-columns:minmax(0,1fr);gap:0}
  .blog-linhas .post{display:grid;grid-template-columns:108px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;align-items:start;padding-block:14px;border-top:1px solid var(--linha)}
  .blog-linhas .post img{grid-row:1/span 2;width:108px;height:76px;aspect-ratio:auto;margin:0}
  .blog-linhas .post:hover img{transform:none;box-shadow:none}
  .blog-linhas .post small{line-height:1.35}
  /* título preenche a coluna (sem "balance"), para gastar menos linhas ao lado da miniatura */
  .blog-linhas .post h3{margin-top:4px;font-size:1rem;line-height:1.3;text-wrap:wrap}
  .posts.vit-lado{margin-top:6px}
  .posts.vit-lado .post:first-child{border-top:0}
  .blog-lista .posts{margin-top:18px}
  .blog-lista .posts .post:last-child{border-bottom:1px solid var(--linha)}
  .paginacao{flex-direction:column;align-items:stretch;gap:18px;margin-top:26px;padding-top:0;border-top:0}
  .paginacao ol{justify-content:center}
  .pag-prox{order:-1;justify-content:center}
  .blog-cases{flex-direction:column;align-items:flex-start;padding:16px 18px}
  .mats{margin-top:28px}
  .mat-capa{padding:22px 20px 20px}
}
@media (max-width:380px){
  /* telas estreitas: o quarto tema aparece pela metade (pista de rolagem) e a miniatura cede espaço ao título */
  .blog-temas{gap:6px}
  .blog-temas.chips>a{padding:11px 12px;font-size:14px}
  .blog-linhas .post{grid-template-columns:96px minmax(0,1fr);column-gap:12px}
  .blog-linhas .post img{width:96px;height:68px}
}
@media (prefers-reduced-motion:reduce){
  .vit-destaque:hover img{transform:none}
  .pag-prox:hover::after,.vit-destaque:hover .link-seta::after,a.blog-cases:hover .link-seta::after{transform:none}
  .mat:hover .mat-capa img{transform:rotate(-2deg)}
  .mat:nth-child(even):hover .mat-capa img{transform:rotate(1.5deg)}
}

/* ====================================================================================================================
   TELAS DE LISTA DO BLOG (onda 6, 13/10/2026): categoria, paginada, resultado da busca e lista vazia.
   Fontes: blog-categoria.html, blog-pagina.html, blog-busca.html e blog-vazio.html.
   Só regras novas, com classe nova. Nada acima mudou: a capa (blog.html) e o 404 (que usa .blog-busca) não levam estas classes.
   ==================================================================================================================== */

/* sobretítulo do topo com o link de volta para o blog (categoria, busca e lista vazia) */
.blog-volta a{color:inherit;text-decoration:none}
.blog-volta a:hover{text-decoration:underline;text-underline-offset:3px}

/* paginada: "Página N de X" faz parte do H1, em texto menor. Fica ao lado do nome quando cabe; quando não cabe, desce inteiro */
.h1-linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:.14em .36em}
.h1-pag{font-size:clamp(15px,.36em,20px);line-height:1.3;font-weight:600;letter-spacing:.01em;color:var(--fg2);white-space:nowrap}

/* busca: o termo é texto do visitante (pode ser longo e sem espaço) e vem na cor da marca */
.bt-busca h1{overflow-wrap:anywhere}
.h1-termo{color:var(--roxo)}

/* paginação com os dois sentidos: "mais recentes" à esquerda dos números, "mais antigos" à direita */
.pag-ant::before{content:"←";display:inline-block;transition:transform .15s ease}
.pag-ant:hover::before{transform:translateX(-4px)}

/* lista vazia (busca sem resultado e categoria sem post): a mensagem fica no lugar da grade e da paginação */
.vazio-acao{margin-top:clamp(24px,3vw,32px)}
.vazio-acao + .blog-cases{margin-top:clamp(36px,4.5vw,56px)}

@media (min-width:621px) and (max-width:980px){
  /* grade de 9 no tablet (2 colunas): quando a conta é ímpar, o primeiro cartão deita e ocupa a linha inteira,
     e os outros fecham as linhas de 2, sem cartão sozinho no fim */
  .posts.blog-linhas.blog-nove>.post:first-child:nth-last-child(odd){grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr auto auto 1fr;column-gap:clamp(18px,2.2vw,28px)}
  .blog-nove>.post:first-child:nth-last-child(odd) img{grid-column:1;grid-row:1/-1;margin-bottom:0}
  .blog-nove>.post:first-child:nth-last-child(odd) small{grid-column:2;grid-row:2}
  .blog-nove>.post:first-child:nth-last-child(odd) h3{grid-column:2;grid-row:3;font-size:1.35rem;line-height:1.25}
  /* os dois botões e os números não cabem numa linha: os números sobem e os botões ficam embaixo, um em cada ponta */
  .pag-meio ol{order:-1;flex:0 0 100%;justify-content:center}
}
@media (max-width:620px){
  /* categoria: na barra que rola de lado, o tema atual vem logo depois de "Todos", para aparecer marcado sem rolar */
  .tm-frente>a:first-child{order:-2}
  .tm-frente>a[aria-current]{order:-1}
  /* busca: o campo fica logo abaixo do título (na capa ele desce para o fim do topo) */
  .bt-busca .blog-busca{order:0}
  /* os dois botões empilhados acima dos números; "mais antigos", que continua a leitura, vem primeiro */
  .pag-ant{order:-1;justify-content:center}
  .pag-meio .pag-prox{order:-2}
  .vazio-acao .btn{display:flex;justify-content:center}
  /* toque de 44px no link do sobretítulo, sem mudar o desenho (a área não sobe até a trilha) */
  .blog-volta a{position:relative}
  .blog-volta a::after{content:"";position:absolute;inset:-11px -8px -18px}
}
@media (prefers-reduced-motion:reduce){
  .pag-ant:hover::before{transform:none}
}