/* =====================================================================
   Top Grade Movers — pages/distance-moves.css
   Distance Based Moves (single-service.php distance branch).
   The hero, split intro, photo + features, process, stats bar and CTA
   band are all shared sections styled in components/sections.css. The
   two service-card grids reuse the shared .dist-section/.dist-grid/
   .dist-card component (also used by Specialised Moving) — see
   components/sections.css. Only the hero glow modifier and the
   highlight strip, unique to this page, belong here.
   ===================================================================== */

/* =========================================================
   0. HERO — soft radial glows over the shared .page-hero
   ========================================================= */
.page-hero--distance::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at 18% 42%, rgba(var(--primary-rgb), .28) 0%, rgba(var(--primary-rgb), 0) 52%),
		radial-gradient(circle at 85% 92%, rgba(var(--primary-rgb), .12) 0%, rgba(var(--primary-rgb), 0) 50%);
}

/* =========================================================
   1. HIGHLIGHT STRIP — "Every Mile, Covered." dashed-line row
   ========================================================= */
.distance-highlights { background: var(--background-color); padding: 1.25rem 0 5rem; }

.distance-highlights__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 2px dashed rgba(var(--primary-rgb), .4);
	padding-top: 2.25rem;
}
/* Left terminal marker on the dashed line */
.distance-highlights__row::before {
	content: "";
	position: absolute;
	left: 0;
	top: -7px;
	width: 12px;
	height: 12px;
	border-radius: var(--radius-sm);
	background: var(--primary-color);
}
/* Right terminal — a small triangular flag pointing along the line */
.distance-highlights__row::after {
	content: "";
	position: absolute;
	right: 0;
	top: -9px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent var(--primary-color);
}

.distance-highlights__item { position: relative; text-align: center; padding: 0 1.5rem; }
.distance-highlights__item::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -40px;
	width: 10px;
	height: 10px;
	transform: translateX(-50%);
	border-radius: var(--radius-full);
	background: var(--text-color-light);
	border: 2px solid var(--primary-color);
}
.distance-highlights__label {
	display: block;
	color: var(--primary-color);
	font-weight: var(--font-weight-extrabold);
	font-size: var(--body-size-2xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: .3rem;
}
.distance-highlights__text { color: var(--muted-color); font-size: var(--body-size-2xs); margin: 0; }

/* =========================================================
   2. RESPONSIVE
   (shared header/footer/hero/process/stats/cta/dist-* breakpoints live
   in media.css / components/sections.css; this is specific to this page)
   ========================================================= */
@media (max-width: 991.98px) {
	.distance-highlights__row { grid-template-columns: 1fr; row-gap: 2rem; }
	.distance-highlights__item::before { display: none; }
}