/*
 * Prohall — blog.php: classes exclusivas desta página
 * (padrões que só aparecem aqui; o que se repete em outras páginas está em
 * assets/css/components.css). Nenhum style="" deveria sobrar em blog.php.
 */

/* hero */
.blog-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.68) 50%,rgba(10,10,10,.4) 100%)}
.blog-hero-inner{position:relative;padding:92px 40px 84px}
.blog-heroh1{font:800 52px/1.04 'Manrope',sans-serif;letter-spacing:-1.8px;margin:24px 0 0;max-width:720px;text-wrap:balance}
.blog-hero-lead{font:400 16.5px/1.65 'Manrope',sans-serif;color:rgba(255,255,255,.8);max-width:560px;margin:20px 0 0}

/* grid + paginação */
.blog-grid-wrap{padding:64px 40px 84px}
.blog-empty-text{font:400 15px 'Manrope',sans-serif;color:#8a8a8a;padding:40px 0}
.blog-grid{gap:26px}
.blogp-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:56px}

/* card (complementa .ph-blogcard/.ph-blogimg, que só têm o :hover em prohall.css)
 *
 * IMPORTANTE: renomeado de .blog-card/.blog-card-img/.blog-card-date para
 * .blogp-* porque style.css (legado) já tinha uma classe .blog-card inteira
 * do tema antigo (background-color, border-radius, height, e um
 * .blog-card-img com aspect-ratio:4/3 competindo com a altura fixa daqui) —
 * mesmo nome, propriedades que a gente não sobrescrevia vazavam por baixo.
 * Ver docs/responsividade-e-css-2026-07.md.
 */
.blogp-card{display:block;width:100%;text-decoration:none;color:inherit;background:none}
.blogp-card-img{position:relative;width:100%;height:210px;border-radius:14px;overflow:hidden;margin-bottom:16px;background:#f2f2f4}
.blogp-card-date{font:700 10px 'Manrope',sans-serif;letter-spacing:1px;color:#8a8a8a}
.blog-card-title{font:700 18px/1.28 'Manrope',sans-serif;letter-spacing:-.3px;margin:9px 0 8px}
.blog-card-excerpt{font:400 13.5px/1.55 'Manrope',sans-serif;color:#666;margin:0}

/* ---- Responsivo (mobile/tablet) ----
   Só o padding lateral por enquanto (padronizado em 24px em todas as
   páginas); o vertical continua no valor de desktop até ser revisado. */
@media (max-width:860px){
  .blog-hero-inner,
  .blog-grid-wrap{padding-left:24px;padding-right:24px}
}