/**
 * BBP Gallery widget styles.
 *
 * Masonry mode reproduces the Figma reference's exact proportions using
 * two stacked flex rows per group of 9 photos (not CSS `columns` masonry,
 * which flows top-to-bottom per column rather than left-to-right like the
 * reference): a 4-photo strip (flex-basis ratio 616:332:332:332, measured
 * off the reference), then a row of [1 tall column, 2 stacked-pair
 * columns] (flex-basis ratio 490:569:569). The group repeats every 9
 * images. Regular mode is a plain uniform CSS grid.
 *
 * Deliberately has NO hardcoded outer padding of its own: Elementor's
 * native Advanced > Padding control (which targets
 * .elementor-widget-container) is the only source of outer spacing.
 */

.elementor-widget-bbp-gallery {
	width: 100%;
}

.bbp-gallery-section {
	width: 100%;
	max-width: var(--bbp-content-width);
	margin: 0 auto;
	text-align: center;
}

.bbp-gallery-heading {
	font-family: var(--bbp-heading-font);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	color: var(--bbp-text-white);
	text-transform: uppercase;
	margin: 0 0 40px;
}

.bbp-gallery-heading .bbp-text-gold {
	color: var(--bbp-gold);
}

.bbp-gallery-grid {
	--bbp-gallery-gap: 16px;
	text-align: left;
}

.bbp-gallery-item {
	overflow: hidden;
	border-radius: 8px;
}

.bbp-gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- masonry mode --- */

.bbp-gallery-grid--masonry {
	--bbp-gallery-top-h: 180px;
	--bbp-gallery-masonry-h: 440px;
	display: flex;
	flex-direction: column;
	gap: var(--bbp-gallery-gap);
}

.bbp-gallery-row {
	display: flex;
	gap: var(--bbp-gallery-gap);
}

.bbp-gallery-row--top {
	height: var(--bbp-gallery-top-h);
}

.bbp-gallery-row--top .bbp-gallery-item {
	flex: 616 616 0;
}

.bbp-gallery-row--top .bbp-gallery-item:nth-child(2),
.bbp-gallery-row--top .bbp-gallery-item:nth-child(3),
.bbp-gallery-row--top .bbp-gallery-item:nth-child(4) {
	flex: 332 332 0;
}

.bbp-gallery-row--masonry {
	height: var(--bbp-gallery-masonry-h);
}

.bbp-gallery-col {
	display: flex;
	flex-direction: column;
	gap: var(--bbp-gallery-gap);
}

.bbp-gallery-col--tall {
	flex: 490 490 0;
}

.bbp-gallery-col--tall .bbp-gallery-item {
	flex: 1 1 auto;
}

.bbp-gallery-col--stack {
	flex: 569 569 0;
}

.bbp-gallery-col--stack .bbp-gallery-item {
	flex: 1 1 0;
	min-height: 0;
}

/* --- regular grid mode --- */

.bbp-gallery-grid--regular {
	--bbp-gallery-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--bbp-gallery-cols), 1fr);
	grid-auto-rows: 260px;
	gap: var(--bbp-gallery-gap);
}

.bbp-gallery-grid--regular .bbp-gallery-item {
	width: 100%;
	height: 100%;
}

/* --- responsive --- */

@media (max-width: 900px) {
	.bbp-gallery-heading {
		font-size: 30px;
	}

	/* !important: this widget's "Top Row Height" / "Masonry Row Height"
	   Style controls also set these same custom properties, compiled by
	   Elementor into a more specific `.elementor-element-{id}
	   .bbp-gallery-grid--masonry` rule that isn't itself scoped to any
	   breakpoint — it would otherwise silently keep the desktop height
	   (e.g. 440px) active here, leaving the now-shorter stacked mobile
	   content stranded in a much taller row with a big empty gap below
	   it. */
	.bbp-gallery-grid--masonry {
		--bbp-gallery-top-h: 220px !important;
		--bbp-gallery-masonry-h: auto !important;
	}

	.bbp-gallery-row--top {
		flex-wrap: wrap;
		height: auto;
	}

	.bbp-gallery-row--top .bbp-gallery-item {
		flex: 1 1 calc(50% - var(--bbp-gallery-gap) / 2);
		height: var(--bbp-gallery-top-h);
	}

	.bbp-gallery-row--masonry {
		flex-direction: column;
	}

	.bbp-gallery-col--tall,
	.bbp-gallery-col--stack {
		flex: none;
	}

	.bbp-gallery-col--tall .bbp-gallery-item {
		height: 260px;
	}

	.bbp-gallery-col--stack {
		flex-direction: row;
	}

	.bbp-gallery-col--stack .bbp-gallery-item {
		height: 180px;
	}

	.bbp-gallery-grid--regular {
		--bbp-gallery-cols: 2 !important;
	}
}

@media (max-width: 560px) {
	.bbp-gallery-row--top .bbp-gallery-item {
		flex-basis: 100%;
	}

	.bbp-gallery-col--stack {
		flex-direction: column;
	}

	/* The desktop rule's `flex: 1 1 0` sets flex-basis:0, which is fine
	   as a main-axis size in the row direction (900px, above) but becomes
	   the *height* once this column flips to flex-direction:column here
	   — overriding the explicit 180px height and collapsing both stacked
	   images toward zero, since there's no definite parent height for a
	   flex-grow item to expand into. Reset to a plain auto-sized box so
	   the explicit height actually governs. */
	.bbp-gallery-col--stack .bbp-gallery-item {
		flex: 0 0 auto;
	}

	.bbp-gallery-grid--regular {
		--bbp-gallery-cols: 1 !important;
	}
}