/*
 * Service detail hero — Figma 196:1152.
 *
 * Split layout: 630px of copy beside a 660px photo, 50px apart. It sits on the
 * shared inner-page band painted on the body (see the note in
 * sections/page-hero.css), and the 100px bottom padding is that band's own
 * trailing space.
 */

.service-hero { padding: 20px var(--gutter-mobile) 60px; }

.service-hero__container {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: var(--container);
	margin: 0 auto;
}

.service-hero__left {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.service-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
}

.service-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: var(--h5-size);
	line-height: var(--h5-lh);
}

.service-hero__eyebrow img { width: 14px; height: 21px; flex: 0 0 14px; }

.service-hero__headline {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.service-hero__title {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: var(--h2-weight);
	line-height: var(--h2-lh);
}

.service-hero__text {
	color: var(--color-neutral-1);
	font-size: var(--body-main-size);
	font-weight: var(--body-main-weight);
	line-height: var(--body-main-lh);
}

/* The chip is authored for a dark ground; on this band it flips to navy. */
.service-hero__rating .rating-chip__score { color: var(--color-primary); }
.service-hero__rating .rating-chip__count { color: var(--color-neutral-1); }

.service-hero__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.service-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 660 / 695;
	object-fit: cover;
}

/* Breadcrumbs sit on light here, not on a photo. */
.breadcrumbs--dark a,
.breadcrumbs--dark span { color: rgba(26, 41, 74, 0.5); }
.breadcrumbs--dark a:hover { color: var(--color-primary); }
.breadcrumbs--dark .is-current { color: var(--color-primary); }

@media (min-width: 768px) {
	.service-hero__title { font-size: 38px; }
}

@media (min-width: 1024px) {
	.service-hero { padding: 20px var(--gutter) 100px; }

	.service-hero__container {
		flex-direction: row;
		align-items: flex-end;
		gap: 50px;
		justify-content: space-between;
	}

	/*
	 * The copy column is 645px tall against a 695px photo and distributes its
	 * three blocks with space-between, which is what pins the breadcrumbs to
	 * the top of the photo and the rating chip to its foot.
	 */
	.service-hero__left {
		flex: 0 1 630px;
		min-width: 0;
		justify-content: space-between;
		height: 645px;
	}

	.service-hero__media { flex: 0 1 660px; min-width: 0; height: 695px; }
	.service-hero__title { font-size: var(--h2-size); }
}