/**
 * Case Study Carousel.
 *
 * Two modes on one block:
 *   .cs-carousel--spotlight  large media + content, fade, pager dots
 *   .cs-carousel--cards       full-bleed scroll-snap track, prev/next arrows
 *
 * Card width is pegged to the theme content size (1280px) so ~2.2 cards show
 * within the container while the track bleeds full width. The blue-gradient
 * stat suffix reuses the global .has-grad-royal-blue-color utility.
 */

.cs-carousel {
	--csc-content: 1280px;
	--csc-gap: 24px;
	--csc-per-view: 2.2;
	--csc-radius: 16px;
	--csc-border: var(--wp--preset--color--border-gray, rgba(238, 238, 242, 0.9));
	/* Responsive to the block's own width, not the page viewport: descendants
	   read this via cqi/cqw units and the @container queries below. */
	container: cs-carousel / inline-size;
	position: relative!important;
	color: var(--wp--preset--color--dark-blue, #11132b);
}

/* ---------------------------------------------------------------- *
 * Slide body (shared)
 * ---------------------------------------------------------------- */

.cs-slide__logo {
	margin-bottom: 1.25rem;
	max-width: 200px;
}
.cs-slide__logo picture {
  display: block;
  width: auto;
  max-width: 100%;
  height: 70px;
}
.cs-slide__logo-img, .cs-slide__logo-img img {
  display: block;
  width: auto;
  height: 70px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1);
  margin: 0;
  border-radius:0;
}

.cs-slide__logo-text {
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--gray, #555769);
	filter: grayscale(1);
}

.cs-slide__quote {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	font-size: clamp(1.5rem, 1rem + 1cqi, 1.75rem);
	line-height: 1.35;
	font-weight: 400;
}

.cs-slide__quote strong,
.cs-slide__quote b {
	color: var(--wp--preset--color--blue, #1354de);
	font-weight: 700;
}

.cs-slide__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cs-slide__author-photo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.cs-slide__author-meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.cs-slide__author-name {
	font-weight: 700;
}

.cs-slide__author-title {
	color: var(--wp--preset--color--gray, #555769);	
	font-size: 0.9375rem;
}

.cs-slide__rule {
	margin: 1.75rem 0;
	border: 0;
	border-top: 1px solid var(--csc-border);
}

/* Stats -------------------------------------------------------- */

.cs-slide__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	justify-content: flex-start;
}

.cs-stat {
	min-width: 0;
}

.cs-stat__figure {
	display: flex;
	align-items: baseline;
	margin: 0 0 0.25rem;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
}

.cs-stat__value {
	color: var(--wp--preset--color--dark-blue, #11132b);
}

/* .cs-stat__suffix carries .has-grad-royal-blue-color (global utility) for the
   royal→blue clipped gradient; this is just the fallback colour + spacing. */
.cs-stat__prefix,
.cs-stat__suffix {
	color: var(--wp--preset--color--blue, #1354de);
}

.cs-stat__text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--gray, #555769);
}

/* Cards read-more --------------------------------------------- */

.cs-slide__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--dark-blue, #11132b);
}

.cs-slide__link-arrow {
	color: var(--wp--preset--color--blue, #1354de);
	transition: transform 0.2s ease;
}

.cs-slide__link:hover .cs-slide__link-arrow {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------- *
 * Spotlight mode
 * ---------------------------------------------------------------- */

.cs-carousel--spotlight {
	max-width: var(--csc-content);
	margin-inline: auto;
	padding-inline: var(--csc-gap);
}

.cs-carousel--spotlight .cs-carousel__viewport {
	position: relative;
}

.cs-carousel--spotlight .cs-slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4cqi, 4rem);
	align-items: center;
}

/* Stacked slides crossfade; single/static slide stays in normal flow. */
.cs-carousel--spotlight:not(.cs-carousel--single) .cs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

.cs-carousel--spotlight:not(.cs-carousel--single) .cs-slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.cs-slide__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--csc-radius);
}

/* Dots — cards mode. Aligned to the content container start. */
.cs-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
	/*padding-inline: max(var(--csc-gap), calc((100vw - var(--csc-content)) / 2));*/
}

.cs-carousel__dots {
	align-items: center;
}

/* Reset UA + theme .wp-element-button styling on the control buttons. */
.cs-carousel__dot,
.cs-carousel__arrow {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	box-shadow: none;
}

.cs-carousel__dot {
	width: 8px;
	height: 8px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--light-gray, #eeeef2);
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}

.cs-carousel__dot.is-active {
	width: 28px;
	background: var(--wp--preset--color--dark-blue, #11132b);
}

/* ---------------------------------------------------------------- *
 * Cards mode
 * ---------------------------------------------------------------- */

.cs-carousel--track .cs-carousel__viewport {
	display: flex;
	gap: var(--csc-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Align first card to the content container; track bleeds to its own width. */
	padding-inline: max(var(--csc-gap), calc((100cqw - var(--csc-content)) / 2));
	padding-bottom: 0.5rem;
	scrollbar-width: none;
}

.cs-carousel--track .cs-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.cs-carousel--track .cs-slide {
	scroll-snap-align: start;
	flex: 0 0
		calc(
			(min(100cqw, var(--csc-content)) - var(--csc-gap) * (var(--csc-per-view) - 1)) /
				var(--csc-per-view)
		);
	display: flex;
	flex-direction: column;
	padding: 0; /*clamp(1.5rem, 3cqi, 2.5rem);
	background: #fff;*/
}

/* Cards mode is a single-item carousel: one full-width card per view with dots
   (Full-width/row mode keeps the multi-card peek at --csc-per-view: 2.2). One
   per view also guarantees the track overflows, so the dots never collapse via
   .cs-carousel--static at wide viewports. Specificity (0,2,0) beats the
   max-width:900px `.cs-carousel { --csc-per-view }` rule, so it holds on mobile
   too. */
.cs-carousel--cards.cs-carousel--track {
	--csc-per-view: 1;
}

.cs-carousel--cards.cs-carousel--track.alignfull {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}

.cs-carousel--track .cs-slide__stats {
	margin-top: auto;
}

/* Row cards carry the card border/radius (cards mode is left borderless). */
.cs-carousel--row .cs-slide {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--csc-border);
	border-radius: var(--csc-radius);
	padding: 2rem;
}

/* Arrows — spotlight sits within its contained layout; row aligns to the
   content container while its track bleeds full width. */
.cs-carousel__arrows {
	display: flex;
	margin-top: 1.5rem;
}

.cs-carousel--row .cs-carousel__viewport,
.cs-carousel--row .cs-carousel__arrows {
	--csc-edge: max(var(--csc-gap), calc((100cqw - var(--csc-content)) / 2));
}

.cs-carousel--row .cs-carousel__viewport {
	--csc-slide-size:
		calc(
			(min(100cqw, var(--csc-content)) - var(--csc-gap) * (var(--csc-per-view) - 1)) /
				var(--csc-per-view)
		);
	padding-inline: 0;
	scroll-padding-left: var(--csc-edge);
}

.cs-carousel--row .cs-carousel__viewport::before,
.cs-carousel--row .cs-carousel__viewport::after {
	content: "";
}

.cs-carousel--row .cs-carousel__viewport::before {
	flex: 0 0 max(0px, calc(var(--csc-edge) - var(--csc-gap)));
}

.cs-carousel--row .cs-carousel__viewport::after {
	flex: 0 0 max(0px, calc(100cqw - var(--csc-edge) - var(--csc-slide-size) - var(--csc-gap)));
}

.cs-carousel--row .cs-carousel__arrows {
	padding-left: var(--csc-edge);
}

/* Space-aware: when the track already fits, JS adds this and we drop the nav. */
.cs-carousel--static .cs-carousel__arrows,
.cs-carousel--static .cs-carousel__dots {
	display: none;
}

.cs-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--dark-blue, #11132b);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.cs-carousel__arrow:hover {
	color: var(--wp--preset--color--blue, #1354de);
	border-color: var(--wp--preset--color--blue, #1354de);
}
/* ---------------------------------------------------------------- *
 * Responsive
 * ---------------------------------------------------------------- */

/* Keyed to the block's own inline size (@container), so the carousel collapses
   to its stacked/single-peek layout whenever its container is narrow — in a
   sidebar or half-width column — not only when the page viewport is small.
   Per-view is set on the viewport (a descendant) because a container can't
   restyle itself, and scoped to --row so it never overrides the cards `=1`. */
@container cs-carousel (max-width: 900px) {
	.cs-carousel--row .cs-carousel__viewport {
		--csc-per-view: 1.15;
	}

	.cs-carousel--spotlight .cs-slide {
		grid-template-columns: 1fr;
	}

	.cs-carousel--spotlight .cs-slide__media {
		order: -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-carousel--spotlight:not(.cs-carousel--single) .cs-slide {
		transition: none;
	}

	.cs-carousel--track .cs-carousel__viewport {
		scroll-behavior: auto;
	}
}