/* Blog preview carousel, mobile only.
   Above 520px the posts stay a grid (styles.css). At <=520px, where they would
   stack into one long column, the track becomes a swipeable carousel with one
   card at a time. Arrows and dots (.pc-*) are injected by blog-carousel.js and
   styled by pricing-carousel.css, which is already loaded on this page.
   Loaded after styles.css so the flex track overrides the 1-column grid. */

@media (max-width: 520px){
  #articles .blog-grid{
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -4px;      /* let a card breathe to the edges */
    padding: 2px 4px 4px;
  }
  #articles .blog-grid::-webkit-scrollbar{ display: none; }
  #articles .blog-grid > .post-card{
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
  }
}