/* ==========================================================================
   SUDAIR PHARMA — EDITORIAL CAROUSEL
   One slide at a time: copy beside a large photograph, on a dark brand card.

   Everything is scoped under .sud-car. These class names exist nowhere else on
   the site, so nothing here can reach an existing component.
   ========================================================================== */

.sud-car {
	--car-radius: var(--sud-radius-xl, 32px);
	--car-pad: clamp(1.75rem, 3.4vw, 3.25rem);
	--car-ease: cubic-bezier(.65, .01, .18, 1);
	position: relative;
}

/* --------------------------------------------------------------------------
   VIEWPORT + TRACK
   -------------------------------------------------------------------------- */

.sud-car__viewport {
	overflow: hidden;
	border-radius: var(--car-radius);
}

.sud-car__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Set by carousel.js. Declared here so slide 1 shows with no script. */
	transform: translate3d(0, 0, 0);
	transition: transform .72s var(--car-ease);
	will-change: transform;
}

.sud-car__slide {
	flex: 0 0 100%;
	min-inline-size: 0;
}

/* --------------------------------------------------------------------------
   CARD
   Deep brand ground, as in the reference. The photograph sits inset on it with
   its own radius, so the card frames the picture rather than being covered by
   it.
   -------------------------------------------------------------------------- */

.sud-car__card {
	display: grid;
	/*
	 * fr, not %. Percentage tracks resolve against the content box and the gap
	 * is then ADDED, so `42% 58%` overflowed by exactly one gap — 43px of the
	 * photograph was running past the card's padding and being clipped by the
	 * viewport's overflow:hidden. fr divides what is left after the gap.
	 */
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);   /* copy 42, image 58 */
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	min-block-size: 100%;
	padding: var(--car-pad);
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(67, 182, 73, .10), transparent 55%),
		var(--sud-green-900);
	border-radius: var(--car-radius);
}

/* --------------------------------------------------------------------------
   COPY
   -------------------------------------------------------------------------- */

.sud-car__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(.85rem, 1.4vw, 1.25rem);
	min-inline-size: 0;
}

.sud-car .sud-car__kicker {
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-xs);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #7EE07F;                       /* 8.9:1 on the green ground */
}

.sud-car .sud-car__title {
	font-family: var(--sud-font-display);
	font-size: clamp(1.6rem, 2.7vw, 2.5rem) !important;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: #fff;                          /* 14.5:1 */
	margin: 0;
	text-wrap: balance;
}

.sud-car .sud-car__text {
	font-family: var(--sud-font-body);
	font-size: clamp(.95rem, 1.15vw, 1.0625rem);
	line-height: 1.75;
	color: rgba(255, 255, 255, .88);      /* 11.6:1 */
	margin: 0;
	max-inline-size: 46ch;
}

/* --------------------------------------------------------------------------
   MEDIA
   The supplied artwork is 5:3 (1800×1080). Matching the box to that ratio means
   `contain` neither crops the picture nor pads it with bars.
   -------------------------------------------------------------------------- */

.sud-car__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--sud-radius-lg);
	background: rgba(255, 255, 255, .05);
	aspect-ratio: 5 / 3;
}

.sud-car .sud-car__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

/* --------------------------------------------------------------------------
   ENTRANCE
   Copy and image arrive just after the slide lands, image a beat behind the
   text. Only the incoming slide animates.
   -------------------------------------------------------------------------- */

.sud-car__copy > *,
.sud-car__media {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
}

.sud-car__slide.is-active .sud-car__copy > *,
.sud-car__slide.is-active .sud-car__media {
	opacity: 1;
	transform: none;
	transition:
		opacity .62s var(--sud-ease-out, cubic-bezier(.16,1,.3,1)),
		transform .62s var(--sud-ease-out, cubic-bezier(.16,1,.3,1));
}

.sud-car__slide.is-active .sud-car__copy > *:nth-child(1) { transition-delay: .16s; }
.sud-car__slide.is-active .sud-car__copy > *:nth-child(2) { transition-delay: .23s; }
.sud-car__slide.is-active .sud-car__copy > *:nth-child(3) { transition-delay: .30s; }
.sud-car__slide.is-active .sud-car__media { transition-delay: .12s; }

/* No script: the first slide must not sit at opacity 0 for ever. */
.sud-car:not([data-car-ready]) .sud-car__copy > *,
.sud-car:not([data-car-ready]) .sud-car__media {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   CONTROLS
   -------------------------------------------------------------------------- */

.sud-car__controls {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 1.4vw, 1.25rem);
	margin-block-start: clamp(1.25rem, 2vw, 1.75rem);
}

.sud-car .sud-car__btn {
	inline-size: 52px;
	block-size: 52px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--sud-line);
	border-radius: 50%;
	background: var(--sud-surface);
	color: var(--sud-green-700);
	cursor: pointer;
	transition:
		background .35s var(--sud-ease, cubic-bezier(.22,1,.36,1)),
		color .35s var(--sud-ease, cubic-bezier(.22,1,.36,1)),
		border-color .35s ease,
		transform .35s var(--sud-ease, cubic-bezier(.22,1,.36,1));
}

.sud-car .sud-car__btn svg { inline-size: 20px; block-size: 20px; }

.sud-car .sud-car__btn:hover {
	background: var(--sud-green-700);
	border-color: var(--sud-green-700);
	color: #fff;
	transform: translateY(-2px);
}

.sud-car .sud-car__btn:focus-visible {
	outline: 3px solid var(--sud-green-500);
	outline-offset: 3px;
}

/* Dots */
.sud-car__dots {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-inline-end: auto;
}

.sud-car .sud-car__dot {
	inline-size: 30px;
	block-size: 4px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: var(--sud-line);
	cursor: pointer;
	transition:
		background .4s var(--sud-ease, cubic-bezier(.22,1,.36,1)),
		inline-size .4s var(--sud-ease, cubic-bezier(.22,1,.36,1));
}

/* A 4px bar is far below a usable touch target; the hit area is extended
   without changing how the bar looks. */
.sud-car .sud-car__dot::before {
	content: '';
	position: absolute;
	inline-size: 30px;
	block-size: 44px;
	margin-block-start: -20px;
}

.sud-car .sud-car__dot { position: relative; }

.sud-car .sud-car__dot:hover { background: var(--sud-green-600); }

.sud-car .sud-car__dot.is-active {
	inline-size: 56px;
	background: var(--sud-green-700);
}

.sud-car .sud-car__dot:focus-visible {
	outline: 3px solid var(--sud-green-500);
	outline-offset: 6px;
}

/* Counter */
.sud-car .sud-car__count {
	display: flex;
	align-items: baseline;
	gap: .35rem;
	margin: 0;
	font-family: var(--sud-font-display);
	font-size: var(--sud-text-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;   /* the number must not jog on change */
	color: var(--sud-ink);
}

.sud-car__count-sep { color: var(--sud-muted); font-weight: 400; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.sud-car__card { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
}

@media (max-width: 860px) {
	/* Image first, copy underneath — the composition the brief asks for on a
	   phone, and the order the markup already has. */
	.sud-car__card {
		grid-template-columns: 1fr;
		gap: clamp(1.25rem, 4vw, 1.75rem);
	}

	.sud-car__media { order: -1; }

	.sud-car .sud-car__text { max-inline-size: none; }

	.sud-car__controls { gap: .6rem; }
	.sud-car .sud-car__btn { inline-size: 46px; block-size: 46px; }
	.sud-car .sud-car__dot { inline-size: 22px; }
	.sud-car .sud-car__dot.is-active { inline-size: 40px; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   The slide still changes — it just arrives instead of travelling. Autoplay is
   disabled in the script under the same query.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-car__track { transition: none !important; }

	.sud-car__copy > *,
	.sud-car__media { opacity: 1 !important; transform: none !important; }

	.sud-car__slide.is-active .sud-car__copy > *,
	.sud-car__slide.is-active .sud-car__media { transition: none !important; }

	.sud-car .sud-car__btn,
	.sud-car .sud-car__dot { transition: none !important; }
	.sud-car .sud-car__btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   PRINT — every pillar, not just the visible one
   -------------------------------------------------------------------------- */

@media print {
	.sud-car__viewport { overflow: visible; }
	.sud-car__track { display: block; transform: none !important; }
	.sud-car__slide { break-inside: avoid; margin-block-end: 1rem; }
	.sud-car__copy > *, .sud-car__media { opacity: 1 !important; transform: none !important; }
	.sud-car__controls { display: none; }
}