.image-carousel {
	--image-carousel-container: 1800px;
	/* Side inset for the desktop two-column layout; the ribbon bleeds past it. */
	--image-carousel-gutter: clamp( 16px, 3vw, 72px );
	width: 100%;
	max-width: var(--image-carousel-container);
	margin: 0 auto;
}

/* Space from the block above (--section-gap). Doubled class to outrank core's blockGap. */
* + .image-carousel.image-carousel {
	margin-block-start: var(--section-gap);
}

.image-carousel__wrapper {
	flex-direction: row;
	display: flex;
	gap: 10%;
	padding-inline: var(--image-carousel-gutter);
	box-sizing: border-box;
}

/* Section ribbon: label right-aligned, bar bled to the viewport edge, width
 * left at the shared default so it matches every other section header. */
.image-carousel .section-ribbon {
	--section-ribbon-height: 64px;
	--section-ribbon-padding-left: 0px;
	--section-ribbon-padding-right: 56px;
	--section-ribbon-justify: flex-end;
	/* The block always spans the viewport, so the gutter is all there is to cancel. */
	margin-left: calc( -1 * var(--image-carousel-gutter) );
}

/* Desktop ribbon stops at the text column's edge, or it runs into the image on laptops. */
.image-carousel__large-heading-wrapper .section-ribbon {
	--section-ribbon-max-width: min( 92vw, calc( 100% + var(--image-carousel-gutter) ) );
}

/* Matches the 44px buttons at laptop widths. */
@media (max-width: 1440px) {
	.image-carousel .section-ribbon {
		--section-ribbon-height: 44px;
	}
}

.image-carousel .section-ribbon-text {
	--section-ribbon-font-size: 20px;
	font-family: guildhall-wide;
	--section-ribbon-font-weight: 500;
}

.image-carousel__left-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 0%;
	min-width: 0;
	gap: 70px;
}

.image-carousel__large-heading-wrapper {
	display: flex;
	flex-direction: column;
	gap: 70px;
}

.image-carousel__heading {
	font-family: forma-djr-micro, sans-serif;
	font-weight: 700;
	font-size: 56px;
	color: var(--gray-8);
	margin: 0;
	max-width: 630px;
	line-height: 1.2;
}

.image-carousel__layout {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	/* Image column a bit wider than the text column, per design. */
	flex: 1.2 1 0%;
	min-width: 0;
}

.image-carousel__list {
	flex: 0 0 280px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.image-carousel__list-item {
	display: flex;
	align-items: stretch;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}

.image-carousel__list-item.is-active {
	background-color: var(--gold-1);
}


.image-carousel__list-item.is-active .image-carousel__text-wrapper {
	border-color: var(--gold-1);
}

.image-carousel__icon-wrapper {
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	background-color: var(--gray-8);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 64px;
}

/* Icon painted through a mask (same as card__secondary) so CSS owns its
   colour: white at rest, gold when hovered or active. */
.image-carousel__icon {
	height: 60%;
	width: 60%;
	background-color: var(--white);
	-webkit-mask: var(--image-carousel-icon) center / contain no-repeat;
	mask: var(--image-carousel-icon) center / contain no-repeat;
	transition: background-color 0.2s;
}

.image-carousel__list-item:hover .image-carousel__icon,
.image-carousel__list-item.is-active .image-carousel__icon {
	background-color: var(--gold-1);
}

.image-carousel__list-item:not(.is-active):hover .image-carousel__text-wrapper {
	background-color: var(--gray-1);
}

.image-carousel__text-wrapper {
	display: flex;
	align-items: center;
	border: 1px solid var(--gray-4);
	flex-grow: 1;
	transition: background-color 0.2s;
}

.image-carousel__text {
	align-items: center;
	padding-left: 22px;
	font-family: forma-djr-micro, sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: var(--gray-8);
}

/* Countdown ring: only on the active item, drawn as the fraction of the
   autoplay delay left (set by view.js). Hidden once autoplay stops. */
.image-carousel__timer {
	display: none;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0 22px 0 auto;
	transform: scaleX( -1 ) rotate( -90deg ); /* Start at 12 o'clock, run counter-clockwise. */
}

.image-carousel__timer circle {
	fill: none;
	stroke: var(--gray-8);
	stroke-width: 2.5;
	stroke-dasharray: 1;
	stroke-dashoffset: calc( 1 - var(--image-carousel-time-left, 1) );
}

.image-carousel__list-item.is-active .image-carousel__timer {
	display: block;
}

.image-carousel.is-autoplay-stopped .image-carousel__timer {
	display: none;
}

.image-carousel__info {
	position: absolute;
	z-index: 1;
	left: -80px;
	bottom: 10%;
	max-width: 55%;
	padding: 37px 48px;
	color: var(--white);
	background-color: rgba(27, 27, 27, 0.85);
	backdrop-filter: blur(6px);
	font-family: forma-djr-micro;
	font-weight: 400;
	font-size: 20px;
}

/* Laptop: same 1400 cut as latest-news. */
@media (max-width: 1400px) {
	.image-carousel .section-ribbon-text {
		--section-ribbon-font-size: 18px;
	}

	.image-carousel__heading {
		font-size: 48px;
	}

	.image-carousel__info {
		font-size: 18px;
	}
}

/* Laptop layout only; tablet re-flows the columns itself. */
@media (min-width: 1101px) and (max-width: 1470px) {
	/* Image sits centered against the taller text column instead of
	   pinned to its top. */
	.image-carousel__wrapper {
		align-items: center;
	}

	/* Info box hangs off the image's bottom edge rather than mid-image. */
	.image-carousel__info {
		bottom: -15%;
	}
}

.image-carousel__swiper {
	flex: 1 1 auto;
	min-width: 0;
	/* Square container: an explicit height here wouldn't necessarily match
	 * the flex-resolved width, so derive height from width instead. */
	aspect-ratio: 1 / 1;
}

/* Swiper's own ".swiper { overflow: hidden }" ties with our single-class
 * selector on specificity, so this needs the extra ancestor to win the
 * cascade and let the info box actually bleed past this edge. */
.image-carousel .image-carousel__swiper {
	overflow: visible;
}

.image-carousel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.image-carousel__actions {
	display: flex;
	gap: 1rem;
}

.image-carousel-editor__preview {
	display: block;
	max-width: 120px;
	max-height: 80px;
	object-fit: contain;
	margin-bottom: 0.5rem;
}

.image-carousel-editor__slide {
	border: 1px solid #ddd;
	padding: 1rem;
	margin-bottom: 1rem;
}

.image-carousel__tablet-heading-wrapper {
	display: none;
}

.image-carousel__mobile-text {
	display: none;
}

.image-carousel__mobile-info {
	display: block;
}

.image-carousel__mobile-list {
	display: none;
}

/* Tablet: 1100 rather than 1024 so iPad Pro 13" portrait (1032px) lands here. */
@media (max-width: 1100px) {
	.image-carousel__large-heading-wrapper {
		display: none;
	}

	.image-carousel__heading {
		font-size: 40px;
	}

	.image-carousel__text {
		font-size: 16px;
	}

	.image-carousel__tablet-heading-wrapper {
		display: flex;
		width: 100%;
		max-width: 100%;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 1.5rem;
		gap: 40px;
		padding-inline: var(--image-carousel-gutter);
		box-sizing: border-box;
	}

	.image-carousel__tablet-heading-left {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	.image-carousel__tablet-actions {
		flex: 0 0 auto;
		display: flex;
		justify-content: flex-end;
		min-width: 0;
	}

	.image-carousel__tablet-actions .kalitta-button {
		max-width: 100%;
		min-width: 0;
	}

	.image-carousel__info {
		left: -52px;
		bottom: 0;
		max-width: 75%;
		padding: 22px 24px;
		font-size: 16px;
		line-height: 1.4;
	}

	.image-carousel__left-content {
		flex: 0 0 38%;
		min-width: 0;
		max-width: 38%;
	}

	.image-carousel__layout {
		flex: 1 1 0%;
		min-width: 0;
	}

	.image-carousel__wrapper {
		width: 100%;
		max-width: 100%;
		gap: 18px;
	}
}

@media (max-width: 767px) {
	.image-carousel__wrapper {
		flex-direction: column;
		gap: 0;
		width: 100%;
		align-items: center;
		justify-content: center;
	}

	.image-carousel__tablet-heading-wrapper {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-carousel__tablet-heading-left,
	.image-carousel__tablet-actions {
		width: 100%;
		max-width: 100%;
	}

	.image-carousel__tablet-heading-left {
		text-align: center;
	}

	.image-carousel__tablet-actions {
		justify-content: center;
	}

	.image-carousel__heading {
		font-size: 32px;
		max-width: 100%;
		text-wrap: balance; /* One sentence per line rather than a ragged last line. */
	}

	.image-carousel__left-content {
		display: none;
	}

	.image-carousel__layout {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}

	.image-carousel__swiper {
		width: 100%;
	}
	
	.image-carousel__mobile-info {
		position: absolute;
		z-index: 2;
		left: 8px;
		right: 8px;
		bottom: -70px;
		box-sizing: border-box;
		padding: 20px 16px;
		color: #fff;
		background: transparent !important;
		isolation: isolate;
	}

	.image-carousel__mobile-info::before {
		content: '';
		position: absolute;
		z-index: -1;
		inset: 0;
		background-color: rgba(27, 27, 27, 0.85);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	.image-carousel__mobile-text {
		display: block;
		margin-bottom: 8px;
		color: var(--gold-1);
		font-family: forma-djr-micro, sans-serif;
		font-size: 18px;
		font-weight: 500;
		padding-right: 28px; /* Clears the timer ring. */
	}

	/* Countdown ring moves into the info box, top right, drawn white. */
	.image-carousel:not(.is-autoplay-stopped) .image-carousel__mobile-info .image-carousel__timer {
		display: block;
		position: absolute;
		top: 16px;
		right: 16px;
		margin: 0;
	}

	.image-carousel__mobile-info .image-carousel__timer circle {
		stroke: var(--white);
	}

	.image-carousel__mobile-list {
		flex-direction: row;
		display: flex;
		width: 100%;
		max-width: 100%;
		/* Matches the info box's overhang (bottom: -70px) so the icons sit
		   flush under it. */
		margin-top: 70px;
		/* Above the swiper (z-index 1) so the gold bar paints over the info box. */
		position: relative;
		z-index: 2;
		padding: 0;
		justify-content: center;
		gap: 8px;
		list-style: none;
	}

	.image-carousel__mobile-list .image-carousel__list-item {
		flex: 0 0 52px;
		width: 52px;
		height: 52px;
		justify-content: center;
	}

	/* Gold bar above the active icon. */
	.image-carousel__mobile-list .image-carousel__list-item.is-active {
		box-shadow: 0 -4px 0 var(--gold-1);
	}

	.image-carousel__mobile-list .image-carousel__icon-wrapper {
		width: 52px;
		height: 52px;
	}

	.image-carousel__mobile-list .image-carousel__icon {
		width: 60%;
		height: 60%;
	}

	.image-carousel__mobile-info .image-carousel__info {
		position: static;
		left: auto;
		bottom: auto;
		max-width: none;
		font-size: 16px;
		line-height: 1.4;
		padding: 0;
		background: transparent !important;
		box-shadow: none;
	}
}