/**
 * Section system.
 *
 * The device that makes a page read as engineered rather than assembled: a
 * consistent section header (eyebrow, rule, title, standfirst), visible grid
 * structure and hairline dividers. Every block inherits from this instead of
 * inventing its own heading treatment, which is what made the previous build
 * feel like a collection of unrelated panels.
 */

/* --- Section header --------------------------------------------------- */

/*
 * Section header.
 *
 * Columns are sized to the content rather than split 50/50. At 1600px an
 * even split threw the heading and its standfirst to opposite ends of the
 * screen with a void between them, and every block on the page repeated the
 * same shape. The heading now takes the measure it needs and the standfirst
 * sits beside it.
 */
.section-head {
	display: grid;
	/* rem, not ch: ch resolves against this element's 16px font, so "20ch"
	   gave the heading a ~160px column and wrapped short titles onto two or
	   three lines. */
	grid-template-columns: minmax(0, 30rem) minmax(0, 36rem);
	justify-content: start;
	gap: var(--sp-md) var(--sp-2xl);
	align-items: end;
	margin-bottom: var(--sp-lg);
	padding-top: var(--sp-md);
	border-top: 1px solid var(--c-border);
}

.bg-inverse .section-head,
.has-overlay .section-head {
	border-top-color: rgba(255, 255, 255, 0.18);
}

.section-head--centred {
	grid-template-columns: minmax(0, 1fr);
	max-width: var(--container-narrow);
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}

.section-head__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
	margin-bottom: var(--sp-xs);
	color: var(--c-accent-text);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}

.bg-inverse .section-head__eyebrow,
.has-overlay .section-head__eyebrow {
	color: var(--c-accent);
}

/* Section index, e.g. 01 / 02. Pure structure, hidden from screen readers
   because it carries no meaning beyond ordering. */
.section-head__index::after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 2px;
	margin-left: var(--sp-2xs);
	background-color: currentColor;
	vertical-align: middle;
}

.section-head__title {
	margin: 0;
	max-width: none;
	font-size: var(--fs-xl);
}

/* A section that stands alone, rather than introducing a dense block below
   it, can carry a larger heading. */
.section-head--lead .section-head__title {
	font-size: var(--fs-2xl);
}

.section-head--centred .section-head__title {
	max-width: 24ch;
}

.section-head__standfirst {
	max-width: 46ch;
	color: var(--c-text-muted);
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
}

/* Image-backed blocks are not token-remapped, so they keep an explicit
   light standfirst. Colour bands get theirs from --c-text-muted. */
.has-overlay .section-head__standfirst {
	color: var(--c-grey-300);
}

.section-head__standfirst > :first-child { margin-top: 0; }
.section-head__standfirst > :last-child  { margin-bottom: 0; }

/*
 * Action pinned to the right of a section header.
 *
 * The header is a two-column grid, so a third child (title, standfirst,
 * action) wrapped onto a new row in column one and the button ended up
 * floating in the middle of the section. Pinned to column two.
 */
.section-head__action {
	grid-column: 2;
	justify-self: end;
	align-self: end;
	margin-top: var(--sp-sm);
}

/*
 * With an action present the header becomes three columns, so the button
 * sits level with the heading instead of dropping to its own row and
 * leaving a band of dead space above the content.
 */
.section-head:has(.section-head__action) {
	grid-template-columns: minmax(0, 30rem) minmax(0, 36rem) auto;
	justify-content: space-between;
}

.section-head:has(.section-head__action) .section-head__action {
	grid-column: 3;
	margin-top: 0;
}

@media (max-width: 1100px) {
	.section-head,
	.section-head:has(.section-head__action) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-sm);
		margin-bottom: var(--sp-md);
	}

	.section-head:has(.section-head__action) {
		grid-template-columns: minmax(0, 1fr);
	}

	.section-head__action,
	.section-head:has(.section-head__action) .section-head__action {
		grid-column: 1;
		justify-self: start;
		margin-top: 0;
	}
}

/* --- Ruled grid ------------------------------------------------------- */

/* Items separated by hairlines rather than gaps and shadows. Gives a dense,
   technical read without boxing everything. */
.ruled-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-border);
	border-left: 1px solid var(--c-border);
}

.bg-inverse .ruled-grid,
.has-overlay .ruled-grid {
	border-color: rgba(255, 255, 255, 0.16);
}

.ruled-grid > * {
	padding: var(--sp-md);
	border-right: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
}

.bg-inverse .ruled-grid > *,
.has-overlay .ruled-grid > * {
	border-color: rgba(255, 255, 255, 0.16);
}

/* --- Numbered items --------------------------------------------------- */

.numbered {
	counter-reset: istorage-step;
}

.numbered__item {
	position: relative;
	counter-increment: istorage-step;
}

.numbered__item::before {
	content: counter(istorage-step, decimal-leading-zero);
	display: block;
	margin-bottom: var(--sp-2xs);
	color: var(--c-accent-text);
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-caps);
	font-variant-numeric: tabular-nums;
}

.bg-inverse .numbered__item::before,
.has-overlay .numbered__item::before {
	color: var(--c-accent);
}

/* --- Accent rule ------------------------------------------------------ */

.accent-rule {
	position: relative;
}

.accent-rule::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 3px;
	background-color: var(--c-brand);
}

/* --- Panel ------------------------------------------------------------ */

/* Bordered surface used wherever content needs containing without the
   softness of a drop shadow. */
.panel {
	padding: var(--sp-lg);
	background-color: var(--c-white);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
}

.panel--subtle {
	background-color: var(--c-bg-subtle);
}

.panel--inverse {
	background-color: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 782px) {
	.panel {
		padding: var(--sp-md);
	}
}

/* --- Adjacent block rhythm -------------------------------------------- */

/*
 * Blocks each carry their own vertical padding, so two stacked blocks
 * produce double the intended gap. A section introduction followed by its
 * content is conceptually one section and should not read as two.
 *
 * Collapsing the join rather than reducing the padding keeps a single block
 * correctly spaced when it stands alone.
 */
.section-intro + .block {
	padding-top: 0;
}

.section-intro {
	padding-bottom: var(--sp-md);
}

/* A block immediately after the hero sits closer: the assurance bar already
   provides a visual join. */
.hero + .block {
	padding-top: var(--section-padding-sm);
}

/* --- Block width system ------------------------------------------------ */

/*
 * Every block sits inside .container, the same frame the header and hero
 * use, so all left and right edges line up. Blocks must not set their own
 * max-width on structural elements: that is what made some sections stop
 * part way across the page. Only running prose is held to a reading
 * measure, and it is the same measure everywhere.
 */
:root {
	--prose-measure: 68ch;
}

.block .prose,
.rich-text__body,
.entry-content {
	max-width: var(--prose-measure);
}

/* --- Background bands --------------------------------------------------- */

/*
 * Set per block with the Background field, or by the block's own default.
 * The light-on-dark text treatment is keyed off .bg-inverse, which the dark
 * and brand bands also carry; see istorage_block_bg().
 */
.block.bg-white { background-color: var(--c-white); }
.block.bg-light { background-color: var(--c-band-light); }
.block.bg-dark  { background-color: var(--c-bg-inverse); }
.block.bg-brand { background-color: var(--c-brand-darker); }

/*
 * Bands remap the colour tokens rather than recolouring individual elements.
 *
 * Every block already draws its text, headings, borders and links from
 * these tokens, so a block switched to a dark band adapts without needing
 * its own dark-mode rules. The previous approach set colours element by
 * element, which missed some and made white cards inside dark bands render
 * white headings on white (measured 1.00:1).
 */
.bg-inverse {
	--c-text:          var(--c-grey-200);
	--c-text-muted:    var(--c-grey-400);
	--c-heading:       var(--c-white);
	--c-border:        rgba(255, 255, 255, 0.18);
	--c-border-strong: rgba(255, 255, 255, 0.30);
	--c-link:          var(--c-accent);
	--c-link-hover:    var(--c-white);
	--c-bg-subtle:     rgba(255, 255, 255, 0.05);
	--c-accent-text:   var(--c-accent);
	color: var(--c-text);
}

/* Grey-400 measured 4.33:1 on the brand blue, just under AA for body text. */
.bg-brand {
	--c-text:       rgba(255, 255, 255, 0.94);
	--c-text-muted: rgba(255, 255, 255, 0.82);
}

.bg-inverse .section-head__eyebrow { color: var(--c-accent); }

/*
 * Surfaces: elements that paint their own white background. Inside a dark
 * band they restore the light tokens so their content stays dark-on-white.
 */
.bg-inverse :is(
	.card, .panel:not(.panel--inverse), .certification, .featured-product__link,
	.service-tile, .enquiry-block__form, .hero__form, .review,
	.product-buy__panel, .comparison__scroller
) {
	--c-text:          var(--c-grey-800);
	--c-text-muted:    var(--c-grey-600);
	--c-heading:       var(--c-grey-900);
	--c-border:        var(--c-grey-200);
	--c-border-strong: var(--c-grey-300);
	--c-link:          var(--c-brand);
	--c-link-hover:    var(--c-brand-dark);
	--c-bg-subtle:     var(--c-grey-50);
	--c-accent-text:   var(--c-brand);
	color: var(--c-text);
}

/* Tables read best on a light surface, so on a dark band the comparison
   table sits on its own white panel. */
.bg-inverse .comparison__scroller {
	padding: var(--sp-sm);
	background-color: var(--c-white);
	border-radius: var(--radius-md);
}

/*
 * On a light-grey band, anything that would itself be pale grey (image
 * boxes, card media, zebra rows) is lifted to white so it reads as a panel
 * sitting on the band rather than a slightly different shade of it.
 */
.bg-light {
	--c-bg-subtle: var(--c-white);
	--c-grey-100:  var(--c-white);
}

.bg-light .panel,
.bg-light .card {
	background-color: var(--c-white);
}

/*
 * Consecutive bands of the same colour read as one continuous band, so the
 * seam between them carries one block's padding rather than two.
 */
.block.bg-light + .block.bg-light,
.block.bg-dark  + .block.bg-dark,
.block.bg-brand + .block.bg-brand {
	padding-top: 0;
}