/* Blog do Amor de Cão. A base é o CSS do próprio site (assets/css/site.css, cópia do www): cores, fontes,
   tamanhos, espaçamentos, cabeçalho, menu, mosaico e rodapé vêm de lá. Aqui só o que é do blog,
   sempre com as variáveis do site. Estrutura inspirada no blog da Awwwards. */

:root{--blog-coluna:46rem;--blog-raio:var(--radius-md)}
.blog-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blog-pular{position:absolute;left:-999px;top:var(--spacing-2);z-index:60;background:var(--color-surface-raised);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm)}
.blog-pular:focus{left:var(--spacing-2)}
/* linhas equilibradas, sem palavra órfã: títulos e textos curtos com balance; parágrafos longos do post com pretty
   (o balance do navegador só atua até umas 6 linhas) */
h1,h2,h3,h4,p,li,figcaption,blockquote,.blog-rotulo{text-wrap:balance}
.blog-corpo p,.blog-corpo li{text-wrap:pretty}
.blog-em em,.blog-em strong{font-style:normal;color:var(--color-brand-default)}

/* rótulos (data, rubrica) */
.blog-rotulo{font-family:var(--font-sans);font-size:max(13px,var(--text-label));line-height:1.3;color:var(--color-text-primary);display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1)}
.blog-rotulo .ponto{width:4px;height:4px;border-radius:999px;background:var(--color-accent-default)}
.blog-rotulo a{color:inherit}

/* capa da listagem: título gigante na largura toda, como "FRESH POSTS" */
.blog-capa{padding-top:var(--spacing-7);padding-bottom:var(--spacing-5)}
.blog-gigante{font-family:var(--font-display);text-transform:uppercase;line-height:.86;margin:0;font-size:clamp(3.5rem,17vw,6rem)}
@media (min-width:768px){.blog-gigante{display:inline-block;white-space:nowrap;font-size:10.4vw}}
.blog-capa-linha{margin-top:var(--spacing-4);padding-top:var(--spacing-3);border-top:1px solid var(--color-border-muted);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--spacing-3)}
.blog-capa-linha p{margin:0;font-size:max(17px,var(--text-body));line-height:1.3}

/* chamada do post: "→ Ler post" */
.blog-ler{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-sans);font-size:max(15px,var(--text-sm));font-weight:600;color:var(--color-text-primary)}
.blog-ler svg{width:1.1em;height:1.1em;transition:translate .35s var(--menu-item-easing)}
a:hover .blog-ler svg,.blog-ler:hover svg{translate:.25em 0}
.blog-ler span{text-decoration:underline;text-underline-offset:.15em;transition:text-underline-offset .2s ease-out}
a:hover .blog-ler span{text-underline-offset:.3em}

/* imagem dos cartões */
.blog-foto{position:relative;overflow:hidden;border-radius:var(--blog-raio);background:var(--color-surface-track);aspect-ratio:16/10}
.blog-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--menu-item-easing)}
a:hover .blog-foto img{scale:1.04}

/* destaque: faixa branca, texto de um lado e imagem do outro */
.blog-destaque{padding-block:var(--spacing-7)}
.blog-destaque a{display:grid;gap:var(--spacing-5);align-items:center;color:inherit;text-decoration:none}
@media (min-width:1024px){
  .blog-destaque a{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--spacing-7)}
  .blog-destaque.invertido .blog-destaque-texto{order:2}
}
.blog-destaque h2{margin:var(--spacing-2) 0 0;font-family:var(--font-display);text-transform:uppercase;line-height:.95;font-size:var(--text-lead-sm)}
@media (min-width:768px){.blog-destaque h2{font-size:var(--text-h1-lg)}}
@media (min-width:1024px){.blog-destaque h2{font-size:var(--text-lead)}}
.blog-destaque p.resumo{margin:var(--spacing-3) 0 0;font-size:max(17px,var(--text-body));line-height:1.35}
.blog-destaque .blog-ler{margin-top:var(--spacing-4)}
.blog-destaque .blog-foto{aspect-ratio:4/3}
@media (max-width:1023px){.blog-destaque .blog-foto{order:-1}}

/* pares: duas colunas */
.blog-pares{display:grid;gap:var(--spacing-7) var(--spacing-4);padding-block:var(--spacing-7)}
@media (min-width:768px){.blog-pares{grid-template-columns:repeat(2,minmax(0,1fr))}}
.blog-cartao{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.blog-cartao h2,.blog-cartao h3{margin:var(--spacing-2) 0 0;font-family:var(--font-display);text-transform:uppercase;line-height:.95;font-size:var(--text-h2)}
@media (min-width:768px){.blog-cartao h2,.blog-cartao h3{min-height:2.85em}}
@media (min-width:1024px){.blog-cartao h2,.blog-cartao h3{font-size:var(--text-h1-lg)}}
.blog-cartao .blog-foto{margin-top:var(--spacing-3)}
.blog-cartao p.resumo{margin:var(--spacing-3) 0 0;font-size:max(16px,var(--text-sm));line-height:1.45}
.blog-cartao .blog-ler{margin-top:var(--spacing-3)}

/* letreiro entre os blocos (contorno, como no site) */
.blog-letreiro{overflow:hidden;padding-block:var(--spacing-6);border-block:1px solid var(--color-border-subtle)}
.blog-letreiro-trilho{display:flex;width:max-content;will-change:transform}
/* mesmo tamanho do letreiro do site: text-h1 no celular, text-display a partir de 1024 */
.blog-letreiro span{flex-shrink:0;padding-right:var(--spacing-5);font-family:var(--font-display);text-transform:uppercase;line-height:1;font-size:var(--text-h1);color:transparent;-webkit-text-stroke:var(--spacing-regua) var(--color-brand-default)}
@media (min-width:1024px){.blog-letreiro span{font-size:var(--text-display)}}

/* post */
.blog-post-topo{padding-top:var(--spacing-7);text-align:center}
.blog-post-topo .blog-rotulo{justify-content:center}
.blog-post-topo .autor{margin-top:var(--spacing-3);font-size:max(15px,var(--text-sm));display:flex;align-items:center;justify-content:center;gap:var(--spacing-1)}
.blog-post-topo .autor img{width:2.4em;height:2.4em;border-radius:999px;object-fit:cover}
.blog-post-topo h1{margin:var(--spacing-3) auto 0;max-width:22ch;font-family:var(--font-display);text-transform:uppercase;line-height:.92;font-size:var(--text-lead-sm)}
@media (min-width:768px){.blog-post-topo h1{font-size:var(--text-lead)}}
@media (min-width:1024px){.blog-post-topo h1{font-size:calc(var(--text-display) * 1.2);max-width:34ch}}
.blog-post-capa{margin-top:var(--spacing-6)}
.blog-post-capa img{display:block;width:100%;height:auto;border-radius:var(--blog-raio)}

/* corpo à esquerda + coluna lateral */
.blog-post-grade{display:grid;gap:var(--spacing-6);padding-top:var(--spacing-5);align-items:start}
@media (min-width:1024px){.blog-post-grade{padding-top:var(--spacing-6)}}
/* primeira linha do texto na mesma altura do topo da coluna lateral */
.blog-corpo>:first-child{margin-top:0}
@media (min-width:1024px){.blog-post-grade{grid-template-columns:minmax(0,1fr) minmax(18rem,26rem);gap:var(--spacing-7) clamp(3rem,7vw,8rem)}}
.blog-lateral-in{display:flex;flex-direction:column;gap:var(--spacing-5)}
@media (min-width:1024px){.blog-lateral-in{position:sticky;top:var(--spacing-5)}}
.blog-ficha{padding-bottom:var(--spacing-4);border-bottom:1px solid var(--color-border-muted)}
.blog-compartilhar{padding-bottom:var(--spacing-4);border-bottom:1px solid var(--color-border-muted);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-1) var(--spacing-2);font-size:max(14px,var(--text-label))}
.blog-compartilhar-rotulo{color:var(--color-border-medium)}
.blog-compartilhar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 var(--spacing-2)}
.blog-compartilhar button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.blog-ficha .autor{margin:0;display:flex;align-items:center;gap:var(--spacing-1);font-size:max(15px,var(--text-sm))}
.blog-ficha .autor img{width:2.6em;height:2.6em;border-radius:999px;object-fit:cover}
.blog-ficha dl{margin:0;display:grid;gap:var(--spacing-1)}
.blog-ficha dl div{display:flex;justify-content:space-between;gap:var(--spacing-2);font-size:max(14px,var(--text-label))}
.blog-ficha dt{color:var(--color-border-medium)}
.blog-ficha dd{margin:0;text-align:right}
.blog-lateral-titulo{margin:0 0 var(--spacing-3);font-family:var(--font-sans);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;font-size:max(13px,var(--text-label))}
.blog-outros ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--spacing-3)}
.blog-outros li a{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:var(--spacing-2);align-items:center;color:inherit;text-decoration:none}
.blog-outros-foto{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm);background:var(--color-surface-track)}
.blog-outros-foto img{width:100%;height:100%;object-fit:cover;transition:scale .8s var(--menu-item-easing)}
.blog-outros li a:hover img{scale:1.06}
.blog-outros-texto{display:flex;flex-direction:column;gap:4px}
.blog-outros-data{font-size:max(12px,calc(var(--text-label) * .9));color:var(--color-border-medium)}
.blog-outros-titulo{font-family:var(--font-sans);font-weight:500;line-height:1.3;font-size:max(14px,var(--text-label));text-wrap:balance}
.blog-outros li a:hover .blog-outros-titulo{color:var(--color-brand-default)}
.blog-outros .blog-ler{margin-top:var(--spacing-3)}
.blog-corpo{max-width:none;margin:0;font-family:var(--font-sans);font-size:max(19px,var(--text-body));line-height:1.5}
.blog-corpo>*{margin:0 0 1em}
.blog-corpo h2{margin:var(--spacing-7) 0 var(--spacing-3);font-family:var(--font-display);text-transform:uppercase;line-height:.95;font-size:max(36px,var(--text-h1-lg));color:var(--color-text-primary)}
.blog-corpo h3{margin:var(--spacing-6) 0 var(--spacing-2);font-weight:700;font-size:max(26px,calc(var(--text-h3) * 1.2));line-height:1.2}
.blog-corpo h4{margin:var(--spacing-4) 0 var(--spacing-1);font-weight:700}
.blog-corpo a{color:inherit;text-decoration:underline;text-decoration-color:var(--color-accent-default);text-decoration-thickness:2px;text-underline-offset:.15em;transition:text-underline-offset .2s ease-out}
.blog-corpo a:hover{text-underline-offset:.3em}
.blog-corpo blockquote{margin:var(--spacing-5) 0;padding-left:var(--spacing-3);border-left:var(--spacing-regua) solid var(--color-accent-default);font-size:var(--text-h3);line-height:1.35}
.blog-corpo ul,.blog-corpo ol{padding-left:1.2em}
.blog-corpo li{margin:.4em 0}
.blog-corpo li::marker{color:var(--color-brand-default)}
.blog-corpo figure{margin:var(--spacing-5) 0}
.blog-corpo figure img{width:100%;height:auto;border-radius:var(--blog-raio)}
.blog-corpo figcaption{margin-top:var(--spacing-1);font-size:var(--text-label)}
.blog-corpo .fontes-titulo{margin:var(--spacing-6) 0 var(--spacing-2);padding-top:var(--spacing-3);border-top:1px solid var(--color-border-muted);font-family:var(--font-sans);font-size:var(--text-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.blog-corpo .fonte{font-size:max(14px,var(--text-label));line-height:1.5;margin-bottom:.9em;overflow-wrap:anywhere}

.blog-secao-titulo{margin:0;font-family:var(--font-display);text-transform:uppercase;line-height:1;font-size:var(--text-lead-sm)}
@media (min-width:768px){.blog-secao-titulo{font-size:var(--text-h1)}}
@media (min-width:1024px){.blog-secao-titulo{font-size:var(--text-h1-lg)}}
.blog-mais{margin-top:var(--spacing-7);padding-top:var(--spacing-6);border-top:1px solid var(--color-border-muted)}
.blog-mais .blog-pares{padding-top:var(--spacing-5)}
.blog-vazio{padding-block:var(--spacing-7);font-size:var(--text-body)}

/* busca: mesmo formato dos controles do site (pílula na altura do botão "Baixar o app", fundo branco) */
.blog-busca{flex:0 1 26rem;min-width:min(100%,18rem)}
@media (max-width:767px){.blog-busca{flex-basis:100%}}
.blog-campo{position:relative;display:flex;align-items:center;height:var(--spacing-controle-cabecalho);border-radius:var(--radius-full);background:var(--color-surface-raised)}
.blog-campo svg{position:absolute;left:var(--spacing-3);width:1.15em;height:1.15em;font-size:max(16px,var(--text-sm));color:var(--color-text-primary);pointer-events:none}
.blog-campo input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;padding:0 var(--spacing-3) 0 calc(var(--spacing-3) + 1.8em);font-family:var(--font-sans);font-size:max(16px,var(--text-sm));color:var(--color-text-primary);border-radius:inherit}
.blog-campo input::placeholder{color:var(--color-border-medium)}
.blog-campo input::-webkit-search-cancel-button{cursor:pointer}
.blog-resultados{padding-top:var(--spacing-5)}
.blog-resultados .blog-pares{padding-top:var(--spacing-4)}

/* chips de categoria: pílulas no tamanho dos textos de apoio do site */
.blog-chips{display:flex;flex-wrap:wrap;gap:var(--spacing-1);flex:1 1 20rem}
.blog-chip{display:inline-flex;align-items:center;min-height:var(--spacing-alvo);padding:0 var(--spacing-3);border-radius:var(--radius-full);border:1px solid var(--color-border-muted);background:transparent;color:var(--color-text-primary);font-family:var(--font-sans);font-size:max(15px,var(--text-sm));cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out}
.blog-chip:hover{border-color:var(--color-border-default)}
.blog-chip[aria-pressed=true]{background:var(--color-text-primary);border-color:var(--color-text-primary);color:var(--color-bg-default)}
@media (max-width:767px){.blog-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--spacing-2) * -1);padding-inline:var(--spacing-2)}.blog-chips::-webkit-scrollbar{display:none}.blog-chip{flex-shrink:0}}

/* abertura do post (primeiro intertítulo): linha embaixo, na mesma altura da linha da ficha ao lado (blog.js iguala) */
.blog-corpo h2.blog-abertura{margin-bottom:var(--spacing-5);padding-bottom:var(--spacing-4);border-bottom:1px solid var(--color-border-muted)}