/**
 * Finewerk Stats Bento
 *
 * Scoped, BEM-style styles for the stats bento grid widget: centered
 * heading + subtext above a grid-template-areas bento of light stat cards
 * and a dark-green gradient CTA column. Pure CSS, no JavaScript.
 * All custom properties are namespaced with --fw-sb- to avoid collisions.
 */

/* ------------------------------------------------------------------
 * 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-stats-bento {
	font-family: var(--fw-font-body);
}

.finewerk-stats-bento :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-stats-bento :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-stats-bento {
	--fw-sb-gap: 20px;
	--fw-sb-header-gap: 56px;
	--fw-sb-card-radius: 18px;
	--fw-sb-card-padding: 28px;
	--fw-sb-icon-badge-bg: #234034;
	--fw-sb-icon-badge-color: #FFFFFF;
	--fw-sb-icon-badge-size: 48px;
	--fw-sb-badge-img-size: 36px;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 64px 0;
	background-color: #FFFFFF;
}

/* ---------- Header ---------- */

.finewerk-stats-bento__header {
	max-width: 720px;
	margin: 0 auto var(--fw-sb-header-gap);
	text-align: center;
}

.finewerk-stats-bento__heading {
	margin: 0;
	color: #101319;
	font-family: var(--fw-font-title);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.finewerk-stats-bento__subtext {
	max-width: 640px;
	margin: 18px auto 0;
	color: #6B7280;
	font-size: 16px;
	line-height: 1.6;
}

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

.finewerk-stats-bento__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.05fr;
	grid-template-areas:
		"a b cta"
		"c b cta"
		"d d cta";
	gap: var(--fw-sb-gap);
	align-items: stretch;
}

.finewerk-stats-bento__card--area-a {
	grid-area: a;
}

.finewerk-stats-bento__card--area-b {
	grid-area: b;
}

.finewerk-stats-bento__card--area-c {
	grid-area: c;
}

.finewerk-stats-bento__card--area-d {
	grid-area: d;
}

/* Extra repeater items beyond the four mapped areas flow full-width below. */
.finewerk-stats-bento__card--area-auto {
	grid-column: 1 / -1;
}

/* ---------- Light cards ---------- */

.finewerk-stats-bento__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: var(--fw-sb-card-padding);
	background-color: #F5F6F7;
	border-radius: var(--fw-sb-card-radius);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* ---------- Card hover ----------
   Non-gradient cards only: `__card` never matches the gradient CTA
   (`__cta`), which keeps its styling untouched in both versions. The card
   surfaces to white and lifts with a soft shadow, both eased by the
   transition above; on leave it settles back the same way.

   The class is repeated to outrank the Elementor background controls'
   generated rules — up to three classes for the V2-scoped one — which would
   otherwise pin the resting background 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-stats-bento__card.finewerk-stats-bento__card.finewerk-stats-bento__card:hover {
		background-color: #FFFFFF;
		box-shadow: 0 14px 32px rgba(16, 19, 25, 0.12), 0 4px 10px rgba(16, 19, 25, 0.06);
	}
}

/* Stat layout: eyebrow pinned top, value floating mid, title/text bottom.
   The auto margins split any spare space so the card matches the
   reference regardless of how tall the grid row is. */
.finewerk-stats-bento__card--stat .finewerk-stats-bento__eyebrow {
	margin-bottom: auto;
}

.finewerk-stats-bento__card--stat .finewerk-stats-bento__value {
	margin-bottom: auto;
}

.finewerk-stats-bento__card-foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Row layouts (title-top / icon-row). */
.finewerk-stats-bento__card-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	min-width: 0;
}

.finewerk-stats-bento__card-row--icon {
	justify-content: flex-start;
}

.finewerk-stats-bento__card-main {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.finewerk-stats-bento__card-aside {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

/* ---------- Card text roles ---------- */

.finewerk-stats-bento__eyebrow {
	color: #6B7280;
	font-size: 15px;
	line-height: 1.4;
}

.finewerk-stats-bento__card-title {
	margin: 0;
	color: #101319;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.finewerk-stats-bento__value {
	color: #101319;
	font-family: var(--fw-font-title);
	font-size: clamp(44px, 4.5vw, 60px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.finewerk-stats-bento__card-text {
	margin: 0;
	color: #6B7280;
	font-size: 15px;
	line-height: 1.55;
}

/* ---------- Icon badge (single dark-green circle) ---------- */

.finewerk-stats-bento__icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--fw-sb-icon-badge-size);
	height: var(--fw-sb-icon-badge-size);
	background-color: var(--fw-sb-icon-badge-bg);
	color: var(--fw-sb-icon-badge-color);
	border-radius: 999px;
	flex: 0 0 auto;
}

.finewerk-stats-bento__icon-badge svg {
	display: block;
	width: 42%;
	height: 42%;
	fill: currentColor;
}

.finewerk-stats-bento__icon-badge i {
	font-size: calc(var(--fw-sb-icon-badge-size) * 0.42);
	line-height: 1;
}

/* ---------- Status dot (small green dot with soft ring) ---------- */

.finewerk-stats-bento__status-dot {
	display: inline-block;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	background-color: #93C842;
	border-radius: 999px;
	box-shadow: 0 0 0 4px rgba(147, 200, 66, 0.22);
	flex: 0 0 auto;
}

.finewerk-stats-bento__card-row--status {
	align-items: center;
	gap: 14px;
}

/* ---------- Badge image cluster (overlapping small circles) ---------- */

.finewerk-stats-bento__badges {
	display: inline-flex;
	align-items: center;
}

.finewerk-stats-bento__badge {
	display: block;
	box-sizing: border-box;
	width: var(--fw-sb-badge-img-size);
	height: var(--fw-sb-badge-img-size);
	border: 2px solid #FFFFFF;
	border-radius: 999px;
	overflow: hidden;
	background-color: #E4E7EA;
	flex: 0 0 auto;
}

.finewerk-stats-bento__badge + .finewerk-stats-bento__badge {
	margin-left: calc(var(--fw-sb-badge-img-size) * -0.28);
}

.finewerk-stats-bento__badge-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- CTA card ---------- */

/* The surface is the site-wide `fw-bg-gradient` utility (gradient + grain),
   carried in the markup — the same treatment as the Hero Banner. No gradient
   is declared here: duplicating it locally would outrank the utility on load
   order and pin the CTA to a stale copy of the brand colours. */
.finewerk-stats-bento__cta {
	grid-area: cta;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 32px;
	border-radius: var(--fw-sb-card-radius);
	color: #FFFFFF;
	transition: box-shadow 0.25s ease;
}

/* Same drop-shadow hover as the light cards — shadow only: the gradient +
   grain surface never changes, so no background is touched here. */
@media (hover: hover) and (pointer: fine) {
	.finewerk-stats-bento__cta:hover {
		box-shadow: 0 14px 32px rgba(16, 19, 25, 0.12), 0 4px 10px rgba(16, 19, 25, 0.06);
	}

	/* The V2 CTA already rests on a static design shadow; hovering layers
	   the hover shadow on top of it instead of replacing it with a weaker
	   one (which would read as the shadow fading OUT on hover). */
	.is-fw-sb-v2 .finewerk-stats-bento__cta:hover {
		box-shadow:
			0 22px 34px -20px rgba(18, 40, 32, 0.55),
			0 14px 32px rgba(16, 19, 25, 0.12),
			0 4px 10px rgba(16, 19, 25, 0.06);
	}
}

.finewerk-stats-bento__cta-title {
	margin: 0;
	color: #FFFFFF;
	font-family: var(--fw-font-title);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.finewerk-stats-bento__cta-text {
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	line-height: 1.55;
}

/* Button + meta pinned to the bottom of the CTA column. */
.finewerk-stats-bento__cta-footer {
	margin-top: auto;
	padding-top: 32px;
}

.finewerk-stats-bento__cta-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 8px 8px 22px;
	background-color: #FFFFFF;
	color: #101319;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.finewerk-stats-bento__cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(16, 19, 25, 0.18);
}

.finewerk-stats-bento__cta-button:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 3px;
}

.finewerk-stats-bento__cta-button-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.finewerk-stats-bento__cta-button-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	background-color: #2A4FD0;
	color: #FFFFFF;
	border-radius: 999px;
	flex: 0 0 auto;
}

.finewerk-stats-bento__cta-button-chip svg {
	display: block;
	width: 45%;
	height: 45%;
}

.finewerk-stats-bento__cta-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.finewerk-stats-bento__cta-meta-item {
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

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

@media (prefers-reduced-motion: reduce) {
	.finewerk-stats-bento__cta-button,
	.finewerk-stats-bento__card,
	.finewerk-stats-bento__cta {
		transition: none;
	}

	.finewerk-stats-bento__cta-button:hover {
		transform: none;
	}
}

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

/* Tablet: two columns, CTA becomes a full-width row at the bottom. */
@media (max-width: 1024px) {
	.finewerk-stats-bento {
		--fw-sb-header-gap: 44px;
	}

	.finewerk-stats-bento__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"a b"
			"c b"
			"d d"
			"cta cta";
	}
}

/* Mobile: single column stack in source order. */
@media (max-width: 767px) {
	.finewerk-stats-bento {
		--fw-sb-header-gap: 36px;
		--fw-sb-card-padding: 22px;
		--fw-sb-gap: 14px;
		padding: 48px 0;
	}

	.finewerk-stats-bento__grid {
		grid-template-columns: 1fr;
		grid-template-areas: none;
	}

	.finewerk-stats-bento__card--area-a,
	.finewerk-stats-bento__card--area-b,
	.finewerk-stats-bento__card--area-c,
	.finewerk-stats-bento__card--area-d,
	.finewerk-stats-bento__cta {
		grid-area: auto;
	}

	.finewerk-stats-bento__card--area-auto {
		grid-column: auto;
	}

	.finewerk-stats-bento__cta {
		padding: 26px;
	}

	.finewerk-stats-bento__cta-title {
		font-size: 24px;
	}
}

/* ---------- Version 2 (stats-bento-v2.png) ----------
   Scoped entirely under the `is-fw-sb-v2` root modifier so Version 1 is
   untouched. V2 is a fixed five-card composition rendered by its own
   PHP path: split header (serif heading left, subtext over the CTA
   column), clients card with overlapping avatars (a) over stat card 1
   (c), stat card 2 (b) over the status card (d), and the gradient CTA
   filling the taller right column. White cards with a hairline border,
   serif stat values anchored to the card bottom with a small gray label
   underneath, and a CTA holding an intro paragraph, a large serif
   headline and a footnote.

   Every element selector is wrapped in :where() so each rule stays at
   single-class specificity: it beats the Version 1 base rules purely by
   source order, while Elementor's generated style-control CSS (two
   classes and up) still overrides everything here.

   The CTA's gradient and grain come from the site-wide `fw-bg-gradient`
   utility added in the markup; no gradient is declared locally. */

.finewerk-stats-bento.is-fw-sb-v2 {
	--fw-sb-gap: 10px;
	--fw-sb-header-gap: 48px;
	--fw-sb-card-radius: 16px;
	--fw-sb-card-padding: 24px;
	--fw-sb-badge-img-size: 40px;
	/* Right (CTA) column vs. the two equal card columns, measured from
	   the reference: 230 / 230 / 319. */
	--fw-sb-v2-cta-col: 1.39fr;
	/* V2 header/CTA display face. */
	--fw-sb-v2-display: var(--fw-font-title);
	/* V2 stat figures — same face, kept as its own token so the numbers can
	   be retuned independently of the headings. */
	--fw-sb-v2-display-num: var(--fw-font-title);
}

/* Split header laid out on the same three columns as the bento below,
   so the subtext column starts exactly where the CTA card starts. */
.is-fw-sb-v2 :where(.finewerk-stats-bento__header) {
	display: grid;
	grid-template-columns: 1fr 1fr var(--fw-sb-v2-cta-col);
	gap: var(--fw-sb-gap);
	align-items: start;
	max-width: none;
	margin: 0 0 var(--fw-sb-header-gap);
	text-align: left;
}

.is-fw-sb-v2 :where(.finewerk-stats-bento__heading) {
	grid-column: 1 / 3;
	max-width: 560px;
	color: #17181D;
	font-family: var(--fw-sb-v2-display);
	font-size: clamp(30px, 3.5vw, 48px);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: 0;
}

/* The subtext sits a little below the heading's top edge, per the
   reference. */
.is-fw-sb-v2 :where(.finewerk-stats-bento__subtext) {
	grid-column: 3;
	max-width: 420px;
	margin: clamp(20px, 2.6vw, 38px) 0 0;
	color: #55575E;
	font-size: 15px;
	line-height: 1.65;
}

/* Desktop bento: clients card over stat 1 on the left, stat 2 over the
   status card in the middle, CTA filling the right column. The middle
   row is the flexible one; its minimum keeps the stat cards from
   collapsing when the CTA copy is short. */
@media (min-width: 1025px) {
	.is-fw-sb-v2 :where(.finewerk-stats-bento__grid) {
		grid-template-columns: 1fr 1fr var(--fw-sb-v2-cta-col);
		grid-template-areas:
			"a b cta"
			"c b cta"
			"c d cta";
		grid-template-rows: auto minmax(clamp(170px, 18vw, 265px), auto) auto;
	}
}

/* White cards with a hairline border instead of the gray fill. */
.is-fw-sb-v2 :where(.finewerk-stats-bento__card) {
	gap: 0;
	background-color: #FFFFFF;
	border: 1px solid #ECEEF1;
}

/* ----- Clients card (avatars + label) ----- */

.is-fw-sb-v2 :where(.finewerk-stats-bento__card--v2-clients) {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding-top: 22px;
	padding-bottom: 22px;
}

/* Tighter overlap than the V1 cluster, per the reference. Full-strength
   selector on purpose: it has to out-rank the V1 sibling rule. */
.finewerk-stats-bento.is-fw-sb-v2 .finewerk-stats-bento__badge + .finewerk-stats-bento__badge {
	margin-left: calc(var(--fw-sb-badge-img-size) * -0.34);
}

/* The clients label and the status text share the card-title role but
   read as body copy: small, medium weight, near-black. */
.is-fw-sb-v2 :where(.finewerk-stats-bento__card--v2-clients .finewerk-stats-bento__card-title),
.is-fw-sb-v2 :where(.finewerk-stats-bento__card--v2-status .finewerk-stats-bento__card-title) {
	color: #1B1C21;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.005em;
}

/* ----- Stat cards (description top, serif value + label bottom) ----- */

.is-fw-sb-v2 :where(.finewerk-stats-bento__stat-desc) {
	margin: 0;
	color: #17181D;
	font-size: 15px;
	line-height: 1.6;
}

.is-fw-sb-v2 :where(.finewerk-stats-bento__value) {
	margin-top: auto;
	padding-top: 36px;
	color: #121318;
	font-family: var(--fw-sb-v2-display-num);
	font-size: clamp(40px, 4.6vw, 64px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
}

.is-fw-sb-v2 :where(.finewerk-stats-bento__stat-label) {
	margin-top: 12px;
	color: #6A6D74;
	font-size: 14px;
	line-height: 1.4;
}

/* ----- Status card (green dot + text) ----- */

.is-fw-sb-v2 :where(.finewerk-stats-bento__card--v2-status) {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding-top: 22px;
	padding-bottom: 22px;
}

/* ----- CTA card ----- */

/* Layout only — the surface is painted by the theme's `fw-bg-gradient`
   utility. The soft shadow matches the reference's grounded look. */
.is-fw-sb-v2 :where(.finewerk-stats-bento__cta) {
	padding: var(--fw-sb-card-padding);
	box-shadow: 0 22px 34px -20px rgba(18, 40, 32, 0.55);
}

.is-fw-sb-v2 :where(.finewerk-stats-bento__cta-text) {
	margin: 0;
	max-width: 46ch;
	color: #EDF0EB;
	font-size: 15px;
	line-height: 1.65;
}

/* Headline anchored toward the card bottom, footnote pinned under it. */
.is-fw-sb-v2 :where(.finewerk-stats-bento__cta-headline) {
	margin-top: auto;
	padding-top: 40px;
	color: #EFF2EA;
	font-family: var(--fw-sb-v2-display);
	font-size: clamp(46px, 5.8vw, 84px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

.is-fw-sb-v2 :where(.finewerk-stats-bento__cta-footnote) {
	margin: clamp(24px, 3vw, 44px) 0 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13.5px;
	line-height: 1.5;
}

/* Tablet: two columns, status card keeps its slot under stat 2, CTA
   becomes a full-width row at the bottom (the shared ≤1024 template
   puts d full-width, which V2 overrides here). */
@media (max-width: 1024px) {
	.is-fw-sb-v2 :where(.finewerk-stats-bento__grid) {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"a b"
			"c b"
			"c d"
			"cta cta";
	}

	.is-fw-sb-v2 :where(.finewerk-stats-bento__header) {
		display: block;
	}

	.is-fw-sb-v2 :where(.finewerk-stats-bento__subtext) {
		margin-top: 16px;
	}
}

/* Mobile: single column stack in source order. The shared ≤767 rules
   reset the per-card areas, but the tablet template above wins the
   shared grid reset on source order, so the single column is restated
   here. */
@media (max-width: 767px) {
	.is-fw-sb-v2 :where(.finewerk-stats-bento__grid) {
		grid-template-columns: 1fr;
		grid-template-areas: none;
	}

	.is-fw-sb-v2 :where(.finewerk-stats-bento__cta) {
		padding: 22px;
	}

	.is-fw-sb-v2 :where(.finewerk-stats-bento__cta-headline) {
		padding-top: 32px;
	}
}