/*
 * Case study module (loop carousel in .case-study-section): lay it out by how many cards it shows. BOCO-26681.
 *   1 or 2 cards: heading and button left, the cards right, no carousel chrome.
 *   3 or more:    untouched, the carousel as built.
 * Desktop only (Elementor's tablet breakpoint is 1024px): below it every count stays a carousel.
 *
 * The count comes from the rendered slides. Swiper's .swiper-wrapper holds a <style> element before the slides, so
 * positional selectors (:only-child, :nth-last-child) would miscount; the sibling combinator on .swiper-slide doesn't.
 * :has() can't nest inside :has(), so each condition is its own :has() or :not(:has()) on the section.
 * Sizes follow the Partner Proof section (Figma 11855:75592): 1 card 440x550, 2 cards 359x449 at 1440.
 */
@media (min-width: 1025px) {
	/* 1 or 2 slides: at least one, and no third. */
	.case-study-section:has(.case-study-carousel .swiper-wrapper > .swiper-slide):not(:has(.case-study-carousel .swiper-wrapper > .swiper-slide ~ .swiper-slide ~ .swiper-slide)) {
		display: grid;
		grid-template-columns: min(478px, 33.2vw) minmax(0, 1fr);
		grid-template-areas:
			"title slider"
			"cta slider";
		grid-template-rows: auto 1fr;
		column-gap: 64px;
		row-gap: 40px;
		align-items: start;

		/* 1 slide: the heading column grows to make room, as on the Partner pages. */
		&:not(:has(.case-study-carousel .swiper-wrapper > .swiper-slide ~ .swiper-slide)) {
			grid-template-columns: min(608px, 42.2vw) minmax(0, 1fr);
		}

		& > .case-study-section-title {
			grid-area: title;
			width: auto;
			max-width: 100%;
		}

		& > .case-study-slider {
			grid-area: slider;
			width: 100%;
			margin: 0;
			/* The carousel's right padding (its bleed past the content edge) would push the cards in. */
			padding-inline: 0;

			& .case-study-carousel {
				width: 100%;
			}

			/* Nothing to scroll: no arrows or dots, and Swiper's translate can't move the cards. */
			& .elementor-swiper-button,
			& .swiper-pagination {
				display: none;
			}

			/* .swiper is a grid, so the wrapper's min-content width (the cards at 440) would stop them shrinking. */
			& .swiper-wrapper {
				width: 100%;
				min-width: 0;
				display: flex;
				justify-content: flex-end;
				gap: 20px;
				height: auto;
				transform: none !important;
			}

			/* Swiper writes widths and margins onto each slide, so these need !important. */
			& .swiper-slide {
				flex: 0 1 440px;
				width: 440px !important;
				min-width: 0;
				max-width: 100%;
				height: auto !important;
				margin: 0 !important;
				aspect-ratio: 4 / 5;
				max-height: 550px;
			}

			& .case-study-card {
				height: 100%;
				max-height: none;
			}
		}

		& > .case-study-slider ~ div {
			grid-area: cta;
			width: auto;
			justify-content: flex-start;
		}
	}
}