/*
 * mod_grid_card — masonry grid style
 * (C) 2026 Morrison Web Design
 * License: GNU General Public License version 2 or later; see LICENSE.txt
 *
 * The Bootstrap row becomes a CSS grid with the module's column counts
 * (--mgc-cols / -md / -lg) and gutter (--mgc-gap) from the root element.
 * Cards keep their natural height (align-self: start). Until masonry.js has
 * measured them the grid is plain rows; .is-masonry then switches to tiny auto
 * rows and each card spans as many as its height needs (set inline by JS).
 */
.mod-grid-card .mgc-masonry {
    display: grid;
    grid-template-columns: repeat(var(--mgc-cols, 1), minmax(0, 1fr));
    gap: var(--mgc-gap, 1rem);
    margin: 0;
    align-items: start;
}
@media (min-width: 768px) {
    .mod-grid-card .mgc-masonry { grid-template-columns: repeat(var(--mgc-cols-md, 2), minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .mod-grid-card .mgc-masonry { grid-template-columns: repeat(var(--mgc-cols-lg, 3), minmax(0, 1fr)); }
}
/* Undo Bootstrap's row/col sizing and gutters: the grid gap does the spacing */
.mod-grid-card .mgc-masonry > .card-item {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    align-self: start;
}
.mod-grid-card .mgc-masonry .card-item__inner { height: auto; }

/* Measured: 1px rows, so a card's span is its height in px (plus the gaps it crosses) */
.mod-grid-card .mgc-masonry.is-masonry {
    grid-auto-rows: 1px;
    grid-auto-flow: row dense;
    row-gap: 0;
}