/**
 * Finewerk Number Stats
 *
 * Scoped, BEM-style styles for the animated number stats row
 * (refferences/number-stats.png): equal cards, each with a huge counting
 * number (prefix / inline suffix / raised superscript suffix), an
 * outline icon in the top-right corner, a dot + label row under the
 * number and a description pinned to the card bottom. The card surface
 * is the site-wide `fw-bg-gradient` utility (added in
 * the markup); this file only paints the flat base beneath them.
 *
 * All custom properties are namespaced with --fw-ns- to avoid collisions.
 * The counting behavior lives in assets/js/number-stats.js.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-number-stats {
	font-family: var(--fw-font-body);
}

.finewerk-number-stats :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-number-stats :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-number-stats {
	--fw-ns-columns: 3;
	--fw-ns-gap: 30px;
	--fw-ns-card-radius: 20px;
	--fw-ns-card-padding: 38px 44px 42px;
	--fw-ns-card-min-h: 440px;
	--fw-ns-desc-gap: 48px;
	--fw-ns-sup-size: 0.44em;
	--fw-ns-dot-color: #C8F8A9;
	--fw-ns-dot-size: 9px;
	--fw-ns-icon-color: #FFFFFF;
	--fw-ns-icon-size: 40px;
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* When the Finewerk Background toggle is on, the wrapper wears the
   site-wide `fw-bg-gradient` utility (added in the
   markup, styled by the theme). This only shapes the resulting panel:
   the global 20px radius rule and room for the cards inside it. */
.finewerk-number-stats.is-fw-ns-bg {
	padding: 48px;
	border-radius: 20px;
}

/* ---------- Grid ---------- */

.finewerk-number-stats__grid {
	display: grid;
	grid-template-columns: repeat(var(--fw-ns-columns), minmax(0, 1fr));
	gap: var(--fw-ns-gap);
	align-items: stretch;
}

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

/*
 * Every card wears `fw-bg-gradient` in the markup, so the
 * gradient and its grain are the real surface — same contract the FAQ
 * items and Steps cards follow; this file paints no gradient and no
 * grain of its own. The color below is the flat base the gradient
 * paints over, and the safety net that keeps the white copy readable if
 * the global utility CSS is ever absent. The grain's ::after inherits
 * this card's 20px radius, so it clips to the rounded corners on its own.
 */
.finewerk-number-stats__card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--fw-ns-card-min-h);
	margin: 0;
	padding: var(--fw-ns-card-padding);
	border-radius: var(--fw-ns-card-radius);
	transition: box-shadow 0.25s ease;
}

/* The flat green is the same fallback the FAQ uses, scoped with the
   utility class (as the FAQ does) so a `background:` shorthand in the
   gradient utility cannot reset it to transparent: the color stays the
   base layer the gradient image paints over. */
.finewerk-number-stats__card.fw-bg-gradient {
	background-color: #123F3A;
}

/* ---------- Card hover ----------
   The Stats Bento treatment for gradient cards (its CTA): shadow only —
   the same soft two-layer lift, eased by the 0.25s transition above,
   layered ON TOP of the gradient + grain rather than replacing them; on
   leave it settles back the same way. No movement or scale — Stats
   Bento cards have none.

   The class is repeated to outrank Elementor's generated card rules,
   which would otherwise pin a resting box-shadow over the hover state.
   Same hover gate as the rest of the site, so touch taps never leave a
   stuck card. */
@media (hover: hover) and (pointer: fine) {
	.finewerk-number-stats__card.finewerk-number-stats__card.finewerk-number-stats__card:hover {
		box-shadow: 0 14px 32px rgba(16, 19, 25, 0.12), 0 4px 10px rgba(16, 19, 25, 0.06);
	}
}

/* ---------- Number row ---------- */

.finewerk-number-stats__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

/* Flex, not inline flow: the prefix, digits, suffix and raised suffix
   sit flush against each other (no word-spacing gaps from the markup),
   baseline-aligned like the reference's tight “6k⁺”. */
.finewerk-number-stats__value {
	display: flex;
	align-items: baseline;
	min-width: 0;
	color: #FFFFFF;
	font-family: var(--fw-font-title);
	font-size: clamp(56px, 6.2vw, 100px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	/* Every digit the same width, so the counting number never wobbles. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* The hidden sizer holds the final value and reserves its exact width
   from the first frame, so the animation never shifts the layout: the
   visible counting number paints into that reserved box. */
.finewerk-number-stats__num-wrap {
	display: inline-grid;
}

.finewerk-number-stats__num-sizer {
	grid-area: 1 / 1;
	visibility: hidden;
}

.finewerk-number-stats__num {
	grid-area: 1 / 1;
	justify-self: end;
	white-space: nowrap;
}

/* Raised suffix (the “+” / “%” of the reference): aligned to the top of
   the digits rather than baseline-superscripted. */
.finewerk-number-stats__sup {
	align-self: flex-start;
	margin-top: 0.05em;
	margin-left: 0.04em;
	font-size: var(--fw-ns-sup-size);
	line-height: 1;
	font-weight: 500;
}

/* ---------- Corner icon ---------- */

.finewerk-number-stats__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	color: var(--fw-ns-icon-color);
	font-size: var(--fw-ns-icon-size);
	line-height: 1;
}

.finewerk-number-stats__icon svg {
	width: var(--fw-ns-icon-size);
	height: var(--fw-ns-icon-size);
	fill: currentColor;
}

/* ---------- Dot + label row ---------- */

.finewerk-number-stats__label-row {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 10px;
}

.finewerk-number-stats__dot {
	flex: 0 0 auto;
	width: var(--fw-ns-dot-size);
	height: var(--fw-ns-dot-size);
	border-radius: 50%;
	background-color: var(--fw-ns-dot-color);
}

.finewerk-number-stats__label {
	margin: 0;
	color: #FFFFFF;
	/* A stat label, not a title — even when the markup is a heading tag. */
	font-family: var(--fw-font-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* ---------- Description ---------- */

/* Anchored to the card bottom: the auto margin absorbs the spare height
   the min-height creates, exactly like the reference's tall cards. */
.finewerk-number-stats__desc {
	margin: auto 0 0;
	padding-top: var(--fw-ns-desc-gap);
	max-width: 40ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: 17px;
	line-height: 1.6;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.finewerk-number-stats {
		--fw-ns-card-min-h: 360px;
		--fw-ns-card-padding: 32px 34px 34px;
		--fw-ns-gap: 22px;
		--fw-ns-desc-gap: 36px;
	}

	.finewerk-number-stats__value {
		font-size: clamp(52px, 8vw, 80px);
	}
}

@media (max-width: 767px) {
	.finewerk-number-stats {
		--fw-ns-card-min-h: 0;
		--fw-ns-card-padding: 28px 26px 30px;
		--fw-ns-gap: 16px;
		--fw-ns-desc-gap: 24px;
	}

	.finewerk-number-stats.is-fw-ns-bg {
		padding: 24px;
	}

	.finewerk-number-stats__value {
		font-size: clamp(48px, 15vw, 64px);
	}

	.finewerk-number-stats__label {
		font-size: 18px;
	}

	.finewerk-number-stats__desc {
		font-size: 16px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.finewerk-number-stats__card {
		transition: none;
	}
}