/**
 * Casas Choice — ".slider-cards_icon" icon-card row (see
 * inc/slider-cards-icon.php + assets/js/slider-cards-icon.js).
 *
 * The editor owns every card's own look (icon, title, text, background) —
 * this file only owns the row itself: turning it into a Swiper track,
 * sizing/spacing the slides (assets/js/slider-cards-icon.js's BREAKPOINTS
 * steps from 1-up on a phone to 5-up at the site's 1728px max container
 * width, always a whole card, always a 24px gap) and the "N / total" counter
 * + prev/next row underneath.
 *
 * The counter/nav row hides itself via Swiper's own `swiper-pagination-lock`
 * class — added automatically (watchOverflow, on by default) exactly when
 * every card already fits without scrolling — rather than a fixed
 * `min-width` media query, since whether that's true depends on how many
 * cards the editor actually put in the block, not just the viewport width
 * (a 6-card row never fits, even at 1728px+, so it never gets this class —
 * see slider-cards-icon.js's docblock for the full reasoning).
 */

.cc-sci,
.cc-sci *,
.cc-sci *::before,
.cc-sci *::after {
	box-sizing: border-box;
}

/* The sole direct child slider-cards-icon.js leaves inside `.slider-cards_icon`
 * once it moves the original cards out into the swiper below — `flex` (not
 * just `width`) so it still claims the full row even if the block's own
 * layout (Group/Row/Columns — unknown from here) is itself a flex container. */
.cc-sci {
	display: flex;
	flex-direction: column;
	flex: 1 1 100%;
	width: 100%;
}

.cc-sci__swiper {
	width: 100%;
}

/* Neutralises whatever width the editor put on each card as a grid column —
 * Gutenberg Columns blocks in particular set `flex` (grow/shrink/basis)
 * inline, on the element itself, which otherwise fights the width Swiper
 * computes per breakpoint and sets as that same element's inline `width`
 * (`flex-basis: auto`, forced back to the default here, defers to that).
 * `!important` because an inline style — the likely source of that original
 * flex — otherwise beats an external stylesheet regardless of its
 * specificity. Margin is deliberately left alone: Swiper sets its own
 * per-slide inline `margin-right`/`margin-bottom` to realise `spaceBetween`
 * (the 24px gap), which a `margin: 0 !important` here would silently
 * cancel out again. */
.cc-sci__slide {
	flex: 0 0 auto !important;
	max-width: none !important;
	min-width: 0 !important;
}

.cc-sci__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
}

.cc-sci__foot:has( .swiper-pagination-lock ) {
	display: none;
}

.cc-sci__counter {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 500;
	color: var( --theme-palette-color-5, #333538 );
}

.cc-sci__nav {
	display: flex;
	gap: 8px;
}

.cc-sci__prev,
.cc-sci__next {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border-radius: 999px;
	border: 1px solid rgba( 51, 53, 56, 0.35 );
	background: transparent;
	color: var( --theme-palette-color-5, #333538 );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.15s ease;
}

.cc-sci__prev svg,
.cc-sci__next svg {
	width: 18px;
	height: 18px;
	display: block;
}

.cc-sci__prev.swiper-button-disabled,
.cc-sci__next.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}