/* === Responsive overrides (non-destructive) === */

/* Layout container */
.container{max-width:1128px;margin:0 auto;padding:0 24px;}
img{max-width:100%;height:auto;display:block}

/* Blog grid collapse only on phones, keep original card sizes */
@media (max-width: 720px){
  .blog__body{display:block}
  .blog__grid{display:grid;grid-template-columns:1fr;gap:16px}
}

/* Sidebar first on mobile (search + recent) */
@media (max-width: 767px){
  .blog__body{display:flex;flex-direction:column;}
  .blog__body>aside{order:-1;margin-bottom:16px;}
  .blog__body>section{order:0;}
}

/* Recent posts horizontal scroll in sidebar (card width 299px) */
.recent-scroll{display:block}
@media (max-width: 900px){
  .recent-scroll{
    display:flex;
    gap:16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding-bottom:4px;
  }
  .recent-scroll::-webkit-scrollbar{display:none}
  .recent-scroll .recent-card{
    flex:0 0 299px;
    scroll-snap-align:start;
  }
}

/* Footer of blog: per-page select and pagination */
.blog__footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.pp-select{display:flex;align-items:center;gap:8px}
@media (max-width: 767px){
  .blog__footer{flex-direction:column;align-items:stretch;gap:12px}
  .pp-select{order:1;justify-content:flex-start}
  .pagination{order:2;justify-content:center}
}