/* ==========================================================================
   Ads grid — shared layout component (Sprint 2)
   Used on homepage, /oglasi, /naselja, /agencije, anywhere a grid of ad
   or content cards is rendered. Default: responsive auto-fill with 280px
   min track. Modifiers force fixed column counts when needed.

   Canonical home is HERE. Page CSS may only override gap/margin in
   context-specific situations; never grid-template-columns.
   ========================================================================== */

.ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(20px, 2.5vw, 32px);
}

/* Fixed 3-column variant — used on /oglasi where the map sidebar sits
   next to the grid and we want predictable card width */
.ads-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

/* Fixed 4-column variant — denser layouts (related ads, neighborhoods grid) */
.ads-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* Tight gap variant — used when grid sits inside a constrained container */
.ads-grid--tight {
    gap: clamp(12px, 1.5vw, 20px);
}

@media (max-width: 960px) {
    .ads-grid--4col {
        grid-template-columns: repeat(3, 1fr);
    }
    .ads-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .ads-grid,
    .ads-grid--3col,
    .ads-grid--4col {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .ads-grid,
    .ads-grid--3col,
    .ads-grid--4col {
        grid-template-columns: 1fr;
    }
}