/**
 * Services page preventive inspections
 * (template-parts/services/services-inspections.php).
 *
 * Six intervals along one hairline, spaced by the log of the intervals
 * themselves. Widths come from inspection-ruler.js, never from here: the
 * runs between ticks are uneven by design, so any fixed width is either an
 * overlap or a waste. See that file for the rule.
 */

.insp {
	padding-block: var(--section-pad-y);
}

/* --------------------------------------------------------------------
 * Centred header
 *
 * The one section that does not use the two-column header, because the
 * ruler below it is the full width and a header hanging off one side would
 * fight it. Measures follow the concept: 15ch for the headline, 44ch for
 * the description, so neither runs the whole 1312px.
 * -------------------------------------------------------------------- */

/* Centring comes from .section-header--center in base.css; only the
   copy-tuned measure is this section's own. */
.insp__header h2 {
	max-width: 15ch;
}

.insp__text {
	margin-top: 32px;
	margin-inline: auto;
	max-width: 44ch;
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	letter-spacing: var(--type-body-lg-spacing);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * The ruler
 *
 * One hairline across the container with the items ALTERNATING above and
 * below it. On a single row the last two are unreadable: they share one
 * 184px run and get 83px each, which breaks "Suppression" across two lines
 * mid-word. Alternating makes each item's neighbour two ticks away instead
 * of one and took the measured minimum from 83px to 183px. It costs 81px of
 * height, two row heights instead of one, which was accepted against that.
 *
 * The ruler also ends SHORT of the container's right edge, by a distance
 * measured from the final item's own copy, so that item has room to its
 * right and left-aligns from its tick like the other five. See
 * inspection-ruler.js.
 *
 * Items are absolutely positioned and contribute no height, so both row
 * heights are measured by inspection-ruler.js and published here. The line
 * sits at the boundary between them. The fallbacks only hold the shape
 * until the script runs.
 * -------------------------------------------------------------------- */

.insp__ruler {
	position: relative;
	margin-top: 96px;
	height: calc(var(--insp-above, 9rem) + var(--insp-below, 9rem));
}

/* The hairline itself, at the boundary of the two rows. A border cannot do
   this any more: it has to sit at a measured offset, not at an edge. */
.insp__ruler::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--insp-above, 9rem);
	height: 1px;
	background-color: var(--color-border-subtle);
}

/* --insp-x is the position AFTER the scale compression, published by the
   script; --insp-pos is the uncompressed one from the template, which only
   holds the shape until the script runs. */
.insp__item {
	position: absolute;
	left: var(--insp-x, var(--insp-pos));
	width: var(--insp-width, 11.875rem);
}

/* Above the line: the item's BOTTOM sits on it and the copy grows upward,
   so both rows still read top to bottom into the line. */
.insp__item--above {
	bottom: var(--insp-below, 9rem);
	padding-bottom: 44px;
}

.insp__item--below {
	top: var(--insp-above, 9rem);
	padding-top: 44px;
}

/* --------------------------------------------------------------------
 * Tick: the house 60 degree slash, centred ON the line at its position.
 *
 * Same construction as the eyebrow's mark, a 1px rule rotated -60deg, at
 * the eyebrow's 25px length. The transform is what places it, so its own
 * box stays a zero-height point on the line and it cannot push the copy
 * around. The Y translation differs by row because the line is the item's
 * bottom edge above it and its top edge below it.
 *
 * Every tick sits at its item's own left edge, the last one included: that
 * is what makes all six read the same way.
 * -------------------------------------------------------------------- */

.insp__tick {
	position: absolute;
	left: 0;
	width: 25px;
	height: 1px;
	background-color: var(--color-accent);
}

.insp__item--below .insp__tick {
	top: 0;
	transform: translate(-50%, -50%) rotate(-60deg);
}

.insp__item--above .insp__tick {
	bottom: 0;
	transform: translate(-50%, 50%) rotate(-60deg);
}

/* --------------------------------------------------------------------
 * Item copy
 * -------------------------------------------------------------------- */

.insp__interval {
	margin-bottom: 14px;
	font-family: var(--font-mono);
	font-size: 0.8125rem; /* 13px */
	line-height: normal;
	letter-spacing: 0.06em;
	font-weight: 500;
	color: var(--color-heading-text);
}

.insp__title {
	margin-bottom: 6px;
	font-family: var(--font-heading);
	font-size: 1.0625rem; /* 17px */
	line-height: 1.3;
	font-weight: 600;
	color: var(--color-heading-text);
}

.insp__desc {
	font-size: 0.875rem; /* 14px */
	line-height: 1.45;
	font-weight: 400;
	color: var(--color-text-secondary);
}

.insp__note {
	margin-top: 32px;
	font-size: 0.875rem; /* 14px */
	line-height: 1.45;
	font-weight: 400;
	color: var(--color-text-tertiary);
}

/* --------------------------------------------------------------------
 * Below 1024: the metaphor is dropped
 *
 * Proportional spacing cannot survive a narrow screen; six items sharing
 * 358px would be unreadable however they were measured, and a horizontal
 * scroller would turn a picture that is read at a glance into one that has
 * to be dragged. The rule turns vertical, the items stack, and each keeps
 * its slash. Same content and same order, without the metaphor.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.insp__header h2 {
		max-width: none;
	}

	.insp__ruler {
		margin-top: 48px;
		height: auto;
	}

	/* The same hairline turned on its side. */
	.insp__ruler::before {
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: 1px;
		height: auto;
	}

	/* Back into flow, which also drops every measured width and both row
	   offsets: alternating is a desktop-only concern. */
	.insp__item,
	.insp__item--above,
	.insp__item--below {
		position: static;
		width: auto;
		padding: 0 0 32px 32px;
		text-align: left;
	}

	.insp__item:last-child {
		padding-bottom: 0;
	}

	/* The slash moves onto the vertical rule, keeping the same angle. */
	.insp__item .insp__tick,
	.insp__item--above .insp__tick,
	.insp__item--below .insp__tick {
		top: 8px;
		bottom: auto;
		left: 0;
		right: auto;
		transform: translate(-50%, -50%) rotate(-60deg);
	}
}