/* ==========================================================================
   Masonry Wall — layout geometry only.
   Card looks come from assets/css/style.css.
   ========================================================================== */

/* Default and no-JS state for both flows: CSS multi-column.
   Cards keep their own height, nothing is measured, nothing reflows. */
.pc-masonry.pc-flow-columns,
.pc-masonry.pc-flow-rows {
	columns: var(--pc-col-w) var(--pc-cols);
	column-gap: var(--pc-gap);
}

.pc-flow-columns > .pc-card,
.pc-flow-rows > .pc-card {
	display: block;
	width: 100%;
	margin: 0 0 var(--pc-gap);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* Upgraded state: real grid, strict left-to-right order.
   JavaScript adds .is-grid and writes a row span onto each card from the
   ratio it already knows, so there is no wait for images. */
.pc-masonry.pc-flow-rows.is-grid {
	columns: auto;
	column-gap: normal;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--pc-track-w), 1fr));
	grid-auto-rows: 8px;
	column-gap: var(--pc-gap);
	row-gap: 0;
	align-items: start;
}

.pc-flow-rows.is-grid > .pc-card {
	margin: 0;
	grid-row-end: span 30; /* replaced per card by the layout pass */
}