/* Info scroller: show 3–4 visible cards (rows) depending on width */
:root { --info-card-h: 360px; --info-gap: 24px; }

/* Make cards uniform height for stable layout */
.post-card { height: var(--info-card-h); display:flex; flex-direction:column; overflow:hidden; }
.post-card img { height: 55%; width: 100%; object-fit: cover; }
.post-card .body { flex:1; overflow:hidden; }
.post-card .body p { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* Scroller height presets */
.info-scroller{ overflow:auto; padding-right:6px; }
@media (min-width: 980px){   /* 3 columns → 1 row visible (3 cards) */
  .info-scroller{ max-height: calc(var(--info-card-h) + var(--info-gap)); }
}
@media (min-width: 640px) and (max-width: 979px){ /* 2 columns → ~2 rows (≈4 cards) */
  .info-scroller{ max-height: calc(2 * var(--info-card-h) + var(--info-gap)); }
}
@media (max-width: 639px){   /* 1 column → 3 rows (3 cards) */
  .info-scroller{ max-height: calc(3 * var(--info-card-h) + 2 * var(--info-gap)); }
}

/* Skeleton keeps same height as real cards */
.skel .img{ height:55%; }
.skel .body{ height:45%; }