/* Obra Gruesa Slider Destacado — frontend
 * Estructura:
 * .swiper-content > [.ast-container] > .swiper-carousel > .ogs-viewport > .ogs-track > .ogs-slide
 * -------------------------------------------------------------------------- */

.ogs-slider {
	/* --ogs-gap-base lo escribe el administrador como estilo en línea.
	   --ogs-gap es el valor efectivo, que se reduce en pantallas pequeñas. */
	--ogs-gap-base: 24px;
	--ogs-gap: var(--ogs-gap-base);
	--ogs-radius: 12px;
	--ogs-speed: 600ms;
	--ogs-arrow-size: 38px;
	--ogs-arrow-offset: 50px;
	--ogs-arrow-gap: 16px;
	--ogs-ink: #12386b;
	--ogs-dot: #c7d3e2;
	--ogs-dot-active: #12386b;

	position: relative;
	box-sizing: border-box;
	padding: 48px 0;
}

.ogs-slider *,
.ogs-slider *::before,
.ogs-slider *::after {
	box-sizing: border-box;
}

/* El atributo hidden debe ganarle a display:flex de los controles. */
.ogs-slider [hidden] {
	display: none !important;
}

/* Boxed: el ancho lo define el contenedor del tema (Astra). Este fallback
   mantiene el bloque centrado si el tema no define .ast-container. */
.ogs-slider .ast-container {
	margin-left: auto;
	margin-right: auto;
}

/* --- Carrusel ------------------------------------------------------------ */

.ogs-slider .swiper-carousel {
	position: relative;
}

/* En fluid no hay contenedor, así que las flechas necesitan espacio propio. */
.ogs-layout-fluid .swiper-carousel {
	padding-left: calc( var(--ogs-arrow-size) + var(--ogs-arrow-gap) );
	padding-right: calc( var(--ogs-arrow-size) + var(--ogs-arrow-gap) );
}

.ogs-viewport {
	overflow: hidden;
}

.ogs-track {
	display: flex;
	gap: var(--ogs-gap);
	align-items: flex-start;
	will-change: transform;
	transition: transform var(--ogs-speed) cubic-bezier( 0.25, 0.8, 0.35, 1 );
}

/* Modo estático: sin desplazamiento, los slides ocupan la grilla completa. */
.swiper-carousel.is-static .ogs-track {
	transform: none !important;
}

/* --- Slide --------------------------------------------------------------- */

.ogs-slide {
	flex: 0 0 auto;
	min-width: 0;
	transition: opacity var(--ogs-speed) ease;
}

/* Anchos de respaldo antes de que el JS mida (evita el salto inicial).
   El script sobrescribe estos valores con anchos exactos en píxeles. */
.ogs-cols-3 .ogs-slide {
	width: calc( ( 100% - 2 * var(--ogs-gap) ) / 3 );
}

.ogs-cols-4 .ogs-slide {
	width: calc( ( 100% - 3 * var(--ogs-gap) ) / 4 );
}

.ogs-slide__media {
	display: block;
	border-radius: var(--ogs-radius);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
	line-height: 0;
}

.ogs-slide__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--ogs-radius);
	transition: transform 400ms ease;
}

a.ogs-slide__media:hover .ogs-slide__img,
a.ogs-slide__media:focus-visible .ogs-slide__img {
	transform: scale(1.03);
}

a.ogs-slide__media:focus-visible,
.ogs-slide__title:focus-visible,
.ogs-arrow:focus-visible,
.ogs-dot:focus-visible {
	outline: 2px solid var(--ogs-ink);
	outline-offset: 3px;
}

/* Título: 15px bajo la imagen, tal como pide la especificación. */
.ogs-slide__title {
	display: block;
	margin: 15px 0 0;
	font-size: 1rem;
	line-height: 1.4;
	color: inherit;
	text-decoration: none;
}

a.ogs-slide__title:hover {
	text-decoration: underline;
}

/* --- Flechas ------------------------------------------------------------- */

.ogs-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ogs-arrow-size);
	height: var(--ogs-arrow-size);
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--ogs-ink);
	box-shadow: 0 4px 14px rgba(18, 56, 107, 0.18);
	cursor: pointer;
	transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

.ogs-arrow svg {
	width: 16px;
	height: 16px;
}

.ogs-arrow:hover {
	box-shadow: 0 6px 20px rgba(18, 56, 107, 0.28);
}

.ogs-arrow[disabled] {
	opacity: 0.4;
	cursor: default;
	box-shadow: 0 2px 8px rgba(18, 56, 107, 0.12);
}

.ogs-arrow--prev {
	left: 0;
}

.ogs-arrow--next {
	right: 0;
}

/* En boxed las flechas salen del contenedor. */
.ogs-layout-boxed .ogs-arrow--prev {
	left: calc( var(--ogs-arrow-offset) * -1 );
}

.ogs-layout-boxed .ogs-arrow--next {
	right: calc( var(--ogs-arrow-offset) * -1 );
}

/* --- Dots ---------------------------------------------------------------- */

.ogs-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
}

.ogs-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ogs-dot);
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}

.ogs-dot.is-active {
	background: var(--ogs-dot-active);
	transform: scale(1.08);
}

/* --- Responsive ----------------------------------------------------------
 * ≥1300px  columnas configuradas, flechas fuera del contenedor (-50px).
 * 1024–1299px  las flechas no caben fuera: se reserva espacio dentro.
 * 768–1023px   2 columnas.
 * <768px       1 columna, flechas sobre la imagen.
 * ---------------------------------------------------------------------- */

/* Bajo 1300px el margen lateral del tema ya no da para -50px:
   las flechas entran al contenedor y el carrusel reserva su espacio. */
@media (max-width: 1299px) {
	.ogs-slider {
		--ogs-arrow-offset: 0px;
	}

	.ogs-layout-boxed .swiper-carousel {
		padding-left: calc( var(--ogs-arrow-size) + var(--ogs-arrow-gap) );
		padding-right: calc( var(--ogs-arrow-size) + var(--ogs-arrow-gap) );
	}
}

@media (max-width: 1024px) {
	.ogs-slider {
		--ogs-gap: min( var(--ogs-gap-base), 20px );
		--ogs-arrow-gap: 10px;
	}

	.ogs-cols-3 .ogs-slide,
	.ogs-cols-4 .ogs-slide {
		width: calc( ( 100% - var(--ogs-gap) ) / 2 );
	}

	.ogs-dots {
		margin-top: 24px;
	}
}

@media (max-width: 767px) {
	.ogs-slider {
		--ogs-gap: min( var(--ogs-gap-base), 16px );
		--ogs-arrow-size: 34px;
		padding: 32px 0;
	}

	/* Una columna: las flechas se superponen a la imagen para no restarle ancho. */
	.ogs-layout-boxed .swiper-carousel {
		padding-left: 0;
		padding-right: 0;
	}

	.ogs-layout-fluid .swiper-carousel {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ogs-arrow {
		/* Centrada sobre la imagen (16/10), no sobre imagen + título. */
		top: 31%;
	}

	.ogs-arrow--prev,
	.ogs-layout-boxed .ogs-arrow--prev {
		left: 8px;
	}

	.ogs-arrow--next,
	.ogs-layout-boxed .ogs-arrow--next {
		right: 8px;
	}

	.ogs-layout-fluid .ogs-arrow--prev {
		left: 24px;
	}

	.ogs-layout-fluid .ogs-arrow--next {
		right: 24px;
	}

	.ogs-cols-3 .ogs-slide,
	.ogs-cols-4 .ogs-slide {
		width: 100%;
	}

	.ogs-slide__title {
		font-size: 0.95rem;
	}

	.ogs-dots {
		margin-top: 20px;
	}
}

/* --- Accesibilidad ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ogs-track,
	.ogs-slide,
	.ogs-slide__img {
		transition: none !important;
	}
}