/**
 * DICIT VISIO page (template-visio.php).
 *
 * Two sections only. The intro split, the carousel, the lightbox, the centred
 * header and the CTA band are all shared components with their own
 * stylesheets, and nothing here touches them: the whole page is assembly apart
 * from the scale strip and the feature grid.
 *
 * Note the neighbouring visio.css, which is the SERVICES PAGE's VISIO section.
 * Different section, different page, different prefix. `.visio__*` is that
 * one; `.visio-page__*`, `.visio-scale__*` and `.visio-features__*` are this
 * one. They never load together.
 */

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

/* --------------------------------------------------------------------
 * Scale strip
 *
 * The homepage social-proof stats, at three across instead of two. Two
 * conventions meet here and each supplies a different half:
 *
 *   the VALUE is the stat grid's, which is 64px (social-proof);
 *   the EDGE PATTERN is the three-column one (deliver), which is that padding
 *   goes only on edges facing a hairline, and the two edges facing the
 *   container line get nothing because the container already spaces them.
 *
 * social-proof's own rule cannot simply be copied: it pads the second cell on
 * both sides, which at two columns puts padding on an edge that faces the
 * container. At three that mistake would be visible on the last cell, so the
 * pattern is taken from deliver and only the number from social-proof.
 * -------------------------------------------------------------------- */

.visio-scale__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--color-border-subtle);
}

.visio-scale__stat {
	padding-block: 64px;
}

/* Hairlines BETWEEN columns and BETWEEN rows, never at the grid's outer edges.
   Written per position in the ROW (3n) rather than per position in the list,
   which is what lets the strip hold any number of stats: a fourth wraps to a
   second row and starts it clean, instead of carrying a rule and a padded edge
   against the container line the way a +-sibling rule would. The field group
   therefore caps the repeater at nothing - the limit belonged to this
   stylesheet, and this stylesheet no longer has one. */
.visio-scale__stat:not(:nth-child(3n + 1)) {
	border-left: 1px solid var(--color-border-subtle);
}

.visio-scale__stat:nth-child(n + 4) {
	border-top: 1px solid var(--color-border-subtle);
}

/* Padding only on edges facing a hairline: the first of a row faces one on its
   right, the last on its left, the middle on both. */
.visio-scale__stat:nth-child(3n + 1) {
	padding-right: 64px;
}

.visio-scale__stat:nth-child(3n + 2) {
	padding-inline: 64px;
}

.visio-scale__stat:nth-child(3n) {
	padding-left: 64px;
}

/* The block shrinks to the stat line's rendered width so the description wraps
   at exactly that width and its edge aligns with the number, whatever the
   number is. social-proof's rule, and the reason neither uses a fixed width. */
.visio-scale__block {
	width: fit-content;
}

/* The stat-xl pairing from social-proof: Archivo 800 at the token size, with a
   30px mono unit. The 30px is NOT a token - it is a one-off pairing that
   social-proof.css records as deliberately un-tokenised. This is its second
   use, which is the point at which it should be tokenised; flagged rather than
   done here, because naming it means touching a signed-off homepage section. */
.visio-scale__line {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--type-stat-xl-size);
	line-height: normal;
	font-weight: 800;
	color: var(--color-heading-text);
}

/* The counting number sits in a box sized by its final string, so the unit and
   the description cannot move while the digits tick. Tabular figures stop the
   digits jittering inside that box. nowrap because a thousands group written
   with a plain space is otherwise a line-break opportunity. */
.visio-scale__number {
	position: relative;
	display: inline-block;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.visio-scale__number-reserve {
	visibility: hidden;
}

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

.visio-scale__unit {
	font-family: var(--font-mono);
	font-size: 1.875rem; /* 30px, the social-proof pairing */
	font-weight: 500;
	color: var(--color-heading-text);
}

/* social-proof's stat-desc exactly, including the pair of declarations that
   look redundant and are not: ZERO INTRINSIC WIDTH so the description never
   widens the fit-content block above, then stretched back to that block's
   resolved width. Without them the block sizes to whichever is longer, the
   figure or its description, and the alignment that width: fit-content exists
   to create is broken by any description longer than its number.

   14px/normal is the stat-label size the design node carries. It is not a
   token and social-proof.css records it as deliberately un-tokenised; this is
   its second use, so it belongs in the same bucket as the 30px unit above. */
.visio-scale__desc {
	margin-top: 12px; /* social-proof's figure-to-description step */
	width: 0;
	min-width: 100%;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-weight: 400;
	color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
 * Feature grid
 *
 * The CFD benefit boxes exactly: three across, 16px gap, 32px of padding on
 * --color-surface-card at 6px. 32 rather than 48 because three across a 1312
 * container is 427px a box, which is under half the container.
 *
 * A GRID RATHER THAN AN ACCORDION, and that is a content decision, not a
 * layout one: the six groups are audience-segmented, so the grouping is what
 * lets a reader find their own section. Collapsing five of them adds clicks
 * without adding orientation.
 *
 * The rows are NOT height-matched to each other beyond what the grid does by
 * default: a row's boxes take the height of the tallest in that row, which is
 * the seven-bullet group. That is correct - a shorter group padded out to
 * match would be whitespace pretending to be content.
 * -------------------------------------------------------------------- */

.visio-features__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 64px 0 0; /* the header-to-content step this page's other sections use */
	padding: 0;
	list-style: none;
}

.visio-features__box {
	padding: 32px;
	border-radius: 6px;
	background-color: var(--color-surface-card);
}

.visio-features__title {
	margin-bottom: 24px; /* the title-to-list gap, from the job and CFD column lists */
	font-size: var(--type-h4-size);
	line-height: var(--type-h4-line);
	letter-spacing: var(--type-h4-spacing);
	font-weight: var(--type-h4-weight);
	color: var(--color-heading-text);
}

.visio-features__list li {
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	color: var(--color-body-text);
}

.visio-features__list li + li {
	margin-top: 12px; /* the site's list item spacing */
}

/* The carousel's offset from its header belongs to the SECTION, not to the
   component: .image-carousel is shared and how far it sits from whatever
   introduces it is the caller's business. Same value the CFD gallery uses. */
.visio-shots .image-carousel {
	margin-top: 64px;
}

/* --------------------------------------------------------------------
 * One column at 1024
 *
 * The site's single layout switch.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.visio-scale__row {
		grid-template-columns: 1fr;
	}

	/* Re-cast for a stack: the rules run between rows rather than between
	   columns, so the padding moves to the block axis and every inline edge
	   now faces the container line and takes nothing.

	   Every positional selector above is repeated here rather than relying on
	   the plain class. A media query adds NO specificity, so .visio-scale__stat
	   alone (0,1,0) loses to .visio-scale__stat:nth-child(3n + 1) (0,2,0) and
	   the first stat would keep its 64px right padding at 390. */
	.visio-scale__stat,
	.visio-scale__stat:nth-child(3n + 1),
	.visio-scale__stat:nth-child(3n + 2),
	.visio-scale__stat:nth-child(3n) {
		padding-inline: 0;
		padding-block: 32px;
	}

	.visio-scale__stat:not(:nth-child(3n + 1)),
	.visio-scale__stat:nth-child(n + 4) {
		border-left: 0;
		border-top: 0;
	}

	.visio-scale__stat + .visio-scale__stat {
		border-top: 1px solid var(--color-border-subtle);
	}

	.visio-features__grid {
		grid-template-columns: 1fr;
	}

	.visio-features__grid,
	.visio-shots .image-carousel {
		margin-top: 48px; /* the stacking step the CFD sections use here */
	}
}