/* Klinikar Promo Cards Masonry Patch — CSS override only.
   This file sits on top of the original `kpc.css` and changes the wall to a
   Pinterest-like masonry layout without gaps. It does NOT touch other styles. */

/* Desktop: 4 masonry columns */
.kpc-wall-grid{
  display:block !important;          /* override original display:grid */
  column-count:4;
  column-gap:20px;
  padding:20px;
}
.kpc-wall-item{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  -moz-column-break-inside:avoid;
  margin:0 0 20px 0;                 /* replaces grid gap */
  width:100%;
}

/* Tablet: 2 columns */
@media (max-width:1024px) and (min-width:769px){
  .kpc-wall-grid{ column-count:2; }
}

/* Mobile: go back to horizontal swipe (no columns) */
@media (max-width:768px){
  .kpc-wall-grid{
    column-count:initial;
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:15px;
    padding:15px;
    margin:0 -15px;
    -webkit-overflow-scrolling:touch;
  }
  .kpc-wall-grid::-webkit-scrollbar{ display:none; }
  .kpc-wall-item{
    break-inside:initial;
    -webkit-column-break-inside:auto;
    -moz-column-break-inside:auto;
    flex:0 0 calc(100% - 30px);
    scroll-snap-align:start;
    margin:0;
  }
  .kpc-swipe-indicator{ display:flex; }
}