/* ==========================================================================
   AE Creative — Blog listing page components
   Introduced for pages/blog.html: the search/filter/sort toolbar and the
   article card grid. Everything here is built from existing design tokens
   (colors, radii, shadows, ease, fonts) — no new colors, no new framework.
   Section padding reuses spacing.css's var(--space-section-y*) tokens, the
   filter pill/search input reuse the same recipe as portfolio.css/
   footer.css's newsletter-input. Pairs with assets/js/blog-data.js and
   assets/js/blog-page.js.
   ========================================================================== */

.blog-section{padding:var(--space-section-y) var(--space-section-x);background:var(--bg)}
.blog-section__head{text-align:center;margin-bottom:44px;max-width:640px;margin-inline:auto}

/* ---- Toolbar: search + category filter + sort ---- */
.blog-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:36px;
}
.blog-toolbar__search{flex:1;min-width:220px;max-width:360px}
.blog-toolbar__search input{width:100%}
.blog-filter{display:flex;flex-wrap:wrap;gap:10px}
.blog-filter__btn{
  padding:11px 22px;border-radius:99px;border:1px solid var(--line-2);
  background:var(--surface-tint);color:var(--text-2);font-family:var(--ff-ar);
  font-weight:600;font-size:14px;cursor:pointer;
  transition:all .25s var(--ease);
}
.blog-filter__btn:hover,.blog-filter__btn:focus-visible{
  border-color:var(--brand-line);color:var(--text);background:var(--brand-soft);
}
.blog-filter__btn.is-active{
  background:var(--grad);border-color:transparent;color:#fff;box-shadow:var(--e-glow);
}
.blog-toolbar__sort{
  padding:11px 18px;border-radius:99px;border:1px solid var(--line-2);
  background:var(--surface-tint);color:var(--text-2);font-family:var(--ff-ar);
  font-weight:600;font-size:14px;cursor:pointer;transition:border-color .25s var(--ease);
}
.blog-toolbar__sort:hover,.blog-toolbar__sort:focus-visible{border-color:var(--brand-line)}

/* ---- Article grid + card ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.blog-empty{grid-column:1/-1;text-align:center;color:var(--text-3);padding:40px 0;font-size:14.5px}

.blog-card{
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;display:flex;flex-direction:column;
  transition:opacity .25s var(--ease),transform .25s var(--ease),border-color .3s var(--ease);
}
.blog-card:hover,.blog-card:focus-within{border-color:var(--brand-line)}

.blog-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.blog-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.blog-card__img.is-broken{opacity:0}
.blog-card:hover .blog-card__img,.blog-card:focus-within .blog-card__img{transform:scale(1.04)}
.blog-card__badge{
  position:absolute;top:14px;inset-inline-start:14px;padding:6px 13px;border-radius:99px;
  background:rgba(9,9,12,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;color:#fff;
}

.blog-card__body{padding:22px;display:flex;flex-direction:column;flex:1}
.blog-card__meta{
  display:flex;align-items:center;gap:8px;font-family:var(--ff-mono);
  font-size:11.5px;letter-spacing:.04em;color:var(--text-3);margin-bottom:10px;
}
.blog-card__dot{opacity:.6}
.blog-card__title{font-family:var(--ff-display);font-weight:600;font-size:17px;line-height:1.45;margin:0 0 8px}
.blog-card__title a{transition:color .2s var(--ease)}
.blog-card__title a:hover,.blog-card__title a:focus-visible{color:var(--brand)}
.blog-card__excerpt{margin:0 0 18px;font-size:13.5px;line-height:1.7;color:var(--text-3);flex:1}
.blog-card__link{
  display:inline-flex;align-items:center;font-family:var(--ff-ar);font-weight:600;
  font-size:13.5px;color:var(--brand);transition:color .2s var(--ease);
}
.blog-card__link:hover,.blog-card__link:focus-visible{color:var(--text)}

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