/* ==========================================================================
   AMENITIES DE LA FICHA DE HABITACION - Bloque #amenitiesSec
   ==========================================================================
   Modulo del bloque de servicios de la ficha de habitacion. Se carga
   condicionalmente desde xsl/themes/default/_common/rooms/room-amenities.xsl
   dentro del <xsl:if> que comprueba si la habitacion tiene seccion hija, asi
   que sin hija este CSS no se descarga. NO se registra en
   etc/theme-config.php.

   AVISO DE PROCESO: el brief de esta tarea (task-4-brief.md) no llego a
   existir en disco -el intento anterior murio por un error de API antes de
   escribirlo-. Los valores de este fichero se han reconstruido desde tres
   fuentes verificadas, no inventados:
   1) El markup REAL ya integrado en room-amenities.xsl (task 3 de este
      mismo plan v5): #amenitiesSec > .row.g-0 > .container con
      .amenitiesIntro (subtitle + h2.title) y .amenitiesList (una sola <ul>
      volcada del CMS con disable-output-escaping).
   2) Figma "Room - v5", nodo 855:3420 (get_design_context + captura real).
   3) El resto de modulos de esta MISMA pagina (introduction.css,
      rooftop.css, experiences.css): mismo patron de tag+titulo, misma
      escalera de tamanos responsive y mismo ritmo de espaciado (80/70/70/50
      de padding-bottom), reutilizados literalmente en vez de inventados.

   COLOR DEL SUBTITULO: #800033 (granate corporativo), NO el #191f17 que
   devuelve get_design_context como fallback de la variable de Figma. La
   CAPTURA real del nodo 855:3420 pinta "AMENITIES" en granate, y es el mismo
   color que ya usan #introductionSec, #rooftopSec y #destinationSec para su
   .subtitle. Confirmado por el usuario antes de escribir este fichero.

   TITULO: el h2 reutiliza EXACTAMENTE el tamano/interlineado del <h1> de
   #introductionSec (2.3125rem / 2.625rem base, -1.5px de letter-spacing,
   #191F17): en Figma comparten el mismo token de escala (headings/h3) y
   estan en la misma pagina, asi que la jerarquia visual debe coincidir. Por
   la misma razon se reutiliza su MISMA escalera responsive (2rem/2.3125rem
   en 961-1365; 1.6875rem/2rem en 768-960 y max-767).

   DOS COLUMNAS: a la izquierda el tag+titulo, FIJOS (position:sticky)
   mientras la lista de la derecha queda a su lado. Los anchos base (420px /
   863px) y el padding-top de 40px de la lista son literales del nodo Figma.
   Por debajo de 1366px esos anchos pasan a porcentajes fluidos (no hay
   Figma para esos rangos; se interpolan manteniendo la proporcion ~33/60).

   LA LISTA ES UNA SOLA <ul> (decision ya tomada en el XSL, no en este CSS):
   en Figma se ven dos columnas de items, pero aqui se logra con
   column-count en vez de dos <ul> en el CMS, para que el editor no tenga
   que reequilibrarlas a mano. La vinieta de cada <li> es un li::before
   circular de 6px de diametro (3px de radio, #1A1A1A): en la maqueta es un
   icono SVG dentro de una caja de 6x10px, pero no hay ningun trazo que
   servir, es un punto solido -de ahi que el XSL no emita ningun <img>-.

   EL STICKY SE DESACTIVA por debajo de 961px: al apilar en una sola
   columna, un sticky dejaria el tag+titulo pegado arriba tapando la lista.
   Al apilar se reserva un margin-top en .amenitiesList (40px en 768-960,
   32px en max-767) para que no quede pegada al bloque de arriba.
   ========================================================================== */

/* EL GUTTER LATERAL ES PROPORCIONAL, NO FIJO. En el diseno el contenedor mide
   1455px dentro de un lienzo de 1903, o sea 224px de margen a cada lado
   (224/1903 = 11.77vw). Con un simple "max-width: 1455px" las medidas casan al
   pixel A 1903 pero por debajo de ese ancho el bloque se come los margenes y
   queda pegado a los bordes: a 1600 solo quedan 72px por lado, y a 1455 o menos,
   cero. El clamp reproduce la proporcion del diseno en cualquier ancho y sigue
   respetando el tope de 1455px del contenedor en pantallas grandes. */
#amenitiesSec {
	padding-top: 0;
	padding-right: clamp(1.25rem, 11.77vw, 14rem);
	padding-bottom: 5rem;
	padding-left: clamp(1.25rem, 11.77vw, 14rem);
	overflow: hidden;
}
#amenitiesSec .container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
/* Anchos en PORCENTAJE, no en px: son las proporciones exactas del diseno
   (420/1455 = 28.87% y 863/1455 = 59.31%, el 11.82% restante es el hueco que
   deja el space-between). Asi las dos columnas mantienen la proporcion de la
   maqueta a cualquier ancho, en vez de conservar su tamano absoluto y comerse
   el hueco central segun se estrecha la pantalla. */
#amenitiesSec .amenitiesIntro {
	position: sticky;
	top: 0;
	flex: 0 0 28.87%;
	width: 28.87%;
}
#amenitiesSec .amenitiesIntro .subtitle {
	display: block;
	margin: 0 0 2rem 0;
	font-size: 1.125rem;
	color: #800033;
	font-weight: 600;
	line-height: 1.4375rem;
	letter-spacing: 0.09375rem;
	text-transform: uppercase;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#amenitiesSec .amenitiesIntro .title {
	margin: 0;
	font-size: 2.3125rem;
	color: #191F17;
	font-weight: 400;
	line-height: 2.625rem;
	letter-spacing: -0.09375rem;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}
#amenitiesSec .amenitiesIntro .title br {
	display: block;
}
#amenitiesSec .amenitiesList {
	flex: 0 0 59.31%;
	width: 59.31%;
	padding-top: 2.5rem;
}
#amenitiesSec .amenitiesList p {
	margin: 0 0 1.5rem 0;
	font-size: 1.125rem;
	line-height: 1.5rem;
	color: #312F2D;
}
#amenitiesSec .amenitiesList p:last-child {
	margin-bottom: 0;
}
#amenitiesSec .amenitiesList ul {
	margin: 0;
	padding: 0;
	column-count: 2;
	column-gap: 4rem;
	list-style: none;
}
#amenitiesSec .amenitiesList li {
	position: relative;
	margin: 0 0 0.75rem 0;
	padding-left: 1rem;
	font-size: 1.125rem;
	line-height: 1.5rem;
	color: #312F2D;
	break-inside: avoid;
}
#amenitiesSec .amenitiesList li:last-child {
	margin-bottom: 0;
}
#amenitiesSec .amenitiesList li::before {
	content: "";
	position: absolute;
	top: 0.5625rem;
	left: 0;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background-color: #1A1A1A;
}

/* #Additional - Large Screens beyond 1024px (iPad Pro)
   ========================================================================== */
@media only screen and (min-width: 961px) and (max-width: 1365px) {

#amenitiesSec 										{ padding-bottom: 4.375rem; }
#amenitiesSec .amenitiesIntro 						{ flex: 0 0 34%; width: 34%; }
#amenitiesSec .amenitiesList 						{ flex: 0 0 60%; width: 60%; padding-top: 1.5rem; }
#amenitiesSec .amenitiesIntro .subtitle 				{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#amenitiesSec .amenitiesIntro .title 					{ font-size: 2rem; line-height: 2.3125rem; }
#amenitiesSec .amenitiesList ul 						{ column-gap: 3rem; }

}

/* #Tablet (Portrait)
   ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 960px) {

#amenitiesSec 										{ padding-bottom: 4.375rem; }
#amenitiesSec .container 							{ flex-direction: column; }
#amenitiesSec .amenitiesIntro 						{ position: static; flex: 0 0 auto; width: 100%; }
#amenitiesSec .amenitiesList 						{ flex: 0 0 auto; width: 100%; padding-top: 0; margin-top: 2.5rem; }
#amenitiesSec .amenitiesIntro .subtitle 				{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#amenitiesSec .amenitiesIntro .title 					{ font-size: 1.6875rem; line-height: 2rem; }
#amenitiesSec .amenitiesList ul 						{ column-gap: 2.5rem; }

}

/* #Mobile (Portrait)
   ========================================================================== */
@media only screen and (max-width: 767px) {

#amenitiesSec 										{ padding-bottom: 3.125rem; }
#amenitiesSec .container 							{ flex-direction: column; }
#amenitiesSec .amenitiesIntro 						{ position: static; flex: 0 0 auto; width: 100%; }
#amenitiesSec .amenitiesIntro .subtitle 				{ margin: 0 0 1.5625rem 0; font-size: 1rem; line-height: 1.25rem; }
#amenitiesSec .amenitiesIntro .title 					{ font-size: 1.6875rem; line-height: 2rem; }
/* El <br> del titular NO se oculta en movil, a diferencia de otros bloques del
   proyecto. Aqui el CMS lo guarda pegado a la coma y sin espacios
   ("buscas,<br>al alcance"), asi que ocultarlo junta las palabras y se lee
   "buscas,al alcance". El salto lo pone el editor a proposito y en movil el
   titular ya ocupa tres lineas igualmente, asi que respetarlo no estorba. */
#amenitiesSec .amenitiesList 						{ flex: 0 0 auto; width: 100%; padding-top: 0; margin-top: 2rem; }
#amenitiesSec .amenitiesList ul 						{ column-count: 1; column-gap: 0; }
#amenitiesSec .amenitiesList p, #amenitiesSec .amenitiesList li { font-size: 1rem; line-height: 1.375rem; }
#amenitiesSec .amenitiesList li::before 				{ top: 0.5rem; }

}