/*
 * Masonry (CSS Grid + row-span) layout for Responsive Filterable Portfolio Pro.
 *
 * CSS Grid does all the actual layout. A small script (js/rfp-justified.js) sets
 * each item's grid-row-end: span N based on its natural height. This gives a true
 * left-to-right masonry (like Pinterest) without absolute positioning, so it cannot
 * overlap or mis-stack the way the old absolute-positioned engine did.
 *
 * Activated by the .rfp-masonry class on the gallery wrapper.
 * --rfp-col-width and --rfp-gap are set inline per-grid by the renderer.
 */

.rfp-masonry .photos {
	width: 100% !important;
}

/* Grid container. grid-auto-rows is the base unit the JS spans over. */
.rfp-masonry .photos .thumbnail_wrap_ {
	position: static !important;
	display: grid !important;
	width: 100% !important;
	height: auto !important;
	grid-template-columns: repeat(auto-fill, minmax(var(--rfp-col-width, 240px), 1fr));
	grid-gap: var(--rfp-gap, 12px);
	grid-auto-rows: 8px; /* base row unit; JS computes span per item */
}

/* Each thumbnail is a grid item. JS sets grid-row-end: span N inline. */
.rfp-masonry a.thumbnail_ {
	position: static !important;
	top: auto !important;
	left: auto !important;
	float: none !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	opacity: 1 !important;
	overflow: hidden;
}

/* Inner box fills the column width; height follows the image naturally. */
.rfp-masonry a.thumbnail_ .thum_div,
.rfp-masonry a.thumbnail_ .figure {
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	display: block !important;
}

/* Image at natural aspect ratio, full column width. Must override .fit_img
 * (which is height:100%;object-fit:cover) so the image drives the tile height. */
.rfp-masonry a.thumbnail_ img,
.rfp-masonry a.thumbnail_ img.fit_img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	object-fit: fill !important;
	display: block !important;
	margin: 0 !important;
	position: static !important;
}

/* Hidden (filtered-out) items take no grid space. */
.rfp-masonry a.thumbnail_.hideThumb {
	display: none !important;
}

/* Caption pinned to the bottom of each tile. */
.rfp-masonry a.thumbnail_ .img_caption_ {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
}

/* Hide until first layout pass to avoid a flash of unstyled stacking. */
.rfp-masonry.rfp-masonry-loading .photos {
	visibility: hidden;
}