/*
 * Shared styles for the pages migrated off Elementor (page-about-us.php, page-contact.php,
 * page-privacy-policy.php, page-terms-and-conditions.php, page-services.php,
 * page-garage-sign-up.php, page-roadside-breakdown-assistance.php).
 *
 * Hero, eyebrow and section-heading scale follow the same live-homepage patterns as
 * car-makes.css (.lm-hero / .lm-kicker / .lm-heading on https://localmechanics.co.uk/),
 * under generic lm-page-* names so later migrated pages can reuse them.
 *
 * Several selectors double their class to beat the Elementor global kit's
 * `.elementor-kit-162 h1/h2/a {...}` rules (same pattern as .lm-button in base.css).
 */

.lm-page-hero {
	color: var( --lm-color-white );
	background-color: var( --lm-color-dark );
	background-image:
		linear-gradient( 90deg, rgba( 18, 23, 29, 0.94 ) 10%, rgba( 18, 23, 29, 0.6 ) 100% ),
		var( --lm-page-hero-image, none );
	background-size: cover;
	background-position: center;
	padding: var( --lm-space-6 ) 0;
}

.lm-page-hero__title.lm-page-hero__title {
	color: var( --lm-color-white );
	max-width: 20ch;
	margin-bottom: var( --lm-space-2 );
	font-size: clamp( 2.25rem, 9vw, 3.75rem );
	font-weight: 900;
	letter-spacing: -0.05em;
	line-height: 1;
}

.lm-page-hero__intro {
	max-width: 600px;
	margin: 0;
	color: rgba( 255, 255, 255, 0.9 );
	font-family: var( --lm-font-copy );
	font-size: 1.125rem;
}

/* Matches the real .lm-kicker pattern: small orange dash + uppercase label. */
.lm-page-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 13px;
	color: var( --lm-color-primary-hover );
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lm-page-eyebrow::before {
	content: '';
	width: 22px;
	height: 3px;
	border-radius: 4px;
	background-color: var( --lm-color-primary );
}

/* On the dark hero the darker orange fails contrast, so use the brighter brand orange. */
.lm-page-hero .lm-page-eyebrow {
	color: var( --lm-color-primary );
}

.lm-page-section {
	padding: var( --lm-space-6 ) 0;
}

.lm-page-section.lm-page-section--mist {
	background-color: var( --lm-color-surface-alt );
}

.lm-page-section.lm-page-section h2 {
	font-size: clamp( 1.875rem, 7vw, 2.75rem );
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1.05;
}

.lm-page-lead {
	max-width: 65ch;
	color: var( --lm-color-text-muted );
	font-family: var( --lm-font-copy );
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Text + image, two columns on desktop (About Us). */
.lm-page-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --lm-space-5 );
	align-items: center;
}

.lm-page-split img {
	width: 100%;
	border-radius: var( --lm-radius-card );
}

/* Long-form legal copy (Privacy Policy, Terms). */
.lm-prose {
	max-width: 72ch;
	font-family: var( --lm-font-copy );
	font-size: 1rem;
	line-height: 1.75;
}

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

.lm-prose ul {
	margin: 0 0 var( --lm-space-2 );
	padding-left: 1.25em;
}

.lm-prose li {
	margin-bottom: var( --lm-space-1 );
}

.lm-prose.lm-prose a {
	color: var( --lm-color-primary-hover );
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Contact details card. */
.lm-contact-card {
	max-width: 560px;
	padding: var( --lm-space-4 );
	border: 1px solid var( --lm-color-border );
	border-radius: var( --lm-radius-card );
	background-color: var( --lm-color-bg );
}

.lm-contact-card__label {
	margin-bottom: 4px;
	color: var( --lm-color-text-muted );
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lm-contact-card__email.lm-contact-card__email {
	color: var( --lm-color-primary-hover );
	font-size: clamp( 1.125rem, 5vw, 1.5rem );
	font-weight: 800;
	overflow-wrap: anywhere;
}

.lm-contact-card__email.lm-contact-card__email:hover,
.lm-contact-card__email.lm-contact-card__email:focus {
	text-decoration: underline;
}

.lm-contact-card__note {
	margin: var( --lm-space-3 ) 0 0;
	color: var( --lm-color-text-muted );
	font-family: var( --lm-font-copy );
	font-size: 0.9375rem;
}

.lm-contact-card__note.lm-contact-card__note a {
	color: var( --lm-color-primary-hover );
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Centred hero (Services, Roadside Breakdown Assistance). */
.lm-page-hero--centred {
	text-align: center;
}

.lm-page-hero--centred .lm-page-hero__title,
.lm-page-hero--centred .lm-page-hero__intro {
	margin-left: auto;
	margin-right: auto;
}

.lm-page-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var( --lm-space-4 );
}

.lm-page-hero--centred .lm-page-actions {
	justify-content: center;
}

/* White outline button for dark heroes. */
.lm-button--ghost.lm-button--ghost {
	background-color: transparent;
	color: var( --lm-color-white );
	box-shadow: inset 0 0 0 2px rgba( 255, 255, 255, 0.85 );
}

.lm-button--ghost.lm-button--ghost:hover,
.lm-button--ghost.lm-button--ghost:focus {
	background-color: rgba( 255, 255, 255, 0.12 );
}

/* Orange outline button on light sections. */
.lm-button--outline.lm-button--outline {
	background-color: transparent;
	color: var( --lm-color-primary-hover );
	box-shadow: inset 0 0 0 2px var( --lm-color-primary );
}

.lm-button--outline.lm-button--outline:hover,
.lm-button--outline.lm-button--outline:focus {
	background-color: var( --lm-color-primary );
	color: var( --lm-color-white );
}

/* Heading and lead side by side, aligned to the top (Services intro). */
.lm-page-split.lm-page-split--top {
	align-items: start;
	margin-bottom: var( --lm-space-5 );
}

.lm-page-split--top .lm-page-lead {
	margin: 0;
}

/* Image cards: three across (Services), four across (Garage Sign Up). */
.lm-page-cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --lm-space-4 );
}

.lm-page-cards.lm-page-cards--four {
	grid-template-columns: repeat( 4, 1fr );
}

.lm-page-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.lm-page-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var( --lm-radius-card );
	margin-bottom: var( --lm-space-3 );
}

.lm-page-cards--four .lm-page-card img {
	aspect-ratio: 3 / 4;
}

.lm-page-card.lm-page-card h3 {
	margin: 0 0 var( --lm-space-1 );
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.lm-page-card p {
	flex-grow: 1;
	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-page-card--centred {
	align-items: center;
	text-align: center;
}

/* Tick list (Roadside Breakdown Assistance). */
.lm-page-points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --lm-space-2 ) var( --lm-space-4 );
	margin: var( --lm-space-4 ) 0 0;
	padding: 0;
	list-style: none;
}

.lm-page-points li {
	position: relative;
	padding-left: 30px;
	font-weight: 800;
}

.lm-page-points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --lm-color-primary ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) center / 14px no-repeat;
}

/* Closing call to action (Garage Sign Up). */
.lm-page-cta {
	text-align: center;
}

.lm-page-cta .lm-page-lead {
	margin: 0 auto var( --lm-space-4 );
}

@media ( max-width: 1100px ) {
	.lm-page-cards.lm-page-cards--four {
		grid-template-columns: repeat( 2, 1fr );
	}
}

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

	.lm-page-cards {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 560px ) {
	.lm-page-cards.lm-page-cards--four,
	.lm-page-points {
		grid-template-columns: 1fr;
	}
}