/* Webshero Widgets — WS Carrusel de Proyectos
 * Réplica visual del carrusel de hispaflex.com (Owl stagePadding → Swiper).
 */

.wsw-pc { position: relative; }

/* ============================================================
 * Pre-init (antes de que Swiper monte): cada slide recibe el
 * ancho que tendrá post-init (defaults del widget: 1/2/3 cards
 * por viewport). Los slides sobrantes desbordan en flex row y
 * quedan recortados por `.swiper { overflow:hidden }` de Swiper.
 * No usamos `display:none` para no provocar layout shift al
 * pasar a estado is-ready.
 *
 * El JS del widget añade `.is-ready` al wrapper `.wsw-pc` cuando
 * Swiper termina su init → reglas neutralizadas y los slides
 * pasan a usar el `width` inline que Swiper escribe. Swiper v8
 * no añade clase al DOM por sí mismo.
 * ============================================================ */
.wsw-pc:not(.is-ready) .swiper-slide {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	min-width: 0;
}

@media (min-width: 768px) {
	.wsw-pc:not(.is-ready) .swiper-slide {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		width: 50% !important;
	}
}

@media (min-width: 992px) {
	.wsw-pc:not(.is-ready) .swiper-slide {
		flex: 0 0 33.3333% !important;
		max-width: 33.3333% !important;
		width: 33.3333% !important;
	}
}

/* ============================================================
 * Swiper — peek lateral (stage padding)
 * Padding sobre .swiper con overflow:hidden = los slides que
 * caen dentro del padding se ven (peek), los que salen fuera
 * del padding quedan recortados. Mismo efecto que Owl stagePadding.
 * ============================================================ */
.wsw-pc__swiper {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	/* padding-left/right vienen vía Elementor (control "stage padding") */
}

.wsw-pc__swiper .swiper-wrapper {
	display: flex;
	align-items: stretch;
}

.wsw-pc__slide {
	height: auto;
	display: flex;
}

/* ============================================================
 * Card
 * ============================================================ */
.wsw-pc__card {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.wsw-pc__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #f3f3f3;
}

.wsw-pc__image > picture {
	display: block;
	width: 100%;
	height: 100%;
}

.wsw-pc__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

.wsw-pc__placeholder {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #eaeaea, #f7f7f7);
}

/* Gradiente inferior tipo Hispaflex (box-shadow inset).
 * Selector se controla por Elementor; aquí el fallback. */
.wsw-pc__image::before {
	content: '';
	position: absolute;
	inset: 0;
	box-shadow: inset 0 -134px 119px -55px rgba(0, 0, 0, 1);
	pointer-events: none;
	z-index: 1;
}

/* Hover: zoom imagen (solo si data-zoom-on-hover="yes") */
.wsw-pc[data-zoom-on-hover="yes"] .wsw-pc__card:hover .wsw-pc__image img {
	transform: scale(1.06);
}

/* ============================================================
 * Caption
 * ============================================================ */
.wsw-pc__caption {
	position: absolute;
	bottom: 25px;
	left: 15px;
	right: 15px;
	color: #fff;
	z-index: 2;
	pointer-events: none;
}

.wsw-pc__item-cat {
	display: block;
	color: #fff;
	margin-bottom: 4px;
	line-height: 1.2;
}

.wsw-pc__item-title-wrap { margin: 0; }
.wsw-pc__item-title {
	margin: 0;
	color: #fff;
}

/* Link-all overlay: hace la tarjeta entera clicable */
.wsw-pc__link-all {
	position: absolute;
	inset: 0;
	z-index: 3;
	color: transparent;
	text-decoration: none;
	font-size: 0;
}
.wsw-pc__link-all:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* ============================================================
 * Flechas (opcional)
 * ============================================================ */
.wsw-pc__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	transition: background .2s ease, color .2s ease;
}
.wsw-pc__arrow:hover,
.wsw-pc__arrow:focus { background: rgba(0, 0, 0, 0.7); }
.wsw-pc__arrow--prev { left: 16px; }
.wsw-pc__arrow--next { right: 16px; }
.wsw-pc__arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* ============================================================
 * Paginación (opcional) — usa estilos de Swiper, color por defecto
 * ============================================================ */
.wsw-pc__pagination {
	position: relative;
	margin-top: 24px;
	text-align: center;
}
.wsw-pc__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: rgba(0, 0, 0, 0.3);
	opacity: 1;
	margin: 0 4px;
}
.wsw-pc__pagination .swiper-pagination-bullet-active {
	background: var(--e-global-color-primary, #333);
}