/**
 * Category banner rotator.
 *
 * A full-width band of artwork at the head of the shop and category archives. The banners are
 * 1820x201 — roughly 9:1 — so the band is sized by aspect ratio rather than a fixed height, and
 * the image fills it. No text is drawn over the top: unlike the homepage promo rails, the copy is
 * already part of the artwork.
 */

.csl-catban {
	position: relative;
	margin: 0 0 clamp( 1.5rem, 4vw, 2.5rem );
	border: 2px solid var( --csl-navy, #143242 );
	background-color: var( --csl-neutral, #eeeeee );
	overflow: hidden;
}

.csl-catban__slide {
	position: relative;
}

/*
 * The band's shape. `aspect-ratio` on the image keeps every slide identical before any of them
 * load, so the page does not jump as the rotation starts — and the min-height stops the band
 * collapsing to a sliver on a very narrow screen.
 *
 * `height: auto` is not optional. `wp_get_attachment_image()` writes `width` and `height`
 * attributes onto the tag, and the height attribute is a presentational hint for the CSS `height`
 * property — so without this the box is pinned to the artwork's own 201px at every viewport and
 * `aspect-ratio` is ignored, because a ratio only resolves against an auto dimension.
 */
.csl-catban__image {
	display: block;
	width: 100%;
	height: auto;
	min-height: 84px;
	aspect-ratio: 1820 / 201;
	object-fit: cover;
	/*
	 * Anchored left, not centred. The band is 9:1 and its box never is, so `cover` always crops
	 * horizontally — and centred cropping eats the chevron from the left edge inwards. The chevron
	 * carries the category name, which is the one part of the artwork that has to survive. What
	 * gets cropped instead is the far right, which is empty ground by design.
	 */
	object-position: left center;
}

.csl-catban__link {
	display: block;
	text-decoration: none;
}

/* ---------------------------------------------------------------------- copy */

/*
 * The description, laid into the blank third the artwork leaves on the right.
 *
 * Measured off the supplied banners: the photography fades out between 63% and 69% across
 * depending on which one, and the pale ground runs from there to the border. Starting at 70% of
 * the box clears the latest of those fades on all four.
 *
 * `pointer-events: none` so the link underneath still owns every click in the band — the copy sits
 * on top of it, and without this it would punch a dead rectangle in the middle of a clickable
 * banner.
 */
.csl-catban__copy {
	position: absolute;
	top: 50%;
	right: 4%;
	left: 70%;
	transform: translateY( -50% );
	pointer-events: none;
	color: var( --csl-navy, #143242 );
	font-size: clamp( 0.75rem, 0.5rem + 0.6vw, 1.0625rem );
	line-height: 1.45;
}

.csl-catban__copy p {
	margin: 0;
	/*
	 * Three lines, then stop. Fade transitions cross-dissolve slides in place, so a slide with
	 * four lines of copy and one with two would resize the band mid-fade.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/*
 * Under 768px `cover` has cropped the pale ground off the right entirely — there is nowhere on the
 * artwork left to put the copy — so it moves below the band's image and takes the band's own
 * ground instead. Two lines there, and a fixed min-height, so every slide is the same height and
 * the fade has nothing to jump over.
 */
@media ( max-width: 767px ) {
	.csl-catban__copy {
		position: static;
		transform: none;
		padding: 0.625rem 0.875rem;
		background-color: var( --csl-neutral, #eeeeee );
	}

	.csl-catban__copy p {
		-webkit-line-clamp: 2;
		min-height: 2.9em;
	}
}

.csl-catban__link:focus-visible {
	outline: 3px solid var( --csl-pink, #ef357f );
	outline-offset: -3px;
}

/*
 * The pre-mount fallback: without it every slide is stacked and visible for the moment between
 * HTML and Splide, which on a 9:1 band is a very tall flash. The JS removes this class before
 * mounting. It is `.csl-catban__slide` and not `li` so it cannot reach into anything else.
 */
.csl-catban__slider--static .csl-catban__slide + .csl-catban__slide {
	display: none;
}

.csl-catban__slider--static .splide__list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------- one banner */

/* No rotation, so no dots and no track — just the artwork in the same band. */
.csl-catban--single .csl-catban__image {
	min-height: 84px;
}