/* ==========================================================================
   Blog page (blog.html)
   Depends on: variables.css, base.css, header.css, footer.css, style.css
   Cards reuse the home page .blog-card / .blog__grid (style.css);
   "Load more": .load-more (style.css) + js/load-more.js
   ========================================================================== */

.blog-hero .hero__title {
  line-height: 100px;
}

/* desktop decorations (the sparkle stays on phones, placed in style.css) */
@media (min-width: 1201px) {
  .blog-hero .hero__cursor {
    top: 85px;
    left: 294px;                 /* Figma: 194px inside the 100px-inset text box */
  }

  .blog-hero .hero__sparkle {
    top: 32px;
    right: 402px;
  }
}

/* the grid sits on white, covering the hero grid lines (as in Figma) */
.posts {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin-top: -40px;             /* Figma: 60px from the hero text, page gap is 100px */
  background: var(--color-white);
}

.posts .blog__grid {
  width: 100%;
}

@media (max-width: 1200px) {
  .blog-hero .hero__title {
    line-height: var(--lh-display);
  }
}

@media (max-width: 768px) {
  .posts {
    margin-top: -44px;           /* Figma mobile: 20px from the hero text */
    gap: 20px;
  }

  /* Figma mobile keeps the 300px images (the home page shrinks them) */
  .posts .blog-card__image {
    height: 300px;
  }

  .posts .blog-card__title {
    font-size: var(--fs-md);
    line-height: var(--lh-md);
  }
}