/*
 * Structural rules only — scrolling mechanics and the hooks a designer needs.
 * No colours, type, borders or spacing decisions. Those belong to the theme.
 */

.c-carousel {
	position: relative;
}

.c-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.c-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.c-carousel__track {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	gap: var( --cards-gap, 1rem );
	/* !important: a bare <ul> is exactly what a host theme's own content
	 * styles (list bullets, indent) usually target with an ID-bearing
	 * selector -- e.g. Divi's "#left-area ul{padding:0 0 23px 1em}" -- which
	 * otherwise beats this class selector on specificity alone. The track's
	 * own layout() math (cards-carousel.js) assumes zero padding here, so a
	 * surviving theme padding would silently eat into the width it computes
	 * for every slide, not just look wrong.
	 */
	padding: 0 !important;
	list-style: none !important;
}

.c-carousel__slide {
	flex: 0 0 var( --cards-slide-width, 250px );
	scroll-snap-align: start;
	min-width: 0;
	/* Same reasoning as .c-carousel__track above -- and WebKit keeps the
	 * ::marker on a flex-item <li> even though list-style:none on the <ul>
	 * is inherited, so it must be repeated here too regardless. */
	list-style: none !important;
}

/* The card fills its slide so equal-height rules are the theme's to make. */
.c-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.c-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}

.c-card__media {
	position: relative;
}

.c-card__image {
	display: block;
	width: 100%;
	height: auto;
}

.c-card__badge {
	position: absolute;
}

.c-card__body {
	flex: 1 1 auto;
}

.c-card__actions {
	display: flex;
	flex-wrap: wrap;
	margin-top: auto;
}

/* States exposed for styling; nothing is hidden by the script itself. */
.c-carousel[ data-state='loading' ] .c-carousel__nav,
.c-carousel[ data-state='empty' ] .c-carousel__nav,
.c-carousel[ data-state='error' ] .c-carousel__nav {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.c-carousel__viewport {
		scroll-behavior: auto;
	}
}