/* ===================================================
 * Coro Masonry
 * A small, reusable masonry (Pinterest-style) layout.
 *
 * Markup: a container with the items as its direct
 * children. Add the `coro-masonry` class (or the
 * `data-coro-masonry` attribute for auto-init) and the
 * accompanying coro-masonry.js distributes the items
 * into balanced columns.
 *
 *   <div class="coro-masonry" data-coro-masonry
 *        data-min-col-width="240" data-gap="16">
 *     <figure>…</figure>
 *     <figure>…</figure>
 *     …
 *   </div>
 *
 * Options (all optional, set via data-* or JS opts):
 *   data-columns        Fixed column count.
 *   data-min-col-width  Min column width in px; the
 *                       column count is derived from the
 *                       container width (default 220).
 *   data-gap            Gap between items/columns in px
 *                       (default 16).
 *   data-width-variation
 *                       0 = every column the same width (default);
 *                       higher values (e.g. 0.6) stagger the column
 *                       widths so equal-ratio images render at
 *                       different sizes for a more varied look.
 *   data-fit-height     Present = add columns (shrinking the items)
 *                       until the content fits the available height
 *                       instead of overflowing. Requires the element
 *                       to have a definite height (or data-max-height).
 *   data-max-height     Explicit fit target in px (overrides the
 *                       element's measured height).
 * =================================================== */

.coro-masonry {
	--coro-masonry-gap: 16px;
	display: flex;
	align-items: flex-start;
	gap: var(--coro-masonry-gap);
	width: 100%;
}

.coro-masonry__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--coro-masonry-gap);
	min-width: 0;
}

.coro-masonry__item {
	margin: 0;
}

/* Images flow at their natural aspect ratio — that is
   what gives the layout its uneven, masonry look. */
.coro-masonry__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* Before coro-masonry.js runs, fall back to a simple
   vertical stack so the items are never side-by-side at
   full width. */
.coro-masonry:not(.coro-masonry--ready) {
	flex-direction: column;
}