/* ========================================================================================
 * masonry.css - .masonry > figure.masonry__item > img: a photo gallery in a masonry layout
 * (CSS columns, so each photo keeps its own height and the columns pack without gaps).
 * First used on the MNRT page's hands-on section (page 1118845, owner 2026-11-04), as the
 * right-hand column of a .split.
 *
 * Every photo can be cropped to its own shape with inline custom properties on the figure,
 * which is what gives a set of same-ratio photos the masonry rhythm:
 *   --ratio  aspect-ratio of the crop (default 4/3), e.g. 4/5 for a tall tile, 1/1 square;
 *   --pos    object-position of the crop (default center), to keep the subject in frame.
 * ======================================================================================== */

.masonry{columns:2 160px;column-gap:var(--cd-3);min-width:0}
.masonry__item{
	break-inside:avoid;margin:0 0 var(--cd-3);
	border-radius:var(--cd-r-md);overflow:hidden;box-shadow:var(--cd-shadow-1);
}
.masonry__item img{
	display:block;width:100%;height:auto;
	aspect-ratio:var(--ratio,4/3);object-fit:cover;object-position:var(--pos,center);
}

/* --fit: a fixed mosaic that takes the height of the copy beside it instead of its own
 * (MNRT hands-on section, owner 2026-11-04: the free-flowing columns ran far past the text).
 * Two columns by three rows; the third photo spans the left column's lower two rows. Photos
 * are absolutely positioned inside their cells, so they add no height of their own: in a
 * .split the gallery stretches to the text column. Under 900px (the split stacks) it takes
 * a fixed 1:1.1 shape instead. Holds exactly five photos. */
.masonry--fit{
	columns:auto;display:grid;gap:var(--cd-3);
	grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));
	grid-template-areas:"a b" "c d" "c e";
	align-self:stretch;aspect-ratio:1 / 1.1;
}
@media (min-width:900px){.masonry--fit{aspect-ratio:auto;min-height:420px}}
.masonry--fit .masonry__item{position:relative;margin:0;min-height:0}
.masonry--fit .masonry__item:nth-child(1){grid-area:a}
.masonry--fit .masonry__item:nth-child(2){grid-area:b}
.masonry--fit .masonry__item:nth-child(3){grid-area:c}
.masonry--fit .masonry__item:nth-child(4){grid-area:d}
.masonry--fit .masonry__item:nth-child(5){grid-area:e}
.masonry--fit .masonry__item img{position:absolute;inset:0;height:100%;aspect-ratio:auto}