:root {
	--primary-color: #42abca;
	--dark-color: #0a162e;
	--light-text: #fff;
	--light-color: #fff;
	--overlay-color: rgba(0, 0, 0, 0.35);
	--nav-bg: rgba(0, 0, 0, 0.55);
	--transition-fast: 0.3s;
}

/*
 * Estilos específicos para la ficha del City Tour Santiago.
 * Este archivo complementa los estilos globales definidos en style.css.
 */

/* Hero personalizado para la página del tour */
.tour-hero {
	font-family: "Lexend Deca", sans-serif;
	font-weight: 500;
	position: relative;
	/* Let the hero height adapt to its content instead of occupying most of the viewport */
	padding: 5rem 0;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.tour-hero .hero-overlay {
	/* Reutiliza la superposición oscura del hero global */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--overlay-color);
}

.tour-hero-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	padding: 0 1rem;
	margin-top: 8rem;
}

/* Custom lightbox overlay styles
 * Replaces the Lightbox2 library to provide a consistent and responsive zoom
 * experience. The overlay takes up the entire viewport and centers a content
 * container which holds the image, navigation arrows and close button. The
 * image container maintains the same size across different images so the
 * experience does not vary dramatically depending on the original photo
 * dimensions. */
.custom-lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}
.custom-lightbox-content {
	position: relative;
	width: 90vw;
	height: 80vh;
	max-width: 90vw;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.custom-lightbox-content img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.custom-lightbox-content .lb-caption {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: #b8b8b8;
}
.custom-lightbox-content .lb-close,
.custom-lightbox-content .lb-prev,
.custom-lightbox-content .lb-next {
	position: absolute;
	background: none;
	border: none;
	color: #fff;
	font-size: 2.2rem;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	user-select: none;
}
.custom-lightbox-content .lb-close {
	top: 8px;
	right: 12px;
}
.custom-lightbox-content .lb-prev {
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
}
.custom-lightbox-content .lb-next {
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}

.tour-title {
	font-size: 3rem;
	margin-bottom: 0.5rem;
	color: var(--light-text);
	font-weight: 300;
}

.tour-subtitle {
	font-size: 1.5rem;
	color: #ffffff;
	font-weight: 300;
}

/* Contenedor para todas las secciones del tour */
.tour-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* Títulos de sección */
.section-title {
	font-size: 2rem;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-weight: 300;
}

/* Descripción general del tour */
.tour-detail {
	background-color: var(--light-color);
	padding: 4rem 0 2rem;
}
.tour-description {
	font-size: 1.1rem;
	color: #2b2b2b;
	line-height: 1.6;
	margin-bottom: 1.5rem;
	font-weight: 200;
}
.tour-specs p {
	font-size: 1rem;
	color: #565656;
	margin-bottom: 0.6rem;
}
.tour-specs p strong {
	color: var(--primary-color);
}

/* Galería del tour */
.tour-gallery {
	background-color: var(--light-color);
	padding: 2rem 0 4rem;
}

/* New gallery styles: responsive three-column grid */
.tour-gallery-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.tour-gallery-col {
	flex: 1 1 30%; /* <--- Cambiado de 45% a ~30% para que entren 3 columnas */
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.tour-gallery-col a {
	display: block;
}

.gallery-img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Responsive: 1 columna en móviles */
@media (max-width: 768px) {
	.tour-gallery-col {
		flex: 1 1 100%;
	}
}

/*
 * Limit the size of images displayed in the Lightbox. Without these overrides the
 * Lightbox library sizes each image based on its intrinsic dimensions and the
 * viewport height, which can result in some images appearing very large and
 * others very small. By setting a maximum width and height relative to the
 * viewport, the zoom experience remains consistent and responsive across all
 * images.
 */
/*
 * Use the Lightbox container ID selector to ensure the rule applies. The library
 * wraps the image with a #lightbox element rather than a .lightbox class. By
 * limiting the maximum width and height relative to the viewport, images in the
 * zoomed view will not vary as drastically in size.
 */
/*
 * Override Lightbox default sizing rules to ensure that zoomed images are consistently
 * constrained relative to the viewport. Lightbox's base CSS sets `max-width: inherit`
 * and removes any height restrictions on `.lb-image`, which results in each image
 * occupying as much space as its intrinsic dimensions allow. To avoid large
 * discrepancies between portrait and landscape photos, we cap both the container
 * and the image itself to a percentage of the viewport. The `!important`
 * flag is used to override inline styles applied by the Lightbox script.
 */
/*
 * Lightbox uses a root element with the class `lightbox` (and an `id="lightbox"` in
 * some implementations). To ensure our overrides always apply regardless of
 * whether an id or class is used, we target the class selector. Without this,
 * the styles may fail to apply if the element uses the class instead of the id.
 */
.lightbox .lb-outerContainer {
	/* Define a fixed size for the lightbox container relative to the viewport. */
	width: 90vw !important;
	height: 80vh !important;
	max-width: 90vw !important;
	max-height: 80vh !important;
	/* Center the container horizontally */
	margin-left: auto !important;
	margin-right: auto !important;
}
.lightbox .lb-image {
	/* Make the image fill the container while preserving its aspect ratio. */
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	border-radius: 3px !important;
}

/* Información del tour */
.tour-info {
	background-color: var(--light-color);
	padding: 2rem 0 4rem;
}
.tour-info p,
.tour-info ul {
	font-size: 1.1rem;
	color: #2b2b2b;
	line-height: 1.6;
	margin-bottom: 1rem;
	font-weight: 200;
}
.tour-info ul {
	list-style: disc;
	padding-left: 1.5rem;
}
.tour-cta {
	margin-top: 2rem;
	text-align: center;
}
.tour-cta .btn {
	background-color: transparent;
	border: 2px solid var(--primary-color);
	color: var(--primary-color);
	padding: 0.6rem 1.4rem;
	border-radius: 4px;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}
.tour-cta .btn:hover {
	background-color: var(--primary-color);
	color: var(--dark-color);
	text-decoration: none;
}

/* Reseñas */
.tour-reviews {
	background-color: var(--light-color);
	padding: 2rem 0 4rem;
}
.rating-average {
	font-size: 1.5rem;
	color: var(--primary-color);
	margin-bottom: 1.5rem;
	text-align: center;
}
.reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	text-align: center;
}
.review-card {
	background-color: rgb(217 228 229 / 40%);
	border-left: 4px solid var(--primary-color);
	padding: 1rem;
	border-radius: 4px;
	color: #2b2b2b;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 150px;
}
.review-text {
	font-size: 0.95rem;
	margin-bottom: 0.8rem;
	line-height: 1.5;
	flex-grow: 1;
}
.review-author {
	font-size: 0.85rem;
	color: #504747;
	align-self: flex-end;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
	.tour-title {
		font-size: 2.2rem;
	}
	.tour-subtitle {
		font-size: 1.1rem;
	}
	.section-title {
		font-size: 1.5rem;
	}
}

/* === parche para que .tour-gallery-grid funcione con o sin .tour-gallery-col === */
.tour-gallery-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* cuando hay contenedores de columna (caso index.php) se mantiene tu layout */
.tour-gallery-col {
	flex: 1 1 30%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.gallery-img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* móvil: 1 columna */
@media (max-width: 768px) {
	.tour-gallery-col {
		flex: 1 1 100%;
	}
}