/* /blog — listagem editorial. Conceito: página de leitura, título largo e uma lista que só existe com artigos reais.
   Lista vazia → nota editorial discreta (sem filtros, busca ou paginação). Sem motion decorativo. */

/* ---------- Hero ---------- */
.bl-hero{padding-block:clamp(48px,6vw,104px) clamp(56px,6vw,96px)}
.bl-hero-in{display:flex;flex-direction:column;gap:24px}
.bl-h1{max-width:22ch;font-size:clamp(2.05rem,1.2rem + 3.1vw,4.25rem);line-height:1.04}
.bl-lead{max-width:44ch}

/* ---------- Barra da listagem ---------- */
.bl-sec{padding-block:clamp(56px,4rem + 2vw,112px) clamp(88px,5rem + 3vw,144px)}
.bl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding-bottom:20px;border-bottom:1px solid var(--ink);margin-bottom:8px}
.bl-bar-t{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.bl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.bl-search{display:flex;align-items:center}
.bl-search input{font:inherit;font-family:var(--f-ui);font-size:.9rem;min-height:40px;width:min(260px,100%);padding:8px 14px;border-radius:10px;border:1px solid transparent;background:var(--paper);color:var(--ink)}
.bl-search input:focus{outline:none;border-color:var(--blue);background:var(--white)}
@media (max-width:760px){.bl-tools{width:100%}.bl-tools .seg{overflow-x:auto;max-width:100%}.bl-search,.bl-search input{width:100%}}

/* ---------- Cards reais ---------- */
.bl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,40px)}
.bl-card{border-bottom:1px solid var(--line-2)}
.bl-card a{display:flex;flex-direction:column;gap:12px;height:100%;padding:28px 0 32px;text-decoration:none}
.bl-card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;background:#E6E6EA;margin-bottom:6px}
.bl-cat{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--blue-text);font-weight:500}
.bl-card-t{font-size:1.3rem;line-height:1.28;letter-spacing:-.018em}
.bl-sum{color:var(--ink-2);font-size:.95rem}
.bl-meta{margin-top:auto;font-family:var(--f-ui);font-size:12.5px;color:var(--ink-3)}
.bl-card a:hover .bl-card-t{color:var(--blue-text)}
.bl-more{display:flex;justify-content:center;margin-top:48px}
.bl-none{padding:40px 0;color:var(--ink-2)}
@media (max-width:980px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bl-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Estado vazio ---------- */
.bl-empty{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px clamp(40px,6vw,96px);padding-top:40px}
.bl-empty-k{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.018em}
.bl-empty-d{color:var(--ink-2);max-width:52ch}
.bl-empty-links{grid-column:2;display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:8px}
@media (max-width:900px){.bl-empty{grid-template-columns:minmax(0,1fr)}.bl-empty-links{grid-column:1}}
.bl-count{font-family:var(--f-ui);font-size:12.5px;color:var(--ink-3);margin-right:auto}
.bl-count:empty{display:none}

/* Quebra do H1 usada só no telefone (ver bloco mobile). */
.bl-mbr{display:none}

/* ================= MOBILE (≤720) — desktop/tablet intocados =================
   Listagem simples: hero curto; barra com filtros em faixa rolável (só existem com volume real) e busca 100%;
   cards em 1 coluna (≤620 já), imagem 3:2, resumo limitado visualmente a 4 linhas (texto continua no DOM);
   "Carregar mais" com toque confortável; estado vazio compacto. */
@media (max-width:720px){
  .bl-hero{padding-block:40px 44px}
  .bl-hero-in{gap:18px}
  .bl-mbr{display:inline}               /* quebra só do telefone: travessão não abre linha */
  .bl-sec{padding-block:44px 72px}
  .bl-bar{padding-bottom:16px}
  .bl-tools{width:100%}
  .bl-tools .seg{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .bl-tools .seg button{flex:none;white-space:nowrap;min-height:44px;scroll-snap-align:start}
  .bl-search,.bl-search input{width:100%}
  .bl-search input{font-size:16px;min-height:46px}
  .bl-card a{padding:22px 0 24px;gap:10px}
  .bl-sum{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
  .bl-more{margin-top:32px}
  .bl-more .btn{width:100%;justify-content:center;min-height:48px}
  .bl-empty{padding-top:28px;row-gap:12px}
  .bl-empty-links{gap:4px 24px;margin-top:4px}
  .bl-empty-links .link{min-height:44px;align-items:center}
}