/**
 * Home page only (index.php). Loaded conditionally via
 * functions/conditional_assets.php — is_front_page().
 */

.hero {
	background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 60%);
}

.hero_inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.hero_copy p {
	font-size: 1.1rem;
	margin: var(--space-sm) 0 var(--space-md);
}

.hero_actions {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.hero_media img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
}

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

.hero_badge {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-text-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}

.brand_strip {
	background: var(--color-dark);
	color: var(--color-white);
	padding: var(--space-sm) 0;
}

.brand_strip .wrapper {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: var(--space-sm);
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.story_teaser {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.story_teaser img {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* Mirrored variant: image on the right on desktop, still first on mobile. */
.story_teaser_reverse img {
	order: 2;
	width: 100%;
	max-width: 460px;
	justify-self: center;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.story_teaser blockquote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.3rem;
	color: var(--color-dark);
	margin: var(--space-sm) 0;
}

@media (max-width: 991px) {
	.hero_inner,
	.story_teaser {
		grid-template-columns: 1fr;
	}

	.story_teaser_reverse img {
		order: 0;
	}
}