/**
 * [gaviota_slider] — galería horizontal alineada con el contenido y a sangre
 * por la derecha. Los tokens van en custom properties para poder ajustarlos
 * desde el tema sin tocar el plugin.
 *
 * --gs-inset es la sangría izquierda: la misma que deja un contenedor boxed de
 * Elementor de 1186px con 24px de padding lateral. El % se resuelve contra el
 * ancho del bloque, así que el slider debe ir en un contenedor a ancho completo.
 */

.gaviota-slider {
	--gs-content: 1186px;
	--gs-gutter: 24px;
	--gs-card: 443px;
	--gs-gap: 24px;
	--gs-ratio: 443 / 320;
	--gs-nav-gap: 48px;
	--gs-arrow: 146px;
	--gs-color: var(--e-global-color-accent, #e73744);
	--gs-inset: max(var(--gs-gutter), (100% - var(--gs-content)) / 2);

	width: 100%;
}

.gaviota-slider__track {
	display: flex;
	gap: var(--gs-gap);
	padding-inline: var(--gs-inset) var(--gs-gutter);
	overflow-x: auto;
	scroll-padding-inline: var(--gs-inset);
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.gaviota-slider__track::-webkit-scrollbar {
	display: none;
}

.gaviota-slider__track:focus-visible {
	outline: 2px solid var(--gs-color);
	outline-offset: 4px;
}

/* Durante el arrastre con ratón el snap pelea con el desplazamiento manual. */
.gaviota-slider.is-dragging .gaviota-slider__track {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.gaviota-slider__slide {
	flex: 0 0 var(--gs-card);
	margin: 0;
	aspect-ratio: var(--gs-ratio);
	overflow: hidden;
	scroll-snap-align: start;
}

/* Doble clase para ganar a `.elementor img { height: auto }`. */
.gaviota-slider .gaviota-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* Las flechas abarcan exactamente el ancho de la primera tarjeta. */
.gaviota-slider__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: content-box;
	width: var(--gs-card);
	max-width: calc(100% - var(--gs-inset) - var(--gs-gutter));
	margin-top: var(--gs-nav-gap);
	padding-left: var(--gs-inset);
}

/* El reset de Hello Elementor pinta bordes, padding y fondo en los <button>. */
.gaviota-slider .gaviota-slider__arrow,
.gaviota-slider .gaviota-slider__arrow:hover,
.gaviota-slider .gaviota-slider__arrow:focus {
	display: inline-flex;
	width: var(--gs-arrow);
	max-width: 45%;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--gs-color);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.gaviota-slider .gaviota-slider__arrow svg {
	display: block;
	width: 100%;
	height: 16px;
}

.gaviota-slider .gaviota-slider__arrow--prev:hover:not(:disabled) {
	transform: translateX(-4px);
}

.gaviota-slider .gaviota-slider__arrow--next:hover:not(:disabled) {
	transform: translateX(4px);
}

.gaviota-slider .gaviota-slider__arrow:focus-visible {
	outline: 2px solid var(--gs-color);
	outline-offset: 2px;
}

.gaviota-slider .gaviota-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (max-width: 1024px) {
	.gaviota-slider {
		--gs-card: 360px;
		--gs-nav-gap: 40px;
	}
}

@media (max-width: 767px) {
	.gaviota-slider {
		--gs-card: calc(100vw - 2 * var(--gs-gutter) - 40px);
		--gs-gap: 16px;
		--gs-nav-gap: 32px;
		--gs-arrow: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gaviota-slider .gaviota-slider__arrow {
		transition: none;
	}
}