/**
 * Homepage social proof, rows 1 and 2 (template-parts/home/social-proof.php,
 * Figma node 197:643). Light section on the page background; content on the
 * global container with standard section padding.
 */

.social-proof {
	padding-block: var(--section-pad-y);
}

.social-proof .eyebrow {
	margin-bottom: 32px;
}

/* Two equal columns touching (node: justify-between of two 50% columns). */
.social-proof__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}

/* Type comes from the base h2 token. The max-width is COPY-TUNED so the
   natural wrap falls after "stop," with the current EN headline: measured
   bracket is 480px ("When these systems stop,") to 560px ("... stop, the")
   shaped in Archivo 700 at 40px; 520px sits safely mid-bracket. Revisit for
   the SK translation. */
.social-proof__header h2 {
	max-width: 32.5rem; /* 520px */
}

.social-proof__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 64px;
}

.social-proof__description {
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-body-text);
}

.social-proof__stats {
	margin-top: 64px;
	border-top: 1px solid var(--color-border-subtle);
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.social-proof__stat {
	padding-block: 64px;
}

.social-proof__stat + .social-proof__stat {
	padding-inline: 64px;
	border-left: 1px solid var(--color-border-subtle);
}

/* The block shrinks to the stat line's rendered width; the description then
   wraps exactly at that width (designer intent: its edge aligns with the
   number+unit, whatever the number is - no fixed pixel width). */
.social-proof__stat-block {
	width: fit-content;
}

/* stat-xl: 88px Archivo 800, line normal per node; the 30px mono unit is a
   one-off pairing kept here, not in tokens. Inline spans baseline-align the
   number and the unit natively. */
.social-proof__stat-line {
	font-family: var(--font-heading);
	font-size: var(--type-stat-xl-size);
	line-height: normal;
	font-weight: 800;
	color: var(--color-heading-text);
}

/* The counting number sits in a box sized by its final string, so neither
   the mono unit nor the description can move while the digits tick. Tabular
   figures keep the digits themselves from jittering inside that box. nowrap
   because a thousands group written with a plain space (as "6 010" is) is
   otherwise a line-break opportunity. */
.social-proof__stat-number {
	position: relative;
	display: inline-block;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.social-proof__stat-number-reserve {
	visibility: hidden;
}

.social-proof__stat-number-value {
	position: absolute;
	top: 0;
	left: 0;
}

.social-proof__stat-unit {
	font-family: var(--font-mono);
	font-size: 1.875rem; /* 30px */
	font-weight: 500;
	color: var(--color-text-secondary);
}

/* stat-label: 14px/normal per node (not tokenized). Zero intrinsic width so
   it never widens the fit-content block, then stretched to the block width. */
.social-proof__stat-desc {
	margin-top: 12px;
	width: 0;
	min-width: 100%;
	font-size: 0.875rem; /* 14px */
	line-height: normal;
	font-weight: 400;
	color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------
 * Row 3: client logo marquee. Monochrome silhouettes: each logo is a div
 * with the logo file as an alpha mask over a flat gray fill, so SVG and
 * transparent PNG render identically.
 *
 * Canvas ruling (designer, final): every client logo ships on a uniform
 * 1080x1080 transparent canvas, optically balanced at export. The boxes
 * are therefore identical squares; --marquee-logo-size tunes them in one
 * place.
 * -------------------------------------------------------------------- */

.sp-marquee {
	--marquee-logo-size: 125px; /* +25%: one logo fewer in view, by ruling */
	margin-top: 64px;
}

/* Soft edges: the outer ~96px fade out on both sides. */
.sp-marquee__viewport {
	overflow: hidden;
	/* The clipper must also be the containing block. The track inside is
	   several thousand pixels wide, so absolutely positioned content in it -
	   .sr-only text above all - would resolve against the PAGE and widen the
	   document by that whole overhang instead of being clipped here. */
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}

/* Two identical groups; shifting by -50% lands exactly on the second copy,
   so the loop is seamless. Duration comes from PHP (~4.5s per logo), which
   keeps the speed constant regardless of logo count. */
.sp-marquee__track {
	display: flex;
	width: max-content;
	animation: dicit-marquee var(--marquee-duration, 30s) linear infinite;
}

.sp-marquee:hover .sp-marquee__track {
	animation-play-state: paused;
}

/* The trailing padding IS the gap between the copies at the wrap point. */
.sp-marquee__group {
	display: flex;
	align-items: center;
	gap: 64px;
	padding-right: 64px;
}

.sp-marquee__logo {
	flex-shrink: 0;
	width: var(--marquee-logo-size);
	height: var(--marquee-logo-size);
	background-color: var(--color-text-secondary-on-dark);
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
	mask-mode: alpha;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

@keyframes dicit-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Reduced motion: one static row. animation: none is explicit because the
   global stub's 0.01ms duration with iteration-count 1 would otherwise park
   the track at -50%. */
@media (prefers-reduced-motion: reduce) {
	.sp-marquee__track {
		animation: none;
	}

	.sp-marquee__group + .sp-marquee__group {
		display: none;
	}

	.sp-marquee__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* --------------------------------------------------------------------
 * Responsive (<=1024): left-aligned stack, stats stacked vertically
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.social-proof__header {
		display: block;
	}

	.social-proof__lead {
		margin-top: 32px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	/* Stats stack: the column divider becomes a rule between the rows and
	   the side padding that separated them is no longer needed. */
	.social-proof__stats {
		grid-template-columns: 1fr;
	}

	.social-proof__stat {
		padding-block: 32px;
	}

	.social-proof__stat + .social-proof__stat {
		padding-inline: 0;
		border-left: 0;
		border-top: 1px solid var(--color-border-subtle);
	}

	/* The block sizes itself to the number; on one column the description
	   should use the full width instead. */
	.social-proof__stat-block {
		width: 100%;
	}
}

/* Escape hatch: solid-plate artwork renders as the image in grayscale
   rather than a mask, which would resolve to a filled square. Same box and
   the same --marquee-logo-size, so the row's rhythm is unchanged. */
.sp-marquee__logo--solid {
	background-color: transparent;
	-webkit-mask-image: none;
	mask-image: none;
	object-fit: contain;
	filter: grayscale(1);
	opacity: var(--logo-solid-opacity);
}