/**
 * Campagnoni Product Gallery
 *
 * Desktop: vertical thumb strip on the left + main image on the right.
 *          La altura del strip de thumbs la sincroniza el JS con la altura
 *          de la imagen principal (ver product-gallery.js).
 * Mobile : main image on top + horizontal thumb strip below (CSS-driven).
 *
 * Todos los valores son CSS variables, override desde Elementor → Site
 * Settings → Custom CSS si hace falta.
 */

.campagnoni-gallery {
	/* Tunables */
	--cg-gap: 20px;
	--cg-thumb-size: 90px;
	--cg-thumb-gap: 12px;
	--cg-thumb-radius: 10px;
	--cg-thumb-border-color: #e5e7eb;
	--cg-thumb-border-color-active: #fb912f;
	--cg-thumb-border-width: 1px;
	--cg-thumb-border-width-active: 2px;
	--cg-main-radius: 12px;
	--cg-main-bg: #f4f4f5;
	--cg-main-padding: 12px;

	display: grid;
	grid-template-columns: var(--cg-thumb-size) 1fr;
	gap: var(--cg-gap);
	width: 100%;
	align-items: start;
}

/* === Main image area === */
.campagnoni-gallery__main {
	aspect-ratio: 1 / 1;
	background: var(--cg-main-bg);
	border-radius: var(--cg-main-radius);
	overflow: hidden;
	min-width: 0;
	width: 100%;
}

.campagnoni-gallery__main-swiper {
	width: 100%;
	height: 100%;
}

.campagnoni-gallery__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cg-main-padding);
	box-sizing: border-box;
}

.campagnoni-gallery__slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* === Thumbnails === */
.campagnoni-gallery__thumbs {
	min-width: 0;
	overflow: hidden;
	/* La altura la fija el JS para que coincida con la imagen principal.
	   Acá no se setea nada, así no compite con el inline style del JS. */
}

.campagnoni-gallery__thumbs-swiper {
	width: 100%;
	height: 100%;
}

/* Cada thumb es un cuadrado del tamaño definido en la variable. */
.campagnoni-gallery__thumb {
	width: var(--cg-thumb-size) !important;
	height: var(--cg-thumb-size) !important;
	background: var(--cg-main-bg);
	border-radius: var(--cg-thumb-radius);
	border: var(--cg-thumb-border-width) solid var(--cg-thumb-border-color);
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.campagnoni-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.campagnoni-gallery__thumb.swiper-slide-thumb-active {
	border-color: var(--cg-thumb-border-color-active);
	border-width: var(--cg-thumb-border-width-active);
}

/* === Mobile (< 768px) === */
@media (max-width: 767px) {
	.campagnoni-gallery {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: var(--cg-thumb-gap);
	}

	.campagnoni-gallery__main {
		order: 1;
	}

	.campagnoni-gallery__thumbs {
		order: 2;
		height: var(--cg-thumb-size);
	}

	.campagnoni-gallery__thumbs-swiper {
		height: var(--cg-thumb-size);
	}
}