/**
 * Gallery (V4 / Atomic) widget styles.
 *
 * Plain stylesheet (not atomic base styles) so the editor shows no default
 * values. The template sets --scw-gallery-cols, --scw-gallery-cols-tablet,
 * --scw-gallery-cols-mobile and --scw-gallery-ratio inline. Tablet = up to
 * 1024px, mobile = up to 767px (Elementor's default breakpoints). Per-site hooks, set on the widget or a class:
 *   --scw-gallery-gap      grid gap (default --spacing-s)
 *   --scw-gallery-radius   photo corners (default --radius-s)
 */

.scw-gallery {
	--_cols: var(--scw-gallery-cols, 3);
	display: grid;
	grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
	gap: var(--scw-gallery-gap, var(--spacing-s, 1rem));
	width: 100%;
}

.scw-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--scw-gallery-ratio, 4/3);
	border-radius: var(--scw-gallery-radius, var(--radius-s, 0));
}

/* Two classes to beat Elementor's `.elementor img { height: auto }`. */
.scw-gallery .scw-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Lone last photo spans the row. One rule per column count: :nth-child() takes no variables. */
@media (min-width: 1025px) {
	.scw-gallery--fill-last[data-cols="2"] > .scw-gallery__item:last-child:nth-child(2n + 1),
	.scw-gallery--fill-last[data-cols="3"] > .scw-gallery__item:last-child:nth-child(3n + 1),
	.scw-gallery--fill-last[data-cols="4"] > .scw-gallery__item:last-child:nth-child(4n + 1),
	.scw-gallery--fill-last[data-cols="5"] > .scw-gallery__item:last-child:nth-child(5n + 1),
	.scw-gallery--fill-last[data-cols="6"] > .scw-gallery__item:last-child:nth-child(6n + 1) {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.scw-gallery {
		--_cols: var(--scw-gallery-cols-tablet, var(--scw-gallery-cols, 3));
	}

	.scw-gallery--fill-last[data-cols-tablet="2"] > .scw-gallery__item:last-child:nth-child(2n + 1),
	.scw-gallery--fill-last[data-cols-tablet="3"] > .scw-gallery__item:last-child:nth-child(3n + 1),
	.scw-gallery--fill-last[data-cols-tablet="4"] > .scw-gallery__item:last-child:nth-child(4n + 1),
	.scw-gallery--fill-last[data-cols-tablet="5"] > .scw-gallery__item:last-child:nth-child(5n + 1),
	.scw-gallery--fill-last[data-cols-tablet="6"] > .scw-gallery__item:last-child:nth-child(6n + 1) {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 767px) {
	.scw-gallery {
		--_cols: var(--scw-gallery-cols-mobile, 2);
	}

	.scw-gallery--fill-last[data-cols-mobile="2"] > .scw-gallery__item:last-child:nth-child(2n + 1),
	.scw-gallery--fill-last[data-cols-mobile="3"] > .scw-gallery__item:last-child:nth-child(3n + 1),
	.scw-gallery--fill-last[data-cols-mobile="4"] > .scw-gallery__item:last-child:nth-child(4n + 1),
	.scw-gallery--fill-last[data-cols-mobile="5"] > .scw-gallery__item:last-child:nth-child(5n + 1),
	.scw-gallery--fill-last[data-cols-mobile="6"] > .scw-gallery__item:last-child:nth-child(6n + 1) {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
}

/* Editor only: pending ACF preview and empty states. */
.scw-gallery__notice {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--spacing-s, 1rem);
	border: 1px dashed currentColor;
	border-radius: var(--radius-s, 4px);
	font-size: var(--body-s-size, 0.875rem);
	opacity: 0.7;
}