/**
 * Card Slider block styles.
 *
 * Everything is scoped under .card-slider so the block never leaks styles into
 * the rest of the page. Swiper's own CSS comes from vendor/swiper.
 */

.card-slider {
	--card-slider-radius: 18px;
	--card-slider-padding: 32px;
	--card-slider-gap: 48px;
	--card-slider-font-size: 22px;
	--card-slider-background: #fff;
	--card-slider-shadow: 0 0 48px 0 #01295514;
	--card-slider-icon-size: 48px;

	/* Swiper theme variables. */
	--swiper-theme-color: currentColor;
	--swiper-navigation-size: 28px;
	--swiper-navigation-sides-offset: 0px;
	--swiper-pagination-bottom: 0px;
	--swiper-navigation-top-offset: auto;

	position: relative;
	padding-bottom: 48px;
}

.card-slider__slide {
	box-sizing: border-box;
	padding: var(--card-slider-padding);
	border-radius: var(--card-slider-radius);
	background-color: var(--card-slider-background);
	box-shadow: var(--card-slider-shadow);
	font-size: var(--card-slider-font-size);
}

.card-slider__content {
	display: flex;
	flex-direction: column;
	row-gap: var(--card-slider-gap);
	height: 100%;
}

.card-slider__icon {
	display: block;
	width: var(--card-slider-icon-size);
	height: var(--card-slider-icon-size);
	object-fit: contain;
}

.card-slider__title {
	margin: 0;
}

.card-slider__description > *:first-child {
	margin-top: 0;
}

.card-slider__description > *:last-child {
	margin-bottom: 0;
}

/* Cards effect needs room around the stack for the offset/rotated siblings. */
.card-slider.swiper-cards {
	overflow: visible;
}

/* Before Swiper initialises (and if JS never runs) the cards stay readable as a
   normal clipped row — no content is hidden. */
.card-slider[data-card-slider]:not(.swiper-initialized) .card-slider__pagination,
.card-slider[data-card-slider]:not(.swiper-initialized) .card-slider__nav {
	display: none;
}

/* Pagination sits below the stack rather than on top of the cards. */
.card-slider__pagination.swiper-pagination {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	line-height: 1;
}

.card-slider__nav.swiper-button-prev,
.card-slider__nav.swiper-button-next {
	top: auto;
	bottom: 0;
	width: var(--swiper-navigation-size);
	height: var(--swiper-navigation-size);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.card-slider__nav.swiper-button-prev {
	left: 0;
}

.card-slider__nav.swiper-button-next {
	right: 0;
}

/* Swiper 14 injects an <svg class="swiper-navigation-icon"> into each button. */
.card-slider__nav .swiper-navigation-icon {
	width: 40%;
	height: auto;
	pointer-events: none;
}

.card-slider__nav .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Editor preview: no Swiper, just a static grid of the cards. */
.card-slider--preview {
	padding-bottom: 0;
}

.card-slider__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: stretch;
}

@media (max-width: 768px) {
	.card-slider {
		--card-slider-padding: 24px;
		--card-slider-gap: 32px;
		--card-slider-font-size: 18px;
	}
}