/* Bloque de texto + imagen a dos columnas.
   Es una estructura COMPARTIDA, con dos formas distintas:

   1. Intro de sección  → <div class="intro-text neo-text-item container"><div class="row">
        · intro-text.xsl        (default, faqs, mosaic)
        · destin-thumb.xsl      (home y resto de plantillas)
   2. Item de lista zig-zag → <div class="row main-list__item neo-text-item">
        · destin-thumb.xsl      (listados de hoteles/destinos)
        · custom-offers.xsl
        · offers-list.xsl
        · hotel-rooms.xsl       (listado de habitaciones)

   En la forma 2 el propio .neo-text-item ES la fila, por eso align-items se
   declara en los dos niveles. Este módulo es la ÚNICA fuente de estilos del
   bloque: toda plantilla que lo renderice debe enlazarlo o se verá distinto
   según la página. */

.neo-text-item {
	/* Sin max-width ni margin-top propios:
	   · el ancho lo gobierna .container, como el resto de secciones;
	   · forzar margin-top a 0 (el antiguo "margin: 0 auto") anulaba el
	     margin-top que .main-list__item da a cada item de las listas zig-zag. */
	align-items: center;
	margin-bottom: var(--space-between-sections);
}

.neo-text-item .row {
	align-items: center;
}

/* ---------- Columna de texto ---------- */

.neo-text-item .content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 50px;
	text-align: center;
}

/* Medida de lectura acotada con max-width y NUNCA con padding en %: un
   `padding: 0 10%` se resuelve contra el ancho de la FILA, no de la columna,
   así que se comía 268 de los 670px disponibles y dejaba el titular en tres
   líneas dentro de una franja de 402px.
   Se aplica a los bloques de texto y no al contenedor para que los botones
   conserven su ancho natural. */
.neo-text-item .content h1,
.neo-text-item .content .h1,
.neo-text-item .content .subtitle,
.neo-text-item .content .description,
.neo-text-item .content .view-more-content {
	width: 100%;
	max-width: 600px;
}

/* ---------- Intro a una sola columna ---------- */

/* Cuando la sección no tiene foto, intro-text.xsl y destin-thumb.xsl pasan la
   columna de texto a col-lg-12 y el bloque se queda solo en la fila. Ahí los
   600px dejan de ser una medida de lectura y se convierten en un
   estrangulamiento: 53 caracteres por línea dentro de una columna de 1.340px
   (medido a 1600), es decir 16 líneas apiladas con 370px de blanco a cada lado.
   Pasa en más de la mitad de las landings del sitio (home de hotel, entorno,
   servicios, gastronomía, experiencias, eventos, contacto, /restaurantes y
   /regala-tugasa, que tiene 2.100 caracteres de descripción).
   Topes para ese caso, un paso por encima de los 600px y conservando la
   jerarquía titular > subtítulo > texto:
     · titular   1000px → los títulos de 60-80 caracteres entran en 2 líneas
     · subtítulo  860px
     · texto      800px → con el padding de 40px del párrafo deja una medida de
                          720px ≈ 74 caracteres por línea, dentro del rango
                          cómodo (60-75) que sostiene el interlineado de 26px
   Sólo desktop: por debajo de 992px el bloque ya ocupa todo el ancho
   disponible y estos topes darían 84 caracteres por línea en tablet. */
@media (min-width: 993px) {
	.intro-text .content.col-lg-12 h1,
	.intro-text .content.col-lg-12 .h1 {
		max-width: 1000px;
	}

	.intro-text .content.col-lg-12 .subtitle {
		max-width: 860px;
	}

	.intro-text .content.col-lg-12 .description,
	.intro-text .content.col-lg-12 .view-more-content {
		max-width: 800px;
	}
}

/* ---------- Escala del titular del item de lista ---------- */

/* El titular de cada item NO puede compartir tamaño con el H1 de la página:
   los dos salían de la misma clase .h1 (40px/55px), así que cada item competía
   con el titular de la sección y un enunciado de largo medio se partía en 3 o 4
   líneas dentro de una columna de 520px (en /promociones había titulares de
   220px de alto, más que la propia descripción).
   Escala nueva, un paso por debajo del H1 y alineada al ritmo de 8px que ya
   sigue el sitio (40 · 32 · 24 · 16):
     · >992px → 32/42  (0,8 × el H1 de página; 2 × el texto corrido)
     · ≤992px → 24/32  (ahí el H1 baja a 28px, el item se mantiene un paso por
                        debajo y coincide con el paso móvil del .subtitle)

   Se redefinen los TOKENS en lugar de declarar un font-size propio porque la
   regla global de h1/.h1 en ≤767px lleva !important y resuelve estos mismos
   tokens: sobrescribirlos es la única forma de gobernar los tres breakpoints sin
   añadir otro !important. Los dos tokens de line-height se igualan para que el
   interlineado no cambie al cruzar los 767px. */
.main-list__item .content {
	--font-size-title: 32px;
	--desktop-line-height-title: 42px;
	--mobile-line-height-title: 42px;
}

/* Ritmo vertical: titular · 30 · filete · 30 · subtítulo · 25 · texto ·
   30 · botón (los 30 del filete los aporta .underscore:after) */
.neo-text-item .content .h1 {
	margin-bottom: 20px;
}

/* El subtítulo baja de 35px a 28px: a 35px quedaba a un paso mínimo del
   titular (40px) y los dos se leían como titulares compitiendo.
   `text-wrap: balance` replica en el subtítulo lo que la regla global de h1/.h1
   ya hace en el titular: reparte las líneas en lugar de dejar una palabra sola
   colgando en la última (con los topes anchos del intro a una columna hay
   subtítulos de 100 caracteres que se partían en 1 línea larga + 2 palabras). */
.neo-text-item .content .subtitle {
	margin: 0 0 25px;
	font-size: 28px;
	line-height: 38px;
	text-wrap: balance;
}

.neo-text-item .content .description {
	margin: 0;
}

/* El texto corrido va algo más estrecho que los titulares: da una columna de
   lectura más cómoda sin romper el eje central */
.neo-text-item .content .description p {
	margin: 0 0 25px;
	padding: 0 40px;
	font-size: var(--font-size-text);
	font-weight: 300;
	line-height: 26px;
	color: var(--text-color);
}

.neo-text-item .content .description p:last-child {
	margin-bottom: 0;
}

/* ---------- Recorte del texto a 3 lineas (modificador opcional) ---------- */

/* Solo actua sobre los items que llevan `description--clamp`, que hoy son los
   de custom-offers.xsl: /promociones y /hoteles/[hotel]/promociones. El resto de
   listados zig-zag (hoteles, destinos, restaurantes, habitaciones) y las intros
   de seccion comparten este modulo y NO deben recortarse, por eso el recorte
   va en una clase aparte y no en `.description` a secas.

   Las descripciones vienen del CMS o del motor sin tope de longitud, asi que un
   item podia pintar 12 lineas frente a las 3 del de al lado y romper el ritmo
   del zig-zag. `-webkit-line-clamp` lo resuelve en CSS puro: no hay que cortar
   el texto en servidor (el motor no expone version truncada) ni con JS, y el
   texto completo sigue en el DOM para buscadores. El detalle completo esta a un
   clic, en el boton «ver mas» del propio item.

   El trio `-webkit-box` + `box-orient` + `line-clamp` es el unico soportado en
   los tres motores (Chrome, Safari y Firefox desde la 68); `line-clamp` a secas
   se declara detras para cuando la propiedad estandar sea mayoritaria. Cuenta
   lineas sobre el bloque entero, no sobre cada <p>, asi que funciona igual con
   descripciones de uno o de varios parrafos. */
.neo-text-item .content .description--clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Dentro del recorte los parrafos no separan: con 3 lineas visibles, los 25px
   entre parrafos se comian una de las tres y dejaban el bloque descuadrado
   respecto al item de al lado. */
.neo-text-item .content .description--clamp p {
	margin-bottom: 0;
}

.neo-text-item .content .btn-view-more,
.neo-text-item .content .room_buttons,
.neo-text-item .content > .button {
	margin-top: 30px;
}

/* ---------- Columna de imagen ---------- */

.neo-text-item .image {
	width: 100%;
	height: auto;
	padding: 0 50px;
}

/* Doble tope de altura. Sin él la imagen (proporción 0.9) crece con el ancho
   de la columna —799px a 1920— y deja el bloque de texto (~510px) flotando con
   145px de vacío arriba y abajo. Con el tope, la altura del bloque se mantiene
   estable entre 1200 y 1920 y las dos columnas quedan compensadas:
   · 660px  → tope de composición, el que manda en pantallas anchas
   · 100vh  → red de seguridad en pantallas bajas
   El recorte lo absorbe object-fit, no deforma la foto. */
.neo-text-item .image img {
	width: 100%;
	max-height: min(660px, calc(100vh - 80px));
	object-fit: cover;
}

/* ---------- Paginación del carrusel ---------- */

/* El aspecto de los puntos NO se toca aquí a propósito: son los círculos de
   10px del patrón común del sitio (navy los inactivos, verde corporativo el
   activo), igual que en el carrusel de reseñas o en el hero. Este módulo sólo
   corrige dos cosas: la separación con la imagen —antes quedaban pegados— y el
   área táctil.
   El alto del contenedor acota el área táctil ampliada; sin él, el
   pseudoelemento desbordaba la caja y la sección siguiente lo tapaba, dejando
   la mitad inferior del objetivo sin pulsar. */
.neo-text-item .image .owl-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	margin-top: 12px;
}

/* Área táctil: un punto de 10px es un objetivo muy pequeño para el dedo. Se
   amplía con un pseudoelemento y no con padding en el .owl-dot porque el CSS
   de Owl le fuerza `padding: 0 !important`. Es invisible: no altera el diseño
   del punto, sólo la zona que responde al toque (de 10x10 a 18x24). */
.neo-text-item .image .owl-dots .owl-dot span {
	position: relative;
}

.neo-text-item .image .owl-dots .owl-dot span::before {
	content: "";
	position: absolute;
	top: -7px;
	right: -4px;
	bottom: -7px;
	left: -4px;
}

@media (max-width:992px) {

	.main-list__item .content {
		--font-size-title: 24px;
		--desktop-line-height-title: 32px;
		--mobile-line-height-title: 32px;
	}

	/* El item se apila a una columna a partir de 992px, que es el ancho al que
	   este módulo ya da por apilada la composición (de ahí el margin-top que
	   recibe la imagen más abajo) y el que el proyecto usa como tramo
	   tablet/móvil.
	   Sin esto las columnas seguían siendo col-md-6 (50%, porque el `md` de
	   Bootstrap 4 empieza en 768px) y el `gap: 20px` que neobookings.css añade a
	   .main-list__item hacía que 50% + 20px + 50% desbordara la fila: las dos
	   columnas hacían wrap y, al ser el item impar `row-reverse`, cada una se
	   empujaba a la mitad derecha dejando la izquierda vacía en toda la banda
	   768-992px (medido a 900px: content y image ambos en x=450 de 900). */
	.main-list__item .content,
	.main-list__item .image {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Apilado, la imagen se acota a la MISMA medida que el texto (600px) y queda
	   centrada sobre su mismo eje. Sin este tope la columna de imagen se llevaba
	   todo el ancho disponible —920px a 992px de viewport— y el bloque quedaba
	   descompensado: una foto de 920px debajo de un texto de 600px. Además el
	   `max-height` de la imagen recortaba a 660px, así que el ancho extra sólo
	   servía para pedir una foto enorme y tirar la mitad.
	   Se acota el CONTENEDOR del carrusel y no el `img`: Owl mide ese contenedor
	   al inicializarse, así que el stage, los slides y los dots quedan todos
	   dentro de los 600px en lugar de un stage ancho con la foto descentrada.
	   Por debajo de 640px de viewport el tope es inerte (la columna ya mide
	   menos de 600px) y la imagen sigue ocupando el ancho completo, como antes. */
	.main-list__item .image .owl-carousel {
		max-width: 600px;
		margin-inline: auto;
	}

	/* Canalon lateral unico al apilarse: antes .content bajaba a 10px y .image
	   se quedaba con el padding de su columna, asi que texto y foto salian
	   descuadrados en movil. Los 20px dejan 350 de 390 utiles. */
	.neo-text-item .content,
	.neo-text-item .image {
		padding: 0 20px;
	}

	.neo-text-item .content {
		width: 100%;
	}

	.neo-text-item .content .subtitle {
		font-size: 24px;
		line-height: 32px;
	}

	/* El párrafo no añade sangría propia sobre la de la columna: con el canalón
	   de 20px ya hay margen lateral suficiente y los 40px de escritorio dejaban
	   la medida de lectura en 270px sobre un móvil de 390.
	   Va con `.description` a propósito: `.content p` a secas (0,0,2,1) no gana
	   a la regla de escritorio `.content .description p` (0,0,3,1), así que el
	   padding seguía aplicándose. */
	.neo-text-item .content .description p {
		padding: 0;
	}

	.neo-text-item .image {
		margin-top: 40px;
	}
}