/* ==========================================================================
   Compact "Explore featured posts" band
   --------------------------------------------------------------------------
   Shrinks the trailing featured-blog band at the very end of the homepage
   (and the localized homepages) into a small, tidy 3-card row. Previously the
   cards used a 32.2rem-tall image with 8rem gaps, which read as a huge block.

   Loaded on:
     - /  ............... public/index.html          (v2 homepage)
     - /{locale} ........ public/<locale>/index.html (injected by
                          scripts/inject-blog-compact-css.mjs)

   Size-only overrides, scoped under .explore-blogs-hero so nothing else is
   affected; works on both the v2 (dark) homepage and the older localized ones.
   ========================================================================== */

.explore-blogs-hero.pad-layout {
  padding-top: 4.5rem;
  padding-bottom: 3rem;
  grid-row-gap: 2.4rem;
  row-gap: 2.4rem;
}

.explore-blogs-hero .explore-blogs-title {
  font-size: 2.2rem;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}

.explore-blogs-hero .explore-blogs-grid,
.explore-blogs-hero .blog-collection-features {
  grid-column-gap: 2.4rem;
  grid-row-gap: 2.4rem;
  gap: 2.4rem;
}

/* Show the FULL post image (they're title-card graphics) so no text gets
   cropped — a fixed aspect box keeps the row tidy, `contain` shows all of it. */
.explore-blogs-hero .blog-post-img {
  height: auto;
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.05);
}
.explore-blogs-hero .blog-post-img .fit-image {
  object-fit: contain;
}

.explore-blogs-hero .blog-title {
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Compact cards show image + title only — no excerpt. */
.explore-blogs-hero .blog-desc { display: none; }

/* Keep the hover "Read blog" pill hidden (matches the default state). */
.explore-blogs-hero .blog-post-more { display: none; }

/* Stack to a single column on phones. */
@media screen and (max-width: 767px) {
  .explore-blogs-hero .blog-collection-features { flex-direction: column; }
}