/* hub-popular-v1 (HUB-HOME-POPULAR-1, 2026-10-25): the "Popular on the blog" rules of the niche shared/styles/page/hub-layout-v2.css (Creative hub-layout-v2, Nebula), verbatim, so the hub home band matches the niche homes. Pure CSS. */
/* ---------- NEW "Popular on the blog": the live blog band on top + a 2x2 image-only card grid in the same glass panel ---------- */
.blog-band--popular{display:block}
.blog-band--popular .blog-band__head{display:grid;gap:16px;justify-items:center;text-align:center}
@media (min-width:880px){.blog-band--popular .blog-band__head{grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-items:start;text-align:left;column-gap:32px}}
.popular-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:600px){.popular-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
/* the cards are the live .blog-card (image only; the niche pill and title are drawn in the image, blog-niche-chips-v1 sec 2) */
.popular-grid .blog-card{display:block}
.popular-grid .blog-card__img{display:block;width:100%;height:auto}
@media (max-width:767px){.blog-band--popular .blog-band__btn{width:100%;justify-content:center}}
/* phones/tablets: the cards come straight after the intro, "Read the blog" moves under the grid */
@media (max-width:879px){
  .blog-band--popular{display:flex;flex-direction:column}
  .blog-band--popular .blog-band__head{display:contents}
  .blog-band--popular .blog-band__text{order:1}
  .blog-band--popular .popular-grid{order:2;margin-top:24px}
  .blog-band--popular .blog-band__btn{order:3;margin-top:24px;align-self:stretch}
}