/* ==========================================================================
   GALERIA DE PAGINAS INTERIORES (#gallerySec)
   ==========================================================================
   Modulo de la galeria de las paginas interiores (landings 'default' y
   'default-list'). Se carga condicionalmente desde
   xsl/themes/default/_common/gallery/gallery.xsl dentro del <xsl:if> que
   comprueba si la seccion tiene imagenes sin la keyword 'slide': si no hay
   ninguna, este CSS no se descarga. NO se registra en etc/theme-config.php
   (carga deliberada desde la propia plantilla XSL).

   Reglas base trasladadas literalmente desde fenix-sevilla-hotel.css
   (lineas 2811-2847, hasta el final del archivo) y los overrides responsive
   desde skeleton.css (lineas 196-197, 344-346, 506-509). Movimiento 1:1,
   sin cambiar valores ni orden. Los breakpoints 1601-2700, 1501-1600 y
   480-767 de la maqueta NO tienen ninguna regla #gallerySec*: se omiten a
   proposito (no se anaden bloques @media vacios); en esos rangos el
   componente hereda la regla base o el bloque max-767 tal cual.

   Controles del slider como <div> (swiper-button-prev/next), NO <button>:
   es el patron real del proyecto, el mismo que usan los tres sliders ya
   existentes (slider-home.xsl:59-60, rooms-home.xsl:152-153,
   benefits-home.xsl:114-115). El modulo a11y de Swiper viene activado y el
   JS le pasa los textos ya traducidos, asi que Swiper anade en el init
   role="button", tabindex="0" y el aria-label correcto a esos <div>. No
   hace falta ningun reset de <button> (padding/font/appearance/cursor): el
   <div> no matchea la regla global de boton del framework ('.button,
   button, [type=button]...', fenix-sevilla-hotel.css:88), y el
   fondo/borde/radio de los propios controles ya los resuelve
   swiper-bundle-controls.css (.swiperNav [class*=swiper-button-]).
   ========================================================================== */

#gallerySec {
	padding-top: 0;
	padding-bottom: 5rem;
	overflow: hidden;
}
#gallerySec .galleryBox {
	width: 100%;
	padding: 0 7.5rem;
}
#gallerySec .gallery-slider {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: visible;
}
#gallerySec .gallery-slider .swiper-slide {
	opacity: 0.16;
	transition: .25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#gallerySec .gallery-slider .swiper-slide.swiper-slide-active {
	opacity: 1;
}
#gallerySec .gallery-slider .swiper-slide picture,
#gallerySec .gallery-slider .swiper-slide picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#gallerySec .gallery-slider .swiperNav {
	justify-content: space-between;
	margin: 0 -5rem;
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
}
/* 2.5rem = 30px con la palanca de escala al 75%, y en rem para que acompane a la
   palanca. Aqui el circulo es el <span> -relleno y sin borde, el de
   swiper-bundle-controls.css-, igual que en el hero, en habitaciones y en
   ventajas, asi que el icono mide lo mismo que el circulo sin compensar nada.

   Estaba heredando los 48px de Swiper (40 en los dos tramos estrechos). Como la
   flecha se apoya en el margen negativo de la nav contra el padding de
   .galleryBox, y esos dos si escalaron, la resta habia dejado de dar:

     1440  12px de aire, donde lo proporcional al diseno son 24
      900  14px de aire, donde lo proporcional son 24
      500  ~20px de SOLAPE, donde lo proporcional son 9,75

   SIN override por tramo a proposito: con 30px de diametro los dos tramos
   estrechos vuelven a dar el valor proporcional al diseno por si solos, asi que
   un escalon a 40px como el de swiper-bundle-controls.css volveria a
   descuadrarlos. */
#gallerySec .gallery-slider .swiperNav [class*=swiper-button-] span {
	min-width: 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
}

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

#gallerySec 										{ padding-top: 0; padding-bottom: 4.375rem; }
#gallerySec .galleryBox 							{ padding: 0 6.25rem; }

}

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

#gallerySec 										{ padding-top: 0; padding-bottom: 4.375rem; }
#gallerySec .galleryBox 							{ padding: 0 6.25rem; }
#gallerySec .gallery-slider .swiperNav 				{ margin: 0 -4.5rem; }

}

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

#gallerySec 										{ padding-top: 0; padding-bottom: 3.125rem; }
#gallerySec .galleryBox 							{ padding: 0 2.5rem; }
#gallerySec .gallery-slider .swiper-slide 			{ height: 14.375rem; }
#gallerySec .gallery-slider .swiperNav 				{ margin: 0 -1.6875rem; }

}