/**
 * Services page SLA parameters (template-parts/services/services-sla.php).
 *
 * The page's one dark band and its emphatic moment. A .band like the hero and
 * the footer, holding a 4 x 2 grid whose first cell is merged across both rows
 * and IS the section header: there is no header above the grid, which is the
 * point of the layout.
 */

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

/* --------------------------------------------------------------------
 * Grid and hairlines
 *
 * Inner 1px lines only, drawn as start-side cell borders with the first row
 * and column zeroed: single-pixel by construction, no doubles, nothing at the
 * outer edges. Same technique as clients-grid.css, and for the same reason
 * (the gap + grid-background alternative leaves a border-color ghost on the
 * outer edge pixel at fractional offsets).
 *
 * The nth-child formulas are simpler here than in the clients grid because
 * the merged header fixes the arrangement: child 1 is the header in column 1
 * spanning both rows, children 2-4 are the top row of parameters and children
 * 5-7 the bottom row. No horizontal line crosses the header, because it is one
 * cell rather than two.
 * -------------------------------------------------------------------- */

.sla__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(300px, auto); /* a floor; taller copy grows the row */
}

.sla__cell {
	display: flex;
	flex-direction: column;
	border: 0 solid var(--color-border-on-dark);
	border-left-width: 1px;
	border-top-width: 0;
}

/* Column 1: the merged header. */
.sla__cell:nth-child(1) {
	grid-row: 1 / span 2;
	border-left-width: 0;
	justify-content: flex-start;
	gap: 32px;
}

/* Second row of parameters. */
.sla__cell:nth-child(n + 5) {
	border-top-width: 1px;
}

/* --------------------------------------------------------------------
 * Cell padding: ONLY on edges that face a hairline
 *
 * An edge that faces the grid's outer boundary gets zero, because the
 * container already provides that space. Padding all four sides made this
 * section start its content 104px from the viewport while every other
 * section starts at 64px, which read as a narrower page.
 *
 * 64px is the value because this is the stat idiom and social-proof uses
 * 64px. Each interior line therefore carries 64px on both of its sides,
 * matching how deliver splits its column gap (32 + 32 around the rule).
 *
 * Scoped to a min-width query rather than left as the base: the tablet and
 * phone rules below re-derive the same idea at their own values, and an
 * unscoped base with nth-child specificity cannot be overridden by a plain
 * .sla__cell reset in a later max-width block.
 * -------------------------------------------------------------------- */

@media (min-width: 1025px) {
	/* Vertical lines. Column 1 (the merged header) faces one on its right
	   only; columns 2 and 3 face one on each side; column 4 faces one on its
	   left only, because its right edge is the container's right line. */
	.sla__cell:nth-child(1) {
		padding-right: 64px;
	}

	.sla__cell:nth-child(n + 2) {
		padding-left: 64px;
	}

	.sla__cell:nth-child(2),
	.sla__cell:nth-child(3),
	.sla__cell:nth-child(5),
	.sla__cell:nth-child(6) {
		padding-right: 64px;
	}

	/* The one horizontal line runs between the two parameter rows. The
	   merged header spans both rows, so it never touches it and keeps zero
	   top and bottom. */
	.sla__cell:nth-child(n + 2):nth-child(-n + 4) {
		padding-bottom: 64px;
	}

	.sla__cell:nth-child(n + 5) {
		padding-top: 64px;
	}
}

/* --------------------------------------------------------------------
 * Header cell
 * -------------------------------------------------------------------- */

.sla__headline {
	color: var(--color-heading-text-on-dark);
}

.sla__text {
	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-on-dark);
}

/* --------------------------------------------------------------------
 * Parameter cell: figure pinned to the top, title and description to the
 * bottom, the same push-apart as the "What we do" slide. The gap is the
 * minimum separation, so copy that fills the cell cannot make them meet.
 * -------------------------------------------------------------------- */

.sla__param {
	justify-content: space-between;
	gap: 32px;
}

/* Number and unit share one line box, so the baseline aligns natively. */
.sla__figure {
	font-family: var(--font-heading);
	font-size: var(--type-stat-xl-size);
	line-height: normal;
	font-weight: 800;
	color: var(--color-heading-text-on-dark);
}

/* The counting number sits in a box sized by its FINAL string, so neither the
   mono unit nor anything below can move while the digits tick. Tabular figures
   stop the digits jittering inside that box. */
.sla__number {
	position: relative;
	display: inline-block;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sla__number-reserve {
	visibility: hidden;
}

.sla__number-value {
	position: absolute;
	top: 0;
	left: 0;
}

.sla__unit {
	font-family: var(--font-mono);
	font-size: 1.875rem; /* 30px, matching the social-proof stat unit */
	font-weight: 500;
	color: var(--color-text-secondary-on-dark);
}

.sla__title {
	color: var(--color-heading-text-on-dark);
}

.sla__desc {
	margin-top: 12px;
	font-size: var(--type-card-body-size);
	line-height: var(--type-card-body-line);
	font-weight: var(--type-card-body-weight);
	color: var(--color-body-text-on-dark);
}

/* --------------------------------------------------------------------
 * Responsive. The hairline formulas are retargeted to each column count,
 * exactly as clients-grid.css does; leaving them pointing at four columns is
 * what would double or strand a line.
 * -------------------------------------------------------------------- */

/* 1024: two columns, the header spanning the full width as the first row. */
@media (max-width: 1024px) {
	.sla__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(260px, auto);
	}

	.sla__cell:nth-child(1) {
		grid-row: auto;
		grid-column: 1 / -1;
	}

	/* Column 1 is now every EVEN child (2, 4, 6), because the full-width
	   header occupies the whole first row on its own. */
	.sla__cell:nth-child(2n) {
		border-left-width: 0;
	}

	.sla__cell:nth-child(2n + 1):not(:first-child) {
		border-left-width: 1px;
	}

	/* Everything below the header gets a top line, including the line that
	   separates the header from the first pair. */
	.sla__cell:nth-child(n + 2) {
		border-top-width: 1px;
	}
}

/* Tablet padding, the same rule re-derived for two columns at the tablet
   inset of 32px. The header spans the full width, so its left and right are
   both outer edges and only its bottom faces a line. Kept in its own range
   so the three padding regimes never overlap and none has to out-specify
   another. 32px is inferred from the existing tablet inset: the ruling gave
   64px for desktop and the 24px vertical for phones, not a tablet value. */
@media (min-width: 768px) and (max-width: 1024px) {
	.sla__cell:nth-child(1) {
		padding-bottom: 32px;
	}

	/* Column 1 is every EVEN child; its right edge faces the vertical line. */
	.sla__cell:nth-child(2n) {
		padding-right: 32px;
	}

	/* Column 2 is every ODD child after the header; its left edge faces it. */
	.sla__cell:nth-child(2n + 1):not(:first-child) {
		padding-left: 32px;
	}

	/* Every parameter has a line above it: the header's, or the row's. */
	.sla__cell:nth-child(n + 2) {
		padding-top: 32px;
	}

	/* ...and a line below it unless nothing sits under it in its column,
	   which for a two-column grid is exactly the last two children. */
	.sla__cell:nth-child(n + 2):not(:nth-last-child(-n + 2)) {
		padding-bottom: 32px;
	}
}

/* Below 768: one column. No vertical lines exist to draw, and the cell's
   vertical rhythm comes down with it. */
@media (max-width: 767px) {
	.sla__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	/* One column, so every left and right edge is an outer edge: horizontal
	   padding is zero and the text aligns to the container exactly like the
	   sections above and below.

	   Vertically the same edge rule applies at the 24px phone value. 32px of
	   padding is the proportion of a wide desktop cell; a full-width phone
	   cell separated from its neighbours by nothing but a hairline does not
	   carry it. Every cell faces a line above and below except the first and
	   last, whose outer edges the section padding already spaces. */
	.sla__cell {
		padding: 24px 0;
		border-left-width: 0;
	}

	.sla__cell:first-child {
		padding-top: 0;
	}

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

	.sla__param {
		gap: 20px;
	}

	.sla__cell:nth-child(2n + 1):not(:first-child) {
		border-left-width: 0;
	}

	.sla__cell:nth-child(n + 2) {
		border-top-width: 1px;
	}
}