/*
 * Garage profile pages (template-garage.php), on top of page.css's hero/section/lead styles.
 * Doubled classes beat the Elementor kit's global h2/a rules, as in page.css.
 */

.lm-garage-profile__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var( --lm-space-3 );
	color: rgba( 255, 255, 255, 0.7 );
	font-size: 0.8125rem;
}

.lm-garage-profile__crumbs.lm-garage-profile__crumbs a {
	color: rgba( 255, 255, 255, 0.85 );
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lm-garage-profile__badge {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.14 );
	color: var( --lm-color-white );
	font-size: 0.8125rem;
	font-weight: 800;
	vertical-align: middle;
}

.lm-garage-profile__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 340px;
	gap: var( --lm-space-5 );
	align-items: start;
}

.lm-garage-profile__main.lm-garage-profile__main h2 {
	margin: var( --lm-space-4 ) 0 var( --lm-space-2 );
	font-size: 1.375rem;
	letter-spacing: -0.02em;
}

.lm-garage-profile__main > :first-child,
.lm-garage-profile__main.lm-garage-profile__main > h2:first-child {
	margin-top: 0;
}

.lm-garage-profile__figure {
	position: relative;
	margin: 0 0 var( --lm-space-3 );
}

.lm-garage-profile__figure .lm-garage-profile__photo {
	margin-bottom: 0;
}

.lm-garage-profile__figure .lm-photo-label {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba( 17, 25, 35, 0.72 );
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

.lm-garage-profile__photo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 440px;
	object-fit: cover;
	border-radius: var( --lm-radius-card );
	margin-bottom: var( --lm-space-3 );
}

.lm-garage-profile__facts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: var( --lm-space-2 );
	margin: var( --lm-space-3 ) 0 0;
}

.lm-garage-profile__facts div {
	padding: var( --lm-space-2 ) var( --lm-space-3 );
	border-left: 3px solid var( --lm-color-primary );
	background: var( --lm-color-surface-alt );
	border-radius: 0 8px 8px 0;
}

.lm-garage-profile__facts dt {
	color: var( --lm-color-text-muted );
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lm-garage-profile__facts dd {
	margin: 2px 0 0;
	font-weight: 700;
}

.lm-garage-profile__tags,
.lm-garage-profile__areas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lm-garage-profile__tags li {
	padding: 6px 12px;
	border-radius: 999px;
	background: var( --lm-color-surface-alt );
	font-size: 0.875rem;
	font-weight: 700;
}

.lm-garage-profile__areas.lm-garage-profile__areas a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var( --lm-color-border );
	border-radius: 999px;
	color: var( --lm-color-primary-hover );
	font-size: 0.875rem;
	font-weight: 700;
}

.lm-garage-profile__side {
	display: grid;
	gap: var( --lm-space-3 );
	position: sticky;
	top: 100px;
}

.lm-garage-profile__cta,
.lm-garage-profile__claim {
	padding: var( --lm-space-4 );
	border: 1px solid var( --lm-color-border );
	border-radius: var( --lm-radius-card );
	background: var( --lm-color-bg );
}

.lm-garage-profile__cta {
	border-top: 4px solid var( --lm-color-primary );
}

.lm-garage-profile__side.lm-garage-profile__side h2 {
	margin: 0 0 var( --lm-space-1 );
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

.lm-garage-profile__side p {
	margin: 0 0 var( --lm-space-3 );
	color: var( --lm-color-text-muted );
	font-family: var( --lm-font-copy );
	font-size: 0.9375rem;
	line-height: 1.6;
}

.lm-garage-profile__cta .lm-button {
	display: block;
}

.lm-garage-profile__side .lm-garage-profile__note {
	margin: var( --lm-space-2 ) 0 0;
	font-size: 0.8125rem;
}

.lm-garage-profile__claim.lm-garage-profile__claim a {
	color: var( --lm-color-primary-hover );
	font-size: 0.9375rem;
	font-weight: 800;
}

@media ( max-width: 900px ) {
	.lm-garage-profile__layout {
		grid-template-columns: 1fr;
	}

	.lm-garage-profile__side {
		position: static;
	}
}

/* Links to published car-problem guides. */
.lm-garage-profile__guides {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.lm-garage-profile__guides a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var( --lm-color-border );
	border-radius: 999px;
	background: var( --lm-color-bg );
}