/* ==========================================================================
 * Blokino · Chrome de carrusel COMPARTIDO (Swiper UI)
 * --------------------------------------------------------------------------
 * Flechas + paginación + fallback pre-init, agnóstico por tokens --tnt-*.
 * Lo encola cualquier bloque de carrusel (blokino/testimonials, blokino/content-slider)
 * vía Blokino_Runtime::enqueue_carousel(). El CSS de Swiper lo inyecta
 * runtime/carousel.js de forma lazy junto al bundle; subimos especificidad con
 * .blokino-carousel.swiper para ganarle a su CSS inyectado tarde.
 * ========================================================================== */

.blokino-carousel {
	position: relative;
	--swiper-theme-color: var( --tnt-color-accent );
	--swiper-navigation-size: var( --tnt-space-6 );
}

.blokino-carousel.swiper {
	padding-bottom: var( --tnt-space-6 );
}

.blokino-carousel.swiper .swiper-pagination {
	bottom: var( --tnt-space-1 );
}

.blokino-carousel.swiper .swiper-button-prev,
.blokino-carousel.swiper .swiper-button-next {
	top: calc( ( 100% - var( --tnt-space-6 ) ) / 2 );
	margin-top: 0;
	transform: translateY( -50% );
}

/* Equal-height slides por defecto (cards parejas). */
.blokino-carousel .swiper-wrapper {
	align-items: stretch;
}
.blokino-carousel .swiper-slide {
	box-sizing: border-box;
	height: auto;
}

/* Fallback pre-init (sin JS / antes de montar Swiper). --tnt-carousel-spv inline. */
.blokino-carousel:not( .swiper-initialized ) {
	overflow: hidden;
}
.blokino-carousel:not( .swiper-initialized ) .swiper-wrapper {
	display: flex;
	flex-wrap: nowrap;
}
.blokino-carousel:not( .swiper-initialized ) .swiper-slide {
	/* max() enforces a per-breakpoint minimum width so an un-hydrated multi-up
	   carousel isn't cramped on small screens; a 1-up carousel (spv=1) stays 100%. */
	flex: 0 0 max( calc( 100% / var( --tnt-carousel-spv, 1 ) ), var( --tnt-carousel-fallback-min, 0% ) );
	max-inline-size: 100%;
	box-sizing: border-box;
}
@media ( max-width: 1023px ) {
	.blokino-carousel:not( .swiper-initialized ) { --tnt-carousel-fallback-min: 46%; }
}
@media ( max-width: 599px ) {
	.blokino-carousel:not( .swiper-initialized ) { --tnt-carousel-fallback-min: 88%; }
}
.blokino-carousel:not( .swiper-initialized ) .swiper-button-prev,
.blokino-carousel:not( .swiper-initialized ) .swiper-button-next,
.blokino-carousel:not( .swiper-initialized ) .swiper-pagination {
	display: none;
}

/* Flechas refinadas (#4a): 44px, contraste claro/oscuro, hover easing, focus, reduced-motion. */
.blokino-carousel .swiper-button-prev,
.blokino-carousel .swiper-button-next {
	width: var( --tnt-space-7 );
	height: var( --tnt-space-7 );
	min-width: 44px;
	min-height: 44px;
	border-radius: var( --tnt-radius-pill );
	background: color-mix( in srgb, var( --tnt-color-surface ) 92%, transparent );
	border: 1px solid color-mix( in srgb, var( --tnt-color-border ) 60%, transparent );
	box-shadow: var( --tnt-shadow-2 );
	backdrop-filter: blur( 6px );
	color: var( --tnt-color-text );
	transition:
		transform var( --tnt-dur-fast ) var( --tnt-ease-power3 ),
		background-color var( --tnt-dur-fast ) var( --tnt-ease-power3 );
}
.blokino-carousel .swiper-button-prev::after,
.blokino-carousel .swiper-button-next::after {
	font-size: var( --tnt-text-sm );
	font-weight: 700;
}
.blokino-carousel .swiper-button-prev:hover,
.blokino-carousel .swiper-button-next:hover {
	transform: translateY( -50% ) scale( 1.08 );
	background: var( --tnt-color-surface );
}
.blokino-carousel .swiper-button-prev:focus-visible,
.blokino-carousel .swiper-button-next:focus-visible {
	outline: 2px solid var( --tnt-color-accent );
	outline-offset: 2px;
}
@media ( prefers-reduced-motion: reduce ) {
	.blokino-carousel .swiper-button-prev,
	.blokino-carousel .swiper-button-next {
		transition: none;
	}
	.blokino-carousel .swiper-button-prev:hover,
	.blokino-carousel .swiper-button-next:hover {
		transform: translateY( -50% );
	}
}