/**
 * Hero carousel: the prototype's HeroCarousel, as the front page had it in
 * Elementor's Slides widget until October 19, 2026 (docs/home.md). The
 * slide `h-screen min-h-[600px] max-h-[900px]`, the photograph under the
 * charcoal gradient from the left (`from-charcoal/63 via-charcoal/19
 * to-charcoal/20`), the content `max-w-2xl` with 80px at the top for the
 * header, the title `text-4xl md:text-5xl lg:text-6xl`, the text `text-lg
 * md:text-xl text-white/80 max-w-lg mb-8`; the slides fade in a second.
 *
 * The prototype's header is fixed and its hero starts at the top of the
 * page; the site's header is sticky and in the flow (header-footer.md), so
 * the carousel is pulled up by the header's height, 65px, 81px from 1025px.
 */

.sba-c.sba-c-hero-carousel {
	position: relative;
	margin-top: -65px;
	overflow: hidden;
	background-color: var(--sba-charcoal);
	color: #fff;
}

@media (min-width: 1025px) {
	.sba-c.sba-c-hero-carousel {
		margin-top: -81px;
	}
}

/* The slides share one cell, so the tallest sets the height. */
.sba-c-hero-carousel .sba-c-carousel-slides {
	display: grid;
}

.sba-c-hero-carousel .sba-c-carousel-slide {
	position: relative;
	display: flex;
	grid-area: 1 / 1;
	align-items: center;
	height: 100vh;
	min-height: 600px;
	max-height: 900px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 0s linear 1s;
}

.sba-c-hero-carousel .sba-c-carousel-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease, visibility 0s;
}

.sba-c-hero-carousel .sba-c-carousel-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sba-c-hero-carousel .sba-c-carousel-veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to right,
		hsl(var(--sba-charcoal-hsl) / 0.63) 0%,
		hsl(var(--sba-charcoal-hsl) / 0.19) 50%,
		hsl(var(--sba-charcoal-hsl) / 0.2) 100%
	);
}

/* A deliberate deviation from the prototype: its gradient leaves the
   headline over the bright part of the photograph on a phone, so there the
   whole frame darkens instead. */
@media (max-width: 767px) {
	.sba-c-hero-carousel .sba-c-carousel-veil {
		background-image: linear-gradient(
			to top,
			hsl(var(--sba-charcoal-hsl) / 0.7) 0%,
			hsl(var(--sba-charcoal-hsl) / 0.45) 100%
		);
	}
}

.sba-c-hero-carousel .sba-c-carousel-body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 80px;
}

.sba-c-hero-carousel .sba-c-carousel-content {
	max-width: 42rem;
}

/* The Global Kit colors h1 and h2 in charcoal. Line height: Tailwind's
   text-5xl and text-6xl set it to 1 and win over leading-tight from 768px. */
.sba-c-hero-carousel .sba-c-carousel-title {
	margin: 0 0 24px;
	color: #fff;
	font-size: 36px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.25;
}

.sba-c-hero-carousel .sba-c-carousel-text {
	max-width: 32rem;
	margin: 0 0 32px;
	color: rgb(255 255 255 / 0.8);
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
}

/* The photograph's credit, bottom right. */
.sba-c-hero-carousel .sba-c-carousel-credit {
	position: absolute;
	right: 16px;
	bottom: 24px;
	z-index: 2;
	padding: 4px 8px;
	border-radius: var(--sba-radius-sm);
	background-color: rgb(255 255 255 / 0.2);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: rgb(255 255 255 / 0.7);
	font-size: 11px;
	letter-spacing: 0.025em;
}

@media (min-width: 768px) {
	.sba-c-hero-carousel .sba-c-carousel-title {
		font-size: 48px;
		line-height: 1;
	}

	.sba-c-hero-carousel .sba-c-carousel-text {
		font-size: 20px;
	}

	.sba-c-hero-carousel .sba-c-carousel-credit {
		right: 32px;
		font-size: 12px;
	}
}

@media (min-width: 1025px) {
	.sba-c-hero-carousel .sba-c-carousel-title {
		font-size: 60px;
	}
}

/* Staggered entrance: eyebrow, title, text and button one after another. */
@keyframes sba-c-carousel-in {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.sba-c-hero-carousel .is-active .sba-c-carousel-content > * {
	animation: sba-c-carousel-in var(--sba-duration-slide-in) ease-out both;
}

.sba-c-hero-carousel .is-active .sba-c-carousel-content > :nth-child(1) { animation-delay: 0.2s; }
.sba-c-hero-carousel .is-active .sba-c-carousel-content > :nth-child(2) { animation-delay: 0.4s; }
.sba-c-hero-carousel .is-active .sba-c-carousel-content > :nth-child(3) { animation-delay: 0.6s; }
.sba-c-hero-carousel .is-active .sba-c-carousel-content > :nth-child(4) { animation-delay: 0.8s; }

/* Dots, 32px from the bottom edge, the current one a red pill. */
.sba-c-hero-carousel .sba-c-carousel-dots {
	position: absolute;
	bottom: 32px;
	left: 50%;
	z-index: 2;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.sba-c-hero-carousel .sba-c-carousel-dots[hidden],
.sba-c-hero-carousel .sba-c-carousel-arrow[hidden] {
	display: none;
}

.sba-c-hero-carousel .sba-c-carousel-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: rgb(255 255 255 / 0.4);
	cursor: pointer;
	transition: width var(--sba-duration-hover) ease, background-color var(--sba-duration-hover) ease;
}

.sba-c-hero-carousel .sba-c-carousel-dot:hover {
	background-color: rgb(255 255 255 / 0.7);
}

.sba-c-hero-carousel .sba-c-carousel-dot[aria-current="true"] {
	width: 32px;
	background-color: var(--sba-red);
}

.sba-c-hero-carousel .sba-c-carousel-dot:focus-visible,
.sba-c-hero-carousel .sba-c-carousel-arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Arrows: glass discs, only from 1536px, where the prototype places them
   64px outside the 1400px container; below, swiping and the dots do. The
   max() keeps them 16px inside the viewport, where the prototype's own
   position pushes the right one off screen at 1536px. */
.sba-c-hero-carousel .sba-c-carousel-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 0.2);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color var(--sba-duration-hover) ease;
}

.sba-c-hero-carousel .sba-c-carousel-arrow:hover {
	background-color: rgb(255 255 255 / 0.4);
}

.sba-c-hero-carousel .sba-c-carousel-prev {
	left: max(16px, calc(50% - 764px));
}

.sba-c-hero-carousel .sba-c-carousel-next {
	right: max(16px, calc(50% - 764px));
}

@media (min-width: 1536px) {
	.sba-c-hero-carousel .sba-c-carousel-arrow:not([hidden]) {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-c-hero-carousel .sba-c-carousel-slide,
	.sba-c-hero-carousel .sba-c-carousel-slide.is-active {
		transition: none;
	}

	.sba-c-hero-carousel .is-active .sba-c-carousel-content > * {
		animation: none;
	}
}