/* Carousels on Swiper (assets/js/carousels.mjs, QA 2026-10-25).
   The viewport also carries the old "caroufredsel_wrapper" class, so block CSS still applies. */
.is-swiper .exc-swiper > .swiper-wrapper {
	flex-wrap: nowrap; /* theme CSS wraps .slides into rows; a carousel track must stay in one row */
}
.exc-swiper .swiper-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
	/* soft in-out for autoplay, quick-start/soft-landing for user moves (set per carousel) */
	transition-timing-function: var(--carousel-ease, var(--ease-out));
}
/* slides share the tallest card's height (the old script measured this in JS) */
.exc-swiper .swiper-slide {
	box-sizing: border-box; /* swiper.css makes the track content-box and the theme's children inherit it */
	height: auto;
}
.exc-swiper.swiper-grab,
.exc-swiper .swiper-wrapper {
	cursor: grab;
}
.exc-swiper:active .swiper-wrapper {
	cursor: grabbing;
}
/* arrows: dim and inert at the ends (non-looping carousels) */
.is-swiper .slider_control .is-disabled {
	opacity: 0.35;
	pointer-events: none;
	transition: opacity var(--dur-short) var(--ease-out);
}
.is-swiper .slider_control .prev,
.is-swiper .slider_control .next {
	transition:
		opacity var(--dur-short) var(--ease-out),
		transform var(--dur-short) var(--ease-out);
}
/* press (QA 2026-10-28): a soft dip like the pill buttons (transition in the arrow button rule below).
   Was a 2px sideways jump with no transition, which read as the button shifting. */
.is-swiper .slider_control .prev:active,
.is-swiper .slider_control .next:active {
	transform: scale(0.96);
}

/* Entrance (assets/js/carousels.mjs staggerEntrance, QA 2026-10-26): slides on screen rise in one by one */
.cs-enter .swiper-slide > * {
	opacity: 0;
	filter: blur(8px);
	transform: translate3d(0, 28px, 0);
}
.cs-enter.cs-in .swiper-slide > * {
	opacity: 1;
	filter: none;
	transform: none;
	transition:
		opacity 900ms var(--ease-out),
		filter 1000ms var(--ease-out),
		transform 1100ms var(--ease-out);
	transition-delay: var(--cs, 0ms);
}
.cs-enter .slider_control {
	opacity: 0;
}
.cs-enter.cs-in .slider_control {
	opacity: 1;
	transition: opacity 700ms var(--ease-out) 450ms;
}

/* ===================================
   Arrow buttons (QA 2026-10-26): on hover/focus the circle stretches into a pill (growing away from
   the other button, so nothing shifts) and the arrow's shaft draws out longer, like the portfolio
   Previous/Next arrows. The arrow is drawn (SVG head + gradient shaft masks) instead of the icon font.
=================================== */
.is-swiper .slider_control .directional_nav {
	position: relative;
	width: 44px;
	height: 44px;
	flex: none;
}
.is-swiper .slider_control .directional_nav a {
	position: absolute;
	top: 0;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	transition:
		width 420ms var(--ease-out),
		background-color 260ms var(--ease-out),
		color 260ms var(--ease-out),
		opacity var(--dur-short) var(--ease-out),
		transform 220ms var(--ease-out);
}
.is-swiper .slider_control .drn-prev a {
	right: 0;
}
.is-swiper .slider_control .drn-next a {
	left: 0;
}
.is-swiper .slider_control .directional_nav a::before {
	--shaft: 9px;
	content: "";
	align-self: center;
	--ah: 14px;
	width: calc(var(--shaft) + 8px);
	height: var(--ah);
	background: currentColor;
	transform: none;
	-webkit-mask:
		var(--arrow-e-head) right center / auto 100% no-repeat,
		linear-gradient(#000, #000) left 0 top 50% / calc(100% - var(--ah) * 0.11) calc(var(--ah) * 0.068) no-repeat;
	mask:
		var(--arrow-e-head) right center / auto 100% no-repeat,
		linear-gradient(#000, #000) left 0 top 50% / calc(100% - var(--ah) * 0.11) calc(var(--ah) * 0.068) no-repeat;
	transition: width 420ms var(--ease-out);
}
.is-swiper .slider_control .directional_nav a.prev::before {
	transform: scaleX(-1);
}
.is-swiper .slider_control .directional_nav a:focus-visible {
	width: 66px;
	background-color: var(--wp--preset--color--darkgreen);
	color: var(--wp--preset--color--white);
}
@media (hover: hover) and (pointer: fine) {
	.is-swiper .slider_control .directional_nav a:hover {
		width: 66px;
		background-color: var(--wp--preset--color--darkgreen);
		color: var(--wp--preset--color--white);
	}
}
.is-swiper .slider_control .directional_nav a:focus-visible::before {
	--shaft: 22px;
}
@media (hover: hover) and (pointer: fine) {
	.is-swiper .slider_control .directional_nav a:hover::before {
		--shaft: 22px;
	}
}
.is-swiper .slider_control .directional_nav a:is(:focus, :active):not(:hover):not(:focus-visible) {
	background-color: transparent;
	color: var(--wp--preset--color--darkgreen);
}