/*
Ability Esports — Hero component.
Structural only, per this prompt's explicit "do not create the final
visual hero" instruction. Not yet used by any live template.
*/

.ae-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--ae-hero-min-height-mobile);
	padding-block: var(--ae-space-2xl);
}

@media (min-width: 1024px) {
	.ae-hero {
		min-height: var(--ae-hero-min-height-desktop);
	}
}

.ae-hero--media {
	color: var(--ae-color-text-primary);
}

.ae-hero__media {
	position: absolute;
	inset: 0;
	z-index: var(--ae-z-base);
}

.ae-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ae-hero--media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--ae-z-content);
	background: var(--ae-hero-overlay);
}

.ae-hero__content {
	position: relative;
	z-index: var(--ae-z-sticky);
	max-width: var(--ae-hero-content-max-width);
}

.ae-hero__eyebrow {
	font-size: var(--ae-text-eyebrow);
	letter-spacing: var(--ae-tracking-eyebrow);
	color: var(--ae-color-brand-primary-bright);
	margin: 0 0 var(--ae-space-sm) 0;
}

.ae-hero__heading {
	font-size: var(--ae-text-display-lg);
	margin: 0 0 var(--ae-space-md) 0;
}

.ae-hero__text {
	font-size: var(--ae-text-body-lg);
	max-width: var(--ae-measure-narrow);
}

.ae-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ae-space-md);
	margin-top: var(--ae-space-lg);
}