/**
 * Statement block styles (block-scoped; enqueued only when the block is present).
 * BEM only, prefixed with the block slug. Do not touch the theme's global style.css.
 *
 * Design reference: Techivo template, node 5006:6327 (testimonial). The mockup's
 * structure — a full-bleed accent stage with a centred title over one white card —
 * is what a mission statement needs: a declaration set apart from the page around it.
 * Metrics are the @1920 mockup values scaled down mobile-first: 44px heading, a card
 * with a 30px radius, a 1px #f5f7f9 border, a 0 34px 58px/6% shadow and 60px of inset,
 * and a 1px #ebecf5 hairline above the row at the bottom of the card.
 *
 * Deliberate departures from the mockup:
 * - The stage runs edge to edge instead of sitting inset by 30px with rounded corners.
 *   The theme's other tinted sections (services, scenarios) are full-bleed, and the
 *   inset would turn into stray side gutters on a narrow screen.
 * - The mockup's avatar photo, review chips and carousel arrows are dropped. A mission
 *   has no slides and no author; the bottom row carries focus points instead, styled
 *   after the check-marked rows of the deliverables block.
 *
 * Contrast: white on #3e66f3 is 4.77:1, which clears WCAG AA for body text with only
 * 0.27 of headroom. So neither the text nor the stage under it may be lightened — a
 * translucent white is out, and so is the mockup's own lighter band (see below).
 */

.sws-statement {
	--stm-main: var(--wp--preset--color--main, #3e66f3);
	--stm-title: var(--wp--preset--color--title, #1c1c25);
	--stm-body: var(--wp--preset--color--body, #797e88);
	--stm-white: var(--wp--preset--color--white, #fff);

	/* Soft surface as in services/scenarios; hairline as in deliverables. */
	--stm-surface: #f6f7fa;
	--stm-line: #ebecf5;
	--stm-card-line: #f5f7f9;
	--stm-display: var(--wp--preset--font-family--geologica, "Geologica", inherit);
	--stm-container: 1380px;

	/*
	 * Diagonal banding, measured off the mockup's own pixels: bands lean 29.7deg
	 * off vertical with a 274px perpendicular pitch on its 1860px stage, which is
	 * 203px against our 1380px container. The pitch scales with the block so the
	 * texture keeps its proportion instead of coarsening on a narrow screen.
	 */
	--stm-band-pitch: clamp(8rem, 14.7cqw, 12.6875rem);
	--stm-band-width: calc(var(--stm-band-pitch) / 2);

	/* Set per tone: the colours the intro above the card is drawn in. */
	--stm-intro-eyebrow: var(--stm-main);
	--stm-intro-heading: var(--stm-title);

	container: sws-statement / inline-size;
}

/* Tones
--------------------------------------------- */

/*
 * The diagonal banding of the mockup, drawn as a second background layer rather
 * than a pseudo-element: no positioning, no overflow clipping, and nothing extra
 * in the accessibility tree. Static, so prefers-reduced-motion does not apply.
 *
 * The band darkens the stage where the mockup lightens it. The centred heading sits
 * directly on the band, and the mockup's own #4368f6 measures 4.494:1 against white —
 * a hair under AA. Mixing the same amount toward the title colour instead reads as
 * the same texture and lifts the heading to 5.09:1.
 */
.sws-statement--accent {
	background-color: var(--stm-main);
	background-image: repeating-linear-gradient(
		60deg,
		rgb(28 28 37 / 5%) 0 var(--stm-band-width),
		rgb(28 28 37 / 0%) var(--stm-band-width) var(--stm-band-pitch)
	);

	--stm-intro-eyebrow: var(--stm-white);
	--stm-intro-heading: var(--stm-white);
}

.sws-statement--light {
	background: var(--stm-surface);
}

.sws-statement__inner {
	box-sizing: border-box;
	max-width: var(--stm-container);
	margin-inline: auto;
	padding-block: 3rem;
	padding-inline: clamp(1rem, 4cqw, 2.5rem);
}

/* Intro
--------------------------------------------- */

.sws-statement__intro {
	max-width: 46rem;
	margin: 0 auto 2.5rem;
	text-align: center;
}

.sws-statement__eyebrow {
	margin: 0 0 1rem;
	font-family: var(--stm-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--stm-intro-eyebrow);
}

.sws-statement__heading {
	margin: 0;
	font-family: var(--stm-display);
	font-size: clamp(1.75rem, 1.1rem + 2.6cqw, 2.75rem); /* 44px */
	font-weight: 700;
	line-height: 1.2;
	color: var(--stm-intro-heading);
	/* Evens out the line lengths instead of leaving one orphaned word. */
	text-wrap: balance;
}

/* Card
--------------------------------------------- */

.sws-statement__card {
	box-sizing: border-box;
	padding: clamp(1.5rem, 5cqw, 3.75rem); /* 60px at the 1380px container */
	border: 1px solid var(--stm-card-line);
	border-radius: 30px;
	background: var(--stm-white);
	box-shadow: 0 34px 58px 0 rgb(0 0 0 / 6%);
}

/* Comfortable measure while the two paragraphs are stacked; lifted once they split. */
.sws-statement__body {
	max-width: 46rem;
}

.sws-statement__lead {
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.6cqw, 1.25rem); /* 20px */
	font-weight: 500;
	line-height: 1.5;
	color: var(--stm-title);
}

/* The supporting paragraph steps down to body size and body colour. */
.sws-statement__text {
	margin: 1.25rem 0 0;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--stm-body);
}

/* Descendant selectors: the markup inside comes from the WYSIWYG field. */
.sws-statement__text p {
	margin: 0 0 0.75em;
}

.sws-statement__text p:last-child {
	margin-bottom: 0;
}

/* Focus points
--------------------------------------------- */

/*
 * The hairline belongs to the row, not to the body above it: with no points the
 * card ends at the text and no stray rule is left hanging.
 */
.sws-statement__points {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 2rem 0 0;
	padding: 2rem 0 0;
	border-top: 1px solid var(--stm-line);
	list-style: none;
}

/*
 * Top-aligned, not centred: a point that wraps to two lines would otherwise push
 * its marker down to the middle of the text block instead of the first line.
 */
.sws-statement__point {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.sws-statement__point-marker {
	flex: 0 0 auto;
	/* Pulls the 28px disc onto the optical centre of the 23px first line. */
	margin-top: -0.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 100px;
	background: rgb(62 102 243 / 10%);
	color: var(--stm-main);
}

.sws-statement__point-text {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--stm-title);
}

/* Action
--------------------------------------------- */

.sws-statement__actions {
	margin-top: 2rem;
}

.sws-statement__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 12.5rem; /* 200px */
	min-height: 3.4375rem; /* 55px */
	padding: 0.75rem 2.0625rem;
	border-radius: 100px;
	background: var(--stm-main);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--stm-white);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.sws-statement__btn:hover,
.sws-statement__btn:focus {
	background: #2f55dd;
	color: var(--stm-white);
}

/* The button sits inside the white card, so the accent outline reads on both tones. */
.sws-statement__btn:focus-visible {
	outline: 2px solid var(--stm-main);
	outline-offset: 3px;
}

/* Desktop (matches WordPress's mobile/desktop breakpoint): roomier section.
--------------------------------------------- */
@container sws-statement (min-width: 782px) {

	.sws-statement__inner {
		padding-block: 5rem;
	}

	.sws-statement__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem 2rem;
	}
}

/*
 * Wide desktop: the card body splits the way the mockup splits its card, with the
 * statement taking the left column the photo used to hold. Splitting any earlier
 * leaves both columns too narrow for a full sentence.
--------------------------------------------- */
@container sws-statement (min-width: 1100px) {

	/*
	 * Two columns only when there are two things to put in them. With just one of
	 * the pair filled — which the block allows — a bare grid would squeeze a lone
	 * paragraph into half the card and leave the other half empty.
	 */
	.sws-statement__body:has(.sws-statement__lead):has(.sws-statement__text) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3rem;
		align-items: start;
		max-width: none;
	}

	/* The column gap already separates the two, so the stacked margin goes. */
	.sws-statement__body:has(.sws-statement__lead):has(.sws-statement__text) .sws-statement__text {
		margin-top: 0;
	}

	.sws-statement__lead {
		font-size: 1.375rem; /* 22px */
	}
}