/**
 * FS Services — vitrina (layout «showcase»)
 *
 * Se apoya en carousel.css para la tarjeta. Aquí solo va el carril de scroll.
 *
 * El JS mide dónde cae el widget en la ventana y escribe cuatro variables:
 *   --fss-bleed-l / --fss-bleed-r  cuánto se sale el carril por cada lado
 *   --fss-pad-l   / --fss-pad-r    dónde empieza la primera tarjeta y dónde
 *                                  termina la última
 * Hasta que el JS corre se usan valores seguros, sin desborde.
 */

.fss--showcase {
	--fss-card-w: 400px;
	--fss-edge-min: 20px;
	--fss-container: 1200;
	--fss-snap: 1;
	--fss-sc-drag: 1;
	--fss-sc-align: widget;
	--fss-sc-bleed: both;
	--fss-sc-arrows: sides;
	--fss-arrows: flex;
	--fss-dots: none;

	--fss-bleed-l: 0px;
	--fss-bleed-r: 0px;
	--fss-pad-l: 0px;
	--fss-pad-r: 0px;
}

.fss__stage {
	position: relative;
	margin-left: calc(var(--fss-bleed-l) * -1);
	margin-right: calc(var(--fss-bleed-r) * -1);
}

.fss__scroller {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scroll-padding-left: var(--fss-pad-l);
	scroll-padding-right: var(--fss-pad-r);
	scrollbar-width: none;
	/* Deja respirar la sombra y el zoom de las tarjetas sin que el
	   overflow las corte arriba y abajo. */
	padding-block: 14px;
	margin-block: -14px;
	outline: none;
}

.fss__scroller::-webkit-scrollbar {
	display: none;
}

.fss--snap .fss__scroller {
	scroll-snap-type: x mandatory;
}

.fss__scroller:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* El relleno va en el carril y no en el scroller: Safari ignora el padding
   derecho de un contenedor con overflow, y la última tarjeta quedaría pegada
   al borde. */
.fss__rail {
	display: flex;
	gap: var(--fss-gap);
	width: max-content;
	padding-left: var(--fss-pad-l);
	padding-right: var(--fss-pad-r);
}

.fss--showcase .fss__slide {
	/* En un teléfono muy estrecho la tarjeta cede para que siempre asome
	   un trozo de la siguiente. */
	flex: 0 0 auto;
	width: min(var(--fss-card-w), calc(100vw - var(--fss-pad-l) - 44px));
	margin-right: 0;
	scroll-snap-align: start;
}

.fss--showcase .fss-card {
	width: 100%;
}

.fss.is-dragging .fss__scroller {
	scroll-snap-type: none;
	cursor: grabbing;
}

.fss--sc-drag .fss__scroller {
	cursor: grab;
}

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

.fss__paddles {
	display: var(--fss-arrows);
	pointer-events: none;
}

.fss .fss__paddle {
	pointer-events: auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(210, 210, 215, .64);
	background-image: none;
	color: rgba(0, 0, 0, .56);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	box-shadow: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: opacity 260ms ease, background-color 200ms ease, color 200ms ease, visibility 0s linear 0s;
}

.fss .fss__paddle:hover,
.fss .fss__paddle:focus,
.fss .fss__paddle:focus-visible {
	background-color: rgba(223, 223, 227, .72);
	color: rgba(0, 0, 0, .64);
}

.fss .fss__paddle:focus-visible {
	outline: 2px solid #0071e3;
	outline-offset: 2px;
}

.fss .fss__paddle[disabled] {
	opacity: 0;
	visibility: hidden;
	cursor: default;
	transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.fss .fss__paddle svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* A los lados: sobre el carril, pegadas a los bordes de la ventana. */
.fss--sc-arrows-sides .fss__paddles {
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
}

/* Debajo: a la derecha, alineadas con el final del contenido. */
.fss--sc-arrows-below .fss__paddles {
	position: static;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 22px;
	padding-right: var(--fss-pad-r);
}

.fss--sc-arrows-below .fss .fss__paddle[disabled],
.fss--sc-arrows-below .fss__paddle[disabled] {
	opacity: .35;
	visibility: visible;
}

/* En táctil se desliza con el dedo: las flechas laterales sobran. */
@media (hover: none) and (pointer: coarse) {
	.fss--sc-arrows-sides .fss__paddles {
		display: none;
	}
}

.fss--showcase .fss__controls {
	padding-left: var(--fss-pad-l);
	padding-right: var(--fss-pad-r);
}

.fss--showcase .fss__controls:empty,
.fss--showcase .fss__dots:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.fss--showcase[data-reduce="1"] .fss__scroller {
		scroll-behavior: auto;
	}
}