/* ==========================================================================
   Turbo Reman Center: service pages (Diesel Turbo Rebuild)
   Loaded after pages.css and product-card.css; reuses their split, bestsellers, faq and film rules.
   ========================================================================== */

/* Hero: the answer and the call on workshop black, a photo from the shop beside it ------------------------ */

.service-hero {
	padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px);
	background: var(--c-dark);
	color: var(--c-on-dark);
}

.service-hero__inner {
	display: grid;
	gap: clamp(32px, 5vw, 48px);
	align-items: center;
}

@media (min-width: 1024px) {
	.service-hero__inner {
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: clamp(48px, 6vw, 96px);
	}
}

.service-hero__title {
	max-width: 20ch;
	margin-top: clamp(20px, 3vw, 36px);
	color: var(--c-white);
	font-size: clamp(2.75rem, 1.7rem + 4.4vw, 5rem);
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.service-hero__lede {
	max-width: 46ch;
	margin-top: 20px;
	color: rgb(255 255 255 / 0.86);
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
	line-height: 1.5;
	text-wrap: pretty;
}

.service-hero__price {
	max-width: 46ch;
	margin-top: 22px;
	color: var(--c-on-dark);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.service-hero__price strong {
	color: var(--c-white);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.service-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.service-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 28px;
	list-style: none;
	color: var(--c-on-dark-muted);
	font-size: 0.9375rem;
}

.service-hero__facts li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.service-hero__facts li:first-child {
	color: var(--c-white);
	font-weight: 500;
}

.service-hero__facts .icon {
	width: 18px;
	height: 18px;
}

.service-hero__facts a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 0.35);
	text-underline-offset: 0.25em;
}

@media (hover: hover) and (pointer: fine) {
	.service-hero__facts a:hover {
		color: var(--c-white);
		text-decoration-color: var(--c-red-on-dark);
	}
}

.service-hero__facts .stars .icon {
	width: 18px;
	height: 18px;
}

.service-hero__media {
	justify-self: center;
	width: min(100%, 440px);
}

.service-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	object-fit: cover;
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.2), 0 28px 56px -28px rgb(0 0 0 / 0.7);
}

.service-hero__media figcaption,
.service-photo figcaption {
	margin-top: 12px;
	color: var(--c-muted);
	font-size: 0.9375rem;
}

.service-hero__media figcaption {
	color: var(--c-on-dark-muted);
}

@media (max-width: 639px) {
	.service-hero__actions .btn {
		width: 100%;
		justify-content: center;
	}

	/* Phones: the shop photo sits behind the breadcrumb and the heading, fading into the dark band before the
	   answer, so the first screen shows the shop, the answer and the call button together, down to small phones. */
	.service-hero {
		position: relative;
		isolation: isolate;
	}

	.service-hero__media {
		position: absolute;
		inset: 0 0 auto;
		z-index: -1;
		width: 100%;
		height: 272px;
		margin: 0;
	}

	.service-hero__media picture,
	.service-hero__media img {
		height: 100%;
	}

	.service-hero__media img {
		aspect-ratio: auto;
		border-radius: 0;
		object-position: 50% 28%;
		box-shadow: none;
	}

	.service-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgb(20 20 20 / 0.3) 0%, rgb(20 20 20 / 0.42) 38%, rgb(20 20 20 / 0.8) 72%, var(--c-dark) 100%);
	}

	.service-hero__media figcaption {
		position: absolute;
		top: 92px;
		right: 16px;
		z-index: 1;
		margin: 0;
		color: var(--c-white);
		font-size: 0.8125rem;
		text-shadow: 0 1px 3px rgb(0 0 0 / 0.85);
	}

	.service-hero .breadcrumbs {
		text-shadow: 0 1px 3px rgb(0 0 0 / 0.85);
	}

	.service-hero__title {
		margin-top: 76px;
		text-shadow: 0 2px 12px rgb(0 0 0 / 0.45);
	}

	.service-hero__lede {
		margin-top: 16px;
	}

	.service-hero__actions {
		margin-top: 22px;
	}
}

/* Bands --------------------------------------------------------------------------------------------------- */

.service-band {
	padding-block: var(--space-section);
}

.service-band--surface {
	background: var(--c-surface);
}

/* Two ways: swap for a reman turbo, or rebuild your own ------------------------------------------------------ */

.ways {
	display: grid;
	gap: 16px;
}

@media (min-width: 768px) {
	.ways {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

.way {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--c-surface);
}

.way__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 1024px) {
	.way__img {
		aspect-ratio: 16 / 9;
	}
}

/* On phones the two pictures stay low, so the prices come sooner. */
@media (max-width: 767px) {
	.way__img {
		aspect-ratio: 2 / 1;
	}
}

.way__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(20px, 2.5vw, 28px);
}

.way__title {
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
	line-height: 1.05;
}

.way__body p {
	max-width: 52ch;
	margin-top: 12px;
	color: var(--c-text);
	font-size: 1.0625rem;
}

.way__btn {
	align-self: flex-start;
	margin-top: auto;
}

.way__body p + .way__btn {
	margin-top: 20px;
}


.service-quote {
	display: grid;
	gap: 14px;
	max-width: 880px;
	margin-top: 20px;
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	background: var(--c-white);
}

.service-quote blockquote p {
	max-width: 70ch;
	color: var(--c-ink);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	text-wrap: pretty;
}

.service-quote figcaption {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--c-muted);
	font-size: 0.9375rem;
	font-weight: 500;
}

/* Turbos on the shelf (bestsellers grid from pages.css and product-card.css) ------------------------------ */

.service-stock {
	background: var(--c-surface);
}

/* The intro keeps a reading measure, so "All turbochargers" stays beside it on wide screens. */
.service-stock .section-head--row > div {
	flex: 1 1 520px;
	max-width: 70ch;
}

.service-stock__help {
	max-width: 68ch;
	margin-top: 24px;
	color: var(--c-text);
	font-size: 1.0625rem;
}

.service-stock__help a,
.service-note a {
	color: var(--c-red-600);
	font-weight: 500;
}

.service-stock__help a {
	white-space: nowrap;
}

.service-note {
	max-width: 56ch;
	margin-top: 18px;
	color: var(--c-muted);
	font-size: 0.9375rem;
}

.service-stock__more {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* What happens in the shop: six real steps on workshop black -------------------------------------------------- */

.rebuild-steps {
	padding-block: var(--space-section);
	background: var(--c-dark);
	color: var(--c-on-dark-muted);
}

.rebuild-steps .section-head__title {
	color: var(--c-white);
}

.rebuild-steps__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px) clamp(12px, 2vw, 20px);
	list-style: none;
	counter-reset: step;
}

@media (min-width: 1024px) {
	.rebuild-steps__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.rebuild-step {
	position: relative;
	counter-increment: step;
}

.rebuild-step__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: var(--radius-lg);
	background: var(--c-dark-2);
	object-fit: cover;
}

/* The step's number sits on the photo: a real order, so real numbers. */
.rebuild-step::before {
	content: counter(step);
	position: absolute;
	top: 12px;
	left: 12px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-dark);
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.rebuild-step__title {
	margin-top: 16px;
	color: var(--c-white);
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
	line-height: 1.05;
}

.rebuild-step p {
	max-width: 44ch;
	margin-top: 8px;
	line-height: 1.6;
}

@media (max-width: 639px) {
	.rebuild-step::before {
		top: 8px;
		left: 8px;
		width: 32px;
		height: 32px;
		font-size: 1.125rem;
	}

	.rebuild-step__title {
		margin-top: 12px;
		font-size: 1.3125rem;
	}

	.rebuild-step p {
		font-size: 0.9375rem;
		line-height: 1.5;
	}
}

.rebuild-steps__film {
	display: grid;
	gap: 28px;
	align-items: center;
	margin-top: clamp(48px, 6vw, 80px);
}

@media (min-width: 1024px) {
	.rebuild-steps__film {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(40px, 5vw, 72px);
	}
}

.rebuild-steps__film-title {
	color: var(--c-white);
	font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem);
	line-height: 1.05;
}

.rebuild-steps__film-text p {
	max-width: 40ch;
	margin-top: 12px;
	font-size: 1.0625rem;
}

.rebuild-steps__film-text .btn {
	margin-top: 24px;
}

.order-steps {
	display: grid;
	gap: 14px;
	margin-top: 24px;
	list-style: none;
	counter-reset: item;
}


.order-steps li {
	position: relative;
	min-height: 40px;
	padding: 7px 0 0 56px;
	color: var(--c-text);
	font-size: 1.0625rem;
	line-height: 1.5;
	counter-increment: item;
}


.order-steps li::before {
	content: counter(item);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-line-strong);
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.order-steps a {
	color: var(--c-red-600);
	font-weight: 500;
	white-space: nowrap;
}

/* Warranty beside a photo from the bench ---------------------------------------------------------------------- */

.service-photo--portrait {
	justify-self: start;
	width: min(100%, 480px);
}

/* On phones the heading comes before its photo; the people behind the shop follow the order steps and the core
   deposit, which keeps a photo between them and the questions below. */
@media (max-width: 1023px) {
	.service-warranty .service-photo--portrait {
		order: 1;
	}
}

.service-photo.service-photo--portrait img {
	aspect-ratio: 4 / 5;
	object-position: 50% 50%;
}

.service-promises {
	display: grid;
	margin-top: 20px;
	list-style: none;
}

.service-promises li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-block: 18px;
	color: var(--c-text);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.service-promises li + li {
	border-top: 1px solid var(--c-line);
}

.service-promises strong {
	display: block;
	margin-bottom: 2px;
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.4375rem;
	font-weight: 600;
	line-height: 1.1;
}

.service-promises__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-red);
}

.service-promises__icon .icon {
	width: 24px;
	height: 24px;
}

/* Customers' words ------------------------------------------------------------------------------------------ */

.quotes {
	display: grid;
	gap: 20px;
	list-style: none;
}

@media (min-width: 640px) {
	.quotes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.quotes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.quote {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	background: var(--c-white);
}

.quote__text p {
	color: var(--c-ink);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.quote__who {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--c-muted);
	font-size: 0.9375rem;
	font-weight: 500;
}

/* Engines: chips into the shop's engine filter, under the shelf ------------------------------------------------ */

.service-engines {
	margin-top: clamp(40px, 5vw, 56px);
	padding-top: clamp(28px, 3vw, 36px);
	border-top: 1px solid var(--c-line-strong);
}

.service-engines__title {
	margin-bottom: 16px;
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
	line-height: 1.05;
}

.engine-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
}

.engine-chip {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	background: var(--c-white);
	color: var(--c-ink);
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.16s var(--ease-out);
}

.engine-chip:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.engine-chip:hover {
		border-color: var(--c-red);
		color: var(--c-red-600);
	}
}

/* Order in three steps, with the people behind the shop ----------------------------------------------------- */

.service-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	object-fit: cover;
	object-position: 70% 50%;
	box-shadow: var(--shadow-2);
}

.service-order__call {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	margin-top: 28px;
}

.service-hours {
	color: var(--c-muted);
	font-size: 0.9375rem;
}

.service-core__title {
	margin-top: clamp(36px, 4vw, 48px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--c-line);
	font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
	line-height: 1.05;
}

.service-core__text {
	max-width: 58ch;
	margin-top: 12px;
	color: var(--c-text);
	font-size: 1.0625rem;
}

/* FAQ band on this page keeps the section rhythm and a heading; answers keep a reading measure. */
.service-faq {
	padding-block: var(--space-section);
	background: var(--c-surface);
}

.service-faq .faq-item__a p {
	max-width: 68ch;
}

.help-card__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 8px;
	color: var(--c-on-dark);
	font-size: 0.9375rem;
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 0.35);
	text-underline-offset: 0.25em;
}

@media (prefers-reduced-motion: reduce) {
	.engine-chip {
		transition: none;
	}
}