/**
 * Page hero, after the prototype's SbdPageHero.
 *
 * Plain: `border-b bg-surface-warm py-16 lg:py-24`. Photo: `h-[70vh]
 * min-h-[520px]`, the content on the bottom edge (`pt-32 pb-12 lg:pb-16`)
 * over a charcoal gradient. Heading `text-4xl lg:text-5xl font-bold
 * text-balance` in a max-w-4xl block, lead `mt-5 text-lg` (`lg:text-xl` on a
 * photo) in max-w-3xl, actions `mt-8 gap-3`.
 */

.sba-c-hero.sba-c-hero {
	position: relative;
	font-family: var(--sba-font-sans);
}

.sba-c-hero.sba-c-hero-plain {
	padding: 64px 0;
	border-bottom: 1px solid var(--sba-border);
	background-color: var(--sba-surface-warm);
}

.sba-c-hero.sba-c-hero-photo {
	display: flex;
	align-items: flex-end;
	height: 70vh;
	min-height: 520px;
	overflow: hidden;
	background-color: var(--sba-charcoal);
}

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

.sba-c-hero .sba-c-hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(19 23 31 / 0.82) 0%, rgb(19 23 31 / 0.45) 45%, rgb(19 23 31 / 0.15) 100%);
}

.sba-c-hero-photo .sba-c-hero-body {
	position: relative;
	padding-top: 128px;
	padding-bottom: 48px;
}

.sba-c-hero .sba-c-hero-title {
	max-width: 56rem;
	margin: 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 36px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 40px;
	text-wrap: balance;
}

.sba-c-hero-photo .sba-c-hero-title {
	color: #fff;
}

.sba-c-hero .sba-c-hero-lead {
	max-width: 48rem;
	margin: 20px 0 0;
	color: var(--sba-slate);
	font-size: 18px;
	line-height: 28px;
}

.sba-c-hero-photo .sba-c-hero-lead {
	color: rgb(255 255 255 / 0.85);
}

/* Charcoal: the overview hero without a picture (style guide, Images;
   chapters.css .sba-ch-hero): the charcoal field, the greyscale helix
   screened over it at 40%, the brand glow blurred in the top right corner,
   the section rhythm of 112px, 80px below 1024px. */
.sba-c-hero.sba-c-hero-charcoal {
	padding: 80px 0;
	overflow: hidden;
	background-color: var(--sba-charcoal);
}

.sba-c-hero-charcoal::before {
	content: "";
	position: absolute;
	top: -8rem;
	right: -8rem;
	z-index: 1;
	width: 36rem;
	height: 36rem;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sba-red) 0%, transparent 70%);
	opacity: 0.3;
	filter: blur(64px);
	pointer-events: none;
}

.sba-c-hero .sba-c-hero-helix {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-size: cover;
	opacity: 0.4;
	mix-blend-mode: screen;
}

.sba-c-hero-charcoal .sba-c-hero-body {
	position: relative;
	z-index: 2;
}

.sba-c-hero-charcoal .sba-c-hero-title {
	color: #fff;
}

.sba-c-hero-charcoal .sba-c-hero-lead {
	color: rgb(255 255 255 / 0.85);
}

/* Jump links under the buttons, or under the lead: 24px of air above. */
.sba-c-hero .sba-c-jump-links {
	margin-top: 24px;
}

.sba-c-hero .sba-c-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

@media (min-width: 1024px) {
	.sba-c-hero.sba-c-hero-plain {
		padding: 96px 0;
	}

	.sba-c-hero.sba-c-hero-charcoal {
		padding: 112px 0;
	}

	.sba-c-hero-charcoal .sba-c-hero-lead {
		font-size: 20px;
		line-height: 28px;
	}

	.sba-c-hero-photo .sba-c-hero-body {
		padding-bottom: 64px;
	}

	.sba-c-hero .sba-c-hero-title {
		font-size: 48px;
		line-height: 48px;
	}

	.sba-c-hero-photo .sba-c-hero-lead {
		font-size: 20px;
		line-height: 28px;
	}
}

/* The picture's credit, from the media library's Credit field: the front
   page's label (hero-carousel.css .sba-c-carousel-credit), in the top right corner where
   it meets neither the text nor the buttons on the bottom edge. */
.sba-c-hero .sba-c-hero-credit {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	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 .sba-c-hero-credit {
		top: 24px;
		right: 24px;
	}
}

/* A title's accent, the words an editor puts between asterisks: brand red
   (the Industry page's "industry highlights"). */
.sba-c-hero .sba-c-accent {
	color: var(--sba-red);
}

/* ---- With key figures: the Industry page's highlights ----------------------
 * The September hero (industry.css until October 17, 2026): the photograph
 * under charcoal at half opacity and the three-stop gradient, so the lead
 * reads over the bright band of sky; the text opens from the top
 * (`py-20 lg:py-28`), the title `text-4xl md:text-5xl lg:text-6xl` in a
 * max-w-3xl block, the lead `text-lg md:text-xl` at 80% white in max-w-2xl;
 * the eyebrow, the title and the lead fade up, the lead 120ms later. Under
 * them the figures in glass cards (`bg-white/5 border-white/10
 * backdrop-blur rounded-xl p-6 lg:p-7`), two across, three from 768px,
 * 56px under the lead, 80px from 1024px, `gap-4 lg:gap-5`, the border turning red on hover; the figure `text-3xl
 * lg:text-4xl font-bold`, its suffix at 80% white, the label `mt-2 text-sm`
 * at 75%. */
.sba-c-hero.sba-c-hero-figures {
	display: block;
	height: auto;
	min-height: 0;
}

.sba-c-hero-figures .sba-c-hero-veil {
	background:
		linear-gradient(to bottom, hsl(var(--sba-charcoal-hsl) / 0.65) 0%, hsl(var(--sba-charcoal-hsl) / 0.15) 50%, hsl(var(--sba-charcoal-hsl) / 0.75) 100%),
		linear-gradient(hsl(var(--sba-charcoal-hsl) / 0.5), hsl(var(--sba-charcoal-hsl) / 0.5));
}

.sba-c-hero-figures.sba-c-hero-photo .sba-c-hero-body {
	padding-top: 80px;
	padding-bottom: 80px;
}

.sba-c-hero-figures .sba-c-hero-title {
	max-width: 48rem;
	line-height: 1.15;
}

.sba-c-hero-figures .sba-c-hero-lead {
	max-width: 42rem;
	margin-top: 24px;
	color: hsl(0 0% 100% / 0.8);
}

.sba-c-hero-figures .sba-c-eyebrow,
.sba-c-hero-figures .sba-c-hero-title,
.sba-c-hero-figures .sba-c-hero-lead {
	animation: sba-c-hero-fade-up 0.6s ease-out both;
}

.sba-c-hero-figures .sba-c-hero-lead {
	animation-delay: 0.12s;
}

@keyframes sba-c-hero-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.sba-c-hero .sba-c-hero-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 56px 0 0;
}

.sba-c-hero .sba-c-hero-fact {
	padding: 24px;
	border: 1px solid hsl(0 0% 100% / 0.1);
	border-radius: 12px;
	background-color: hsl(0 0% 100% / 0.05);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: border-color var(--sba-duration-hover) ease;
}

.sba-c-hero .sba-c-hero-fact:hover {
	border-color: hsl(var(--sba-red-hsl) / 0.6);
}

.sba-c-hero .sba-c-hero-fact dd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 4px;
	margin: 0;
	color: #fff;
	font-size: 30px;
	font-variant-numeric: tabular-nums;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.1;
}

/* The suffix is a phrase ("B CHF"): it may wrap away from the figure, not
   inside itself. */
.sba-c-hero .sba-c-hero-fact-prefix,
.sba-c-hero .sba-c-hero-fact-suffix {
	white-space: nowrap;
}

.sba-c-hero .sba-c-hero-fact-suffix {
	color: hsl(0 0% 100% / 0.8);
}

.sba-c-hero .sba-c-hero-fact dt {
	margin-top: 8px;
	color: hsl(0 0% 100% / 0.75);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.375;
}

@media (min-width: 768px) {
	.sba-c-hero .sba-c-hero-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sba-c-hero-figures .sba-c-hero-lead {
		font-size: 20px;
	}
}

@media (min-width: 1024px) {
	.sba-c-hero-figures.sba-c-hero-photo .sba-c-hero-body {
		padding-top: 112px;
		padding-bottom: 112px;
	}

	.sba-c-hero-figures .sba-c-hero-title {
		font-size: 60px;
		line-height: 1;
	}

	.sba-c-hero .sba-c-hero-facts {
		gap: 20px;
		margin-top: 80px;
	}

	.sba-c-hero .sba-c-hero-fact {
		padding: 28px;
	}

	.sba-c-hero .sba-c-hero-fact dd {
		font-size: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sba-c-hero-figures .sba-c-eyebrow,
	.sba-c-hero-figures .sba-c-hero-title,
	.sba-c-hero-figures .sba-c-hero-lead {
		animation: none;
	}
}