/**
 * VBP Gallery widget.
 *
 * TEMPLATE FILE: compiled by Elementor into uploads/elementor/css/vbp-gallery.css with the
 * ELEMENTOR_SCREEN_* placeholders replaced by the Site Settings breakpoints.
 * Do not use relative url()s here (images are rendered as <img> from PHP).
 *
 * Figma "A Look Inside Vorlion" (1548px): top row 574 | 309 | 310 | 309 × 330, 16px gaps;
 * below, a tall 456 × 804 photo beside a 2 × 2 grid of 530 × 393 (16px / 18px gaps). Radius 8.
 * Each row keeps the Figma proportions via aspect-ratio, so it scales with the content width.
 */

.vbp-gallery {
	--vbp-gallery-radius: 8px;

	font-family: var(--vbp-font);
}

.vbp-gallery__track,
.vbp-gallery__block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vbp-gallery__top {
	display: grid;
	grid-template-columns: minmax(0, 574fr) minmax(0, 309fr) minmax(0, 310fr) minmax(0, 309fr);
	grid-template-rows: minmax(0, 1fr);
	gap: 16px;
	aspect-ratio: 1548 / 330;
}

.vbp-gallery__bottom {
	display: grid;
	grid-template-columns: minmax(0, 456fr) minmax(0, 530fr) minmax(0, 530fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
	aspect-ratio: 1548 / 804;
}

.vbp-gallery__bottom > .vbp-gallery__tile:first-child {
	grid-row: span 2;
}

.vbp-gallery__tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--vbp-gallery-radius);
	background-color: #0d0d0d;
}

.vbp-gallery__tile picture {
	display: contents;
}

/* Prefixed with .vbp-gallery to beat Elementor's `.elementor img { height: auto; max-width: 100% }`. */
.vbp-gallery .vbp-gallery__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.5s ease;
}

a.vbp-gallery__tile:hover img,
a.vbp-gallery__tile:focus-visible img {
	transform: scale(1.03);
}

a.vbp-gallery__tile:focus-visible {
	outline: 2px solid #c08e2f;
	outline-offset: 3px;
}

/* Dots are only used by the mobile swipe row. */
.vbp-gallery__dots {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.vbp-gallery .vbp-gallery__tile img {
		transition: none;
	}
}

/* Tablet: same mosaic, tighter gaps. */
@media (max-width: 1024px) {
	.vbp-gallery__track,
	.vbp-gallery__block {
		gap: 10px;
	}

	.vbp-gallery__top {
		gap: 10px;
	}

	.vbp-gallery__bottom {
		gap: 10px;
	}
}

/* Mobile (Figma 393px): one swipe row of 241 × 332 portrait cards, centred, with dots. */
@media (max-width: 767px) {
	.vbp-gallery {
		--vbp-gallery-radius: 3.35px;
	}

	.vbp-gallery__track {
		flex-direction: row;
		gap: 26px;
		margin-inline: calc(-1 * var(--vbp-content-padding-left)) calc(-1 * var(--vbp-content-padding-right));
		padding-inline: calc(50% - 120.5px + var(--vbp-content-padding-left));
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vbp-gallery__track::-webkit-scrollbar {
		display: none;
	}

	.vbp-gallery__block,
	.vbp-gallery__top,
	.vbp-gallery__bottom {
		display: contents;
	}

	.vbp-gallery__tile {
		flex: 0 0 241px;
		height: 332px;
		scroll-snap-align: center;
	}

	.vbp-gallery__dots {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 3px;
		margin-top: 24px;
	}

	.vbp-gallery .vbp-gallery__dot,
	.vbp-gallery .vbp-gallery__dot:hover,
	.vbp-gallery .vbp-gallery__dot:focus {
		width: 12px;
		height: 12px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: #d9d9d9;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.vbp-gallery .vbp-gallery__dot.is-active {
		background-color: #c08e2f;
	}
}