/* ============================================
   BLOG IMOBILIÁRIO — pagespeed.com.br (Módulo 07)
   Área pública (tokens :root claros). Depende de variables.css + main.css.
   Mobile-first.
============================================ */

/* === Layout: conteúdo + sidebar === */
.blog-main { padding: var(--space-10) 0 var(--space-16); }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }

/* === Sidebar === */
.blog-sidebar { display: flex; flex-direction: column; gap: var(--space-6); }
.blog-widget {
  background: var(--ps-surface); border: 1px solid var(--ps-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.blog-widget__title {
  font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ps-muted); margin-bottom: var(--space-4);
}
.blog-widget__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.blog-widget__link { color: var(--ps-text); text-decoration: none; font-weight: 500; font-size: var(--text-sm); line-height: var(--leading-tight); transition: color .15s ease; }
.blog-widget__link:hover { color: var(--ps-blue); }
.blog-widget--cta { background: var(--ps-blue-light); border-color: transparent; }
.blog-widget__text { font-size: var(--text-sm); color: var(--ps-muted); margin-bottom: var(--space-4); line-height: var(--leading-normal); }

/* === Hero da listagem === */
.blog-hero { padding: var(--space-6) 0 var(--space-10); }
.blog-hero__eyebrow { display: inline-block; margin-bottom: var(--space-4); }
.blog-hero__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.blog-hero__subtitle { color: var(--ps-muted); font-size: var(--text-lg); margin-top: var(--space-3); max-width: 640px; line-height: var(--leading-normal); }

/* === Hero da Pillar Page (categoria) === */
.blog-pillar-hero { padding: var(--space-6) 0 var(--space-10); border-bottom: 1px solid var(--ps-border); margin-bottom: var(--space-10); }
.blog-pillar-hero__eyebrow { display: inline-block; margin-bottom: var(--space-4); }
.blog-pillar-hero__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.blog-pillar-hero__lead { color: var(--ps-muted); font-size: var(--text-lg); margin-top: var(--space-4); line-height: var(--leading-normal); }

/* === Grid de listagem === */
.blog-list { margin-bottom: var(--space-10); }

/* === Card de artigo === */
.blog-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.blog-card__media { display: block; aspect-ratio: 16 / 9; background: var(--ps-bg-subtle); overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__placeholder { display: block; width: 100%; height: 100%; background: var(--ps-bg-subtle); }
.blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.blog-card__cat { align-self: flex-start; text-decoration: none; }
.blog-card__title { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); }
.blog-card__title a { color: var(--ps-text); text-decoration: none; }
.blog-card__title a:hover { color: var(--ps-blue); }
.blog-card__excerpt { color: var(--ps-muted); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* === Breadcrumb (texto simples, separador "/") === */
.blog-breadcrumb { font-size: var(--text-sm); color: var(--ps-muted); margin-bottom: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.blog-breadcrumb a { color: var(--ps-muted); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--ps-blue); }
.blog-breadcrumb__sep { color: var(--ps-subtle); }
.blog-breadcrumb__current { color: var(--ps-text); font-weight: 600; }

/* === Post individual === */
.blog-post__header { margin-bottom: var(--space-8); }
.blog-post__cat { display: inline-block; margin-bottom: var(--space-4); text-decoration: none; }
.blog-post__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.blog-post__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); color: var(--ps-muted); font-size: var(--text-sm); }
.blog-post__author { font-weight: 600; color: var(--ps-text); }
.blog-post__cover { width: 100%; height: auto; border-radius: var(--radius-lg); margin-top: var(--space-6); }

/* Corpo do artigo — largura de leitura 720px */
.blog-content { max-width: 720px; font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--ps-text); }
.blog-content > * + * { margin-top: var(--space-5); }
.blog-content h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-top: var(--space-10); line-height: var(--leading-tight); scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.blog-content h3 { font-size: var(--text-xl); font-weight: 700; margin-top: var(--space-8); }
.blog-content a { color: var(--ps-blue); text-decoration: underline; }
.blog-content ul, .blog-content ol { padding-left: var(--space-6); }
.blog-content li + li { margin-top: var(--space-2); }
.blog-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.blog-content blockquote { border-left: 3px solid var(--ps-blue); padding-left: var(--space-5); color: var(--ps-muted); font-style: italic; }
.blog-content pre, .blog-content code { background: var(--ps-surface-2); font-family: var(--font-mono); font-size: var(--text-sm); border-radius: var(--radius-md); }
.blog-content code { padding: 2px 6px; }
.blog-content pre { padding: var(--space-4); overflow-x: auto; }

/* === Table of Contents === */
.blog-toc { max-width: 720px; background: var(--ps-surface-2); border: 1px solid var(--ps-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; }
.blog-toc__title { font-weight: 700; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--ps-muted); cursor: pointer; }
.blog-toc__list { list-style: none; margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.blog-toc__list a { color: var(--ps-text); text-decoration: none; font-size: var(--text-sm); }
.blog-toc__list a:hover, .blog-toc__list a.is-active { color: var(--ps-blue); font-weight: 600; }

/* === Glossário === */
.blog-glossary { max-width: 720px; background: var(--ps-blue-light); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-10); }
.blog-glossary__title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-4); }
.blog-glossary__term { font-weight: 700; color: var(--ps-text); }
.blog-glossary__def { color: var(--ps-muted); margin: var(--space-1) 0 var(--space-4); font-size: var(--text-sm); }

/* === Compartilhar === */
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--ps-border); }
.blog-share__label { font-weight: 600; color: var(--ps-muted); font-size: var(--text-sm); }

/* === FAQ (details/summary nativo) === */
.blog-faq { max-width: 720px; margin-top: var(--space-12); }
.blog-faq__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-5); }
.blog-faq__item { border: 1px solid var(--ps-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); }
.blog-faq__q { font-weight: 600; color: var(--ps-text); cursor: pointer; list-style: none; }
.blog-faq__q::-webkit-details-marker { display: none; }
.blog-faq__q::after { content: '+'; float: right; color: var(--ps-blue); font-weight: 700; }
.blog-faq__item[open] .blog-faq__q::after { content: '\2212'; }
.blog-faq__a { color: var(--ps-muted); margin-top: var(--space-3); line-height: var(--leading-normal); }

/* === Box de autor === */
.blog-author { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--ps-surface-2); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-10); }
.blog-author__avatar { flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius-pill); overflow: hidden; background: var(--ps-blue-light); display: flex; align-items: center; justify-content: center; }
.blog-author__avatar img { width: 100%; height: 100%; object-fit: cover; }
.blog-author__initials { font-size: var(--text-2xl); font-weight: 800; color: var(--ps-blue); }
.blog-author__name { font-size: var(--text-lg); font-weight: 700; color: var(--ps-text); text-decoration: none; display: block; }
.blog-author__name:hover { color: var(--ps-blue); }
.blog-author__role { font-size: var(--text-sm); color: var(--ps-muted); }
.blog-author__bio { color: var(--ps-muted); font-size: var(--text-sm); margin-top: var(--space-2); line-height: var(--leading-normal); }

/* === Artigos relacionados === */
.blog-related { margin-top: var(--space-12); }
.blog-related__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-6); }

/* === Página de autor === */
.blog-author-page__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.blog-author-page__heading { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin: var(--space-10) 0 var(--space-6); }

/* === Paginação === */
.blog-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.blog-pagination__link { color: var(--ps-blue); font-weight: 600; text-decoration: none; }
.blog-pagination__info { color: var(--ps-muted); font-size: var(--text-sm); }

/* === CTA strip do blog === */
.blog-cta { border-radius: var(--radius-xl); padding: var(--space-10); margin-top: var(--space-12); text-align: center; }
.blog-cta__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--ps-bg-white); margin-bottom: var(--space-5); }

/* === Calculadora de financiamento === */
.ps-calculadora { max-width: 720px; padding: var(--space-8); margin: var(--space-10) 0; }
.ps-calculadora__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; }
.ps-calculadora__sub { color: var(--ps-muted); font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-6); }
.ps-calculadora__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ps-calculadora__form .ps-form-row { display: flex; flex-direction: column; gap: var(--space-2); }
.ps-calculadora__sistema { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-5); border: 0; padding: 0; }
.ps-calculadora__form > .ps-btn { grid-column: 1 / -1; }
.ps-calculadora__result { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--ps-border); }
.ps-calculadora__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.ps-calculadora__metric { background: var(--ps-surface-2); border-radius: var(--radius-md); padding: var(--space-4); }
.ps-calculadora__label { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ps-muted); }
.ps-calculadora__value { display: block; font-size: var(--text-xl); font-weight: 800; color: var(--ps-text); margin-top: var(--space-1); }
.ps-calculadora__nota { font-size: var(--text-xs); color: var(--ps-subtle); margin-top: var(--space-4); line-height: var(--leading-normal); }

/* === Desktop: sidebar lateral + TOC sticky === */
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .blog-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-6)); }
  .blog-hero__title, .blog-pillar-hero__title, .blog-post__title { font-size: var(--text-5xl); }
}

/* Mobile: calculadora em coluna única */
@media (max-width: 767px) {
  .ps-calculadora__form { grid-template-columns: 1fr; }
  .ps-calculadora__grid { grid-template-columns: 1fr; }
}

/* Acessibilidade: respeita preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  .blog-widget__link, .blog-card__title a { transition: none; }
}

/* === Acessibilidade: foco visível (blog público) === */
a:focus-visible, button:focus-visible, .ps-btn:focus-visible, summary:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(26, 101, 224, .25); border-radius: var(--radius-md);
}