/* Galería Real del Sur — aspecto del «Carrusel de medios» con la clase hrs-galeria.
 *
 * Por qué vive aquí y no en el CSS de cada widget: son siete galerías (y las de otras
 * páginas) con el mismo aspecto; una sola hoja evita siete copias que se corrigen por
 * separado. El comportamiento está en js/galeria.js. Medidas del sitio aprobado.
 * Los !important vencen estilos que el carrusel escribe en línea con su guion.
 */

/* Foto grande: proporción 4:3 del prototipo (el widget fija 450 px de alto). */
/* El carrusel pone la clase elementor-main-swiper también en la tira: las reglas de la foto la excluyen. */
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-main-swiper:not(.elementor-thumbnails-swiper) { height: auto; border-radius: 8px; }
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-main-swiper .elementor-carousel-image { aspect-ratio: 4 / 3; height: auto; }
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-main-swiper a { cursor: zoom-in; }

/* Tira de miniaturas: quieta y desplazable por el navegador, sin barra visible. */
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper { scrollbar-width: none; overscroll-behavior: contain; }
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper::-webkit-scrollbar { display: none; }
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .swiper-wrapper { transform: none !important; gap: 8px; }
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .swiper-slide { margin: 0 !important; flex-shrink: 0; border-radius: 4px; opacity: .62; cursor: pointer; transition: opacity .2s ease-out; }
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .elementor-carousel-image { border-radius: 4px; }
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .swiper-slide:hover,
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .swiper-slide-active { opacity: 1; }
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .swiper-slide-active { box-shadow: 0 0 0 2px #7b6532; }
.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .swiper-slide:focus-visible { outline: 2px solid #7b6532; outline-offset: -2px; opacity: 1; }

/* Flechas del riel (las crea el guion): velo oscuro con chevrón, 44 px de alto. */
.hrs-galeria .hrs-galeria-flecha { display: grid; place-items: center; grid-column: 1; grid-row: 1; z-index: 2; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; color: #fafafa; cursor: pointer; opacity: .9; transition: opacity .2s ease-out; }
.hrs-galeria .hrs-galeria-flecha[hidden] { display: none; }
.hrs-galeria .hrs-galeria-flecha:hover,
.hrs-galeria .hrs-galeria-flecha:focus-visible { opacity: 1; }
/* El kit pinta todo botón al pasar el cursor o enfocarlo (fondo oscuro y sombra) y el
   tema padre le pone fondo rosa: la flecha conserva su velo y solo gana opacidad. */
.elementor .elementor-widget-media-carousel.hrs-galeria .hrs-galeria-flecha:hover,
.elementor .elementor-widget-media-carousel.hrs-galeria .hrs-galeria-flecha:focus,
.elementor .elementor-widget-media-carousel.hrs-galeria .hrs-galeria-flecha:active { background-color: transparent; box-shadow: none; color: #fafafa; }
.elementor .elementor-widget-media-carousel.hrs-galeria .hrs-galeria-flecha:focus-visible { outline: 2px solid #7b6532; outline-offset: -2px; }
.hrs-galeria .hrs-galeria-flecha--abajo { align-self: end; border-radius: 0 0 4px 4px; background: linear-gradient(rgba(18, 15, 12, 0), rgba(18, 15, 12, .7) 60%); }
.hrs-galeria .hrs-galeria-flecha--arriba { align-self: start; border-radius: 4px 4px 0 0; background: linear-gradient(rgba(18, 15, 12, .7) 40%, rgba(18, 15, 12, 0)); }
.hrs-galeria .hrs-galeria-flecha::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); }
.hrs-galeria .hrs-galeria-flecha--arriba::before { transform: rotate(-135deg) translate(-1px, -1px); }

/* Tableta y escritorio: riel vertical de 120 px a la izquierda, a la altura de la foto. */
@media (min-width: 768px) {
	.elementor .elementor-widget-media-carousel.hrs-galeria { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: stretch; }
	.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-main-swiper:not(.elementor-thumbnails-swiper) { grid-column: 2; grid-row: 1; margin: 0 !important; }
	/* Swiper centra sus cajas con márgenes automáticos: en una rejilla impiden que la tira se estire a sus 120 px. */
	.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper { grid-column: 1; grid-row: 1; contain: size; overflow-x: hidden; overflow-y: auto; margin: 0 !important; justify-self: stretch; }
	.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .swiper-wrapper { flex-direction: column; height: auto; }
	.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .swiper-slide { width: 100% !important; height: auto; }
}

/* Teléfono: tira debajo, alineada a la izquierda, miniaturas al 30 %, sin flechas. */
@media (max-width: 767px) {
	.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-main-swiper:not(.elementor-thumbnails-swiper) { margin-bottom: 16px !important; }
	.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper { margin-bottom: 0 !important; }
	.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper { overflow-x: auto; overflow-y: hidden; }
	.elementor .elementor-widget-media-carousel.hrs-galeria .elementor-thumbnails-swiper .swiper-slide { width: 30% !important; }
	.hrs-galeria .hrs-galeria-flecha { display: none !important; }
}