/*
 * Pijlers.
 *
 * Full-width block: it draws its own background (so it knows which text colour is readable)
 * and keeps its content within the site width. The library item puts it in a 100%-width
 * container without padding.
 *
 * Colours: --gsf-pillars-bg (chosen swatch, or surface-dark) and --gsf-pillars-on (readable
 * text colour for it). Muted text and lines are mixes of the text colour with the background,
 * so they work on any background.
 */
.gsf-block.gsf-pillars {
	--gsf-p-bg: var(--gsf-pillars-bg, var(--gsf-color-surface-dark));
	--gsf-p-on: var(--gsf-pillars-on, var(--gsf-on-color-surface-dark));
	--gsf-p-muted: color-mix(in srgb, var(--gsf-p-on) 82%, var(--gsf-p-bg));
	--gsf-p-line: color-mix(in srgb, var(--gsf-p-on) 35%, var(--gsf-p-bg));
	background: var(--gsf-p-bg);
	color: var(--gsf-p-on);
}

.gsf-block.gsf-pillars .gsf-pillars__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* lets the slider scroll instead of widening the column */
	gap: clamp(2.25rem, 5cqi, 4.5rem);
	max-width: var(--gsf-content-outer);
	margin-inline: auto;
	padding: var(--gsf-space-section) var(--gsf-space-gutter);
}

@container (min-width: 880px) {
	.gsf-block.gsf-pillars .gsf-pillars__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.gsf-block.gsf-pillars .gsf-pillars__inner--single {
		grid-template-columns: minmax(0, 46rem);
	}
}

/* Main column. Heading and button come from core/base.css; this block sets their colours to
   its own (label and button are the inverse of the block). */
.gsf-block.gsf-pillars {
	--gsf-head-label-bg: var(--gsf-p-on);
	--gsf-head-label-fg: var(--gsf-p-on-inverse, var(--gsf-p-bg));
	--gsf-button-bg: var(--gsf-p-on);
	--gsf-button-fg: var(--gsf-p-on-inverse, var(--gsf-p-bg));
}

.gsf-block.gsf-block.gsf-pillars .gsf-pillars__main .gsf-head__intro {
	margin-top: var(--gsf-space-4);
	color: var(--gsf-p-muted);
	font-size: var(--gsf-text-lead);
	line-height: 1.5;
}

.gsf-block.gsf-pillars .gsf-pillars__actions {
	margin: var(--gsf-space-5) 0 0;
}

/*
 * Pillars. All widths below are the block's width (one container, the same one the shared
 * slider uses), so the list and its items always agree on the layout:
 * - < 520px: the shared mobile slider (.gsf-slider in core/base.css), each pillar a framed card;
 * - 520-879px: one column, title beside the text;
 * - 880-1099px: two columns, the list is narrow, title above the text;
 * - >= 1100px: two columns, title beside the text.
 */
.gsf-block.gsf-pillars .gsf-pillars__list {
	list-style: none;
}

.gsf-block.gsf-pillars .gsf-pillars__item {
	display: grid;
	gap: var(--gsf-space-1) var(--gsf-space-4);
	margin: 0;
}

@container (max-width: 519.98px) {
	.gsf-block.gsf-pillars .gsf-pillars__item {
		align-content: start;
		gap: var(--gsf-space-2);
		padding: var(--gsf-space-4);
		border: 1px solid var(--gsf-p-line);
		border-radius: var(--gsf-radius);
	}
}

@container (min-width: 520px) {
	.gsf-block.gsf-pillars .gsf-pillars__list {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--gsf-p-line);
	}

	.gsf-block.gsf-pillars .gsf-pillars__item {
		padding: var(--gsf-space-4) 0;
		border-bottom: 1px solid var(--gsf-p-line);
		grid-template-columns: minmax(9rem, 2fr) 3fr;
	}

	/* The quote's top line takes over as divider, so the last pillar has none of its own;
	   without a quote nothing follows, so it also drops its bottom padding. */
	.gsf-block.gsf-pillars .gsf-pillars__item:last-child {
		border-bottom: 0;
	}

	.gsf-block.gsf-pillars .gsf-pillars__list:last-child .gsf-pillars__item:last-child {
		padding-bottom: 0;
	}
}

@container (min-width: 880px) and (max-width: 1099.98px) {
	.gsf-block.gsf-pillars .gsf-pillars__item {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gsf-block.gsf-pillars .gsf-pillars__item-title {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	margin: 0;
	color: inherit;
	font-family: var(--gsf-font-heading);
	font-weight: 400;
	font-size: calc(var(--gsf-text-body) * 1.15);
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* The marker box is exactly one title line high, so it centres on the first line. */
.gsf-block.gsf-pillars .gsf-pillars__marker {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 1.05em;
	height: 1.25em;
}

.gsf-block.gsf-pillars .gsf-pillars__check {
	width: 1em;
	height: 1em;
}

.gsf-block.gsf-pillars .gsf-pillars__icon {
	font-size: 0.95em;
	line-height: 1;
}

.gsf-block.gsf-pillars .gsf-pillars__marker--number {
	font-family: var(--gsf-font-body);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

/* Numbers sit on the title's baseline instead of being centred on the line. */
.gsf-block.gsf-pillars--marker-number .gsf-pillars__item-title {
	align-items: baseline;
}

.gsf-block.gsf-pillars--marker-number .gsf-pillars__marker {
	height: auto;
}

.gsf-block.gsf-pillars--marker-none .gsf-pillars__marker {
	display: none;
}

.gsf-block.gsf-pillars .gsf-pillars__item-body {
	margin: 0;
	color: var(--gsf-p-muted);
	font-size: calc(var(--gsf-text-body) * 0.9);
	line-height: 1.5;
}

/* Quote. Wide: it continues the pillars' rhythm, its top line acting as the next divider.
   Narrow: it follows the slider (and its dots) with more room. */
.gsf-block.gsf-pillars .gsf-pillars__quote {
	margin: var(--gsf-space-5) 0 0;
	padding: var(--gsf-space-4) 0 0;
	border-top: 1px solid var(--gsf-p-line);
}

.gsf-block.gsf-pillars .gsf-pillars__quote:first-child {
	margin-top: 0;
}

@container (min-width: 520px) {
	.gsf-block.gsf-pillars .gsf-pillars__list ~ .gsf-pillars__quote {
		margin-top: 0;
	}
}

.gsf-block.gsf-pillars .gsf-pillars__quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: "‘" "’";
}

.gsf-block.gsf-pillars .gsf-pillars__quote blockquote p {
	margin: 0;
	color: inherit;
	font-family: var(--gsf-text-quote-font);
	font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
	font-style: normal;
	line-height: 1.25;
	text-wrap: pretty;
}

.gsf-block.gsf-pillars .gsf-pillars__quote blockquote p::before {
	content: open-quote;
}

.gsf-block.gsf-pillars .gsf-pillars__quote blockquote p::after {
	content: close-quote;
}

.gsf-block.gsf-pillars .gsf-pillars__quote figcaption {
	margin-top: var(--gsf-space-2);
	color: var(--gsf-p-muted);
	font-size: calc(var(--gsf-text-body) * 0.85);
}

/* An inverse label or button (background = the block's text colour, white or black) gets the
   opposite of that as text colour, so it reads as white on black and black on white. Browsers
   without relative colours keep the block colour as text colour. */
@supports (color: rgb(from red r g b)) {
	.gsf-block.gsf-pillars {
		--gsf-p-on-inverse: rgb(from var(--gsf-p-on) calc(255 - r) calc(255 - g) calc(255 - b));
	}
}