/**
 * Section: hero. Token-driven only (decisions doc A5/A6) — no literal
 * colour/size values.
 */

.websly-hero {
	display: grid;
	gap: var(--websly-space-xl);
	align-items: center;
}
.websly-hero--image-right,
.websly-hero--image-left {
	grid-template-columns: 1fr 1fr;
}
/*
 * No image set, so no media column is rendered — collapse to one column rather
 * than reserving half the hero for a picture that never arrives. The template
 * emits this modifier only in that case, so a hero WITH an image is untouched.
 * Listed after the two-column rule and equally specific, so source order wins.
 */
.websly-hero--no-media {
	grid-template-columns: 1fr;
}
.websly-hero--image-left .websly-hero__media {
	order: -1;
}
.websly-hero--full-bleed {
	grid-template-columns: 1fr;
	text-align: center;
}

.websly-hero__eyebrow {
	font-size: var(--websly-text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--websly-color-accent);
	margin-block-end: var(--websly-space-xs);
}
.websly-hero__heading {
	margin-block-end: var(--websly-space-sm);
}
.websly-hero__subheading {
	font-size: var(--websly-text-lg);
	color: var(--websly-color-text-muted);
	margin-block-end: var(--websly-space-md);
}
.websly-hero--bg-inverse .websly-hero__subheading,
.websly-section--bg-inverse .websly-hero__subheading {
	color: var(--websly-color-text-inverse);
	opacity: 0.85;
}
.websly-hero__actions {
	display: flex;
	gap: var(--websly-space-sm);
	flex-wrap: wrap;
}
.websly-hero--full-bleed .websly-hero__actions {
	justify-content: center;
}
.websly-hero__media img {
	border-radius: var(--websly-radius-lg);
	width: 100%;
}

@media (max-width: 48rem) {
	.websly-hero--image-right,
	.websly-hero--image-left {
		grid-template-columns: 1fr;
	}
	.websly-hero--image-left .websly-hero__media {
		order: 0;
	}
}