/**
 * Media Partners — front end and editor canvas.
 *
 * Reproduces the Splide carousel this replaces: a horizontal strip that advances
 * on its own, pauses on hover, has prev/next arrows, and scales the centred logo.
 * Arrows are injected by the shared carousel engine
 * (resources/blocks/_shared/carousel.js), so nothing here assumes they exist —
 * and its `.npna-carousel__arrow` class is shared with other carousel blocks, so
 * every rule below is scoped under `.npna-media-partners` rather than styling it
 * globally.
 *
 * Motion is driven by scroll position rather than a keyframe, so the browser
 * handles the easing and nothing needs measuring until the strip is visible.
 */

.npna-media-partners {
	--npna-carousel-logo-height: 96px;
	--npna-carousel-gap: 5rem;
	--npna-carousel-ink: var( --wp--preset--color--darkblue, #026f87 );

	position: relative;
}

.npna-media-partners__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/*
	 * Deliberately not `scroll-behavior: smooth`: its duration is fixed and
	 * fast, and it would also animate the instant position fixes the loop wrap
	 * depends on. carousel.js tweens scrollLeft itself over the configured time.
	 */
}

.npna-media-partners__viewport::-webkit-scrollbar {
	display: none;
}

.npna-media-partners__list {
	display: flex;
	align-items: center;
	gap: var( --npna-carousel-gap );
	/* Vertical room for the centred logo's 1.3x scale, which would clip otherwise. */
	padding: 2.5rem 0;
	margin: 0;
	width: max-content;
	list-style: none;
}

.npna-media-partners__item {
	flex: none;
	margin: 0;
}

.npna-media-partners__logo {
	display: block;
	width: auto;
	height: var( --npna-carousel-logo-height );
	max-width: 200px;
	object-fit: contain;
	object-position: center;
	transition: transform 700ms ease-in-out;
}

/* The logo nearest the middle of the viewport, matching Splide's focus: center. */
.npna-media-partners__item.is-center .npna-media-partners__logo {
	transform: scale( 1.3 );
}

/* Arrows ----------------------------------------------------------------- */

.npna-media-partners .npna-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: var( --npna-carousel-ink );
	cursor: pointer;
	background-color: var( --wp--preset--color--white, #ffffff );
	border: 2px solid var( --npna-carousel-ink );
	border-radius: 9999px;
	transform: translateY( -50% );
}

.npna-media-partners .npna-carousel__arrow:hover,
.npna-media-partners .npna-carousel__arrow:focus-visible {
	color: var( --wp--preset--color--white, #ffffff );
	background-color: var( --npna-carousel-ink );
}

.npna-media-partners .npna-carousel__arrow svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.npna-media-partners .npna-carousel__arrow--prev {
	left: 0;
}

.npna-media-partners .npna-carousel__arrow--next {
	right: 0;
}

@media ( min-width: 768px ) {
	.npna-media-partners .npna-carousel__arrow--prev {
		left: -30px;
	}

	.npna-media-partners .npna-carousel__arrow--next {
		right: -30px;
	}
}

.npna-media-partners__empty {
	margin: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.npna-media-partners__logo {
		transition: none;
	}
}