/* =========================================================
 * GALERÍA DE PROYECTO VDOPERU
 * FRONTEND
 * ========================================================= */


/* =========================================================
 * CONTENEDOR PRINCIPAL
 * ========================================================= */

.gpvd-gallery-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 30px 0;
	padding: 0 45px;
	box-sizing: border-box;
}


/* =========================================================
 * CARRUSEL
 * ========================================================= */

.gpvd-gallery {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;

	width: 100%;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;

	padding: 5px 0 15px;

	box-sizing: border-box;

	/* Ocultar scrollbar */
	scrollbar-width: none;

	-webkit-overflow-scrolling: touch;
}


/* Chrome / Edge / Safari */

.gpvd-gallery::-webkit-scrollbar {
	display: none;
}


/* =========================================================
 * ELEMENTOS DE LA GALERÍA
 * ========================================================= */

.gpvd-gallery-item {
	flex: 0 0 calc(
		(100% - 60px) / 4
	);

	min-width: 0;

	position: relative;

	scroll-snap-align: start;

	box-sizing: border-box;
}


/* =========================================================
 * COLUMNAS
 * ========================================================= */

/* 1 columna */

.gpvd-columns-1 .gpvd-gallery-item {
	flex-basis: 100%;
}


/* 2 columnas */

.gpvd-columns-2 .gpvd-gallery-item {
	flex-basis: calc(
		(100% - 20px) / 2
	);
}


/* 3 columnas */

.gpvd-columns-3 .gpvd-gallery-item {
	flex-basis: calc(
		(100% - 40px) / 3
	);
}


/* 4 columnas */

.gpvd-columns-4 .gpvd-gallery-item {
	flex-basis: calc(
		(100% - 60px) / 4
	);
}


/* 5 columnas */

.gpvd-columns-5 .gpvd-gallery-item {
	flex-basis: calc(
		(100% - 80px) / 5
	);
}


/* 6 columnas */

.gpvd-columns-6 .gpvd-gallery-item {
	flex-basis: calc(
		(100% - 100px) / 6
	);
}


/* =========================================================
 * IMÁGENES
 * ========================================================= */

.gpvd-gallery-item img {
	display: block;

	width: 100%;
	height: 240px;

	object-fit: cover;

	border-radius: 8px;

	margin: 0;

	padding: 0;

	box-sizing: border-box;

	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}


/* =========================================================
 * EFECTO HOVER
 * ========================================================= */

.gpvd-lightbox-link {
	display: block;

	width: 100%;

	overflow: hidden;

	border-radius: 8px;

	line-height: 0;
}


.gpvd-lightbox-link:hover img {
	transform: scale(1.04);

	opacity: 0.92;
}


/* =========================================================
 * BOTONES DEL CARRUSEL
 * ========================================================= */

.gpvd-slider-btn {
	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	z-index: 10;

	width: 40px;
	height: 40px;

	border: none;
	border-radius: 50%;

	padding: 0;

	margin: 0;

	background: rgba(0, 0, 0, 0.65);

	color: #ffffff;

	font-size: 24px;

	line-height: 40px;

	text-align: center;

	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	transition:
		background 0.25s ease,
		transform 0.25s ease,
		opacity 0.25s ease;

	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20);
}


/* Botón anterior */

.gpvd-slider-prev {
	left: 0;
}


/* Botón siguiente */

.gpvd-slider-next {
	right: 0;
}


/* Hover */

.gpvd-slider-btn:hover {
	background: rgba(0, 0, 0, 0.85);

	transform:
		translateY(-50%)
		scale(1.08);
}


/* Focus */

.gpvd-slider-btn:focus {
	outline: 2px solid currentColor;

	outline-offset: 2px;
}


/* =========================================================
 * LIGHTBOX
 * ========================================================= */

.gpvd-lightbox-overlay {
	position: fixed;

	inset: 0;

	z-index: 999999;

	display: flex;

	align-items: center;
	justify-content: center;

	padding: 30px;

	box-sizing: border-box;

	background: rgba(0, 0, 0, 0.90);
}


/* =========================================================
 * IMAGEN DEL LIGHTBOX
 * ========================================================= */

.gpvd-lightbox-image {
	display: block;

	max-width: 95vw;
	max-height: 90vh;

	width: auto;
	height: auto;

	object-fit: contain;

	margin: 0;

	padding: 0;

	border-radius: 4px;

	box-shadow:
		0 10px 40px rgba(0, 0, 0, 0.45);
}


/* =========================================================
 * BOTÓN CERRAR LIGHTBOX
 * ========================================================= */

.gpvd-lightbox-close {
	position: fixed;

	top: 20px;
	right: 25px;

	z-index: 1000000;

	width: 45px;
	height: 45px;

	border: none;
	border-radius: 50%;

	padding: 0;

	margin: 0;

	background: rgba(255, 255, 255, 0.15);

	color: #ffffff;

	font-size: 34px;

	line-height: 42px;

	text-align: center;

	cursor: pointer;

	transition:
		background 0.25s ease,
		transform 0.25s ease;
}


.gpvd-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.30);

	transform: scale(1.08);
}


.gpvd-lightbox-close:focus {
	outline: 2px solid #ffffff;

	outline-offset: 3px;
}


/* =========================================================
 * TABLET
 * ========================================================= */

@media (max-width: 980px) {

	.gpvd-gallery-wrap {
		padding: 0 40px;
	}


	.gpvd-gallery {
		gap: 15px;
	}


	.gpvd-columns-4 .gpvd-gallery-item,
	.gpvd-columns-5 .gpvd-gallery-item,
	.gpvd-columns-6 .gpvd-gallery-item {
		flex-basis: calc(
			(100% - 30px) / 3
		);
	}


	.gpvd-columns-3 .gpvd-gallery-item {
		flex-basis: calc(
			(100% - 30px) / 3
		);
	}


	.gpvd-gallery-item img {
		height: 210px;
	}


	.gpvd-slider-btn {
		width: 36px;
		height: 36px;

		font-size: 21px;
	}

}


/* =========================================================
 * MÓVIL
 * ========================================================= */

@media (max-width: 767px) {

	.gpvd-gallery-wrap {
		padding: 0 35px;

		margin: 20px 0;
	}


	.gpvd-gallery {
		gap: 12px;

		padding-bottom: 10px;
	}


	.gpvd-gallery-item,
	.gpvd-columns-1 .gpvd-gallery-item,
	.gpvd-columns-2 .gpvd-gallery-item,
	.gpvd-columns-3 .gpvd-gallery-item,
	.gpvd-columns-4 .gpvd-gallery-item,
	.gpvd-columns-5 .gpvd-gallery-item,
	.gpvd-columns-6 .gpvd-gallery-item {
		flex: 0 0 85%;
	}


	.gpvd-gallery-item img {
		height: 220px;

		border-radius: 7px;
	}


	.gpvd-slider-btn {
		width: 34px;
		height: 34px;

		font-size: 19px;
	}


	.gpvd-slider-prev {
		left: 2px;
	}


	.gpvd-slider-next {
		right: 2px;
	}

}


/* =========================================================
 * MÓVIL PEQUEÑO
 * ========================================================= */

@media (max-width: 480px) {

	.gpvd-gallery-wrap {
		padding: 0 32px;
	}


	.gpvd-gallery {
		gap: 10px;
	}


	.gpvd-gallery-item,
	.gpvd-columns-1 .gpvd-gallery-item,
	.gpvd-columns-2 .gpvd-gallery-item,
	.gpvd-columns-3 .gpvd-gallery-item,
	.gpvd-columns-4 .gpvd-gallery-item,
	.gpvd-columns-5 .gpvd-gallery-item,
	.gpvd-columns-6 .gpvd-gallery-item {
		flex-basis: 88%;
	}


	.gpvd-gallery-item img {
		height: 200px;
	}


	.gpvd-slider-btn {
		width: 30px;
		height: 30px;

		font-size: 17px;
	}


	.gpvd-lightbox-overlay {
		padding: 15px;
	}


	.gpvd-lightbox-image {
		max-width: 96vw;
		max-height: 85vh;
	}


	.gpvd-lightbox-close {
		top: 10px;
		right: 10px;

		width: 38px;
		height: 38px;

		font-size: 28px;

		line-height: 36px;
	}

}