/* ==========================================================================
   Blog Section — Three.js Particle Waves Background
   Sits behind the entire section without changing any existing layout.
   ========================================================================== */

/* ── Blog Section: just needs position:relative + overflow:hidden ────────── */
.blog {
  position: relative;
  overflow: hidden;
}

/* ── Particle Canvas — true full-section background layer ───────────────── */
.blog__particles-wrap {
  position: absolute;
  inset: 0;              /* covers 100% width and 100% height of .blog */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Soft fade at the very bottom so cards sit on a clean edge */
.blog__particles-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--color-bg-secondary));
  pointer-events: none;
}

/* The Three.js renderer fills the wrapper completely */
#blog-particles-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Everything else stays on top of the canvas ─────────────────────────── */
.blog__header,
.blog__grid {
  position: relative;
  z-index: 2;
}