/**
 * Enterprise Outcomes — editor-managed stats section for the Home page.
 *
 * Layout: copy on the left, a 3x2 stat grid on the right sitting over a single
 * background image. Each cell reads "<big number> <label>" side by side; on
 * hover the cell turns white, the number turns brand blue and shrinks, and the
 * label glides down to sit under it with the pair ending up vertically centred.
 *
 * The white panel covers the cell outright, fading in at full size so the cell
 * reads as filled the moment the pointer lands. The blue rail is the part that
 * scales out from the cell's centre towards its top and bottom edges, which is
 * why it is a transform-driven pseudo-element rather than an animated height.
 *
 * Sizes are stated in px per breakpoint rather than fluid clamps so the number
 * lands on its specified 64px, and so the vertical-centring maths below has
 * fixed quantities to work from.
 */

.eo-section {
	/* Number. The hover size is what the label's lift is measured against. */
	--eo-num-size: 64px;
	--eo-num-size-hover: 46px;
	/* Space between the number and the label in the resting, side-by-side state. */
	--eo-num-gap: 24px;

	--eo-num-line-h: 1.05;

	--eo-label-size: 17px;
	--eo-label-line-h: 1.35;
	--eo-label-line: calc(var(--eo-label-size) * var(--eo-label-line-h));
	/* Space between number and label once the label sits underneath. */
	--eo-stack-gap: 14px;

	/* Both halves of the pair are positioned from the cell's centre line, and
	   each moves off it by a fixed distance. Because neither distance depends
	   on the number's font size, the two travel at a constant ratio to one
	   another for the whole transition — so the pair looks centred at every
	   frame, not only once it lands.
	   The number rises by half of what stacking adds beneath it (the gap plus
	   the label), which is what re-centres the pair. The label drops to sit
	   that gap below the shrunken number: half of each box plus the gap. */
	--eo-lift: calc((var(--eo-stack-gap) + var(--eo-label-line)) / -2);
	--eo-label-drop: calc(
		(var(--eo-num-size-hover) * var(--eo-num-line-h) + var(--eo-label-line)) / 2 +
		var(--eo-stack-gap)
	);

	--eo-line: rgba(255, 255, 255, 0.28);
	--eo-number: #a9c4f5;
	--eo-blue: var(--primaryColor, rgba(0, 80, 239, 1));
	--eo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* One duration and one curve for the whole hover: the number shrinking, the
	   label travelling from beside it to under it, the lift that carries both,
	   the panel filling, and the two colour changes. Split these across
	   different durations and they start together but arrive apart — which is
	   what reads as the label moving first and the number following. It also
	   keeps the label's colour in step with the panel behind it; darkening the
	   text more slowly than the fill leaves white text on a white cell for the
	   difference. The rail is the one exception, and is a deliberate accent. */
	--eo-move: 0.28s;

	position: relative;
	overflow: hidden;
	padding: 70px 0;
	background: #fff;
}

/* The chevron watermark behind the copy, supplied as artwork. It carries its
   own colour and 5% opacity, so nothing here tints it. The file is 654x501 and
   the shape is drawn flush to its own left edge, so it is anchored to the
   section's left edge and centred against the copy beside it. */
.eo-section::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 654px;
	height: 501px;
	background: url(../img/enterprise-outcomes-side-graphic.svg) no-repeat left
		center / contain;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 0;
}

.eo-layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 48px;
}

/* ── Left column ─────────────────────────────────────────────────────────── */

.eo-title {
	margin: 0 0 18px;
	font-size: clamp(28px, 2.7vw, 40px);
	line-height: 1.2;
	font-weight: 700;
	color: #111;
}

.eo-text {
	margin: 0;
	max-width: 520px;
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.6;
	color: var(--paraTextColor, #404649);
}

/* ── Right column: the stat grid ─────────────────────────────────────────── */

.eo-grid {
	position: relative;
	overflow: hidden;
	background: #0b1220;
}

.eo-grid-bg {
	position: absolute;
	inset: 0;
}

.eo-grid-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Keeps white labels legible over whatever image an editor uploads. */
.eo-grid::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 12, 26, 0.72), rgba(6, 12, 26, 0.42));
	pointer-events: none;
}

.eo-cells {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eo-cell {
	/* Width the label is offset by, so it starts just past this cell's own
	   number the way the design has it. --eo-w is that number's width in ems of
	   the number's font size, measured from Lato 700 and written out per cell by
	   the template; the fallback covers a four-character value. */
	--eo-col: calc(var(--eo-w, 2.32) * var(--eo-num-size) + var(--eo-num-gap));

	position: relative;
	display: flex;
	align-items: center;
	/* min- rather than a fixed height: a three-line label in the resting state
	   is the tallest thing a cell holds, and it still has room at 180px on
	   every breakpoint — but an editor writing a longer one should push the
	   row down rather than have it spill out of the cell. */
	min-height: 180px;
	padding: 26px 30px;
	border-right: 1px solid var(--eo-line);
	border-bottom: 1px solid var(--eo-line);
}

.eo-cell:nth-child(2n) {
	border-right: 0;
}

.eo-cell:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.eo-cell::before,
.eo-cell::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

/* The white panel is the full cell from the outset and only fades up, so the
   fill covers every edge at once instead of opening from the middle. */
.eo-cell::before {
	inset: 0;
	background: #fff;
	opacity: 0;
	transition: opacity var(--eo-move) var(--eo-ease);
}

/* The rail is the piece that still grows out of the cell's centre towards its
   top and bottom edges, landing just after the panel has filled. */
.eo-cell::after {
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--eo-blue);
	transform: scaleY(0);
	transform-origin: center center;
	transition: transform 0.55s var(--eo-ease) 0.08s;
}

.eo-cell:hover::before,
.eo-cell:focus-within::before {
	opacity: 1;
}

.eo-cell:hover::after,
.eo-cell:focus-within::after {
	transform: scaleY(1);
}

/* `translate` carries the scroll-in and `transform` the hover lift: they are
   separate properties, so neither rule has to know about the other. */
.eo-cell-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* The scroll-in stagger is carried per-property here rather than as a
	   `transition-delay` on the staggered rule. That shorthand has no way to
	   target one property, so it delayed `transform` too — and since
	   `.is-visible` stays on the section for good, every later hover started
	   the number's rise 0.2s to 0.65s after the label had already moved,
	   depending on the cell's position in the grid. */
	transition: opacity 0.7s var(--eo-ease) var(--eo-reveal-delay, 0s),
		translate 0.7s var(--eo-ease) var(--eo-reveal-delay, 0s),
		transform var(--eo-move) var(--eo-ease);
}

.eo-cell:hover .eo-cell-inner,
.eo-cell:focus-within .eo-cell-inner {
	transform: translateY(var(--eo-lift));
}

.eo-value {
	display: inline-block;
	font-size: var(--eo-num-size);
	font-weight: 700;
	line-height: var(--eo-num-line-h);
	color: var(--eo-number);
	white-space: nowrap;
	transition: font-size var(--eo-move) var(--eo-ease), color var(--eo-move) var(--eo-ease);
}

/* Out of flow, so the number alone sets the inner's height. Flex centring then
   puts the inner's own centre on the cell's centre whatever the number's size,
   which makes `top: 50%` the cell's centre line — a fixed anchor for both the
   number and the label.
   `top` stays pinned there and the whole vertical move rides on `transform`.
   Animating `top` from 50% to 100% instead would resolve both ends against the
   inner's height, which is shrinking with the number at the same time: the
   product of the two is a curve, so the label decelerated away from the number
   and the pair only looked centred once it arrived. A fixed offset in px moves
   linearly alongside the lift, and the two stay in proportion throughout. */
.eo-label {
	position: absolute;
	left: var(--eo-col);
	top: 50%;
	width: calc(100% - var(--eo-col));
	margin: 0;
	font-size: var(--eo-label-size);
	line-height: var(--eo-label-line-h);
	color: #fff;
	transform: translateY(-50%);
	transition: left var(--eo-move) var(--eo-ease),
		width var(--eo-move) var(--eo-ease), transform var(--eo-move) var(--eo-ease),
		color var(--eo-move) var(--eo-ease);
}

.eo-cell:hover .eo-value,
.eo-cell:focus-within .eo-value {
	font-size: var(--eo-num-size-hover);
	color: var(--eo-blue);
}

.eo-cell:hover .eo-label,
.eo-cell:focus-within .eo-label {
	left: 0;
	width: 100%;
	color: #292929;
	transform: translateY(calc(-50% + var(--eo-label-drop)));
}

/* ── Scroll-in ───────────────────────────────────────────────────────────── */

.eo-section.eo-animate .eo-intro,
.eo-section.eo-animate .eo-grid {
	opacity: 0;
	translate: 0 26px;
	transition: opacity 0.7s var(--eo-ease), translate 0.7s var(--eo-ease);
}

.eo-section.eo-animate .eo-cell-inner {
	opacity: 0;
	translate: 0 26px;
}

.eo-section.eo-animate.is-visible .eo-intro,
.eo-section.eo-animate.is-visible .eo-grid,
.eo-section.eo-animate.is-visible .eo-cell-inner {
	opacity: 1;
	translate: 0 0;
}

.eo-section.eo-animate.is-visible .eo-grid {
	transition-delay: 0.1s;
}

.eo-section.eo-animate.is-visible .eo-cell-inner {
	--eo-reveal-delay: calc(0.2s + var(--eo-i, 0) * 0.09s);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* The number is set against the 1320px container. Below that the cell can no
   longer hold 64px plus a readable label beside it, so both step down. */
@media (max-width: 1399px) {
	.eo-section {
		--eo-num-size: 52px;
		--eo-num-size-hover: 38px;
		--eo-num-gap: 20px;
		--eo-label-size: 16px;
	}
}

@media (max-width: 1199px) {
	.eo-section {
		--eo-num-size: 46px;
		--eo-num-size-hover: 34px;
		--eo-label-size: 15px;
	}

	.eo-layout {
		gap: 36px;
	}

	.eo-cell {
		padding: 22px 24px;
	}
}

/* Stacked: the grid now has the full container width, so the number can grow
   again. */
@media (max-width: 991px) {
	.eo-section {
		--eo-num-size: 52px;
		--eo-num-size-hover: 38px;
		--eo-label-size: 16px;

		padding: 50px 0;
	}

	.eo-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	/* Kept to the artwork's 654:501 ratio — a square box would letterbox it
	   inside `contain` and leave the shape smaller than the space it reserves. */
	.eo-section::before {
		width: 430px;
		height: 330px;
	}

	.eo-text {
		max-width: none;
	}
}

/* Mobile: the cell is too narrow to read a label beside the number, so the
   label sits under it at rest and hover only restyles it. Nothing travels, so
   the number keeps its resting size — the shrink existed to make room for the
   label arriving underneath, and it is already there. */
@media (max-width: 767px) {
	.eo-section {
		--eo-num-size: 44px;
		--eo-num-size-hover: 44px;
		--eo-num-gap: 16px;
		--eo-label-size: 15px;
	}

	.eo-label,
	.eo-cell:hover .eo-label,
	.eo-cell:focus-within .eo-label {
		position: static;
		width: 100%;
		margin-top: 8px;
		transform: none;
	}

	/* Nothing moves, so nothing needs lifting back into place. */
	.eo-cell:hover .eo-cell-inner,
	.eo-cell:focus-within .eo-cell-inner {
		transform: none;
	}
}

@media (max-width: 575px) {
	.eo-section {
		--eo-num-size: 38px;
		--eo-num-size-hover: 29px;
		--eo-num-gap: 14px;
		--eo-label-size: 14px;
	}

	.eo-section::before {
		width: 290px;
		height: 222px;
	}

	.eo-cell {
		min-height: 138px;
		padding: 20px;
	}
}

/* Narrowest phones: two columns leave too little width for either half, so the
   grid drops to one. The stacked label comes from the mobile block above. */
@media (max-width: 420px) {
	.eo-cells {
		grid-template-columns: minmax(0, 1fr);
	}

	.eo-cell:nth-child(2n) {
		border-right: 1px solid var(--eo-line);
	}

	.eo-cell:nth-last-child(-n + 2) {
		border-bottom: 1px solid var(--eo-line);
	}

	.eo-cell:last-child {
		border-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eo-section *,
	.eo-section *::before,
	.eo-section *::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}

	.eo-section.eo-animate .eo-intro,
	.eo-section.eo-animate .eo-grid,
	.eo-section.eo-animate .eo-cell-inner {
		opacity: 1;
		translate: none;
	}
}