/* ============================================================================
   BLOG PAGE (blog.html) — reuses .shop__head / .cat-filter (catalog.html) and
   .post-card (about.html's news carousel) as-is; only the wrapper, the
   featured "hero" card and the grid are new here.
   Header, footer and .reviews reuse the rules above unchanged.
   ============================================================================ */
.blog{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
  margin-block-start:24px;
  padding-inline: var(--gutter);
}
.blog-posts{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}
/* ---------- featured post ---------- */
.post-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  width:100%;
  min-height:342px;
  border-radius:12px;
  overflow:hidden;
}
.post-hero__media{ position:absolute; inset:0; z-index:0; }
.post-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-hero__scrim{ position:absolute; inset:0; background:rgba(20,22,36,.4); }
.post-hero__content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:start;
  text-align:start;
  width:100%;
  padding:16px;
}
.post-hero__heading{ display:flex; flex-direction:column; gap:8px; align-items:start; width:100%; }
.post-hero__title{ font-size: var(--fs-h2); font-weight:600; line-height:1.2; color: var(--color-white); width:100%; }
.post-hero__title a{ color:inherit; }
.post-hero__title a:hover{ text-decoration:underline; }
.post-hero__date{ font-size: var(--fs-quote); line-height:1.2; color: var(--color-white); }
/* ---------- post grid: same cards, catalog-grid's own column steps ---------- */
.blog-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:24px;
  width:100%;
}
/* ============================================================
   BLOG — ≥ 600px
   ============================================================ */
@media (min-width: 600px){
.blog-grid{ gap:32px; }
}
/* ============================================================
   BLOG — ≥ 768px
   ============================================================ */
@media (min-width: 768px){
.blog-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
   BLOG — ≥ 992px
   ============================================================ */
@media (min-width: 992px){
.blog{ gap:40px; }
.blog-posts{ gap:32px; }
.post-hero{ min-height:600px; }
.post-hero__content{ padding:40px; gap:16px; }
.post-hero__heading{ gap:16px; }
.post-hero__title{ max-width:836px; }
}
/* ============================================================
   BLOG — ≥ 1200px : three-column grid
   ============================================================ */
@media (min-width: 1200px){
.blog-grid{ grid-template-columns: repeat(3, 1fr); gap:32px; }
}