.cd-hero__slides { display: grid; gap: var(--cd-space-6); }
.cd-hero__slide {
	position: relative;
	display: grid;
	align-items: center;
	min-width: 0;
	min-height: clamp(28rem, 46vw, 40rem);
	border-radius: var(--cd-radius-card);
	background: var(--cd-color-surface);
	box-shadow: var(--cd-shadow-raised);
	overflow: hidden;
}
.cd-hero__picture { position: absolute; inset: 0; display: block; }
.cd-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.cd-hero__content {
	position: relative;
	width: 65%;
	padding: clamp(var(--cd-space-6), 5vw, calc(var(--cd-space-12) * 2));

}
.cd-hero__eyebrow { color: var(--cd-color-accent); font-size: var(--cd-font-sm); font-weight: var(--cd-weight-semibold); }
.cd-hero__title { font-size: clamp(var(--cd-font-xl), 4vw, calc(var(--cd-font-xl) * 1.75)); text-wrap: balance; }
.cd-hero__text { color: var(--cd-color-text); font-size: var(--cd-font-lg); white-space: pre-line; }
.cd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--cd-space-4); margin-top: var(--cd-space-6); }
/* All slides share a grid cell: the tallest content reserves space before JS. */
.cd-hero:has(.cd-hero__controls) .cd-hero__slides { gap: 0; }
.cd-hero:has(.cd-hero__controls) .cd-hero__slide { grid-area: 1 / 1; }
.cd-hero:not(.cd-hero--ready):has(.cd-hero__controls) .cd-hero__slide:not(:first-child) { visibility: hidden; }
.cd-hero--ready .cd-hero__slide { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 450ms ease, visibility 450ms ease; }
.cd-hero--ready .cd-hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
.cd-hero__controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--cd-space-3); margin-top: var(--cd-space-6); }
.cd-hero__controls { visibility: hidden; }
.cd-hero--ready .cd-hero__controls { visibility: visible; }
.cd-hero__dots { display: flex; flex-wrap: wrap; justify-content: center; }
.cd-hero__dot { display: grid; place-items: center; width: var(--cd-control-size); height: var(--cd-control-size); padding: 0; border: 0; background: transparent; cursor: pointer; }
.cd-hero__dot span { width: var(--cd-space-2); height: var(--cd-space-2); border-radius: var(--cd-radius-pill); background: var(--cd-color-muted); }
.cd-hero__dot[aria-current="true"] span { background: var(--cd-color-accent); box-shadow: 0 0 0 var(--cd-space-1) var(--cd-color-accent-soft); }
.cd-hero--ready .cd-hero__slides { touch-action: pan-y; }
@media (max-width: 64rem) {
	.cd-hero__slide { min-height: 0; grid-template-rows: auto 1fr; align-items: stretch; }
	.cd-hero__picture { position: relative; aspect-ratio: 4 / 3; }
	.cd-hero__content { width: 100%; padding: var(--cd-space-6); background: none; }
	.cd-hero__eyebrow { display: none; }
	.cd-hero__actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
	.cd-hero--ready .cd-hero__slide { transition: none; }
}

/* Position arrows relative to the banner, excluding the dots row. */
.cd-hero__banner { position: relative; }
.cd-hero__arrow {
	position: absolute;
	top: calc(50% - var(--cd-control-size) / 2);
	z-index: 2;
	opacity: 0.65;
	visibility: hidden;
	transition: opacity var(--cd-transition), box-shadow var(--cd-transition);
}
.cd-hero--ready .cd-hero__arrow { visibility: visible; }
.cd-hero__arrow[data-prev] { inset-inline-start: var(--cd-space-3); }
.cd-hero__arrow[data-next] { inset-inline-end: var(--cd-space-3); }
.cd-hero:hover .cd-hero__arrow, .cd-hero__arrow:focus-visible { opacity: 1; }
@media (min-width: 64.001rem) {
	.cd-hero__content {
		width: fit-content;
		max-width: min(42rem, calc(100% - var(--cd-control-size) * 2 - var(--cd-space-12)));
		justify-self: start;
		margin-block: var(--cd-space-8);
		margin-inline-start: calc(var(--cd-control-size) + var(--cd-space-6));
		padding: var(--cd-space-6);
		border: 1px solid color-mix(in srgb, var(--cd-color-surface) 55%, transparent);
		border-radius: var(--cd-radius-card);
		background: color-mix(in srgb, var(--cd-color-surface) 90%, transparent);
		box-shadow: var(--cd-shadow-raised-soft);
	}
}
@media (max-width: 64rem) {
	.cd-hero__arrow { display: none; }
}

/* The real image link stays within its slide, below carousel controls. */
.cd-hero__banner-link { position: absolute; inset: 0; display: block; }
.cd-hero__banner-link:focus-visible { outline-offset: calc(-1 * (var(--cd-focus-width) + var(--cd-focus-offset))); }
@media (max-width: 64rem) {
	/* Only the current slide contributes height, including in mixed carousels. */
	.cd-hero__slides { position: relative; }
	.cd-hero--ready .cd-hero__slide:not(.is-active),
	.cd-hero:not(.cd-hero--ready):has(.cd-hero__controls) .cd-hero__slide:not(:first-child) {
		position: absolute;
		inset: 0 0 auto;
		width: 100%;
	}
	.cd-hero__slide--image-only { display: block; min-height: 0; height: auto; aspect-ratio: auto; }
	.cd-hero__slide--image-only .cd-hero__banner-link,
	.cd-hero__slide--image-only .cd-hero__picture { position: relative; inset: auto; aspect-ratio: auto; }
	.cd-hero__slide--image-only .cd-hero__image { width: 100%; height: auto; }
	.cd-hero:has(.cd-hero__slide--image-only.is-active) .cd-hero__controls { margin-top: var(--cd-space-3); }
}

/* Edge-to-edge Hero media shares the outer radius, without an inner inset. */
.cd-hero__picture, .cd-hero__banner-link { border-radius: inherit; }
.cd-hero__picture { overflow: hidden; }
.cd-hero__image { border-radius: inherit; }
@media (max-width: 64rem) {
	.cd-hero__slide:not(.cd-hero__slide--image-only) .cd-hero__picture {
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}
}