/*
 * Standalone Masonry shortcode styles for Responsive Filterable Portfolio Pro.
 * Fully self-contained; no dependency on the classic grid CSS.
 */

.rfp-masonry-app {
	width: 100%;
	box-sizing: border-box;
}
.rfp-masonry-app *,
.rfp-masonry-app *::before,
.rfp-masonry-app *::after {
	box-sizing: border-box;
}

/* ---- Filter pills ---- */
.rfp-masonry-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 0 20px;
}
.rfp-masonry-filter {
	border: 1px solid #e2e2e6;
	background: #fff;
	color: #444;
	font-size: 14px;
	line-height: 1;
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s ease;
}
.rfp-masonry-filter:hover {
	border-color: #c9c9d1;
	background: #f7f7f9;
}
.rfp-masonry-filter.is-active {
	background: #4f46e5;
	border-color: #4f46e5;
	color: #fff;
	box-shadow: 0 2px 8px rgba(79,70,229,.25);
}

/* ---- Masonry grid (CSS Grid + JS row-span) ---- */
.rfp-masonry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--rfp-col-width, 240px), 1fr));
	/* Horizontal gap only. Vertical spacing is applied as item margin so the
	 * row-span math can use pure 1px rows (precise, tiles align cleanly). */
	grid-column-gap: var(--rfp-gap, 12px);
	column-gap: var(--rfp-gap, 12px);
	grid-row-gap: 0;
	row-gap: 0;
	grid-auto-rows: 1px; /* fine base unit so row-span heights are precise and tiles align */
	align-items: start;
}

/* Item wrapper is the grid cell; JS sets grid-row-end on it.
 * margin-bottom provides the vertical gutter (kept out of the row-span math). */
.rfp-masonry-item-wrap {
	overflow: hidden;
	margin-bottom: var(--rfp-gap, 12px);
}

/* Few-items mode: when a filter leaves only enough items for a single row,
 * show them as a tidy equal-height row instead of a ragged masonry column set. */
.rfp-masonry-grid.rfp-row-mode {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: var(--rfp-gap, 12px);
}
.rfp-masonry-grid.rfp-row-mode .rfp-masonry-item-wrap {
	flex: 1 1 var(--rfp-col-width, 240px);
	margin-bottom: 0;
	height: var(--rfp-col-width, 240px);
}
.rfp-masonry-grid.rfp-row-mode .rfp-masonry-item {
	height: 100%;
}
.rfp-masonry-grid.rfp-row-mode .rfp-masonry-imgbox {
	height: 100%;
}
.rfp-masonry-grid.rfp-row-mode .rfp-masonry-imgbox img {
	height: 100%;
	object-fit: cover;
}
.rfp-masonry-item-wrap.rfp-hidden {
	display: none !important;
}

/* The tile (link) */
.rfp-masonry-item {
	display: block;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #f0f0f3;
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}
.rfp-masonry-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0,0,0,.16);
}

.rfp-masonry-imgbox {
	display: block;
	position: relative;
	line-height: 0;
	overflow: hidden;
}
.rfp-masonry-imgbox img {
	display: block;
	width: 100%;
	height: auto;      /* natural height = real masonry */
	border: 0;
	margin: 0;
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
	will-change: transform;
}
.rfp-masonry-item:hover .rfp-masonry-imgbox img {
	transform: scale(1.07);
}

/* Soft overlay that fades in on hover. */
.rfp-masonry-imgbox::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0);
	transition: background .35s ease;
	pointer-events: none;
}
.rfp-masonry-item:hover .rfp-masonry-imgbox::after {
	background: rgba(0,0,0,.22);
}

/* Video play badge (sits above the overlay). */
.rfp-masonry-playicon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-radius: 50%;
	background: rgba(0,0,0,.55);
	z-index: 2;
	transition: transform .3s ease, background .3s ease;
}
.rfp-masonry-item:hover .rfp-masonry-playicon {
	transform: scale(1.12);
	background: rgba(0,0,0,.7);
}
.rfp-masonry-playicon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

/* Caption overlay — slides up and fades in on hover. */
.rfp-masonry-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 14px 12px 12px;
	font-size: 13px;
	color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
	transform: translateY(100%);
	opacity: 0;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.rfp-masonry-item:hover .rfp-masonry-caption {
	transform: translateY(0);
	opacity: 1;
}

/* Touch devices can't hover — keep captions visible there. */
@media (hover: none) {
	.rfp-masonry-caption {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Loading state: hide grid until first layout pass to avoid a stacked flash. */
.rfp-masonry-app.rfp-masonry-loading .rfp-masonry-grid {
	visibility: hidden;
}

/* ============================================================
 * JUSTIFIED layout (flexbox + JS-set widths from aspect ratio)
 * Shares the filter pills, tile, hover, caption styles above.
 * ============================================================ */
.rfp-justified-app {
	width: 100%;
	box-sizing: border-box;
}
.rfp-justified-app *,
.rfp-justified-app *::before,
.rfp-justified-app *::after { box-sizing: border-box; }

/* Reuse the same filter pill styles as masonry. */
.rfp-justified-app .rfp-masonry-filters { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 20px; }

.rfp-justified-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rfp-gap, 10px);
}

/* Each cell: fixed target height, grow to fill the row width. JS sets width. */
.rfp-justified-grid .rfp-masonry-item-wrap {
	height: var(--rfp-row-height, 250px);
	flex-grow: 1;
	position: relative;
	overflow: hidden;
}
.rfp-justified-grid .rfp-masonry-item-wrap.rfp-hidden { display:none !important; }

/* The tile fills its flex cell. */
.rfp-justified-grid .rfp-masonry-item {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background: #f0f0f3;
	text-decoration: none;
}
.rfp-justified-grid .rfp-masonry-imgbox {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	line-height: 0;
}
/* Crop to fill the row (flush edges). */
.rfp-justified-grid .rfp-masonry-imgbox img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	vertical-align: middle;
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.rfp-justified-grid .rfp-masonry-item:hover .rfp-masonry-imgbox img { transform: scale(1.06); }

/* Overlay + caption reuse masonry visuals. */
.rfp-justified-grid .rfp-masonry-imgbox::after {
	content:""; position:absolute; inset:0; background:rgba(0,0,0,0);
	transition:background .35s ease; pointer-events:none;
}
.rfp-justified-grid .rfp-masonry-item:hover .rfp-masonry-imgbox::after { background:rgba(0,0,0,.22); }

/* Hide until first layout pass. */
.rfp-justified-app.rfp-justified-loading .rfp-justified-grid { visibility: hidden; }

/* ---- Pagination (server-side AJAX, shared by masonry & justified) ---- */
.rfp-masonry-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 22px 0 4px;
}
.rfp-masonry-page {
	min-width: 38px;
	padding: 8px 12px;
	border: 1px solid #e2e2e6;
	background: #fff;
	color: #444;
	font-size: 14px;
	line-height: 1;
	border-radius: 8px;
	cursor: pointer;
	transition: all .15s ease;
}
.rfp-masonry-page:hover { border-color: #c9c9d1; background: #f7f7f9; }
.rfp-masonry-page.is-current {
	background: #4f46e5;
	border-color: #4f46e5;
	color: #fff;
	cursor: default;
}

/* Keep body min-height stable during AJAX swap to avoid scroll jump. */
.rfp-masonry-body { position: relative; min-height: 40px; }