/*
 * About page — the approved no-photo direction.
 *
 * Same material as /producten/, /integraties/ and /contact/: off-white ground,
 * hairline separators, one tinted band at the end, small radii, no shadow, no
 * gradient, one restrained petrol accent. This page carries no imagery at all,
 * so the whitespace is doing work the other pages hand to a screenshot — the
 * sections are further apart and the measures are shorter than elsewhere.
 *
 * Deliberately NOT a card wall. The only bordered surfaces on the page are the
 * closing band and the timeline rail; the approach checklist and the core
 * values are ruled with hairlines instead. Four boxes of values would turn a
 * quiet statement of character into a feature grid.
 *
 * Every value is a theme.json token. Mobile-first: the 360px case is the
 * unconditional default and is widened with min-width only. Breakpoints match
 * the ones already in use — 48rem, 64rem, 80rem.
 *
 * Loaded on /over-foodyx/ only; see foodyx_enqueue_styles().
 */

.fx-ab {
	margin-block-start: var(--wp--preset--spacing--80);
}

/*
 * The chapter rhythm. One step larger than the other V1 pages: with no images
 * anywhere, the gap between sections is the only thing marking where one
 * subject ends and the next begins.
 */
.fx-approach,
.fx-traits,
.fx-story,
.fx-abcta {
	margin-block-start: var(--wp--preset--spacing--90);
}

/* ---- Shared page furniture ---------------------------------------------- */

.fx-ab__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

.fx-ab__h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
	text-wrap: balance;
}

.fx-ab__body {
	margin: var(--wp--preset--spacing--50) 0 0;
	max-width: 58ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
}

.fx-ab__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.fx-ab__actions--hero {
	margin-block-start: var(--wp--preset--spacing--70);
}

.fx-ab .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---- Hero ---------------------------------------------------------------- */

/*
 * No image, so the h1 is the whole of the top of the page. It gets the display
 * size and a short measure; everything else up here stays quiet.
 */
.fx-ab__intro {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.fx-ab__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-sm);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.fx-ab__lede {
	margin: 0;
	max-width: 52ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
}

/*
 * The three promises. Same component as the other V1 pages — a reader arriving
 * here from /producten/ should recognise it rather than re-read it.
 */
.fx-values {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fx-values__item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	max-width: none;
}

.fx-values__item + .fx-values__item {
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.fx-values__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent);
}

.fx-values__icon svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.fx-values__text {
	display: block;
}

.fx-values__title {
	display: block;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.35;
}

.fx-values__what {
	display: block;
	margin-block-start: 0.125rem;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

/* ---- Approach ------------------------------------------------------------ */

.fx-checks {
	display: grid;
	margin: var(--wp--preset--spacing--70) 0 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

/*
 * Ruled rows, not ticked bullets in a box. The hairline belongs to the item so
 * the rules land between rows at every column count without a single rule
 * needing to know how many columns there are.
 */
.fx-checks__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	max-width: none;
	padding-block: var(--wp--preset--spacing--50);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
}

.fx-checks__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
}

.fx-checks__icon svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* ---- Core values --------------------------------------------------------- */

/*
 * Four columns, divided by hairlines, with no card anywhere. On phones the
 * dividers turn horizontal; the items never gain a border, a background or a
 * radius at any width.
 */
.fx-traits__grid {
	display: grid;
	margin: var(--wp--preset--spacing--70) 0 0;
	padding: 0;
	list-style: none;
}

.fx-trait {
	max-width: none;
	padding-block: var(--wp--preset--spacing--60);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.fx-trait__icon {
	display: grid;
	place-items: center;
	width: var(--wp--custom--size--icon);
	height: var(--wp--custom--size--icon);
	border-radius: 50%;
	background-color: var(--wp--custom--surface--accent-soft);
	color: var(--wp--preset--color--accent);
}

.fx-trait__icon svg {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

.fx-trait__title {
	margin: var(--wp--preset--spacing--50) 0 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.25;
}

.fx-trait__what {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 30ch;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

/* ---- History ------------------------------------------------------------- */

/*
 * The rail is a continuous hairline down the left of the list, with a petrol
 * dot per milestone sitting on it. It is drawn on the <ol> rather than on each
 * entry, so it is one unbroken line instead of four segments that have to be
 * talked into meeting.
 */
.fx-timeline {
	position: relative;
	margin: var(--wp--preset--spacing--70) 0 0;
	padding: 0 0 0 var(--wp--preset--spacing--70);
	list-style: none;
	border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
}

.fx-milestone {
	position: relative;
	max-width: none;
}

.fx-milestone + .fx-milestone {
	margin-block-start: var(--wp--preset--spacing--80);
}

/*
 * The dot sits ON the rail, centred on it: half its own width to the left of
 * the padding, which is the rail's position. The ring in the same colour as the
 * page ground is what makes it read as a bead on a thread rather than a blob
 * touching a line.
 */
.fx-milestone::before {
	content: "";
	position: absolute;
	top: 0.45rem;
	left: calc(-1 * var(--wp--preset--spacing--70) - 0.3125rem);
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 0.25rem var(--wp--preset--color--ground);
}

/*
 * The year is the label, not a heading: it is a date, it repeats in the same
 * shape four times, and making it an h3 would put four numbers in the document
 * outline ahead of the four things that actually happened.
 */
.fx-milestone__year {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.fx-milestone__title {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.25;
}

.fx-milestone__what {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 62ch;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

/* ---- Closing CTA --------------------------------------------------------- */

/*
 * The one tinted surface on the page, and the one place the page raises its
 * voice. Centred, because it is an invitation rather than another column of
 * argument.
 */
.fx-abcta {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--custom--surface--accent-wash);
	text-align: center;
}

.fx-abcta__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
	text-wrap: balance;
}

.fx-abcta__body {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-width: 52ch;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.55;
}

.fx-abcta__actions {
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--60);
}

/*
 * Reassurances, not features: small, muted, and the last thing on the page.
 * "Snelle reactie" is absent on purpose — see the pattern's docblock.
 */
.fx-assurances {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
}

.fx-assurances__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: none;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

.fx-assurances__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
}

.fx-assurances__icon svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

/* ---- 48rem -------------------------------------------------------------- */

@media (min-width: 48rem) {
	/* The checklist pairs up. The hairlines still fall between rows. */
	.fx-checks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--80);
	}

	/*
	 * Two values per row, divided both ways. The vertical rule is drawn on the
	 * second item of each pair rather than as a gap border, so it appears once
	 * per row and never dangles past the last one.
	 */
	.fx-traits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--80);
	}

	.fx-trait:nth-child(even) {
		padding-inline-start: var(--wp--preset--spacing--80);
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
		margin-inline-start: calc(-1 * var(--wp--preset--spacing--80));
	}

	.fx-abcta {
		padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
	}
}

/* ---- 64rem -------------------------------------------------------------- */

@media (min-width: 64rem) {
	.fx-approach,
	.fx-traits,
	.fx-story,
	.fx-abcta {
		margin-block-start: var(--wp--preset--spacing--100);
	}

	/*
	 * Hero splits, exactly as on the other V1 pages: eyebrow, title and lede in
	 * the wider column, the value list in the narrower one behind a vertical
	 * hairline. The buttons sit under the lede, not under the list, so they stay
	 * with the sentence that earns them.
	 */
	/*
	 * The last row is 1fr so that when the value list runs taller than the
	 * title and lede beside it, the slack lands BELOW the lede instead of being
	 * shared out between the rows the list spans — which would open a gap
	 * between the heading and the paragraph that no margin put there.
	 */
	.fx-ab__intro {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: var(--wp--preset--spacing--90);
		row-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.fx-ab__eyebrow,
	.fx-ab__title,
	.fx-ab__lede {
		grid-column: 1;
	}

	.fx-ab__title {
		font-size: var(--wp--preset--font-size--display);
		max-width: 14ch;
	}

	.fx-values {
		grid-column: 2;
		grid-row: 2 / span 2;
		padding-inline-start: var(--wp--preset--spacing--80);
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
	}

	/*
	 * Approach: heading and copy on the left, checklist on the right. The
	 * checklist drops back to one column here because it now has half the width
	 * — two columns of two would squeeze four short lines into four wrapped
	 * ones.
	 */
	.fx-approach {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--90);
		align-items: start;
	}

	.fx-checks {
		grid-template-columns: minmax(0, 1fr);
		margin-block-start: 0;
	}

	/*
	 * History: heading on the left, rail on the right. Two parts, one row —
	 * the summary paragraph that used to sit under the heading is gone, so the
	 * row-span and the 1fr track it needed went with it.
	 *
	 * The rail now takes the larger share of the width it was sharing. That is
	 * the whole rebalance: the entries get a wider measure, the dates sit
	 * further from the heading beside them, and the column the paragraph
	 * vacated stays empty on purpose.
	 */
	.fx-story {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
		column-gap: var(--wp--preset--spacing--90);
		align-items: start;
	}

	.fx-timeline {
		margin-block-start: 0;
	}

	/* More air between milestones now that the column is wider than it was. */
	.fx-milestone + .fx-milestone {
		margin-block-start: var(--wp--preset--spacing--90);
	}
}

/* ---- 80rem -------------------------------------------------------------- */

@media (min-width: 80rem) {
	/* Four values across, each divided from the one before it. */
	.fx-traits__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--70);
	}

	.fx-trait {
		border-block-start: 0;
		padding-block: 0;
	}

	/*
	 * At four columns the divider rule moves to every item after the first, and
	 * the row rule is gone: a horizontal line above a single row of four would
	 * be a box lid with no box.
	 */
	.fx-trait:nth-child(even) {
		margin-inline-start: 0;
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.fx-trait + .fx-trait {
		padding-inline-start: var(--wp--preset--spacing--70);
		border-inline-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	}
}