.hero-carousel {
	/* Autoplay interval — read by hero-carousel.js so the JS timer and the
	   indicator fill animation can never drift apart. */
	--hero-carousel-interval: 7s;

	position: relative;
	width: 100%;
	overflow: hidden;
}

/* The track is a grid with one column per slide and three shared content
   rows (title / CTAs / English notice). Slides chain those rows down to the
   .hero__container children via subgrid, so every row is sized by the
   tallest slide's content and each element sits at the same height on every
   slide — no jumping between a title-only slide and a fully loaded one. */
.hero-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	grid-template-rows: 1fr auto auto;
	/* Subgrids ignore the height set on .hero (their size comes from the
	   spanned tracks), so the track re-states the .hero heights from hero.css
	   — keep the two files in sync. */
	height: 830px;
	transition: transform var(--duration-slow) var(--easing-standard);
}

.hero-carousel__slide {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / -1;
}

/* Slides reuse the .hero block, swapping its bottom-anchored flex column for
   the shared subgrid rows. */
.hero-carousel__slide .hero {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / -1;
	align-items: stretch;
}

.hero-carousel__slide .hero__container {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: 1 / -1;
	justify-items: center;
	justify-self: center;
	/* No effect while subgrid controls the rows; in browsers without subgrid
	   support this bottom-packs the auto rows, degrading to the plain hero's
	   bottom-anchored layout instead of top-pinned content. */
	align-content: end;
}

.hero-carousel__slide .hero__title {
	grid-row: 1;
	align-self: end;
}

.hero-carousel__slide .hero__buttons {
	grid-row: 2;
}

.hero-carousel__slide .hero__eng-notice {
	grid-row: 3;
}

.hero-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: var(--color-alabaster-gray-200);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color var(--duration-base) var(--easing-standard);
}

.hero-carousel__arrow:hover {
	background: rgba(255, 255, 255, 0.32);
}

.hero-carousel__arrow:focus-visible,
.hero-carousel__indicator:focus-visible {
	outline: 2px solid var(--color-alabaster-gray-200);
	outline-offset: 2px;
}

.hero-carousel__arrow--prev {
	left: 40px;
}

.hero-carousel__arrow--next {
	right: 40px;
}

.hero-carousel__arrow svg {
	width: 20px;
	height: 20px;
}

.hero-carousel__footer {
	position: absolute;
	bottom: 44px;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 32px;
	transform: translateX(-50%);
}

.hero-carousel__indicators {
	display: flex;
	gap: 16px;
}

.hero-carousel__indicator {
	position: relative;
	width: 90px;
	height: 20px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.hero-carousel__indicator::before {
	content: "";
	position: absolute;
	inset: 9px 0;
	background: rgba(255, 255, 255, 0.32);
}

.hero-carousel__indicator-fill {
	position: absolute;
	inset: 9px 0;
	background: var(--color-alabaster-gray-200);
	transform: scaleX(0);
	transform-origin: left center;
}

.hero-carousel__indicator[aria-current="true"] .hero-carousel__indicator-fill {
	animation: hero-carousel-progress var(--hero-carousel-interval) linear forwards;
}

/* User interaction stopped autoplay: the active bar shows as fully filled. */
.hero-carousel--paused .hero-carousel__indicator[aria-current="true"] .hero-carousel__indicator-fill {
	animation: none;
	transform: scaleX(1);
}

@keyframes hero-carousel-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.hero-carousel__counter {
	font-family: var(--text-caption-family);
	font-weight: var(--text-caption-weight);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-line-height);
	letter-spacing: var(--text-caption-letter-spacing);
	color: var(--color-alabaster-gray-200);
}

@media (max-width: 1050px) {
	.hero-carousel__track {
		height: 650px;
	}

	.hero-carousel__arrow,
	.hero-carousel__counter {
		display: none;
	}

	/* Indicator strip sits below the image instead of overlaying it, and the
	   progress bars become plain dots (white = current slide). */
	.hero-carousel__footer {
		position: static;
		justify-content: center;
		padding: 14px 20px;
		background: var(--color-vintage-grape-900);
		transform: none;
	}

	.hero-carousel__indicators {
		gap: 10px;
	}

	.hero-carousel__indicator {
		width: 20px;
	}

	.hero-carousel__indicator::before {
		inset: 6px;
		border-radius: 50%;
	}

	.hero-carousel__indicator-fill {
		display: none;
	}

	.hero-carousel__indicator[aria-current="true"]::before {
		background: var(--color-alabaster-gray-200);
	}
}