/* =====================================================================
   blog.css · Dr. Fabio Salomão
   Página Blog: banner editorial (duas colunas), filtros por público e
   listagem de matérias em cards. Universo editorial/educacional em fundos
   claros (Areia Claro 01, Marfim), detalhes em Azul Névoa. Cor só via var().
   ===================================================================== */

/* ===== 1. Banner de abertura (Areia Claro 01, duas colunas) ===== */
.blog-hero{position:relative;overflow:hidden;background:var(--areia-claro-01);border-bottom:1px solid var(--areia-escuro-01);padding:150px 0 110px}
.blog-hero .wrap{position:relative;z-index:1}
.blog-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.blog-hero-copy{max-width:760px}
.blog-hero h1{margin-bottom:24px;max-width:12ch}
.blog-hero .lead{max-width:58ch;color:var(--grafite);margin-bottom:18px}
.blog-hero .support{max-width:58ch;color:var(--azul-profundo);margin-bottom:0;font-size:clamp(16px,1.1vw,18px);line-height:1.6}

/* mancha Azul Névoa de baixa opacidade */
.blog-hero .blob-nevoa{position:absolute;width:540px;height:540px;top:-170px;right:-150px;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--nevoa),transparent 68%);opacity:.5;filter:blur(2px);pointer-events:none}

/* foto: moldura marfim + bloco deslocado Azul Névoa */
.blog-hero-media{position:relative}
.blog-hero-media .frame{position:relative;aspect-ratio:4/3;border:6px solid var(--marfim);border-radius:var(--radius-img);box-shadow:var(--shadow-img);background:var(--nevoa)}
.blog-hero-media .frame .img-reveal{border-radius:calc(var(--radius-img) - 6px);height:100%}
.blog-hero-media .frame .media-ph{height:100%;min-height:0}
.blog-hero-media::before{content:"";position:absolute;inset:26px -26px -26px 26px;background:var(--nevoa);border-radius:var(--radius-img);z-index:-1;opacity:.7}

/* ===== 2. Listagem de matérias (Areia Claro 01) ===== */
.blog-list{background:var(--areia-claro-01)}
.blog-list-head{margin-bottom:32px}
.blog-list-head h2{color:var(--azul-profundo);margin-bottom:14px}
.blog-list-head p{color:var(--grafite);max-width:60ch}

/* Filtros por público */
.blog-filters{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:44px}
.blog-filters-label{font-weight:700;font-size:14px;color:var(--azul-profundo);letter-spacing:.02em}
.blog-filters .filters{gap:10px}
.blog-filters .filter-chip:hover{background:var(--areia);border-color:var(--azul-claro-01)}
.blog-filters .filter-chip[aria-pressed="true"]:hover{background:var(--azul-escuro-01)}

/* Grade de matérias: 2 colunas no desktop */
.blog-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}

/* ===== Card de matéria ===== */
.post-card{position:relative;background:var(--marfim);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.post-card[hidden]{display:none}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}

.post-card-media-link{display:block}
.post-card-media{position:relative;aspect-ratio:16/9;overflow:hidden}
.post-card-media .media-ph{height:100%;min-height:0;border-radius:0}
.post-demo-badge{position:absolute;top:16px;left:16px;z-index:4;font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.02em;color:var(--marfim);background:var(--azul-profundo);padding:8px 14px;border-radius:var(--radius-pill);box-shadow:var(--shadow-btn)}

.post-card-body{padding:28px 30px 30px;display:flex;flex-direction:column;gap:16px;flex:1}
.post-card-body .tags{gap:8px}
.post-card-body h3{color:var(--azul-profundo);font-size:clamp(22px,2vw,27px);line-height:1.22;margin:0}
.post-card-body h3 a{color:inherit}
.post-card-body h3 a:hover{color:var(--azul-escuro-01)}
.post-card-body > p{color:var(--grafite);font-size:15.5px;line-height:1.5;margin:0;max-width:52ch}
.post-card-cta{align-self:flex-start;margin-top:4px}

/* ===== Estado vazio elegante (convive com o card de demonstração) ===== */
.blog-empty{background:var(--marfim);border:1px dashed var(--areia-escuro-01);border-radius:var(--radius-card);padding:40px 38px;display:flex;flex-direction:column;justify-content:center;align-self:stretch;text-align:left}
.blog-empty .be-mark{display:block;width:38px;height:3px;border-radius:var(--radius-pill);background:var(--nevoa);margin-bottom:22px}
.blog-empty h3{color:var(--azul-profundo);font-size:clamp(21px,1.9vw,26px);margin-bottom:14px}
.blog-empty p{color:var(--grafite);font-size:16px;line-height:1.6;margin:0;max-width:46ch}

/* ===== Responsivo ===== */
@media (max-width:980px){
  .blog-hero{padding:132px 0 88px}
  .blog-hero-grid{grid-template-columns:1fr;gap:48px}
  .blog-hero-media{max-width:520px}
  .blog-hero-media::before{inset:20px -20px -20px 20px}
}
@media (max-width:760px){
  .blog-grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:560px){
  .blog-hero .blob-nevoa{width:360px;height:360px;top:-120px;right:-120px}
  .blog-filters{gap:12px}
  /* filtros em rolagem horizontal no mobile, boa área de toque */
  .blog-filters .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:4px}
  .blog-filters .filters::-webkit-scrollbar{display:none}
  .blog-filters .filter-chip{flex:none;white-space:nowrap}
  .post-card-body{padding:24px 22px 26px}
  .post-card-cta{width:100%}
}