/**
 * Business Code Widgets - Icon Cards
 * ---------------------------------------------------------------------
 * Depende de assets/css/core/variables.css (--bcw-* tokens).
 * El número de tarjetas visibles por breakpoint se resuelve con
 * variables CSS inline (--bcw-items-desktop/tablet/mobile) generadas en
 * render.php a partir de los controles responsive de Elementor, y aquí
 * solo decidimos CUÁL de esas tres variables aplica según el ancho de
 * pantalla. Así evitamos duplicar CSS por breakpoint para cada widget.
 */

.bcw-icon-cards {
	position: relative;
	--bcw-items: var( --bcw-items-desktop, 3 );
}

@media (max-width: 1024px) {
	.bcw-icon-cards {
		--bcw-items: var( --bcw-items-tablet, 2 );
	}
}

@media (max-width: 767px) {
	.bcw-icon-cards {
		--bcw-items: var( --bcw-items-mobile, 1 );
	}
}

.bcw-icon-cards__viewport {
	overflow: hidden;
}

.bcw-icon-cards__track {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	gap: var( --bcw-gap, 24px );

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.bcw-icon-cards__track::-webkit-scrollbar {
	display: none;
}

.bcw-icon-cards__slide {
	flex: 0 0 calc( ( 100% - ( var( --bcw-items ) - 1 ) * var( --bcw-gap, 24px ) ) / var( --bcw-items ) );
	scroll-snap-align: start;
	min-width: 0;
}

.bcw-icon-cards__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var( --bcw-color-surface );
	border: 1px solid var( --bcw-color-border );
	border-radius: var( --bcw-radius-md );
	box-shadow: var( --bcw-shadow-sm );
	padding: 32px 24px;
	transition:
		transform var( --bcw-transition-speed ) var( --bcw-transition-ease ),
		box-shadow var( --bcw-transition-speed ) var( --bcw-transition-ease ),
		background-color var( --bcw-transition-speed ) var( --bcw-transition-ease ),
		border-color var( --bcw-transition-speed ) var( --bcw-transition-ease );
}

.bcw-icon-cards__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	width: 40px;
	height: 40px;
	margin: 0 auto 16px;
	color: var( --bcw-color-primary );
}

.bcw-icon-cards__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.bcw-icon-cards__image {
	max-width: 100%;
	height: auto;
	border-radius: var( --bcw-radius-sm );
	margin: 0 auto 16px;
}

.bcw-icon-cards__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 600;
	color: var( --bcw-color-text );
}

.bcw-icon-cards__description {
	margin: 0 0 16px;
	color: var( --bcw-color-text-muted );
	line-height: 1.6;
}

.bcw-icon-cards__button {
	display: inline-block;
	margin-top: auto;
	padding: 10px 20px;
	border-radius: var( --bcw-radius-sm );
	background: var( --bcw-color-primary );
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	transition: background-color var( --bcw-transition-speed ) var( --bcw-transition-ease );
	align-self: flex-start;
}

/* --- Navegación --- */

.bcw-icon-cards__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var( --bcw-color-border );
	border-radius: 50%;
	background: var( --bcw-color-surface );
	color: var( --bcw-color-text );
	cursor: pointer;
	box-shadow: var( --bcw-shadow-sm );
	transition: background-color var( --bcw-transition-speed ) var( --bcw-transition-ease );
}

.bcw-icon-cards__arrow:hover {
	background: var( --bcw-color-primary );
	color: #fff;
}

.bcw-icon-cards__arrow--prev {
	left: -20px;
}

.bcw-icon-cards__arrow--next {
	right: -20px;
}

/* --- Paginación --- */

.bcw-icon-cards__pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.bcw-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --bcw-color-border );
	cursor: pointer;
	transition: background-color var( --bcw-transition-speed ) var( --bcw-transition-ease ), transform var( --bcw-transition-speed ) var( --bcw-transition-ease );
}

.bcw-carousel__dot.is-active {
	background: var( --bcw-color-primary );
	transform: scale( 1.3 );
}

@media (prefers-reduced-motion: reduce) {
	.bcw-icon-cards__track {
		scroll-behavior: auto;
	}
	.bcw-icon-cards__card,
	.bcw-carousel__dot {
		transition: none;
	}
}