/* =========================================
   Hero
   ========================================= */

.hero {
	padding-block: var(--section-padding-y);
	background: var(--color-bg-cream);
	color: var(--color-text-primary);
}

/* =========================================
   Layout
   ========================================= */

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 546px) minmax(0, 660px);
	align-items: center;
	gap: 64px;
}

.hero__content {
	min-width: 0;
}

/* =========================================
   Typography
   ========================================= */

.hero__eyebrow {
	margin-bottom: var(--gap-sm);
}

.hero__heading {
	margin: 0 0 var(--gap-lg);
	font-family: var(--font-heading);
	font-size: var(--fs-h1);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
}

.hero__text {
	max-width: 480px;
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body-loose);
}

.hero__text > p {
	margin: 0 0 var(--gap-lg);
}

.hero__text > :last-child {
	margin-bottom: 0;
}

/* =========================================
   Buttons
   ========================================= */

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-xl);
	margin-top: var(--gap-3xl);
}

.hero .button--text {
	padding-inline: 4px;
	color: var(--color-accent);
}

.hero .button--text:hover {
	color: var(--color-accent-hover);
}

/* =========================================
   Media
   ========================================= */

.hero__media {
	min-width: 0;
	aspect-ratio: 1.32;
	overflow: hidden;
	background: var(--color-placeholder);
}

.hero__image,
.hero__video,
.hero__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__media-placeholder {
	background: var(--color-placeholder);
}

/* =========================================
   Reverse layout: Image Left
   ========================================= */

.hero--image-left .hero__grid {
	grid-template-columns: minmax(0, 550px) minmax(0, 1fr);
	gap: 64px;
}

.hero--image-left .hero__media {
	order: -1;
	aspect-ratio: 1.41;
}

.hero--image-left .hero__content {
	max-width: none;
}

.hero--image-left .hero__heading {
	font-size: var(--fs-h2);
}

.hero--image-left .hero__text {
	max-width: none;
}

/* =========================================
   Image Aspect Variations
   ========================================= */

.hero--media-wide .hero__media {
	aspect-ratio: 1.56;
}

/* =========================================
   Tablet
   ========================================= */

@media (max-width: 992px) {

	.hero__grid,
	.hero--image-left .hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gap-3xl);
	}

	.hero--image-left .hero__media {
		order: 0;
	}

	.hero__content {
		max-width: none;
	}

	.hero__text {
		max-width: 680px;
	}

}

/* =========================================
   Mobile
   ========================================= */

@media (max-width: 768px) {

	.hero__grid,
	.hero--image-left .hero__grid {
		gap: var(--gap-3xl);
	}

	.hero__heading {
		margin-bottom: var(--gap-md);
	}

	.hero__actions {
		gap: var(--gap-sm);
		margin-top: var(--gap-xl);
	}

	.hero__actions .button {
		width: 100%;
	}

	.hero__media {
		aspect-ratio: 1.34;
	}

	.hero--image-left .hero__media {
		aspect-ratio: 1.46;
	}

	.hero--media-wide .hero__media {
		aspect-ratio: 1.5;
	}

}