/**
 * HTPLaw Hero widget.
 *
 * Figma (1440): 61px above/below; text column 548px, portrait 461×494 with
 * 6px radius, columns aligned to the container edges. Eyebrow →
 * heading 15px, heading → intro 31px, intro → buttons 43px, buttons 10px apart.
 * Below 900px the columns stack: text (max 640px) above a full-width
 * portrait at the photo's 3:2 ratio; below 600px the portrait returns to
 * Figma's 461:494 crop. Tablet/mobile layouts are not in Figma.
 */

.htplaw-hero {
	--_pad-y: var(--htplaw-hero-pad-y, 61px);
	--_radius: var(--htplaw-hero-radius, var(--htplaw-radius));

	padding-block: var(--_pad-y);
	background: var(--htplaw-color-surface);
}

.htplaw-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 548px) minmax(0, 461px);
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

.htplaw-hero--no-image .htplaw-hero__inner {
	grid-template-columns: minmax(0, 720px);
}

.htplaw-hero__eyebrow {
	margin-bottom: 15px;
}

.htplaw-hero__title {
	margin-bottom: 31px;
}

.htplaw-hero__intro strong,
.htplaw-hero__intro b {
	font-weight: 500;
}

.htplaw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 43px;
}

/* Figma's hero primary button is #0f2a3f (the header's is #0e1b2c). */
.htplaw-hero .htplaw-btn--primary {
	--_bg: var(--htplaw-btn-bg, var(--htplaw-color-secondary));
}

.htplaw-hero__image {
	aspect-ratio: 461 / 494;
	overflow: hidden;
	border-radius: var(--_radius);
	background: var(--htplaw-color-muted);
}

.htplaw-hero__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

@media (max-width: 900px) {
	.htplaw-hero {
		--_pad-y: var(--htplaw-hero-pad-y, 40px);
	}

	.htplaw-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.htplaw-hero__title {
		margin-bottom: 20px;
	}

	.htplaw-hero__actions {
		margin-top: 28px;
	}

	.htplaw-hero__content {
		max-width: 640px;
	}

	.htplaw-hero__image {
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 600px) {
	.htplaw-hero__image {
		aspect-ratio: 461 / 494;
	}
}

@media (max-width: 480px) {
	.htplaw-hero__actions .htplaw-btn {
		flex: 1 1 100%;
	}
}