/**
 * Article carousel navigation arrows.
 *
 * Elementor places the arrows at left:10px / right:10px, which puts them on
 * top of the first and last card's featured image. These rules pull the track
 * in by a gutter on each side and move the arrows into that gutter, so each
 * arrow sits just outside the card nearest it.
 *
 * Vertical centring also needs correcting. Elementor offsets the arrows by
 * half of an assumed 30px pagination strip (top: calc(50% - 30px / 2)), but
 * the strip is actually 16px here, which leaves the arrows 7px above the
 * centre of the card. --asta-pagination-space carries the real value so the
 * arrow lands on the card's true centre; change it if the pagination style
 * changes.
 *
 * Scoped to .asta-article-carousel so the Results and Attorney carousels,
 * which have their own styling, are unaffected.
 */

.asta-article-carousel {
	--asta-carousel-gutter: 48px;
	--asta-pagination-space: 16px;

	/* Elementor reads these for the arrow colour, including its SVG fill. */
	--arrow-normal-color: #171717;
	--arrow-hover-color: #171717;
}

.asta-article-carousel .swiper {
	width: calc(100% - (2 * var(--asta-carousel-gutter)));
	margin-inline: auto;
}

.asta-article-carousel .elementor-swiper-button {
	color: #171717;
}

/*
 * Only the pagination-outside layout reserves space below the cards, so the
 * correction only applies there. The `.swiper ~` part is needed to match the
 * specificity of Elementor's own rule, which is otherwise more specific and
 * wins regardless of load order.
 */
.asta-article-carousel.elementor-pagination-position-outside .swiper ~ .elementor-swiper-button,
.asta-article-carousel.elementor-pagination-position-outside .swiper .elementor-swiper-button {
	top: calc(50% - (var(--asta-pagination-space) / 2));
}

.asta-article-carousel .elementor-swiper-button svg {
	fill: #171717;
}

/* left/right of 0 puts each arrow in the gutter, clear of the cards. */
.asta-article-carousel .elementor-swiper-button-prev {
	left: 0;
	right: auto;
}

.asta-article-carousel .elementor-swiper-button-next {
	right: 0;
	left: auto;
}

/*
 * Keep the arrows reachable by keyboard users. Elementor renders them as
 * role="button" divs with no visible focus style of their own.
 */
.asta-article-carousel .elementor-swiper-button:focus-visible {
	outline: 2px solid #171717;
	outline-offset: 3px;
	border-radius: 2px;
}

/*
 * On narrow screens a single card fills the width, so 48px gutters on both
 * sides would leave very little room for the card itself.
 */
@media (max-width: 767px) {
	.asta-article-carousel {
		/* Wide enough to clear the 20px arrow with a little breathing room,
		   without eating too much of the single visible card. */
		--asta-carousel-gutter: 32px;
	}

	.asta-article-carousel .elementor-swiper-button {
		font-size: 20px;
	}
}