/* ==========================================================================
   BLOG LISTING PAGE STYLES
   ========================================================================== */

.blog-hero{
  position: relative; overflow:hidden; text-align:center;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
  background: radial-gradient(55% 60% at 50% 0%, rgba(228,168,132,.28), transparent 65%), var(--cream);
}
.blog-hero .eyebrow{ justify-content:center; }
.blog-hero h1{ margin-top:.6rem; }
.blog-hero p.lede{ max-width: 54ch; margin-inline:auto; margin-top: 1rem; font-size: 1.05rem; }

.blog-toolbar{
  max-width: var(--container); margin-inline:auto; padding-inline: var(--pad);
  display:flex; flex-wrap:wrap; gap: 1rem; align-items:center; justify-content:space-between;
  margin-top: 2rem;
}
.blog-search{ position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.blog-search input{
  width:100%; padding: .85em 1.2em .85em 2.6em; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line); background: var(--paper); font-size: .92rem;
}
.blog-search input:focus{ outline:none; border-color: var(--rose-400); box-shadow: 0 0 0 4px rgba(196,108,116,.14); }
.blog-search svg{ position:absolute; left: .9em; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--ink-faint); }

.blog-filters{ display:flex; flex-wrap:wrap; gap: .6rem; }
.filter-pill{
  padding: .55em 1.2em; border-radius: var(--radius-pill); border: 1.5px solid var(--line);
  background: var(--paper); font-size: .84rem; font-weight: 700; color: var(--ink-soft);
  transition: all .3s var(--ease);
}
.filter-pill:hover{ border-color: var(--rose-300); }
.filter-pill.is-active{ background: var(--rose-500); border-color: var(--rose-500); color: #fff; }

.blog-count{
  max-width: var(--container); margin-inline:auto; padding-inline: var(--pad);
  margin-top: 1.6rem; font-size: .86rem; color: var(--ink-faint); font-weight: 600;
}

.blog-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.7rem;
  max-width: var(--container); margin-inline:auto; padding: 2rem var(--pad) 1rem;
}
.blog-grid .post-card.is-hidden{ display:none; }
.blog-grid .post-card{ opacity:0; transform: translateY(16px); animation: cardIn .6s var(--ease) forwards; }
@keyframes cardIn{ to{ opacity:1; transform:translateY(0); } }

.blog-empty{
  display:none; text-align:center; padding: 4rem 1rem; color: var(--ink-faint);
}
.blog-empty.is-visible{ display:block; }
.blog-empty svg{ width:48px; height:48px; color: var(--rose-300); margin-bottom:1rem; }

@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){
  .blog-grid{ grid-template-columns: 1fr; }
  .blog-toolbar{ flex-direction:column; align-items:stretch; }
  .blog-search{ max-width:none; }
}