/* ==========================================================================
   RECONOCIMIENTOS DESTACADOS (WD-14393) — Bloque de hotel-home
   Cargado condicionalmente desde custom-hotel-recognitions.xsl
   Tokens reutilizados del tema:
   - Fondo de seccion gris claro: #f6f6f6 (rooms-list-sec, contact-sec)
   - Azul primario titulos: #204f86 | Gris de texto: #6d6d6d
   - Separadores suaves: #e7e7e7 | Radio de tarjeta: 8px (grid-list)

   LAYOUT: rejilla de sellos. Cada reconocimiento es una tarjeta con el logo
   arriba sobre una placa de altura fija y el texto debajo. La placa es lo que
   iguala opticamente logos de proporciones muy distintas (Travelife es 1,73:1
   y Biosphere 1:1), que en un listado a ancho completo quedaban descompensados.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Base — Desktop (992px - 1920px)
   ---------------------------------------------------------------------------- */

#recognitionsSec {
	position: relative;
	padding-top: 96px;
	padding-bottom: 96px;
	background-color: #f6f6f6;
}

/* Cabecera del bloque. Centrada y acotada a 600px, replicando el .contentBox
   de los bloques hermanos de banda completa de la hotel-home (#discoverSec,
   #environmentalSec), que centran en todos los anchos. */
#recognitionsSec .hotel-recognitions__header {
	max-width: 600px;
	margin: 0 auto 48px auto;
	text-align: center;
}

#recognitionsSec .hotel-recognitions__title {
	display: block;
	margin: 0;
	font-size: 2.375rem;
	color: #204f86;
	font-weight: 300;
	line-height: 2.75rem;
	text-wrap: balance;
}

/* El subtitle (strong) sigue el patron de titulos del tema: bold + italic */
#recognitionsSec .hotel-recognitions__title strong {
	font-weight: 700;
	font-style: italic;
}

#recognitionsSec .hotel-recognitions__intro {
	margin: 16px 0 0 0;
	font-size: 1rem;
	color: #6d6d6d;
	font-weight: 400;
	line-height: 1.5rem;
}

#recognitionsSec .hotel-recognitions__intro p {
	margin: 0 0 8px 0;
}

#recognitionsSec .hotel-recognitions__intro p:last-child {
	margin-bottom: 0;
}

/* Rejilla. El maximo de 360px evita que con 2 reconocimientos (Atlantic
   Gardens) las tarjetas se estiren a media pantalla. El minimo de 260px es el
   que decide cuantas columnas caben, sin media queries por numero de items.
   La rejilla se centra bajo la cabecera, que tambien va centrada. */
#recognitionsSec .hotel-recognitions__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
	justify-content: center;
	gap: 32px;
}

/* Tarjeta: superficie blanca sin borde duro, con sombra muy contenida en el
   azul del tema en vez de gris neutro. La rejilla ya las iguala en altura. */
#recognitionsSec .hotel-recognitions__card {
	display: flex;
	flex-direction: column;
	padding: 32px;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(32, 79, 134, 0.04), 0 10px 28px rgba(32, 79, 134, 0.07);
}

/* Placa del logo: altura fija para que todos los sellos ocupen el mismo hueco
   independientemente de su proporcion. */
#recognitionsSec .hotel-recognitions__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 132px;
	margin: 0 0 24px 0;
	padding: 16px;
	background-color: #fbfbfb;
	border: 1px solid #f0f0f0;
	border-radius: 6px;
}

#recognitionsSec .hotel-recognitions__logo-img {
	width: auto;
	max-width: 100%;
	max-height: 100px;
	height: auto;
	object-fit: contain;
}

/* Si el logo aun no esta subido al CMS, no se reserva la placa vacia */
#recognitionsSec .hotel-recognitions__logo:not(:has(.hotel-recognitions__logo-img)) {
	display: none;
}

#recognitionsSec .hotel-recognitions__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* Titulo del reconocimiento: mismo lenguaje que los h3 de cards del tema (grid-list) */
#recognitionsSec .hotel-recognitions__name {
	margin: 0 0 12px 0;
	font-size: 1.125rem;
	color: #204f86;
	font-weight: 700;
	line-height: 1.625rem;
	text-wrap: balance;
}

#recognitionsSec .hotel-recognitions__text {
	font-size: 0.9375rem;
	color: #6d6d6d;
	font-weight: 400;
	line-height: 1.5rem;
}

#recognitionsSec .hotel-recognitions__text p {
	margin: 0 0 8px 0;
}

#recognitionsSec .hotel-recognitions__text p:last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   Desktop Grande (>1920px)
   ---------------------------------------------------------------------------- */

@media only screen and (min-width: 1921px) {

	#recognitionsSec {
		padding-top: 128px;
		padding-bottom: 128px;
	}

	#recognitionsSec .hotel-recognitions__list {
		grid-template-columns: repeat(auto-fit, minmax(260px, 400px));
		gap: 40px;
	}

	#recognitionsSec .hotel-recognitions__logo {
		height: 148px;
	}

	#recognitionsSec .hotel-recognitions__logo-img {
		max-height: 116px;
	}

}

/* ----------------------------------------------------------------------------
   Tablet y Movil (<992px)
   La rejilla se reacomoda sola por el minmax; aqui solo se ajustan escalas.
   ---------------------------------------------------------------------------- */

@media only screen and (max-width: 991px) {

	#recognitionsSec {
		padding-top: 85px;
		padding-bottom: 85px;
	}

	#recognitionsSec .hotel-recognitions__header {
		margin-bottom: 40px;
	}

	#recognitionsSec .hotel-recognitions__title {
		font-size: 1.75rem;
		line-height: 2.375rem;
	}

	/* Aqui el tope pasa a 1fr: con un maximo fijo de 360px, auto-fit calcula
	   cuantos tramos caben usando ese maximo (2x360 + gap > 738px de contenedor)
	   y se quedaria en una sola columna. Con 1fr entran dos y se reparten. */
	#recognitionsSec .hotel-recognitions__list {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 24px;
	}

	#recognitionsSec .hotel-recognitions__card {
		padding: 24px;
	}

	#recognitionsSec .hotel-recognitions__logo {
		height: 116px;
	}

	#recognitionsSec .hotel-recognitions__logo-img {
		max-height: 88px;
	}

}

/* Movil pequeno: paddings de seccion como el resto de bloques (<768px) */
@media only screen and (max-width: 767px) {

	#recognitionsSec {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	/* A una sola columna la tarjeta ya no compite en ancho: el logo puede
	   respirar mas sin alargar la pagina de forma apreciable. */
	#recognitionsSec .hotel-recognitions__logo {
		height: 124px;
	}

}