/* Stats Hero — split intro + stat cards. */

.rw-block-stats-hero {
	position: relative;
	background: var(--rw-color-bg-gray);
	overflow: hidden;
	isolation: isolate;
}

/* Dotted decoration — base from global .bg-dots, positioned right of intro. */
.rw-block-stats-hero .bg-dots { right: 40%; top: 38%; z-index: 0; }
.rw-block-stats-hero .rw-container { position: relative; z-index: 1; }

.rw-block-stats-hero .layout {
	display: grid;
	grid-template-columns: 1fr 26.5rem;
	gap: var(--rw-space-lg);
	align-items: stretch;
}

/* Per-bundle gaps per Figma 693:7360:
   - eyebrow↔H2 = 1rem (inside .heading-group)
   - heading-group↔button = 2rem (outer .intro gap)
   - image sits at column bottom via margin-top:auto */
.rw-block-stats-hero .intro {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-lg);
	max-width: 42rem;
}

.rw-block-stats-hero .heading-group {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-sm);
	max-width: 34rem;
}

.rw-block-stats-hero .intro h2 {
	font-family: var(--rw-font-text);
	font-weight: 700;
	/* 32px mobile (h2-m floor) → 44px desktop ceiling. Local clamp because canonical h2 ceiling is 70px. */
	font-size: clamp(2rem, 1.18vw + 1.71rem, 2.75rem);
	line-height: clamp(2.25rem, 1.51vw + 1.88rem, 3.125rem);
	letter-spacing: -0.04em;
	color: var(--rw-color-primary-green);
	margin: 0;
}

.rw-block-stats-hero .intro .rw-btn {
	align-self: flex-start;
}

.rw-block-stats-hero .hero-image {
	display: block;
	width: 100%;
	aspect-ratio: 647 / 416;
	object-fit: cover;
	border-radius: var(--rw-radius-lg);
	margin-top: auto;
}

.rw-block-stats-hero .stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-md);
	justify-content: flex-end;
}

.rw-block-stats-hero .stat {
	position: relative;
	background: var(--rw-color-white);
	border-radius: var(--rw-radius-lg);
	padding: 2rem 2.5rem;
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-md);
	transition: background-color .25s ease;
}

/* Linked stat: full-card anchor inherits color, removes underline. */
.rw-block-stats-hero .stat-link {
	display: flex;
	flex-direction: column;
	gap: var(--rw-space-md);
	color: inherit;
	text-decoration: none;
}

/* Number row holds the big number + (on linked cards) the hover arrow.
   align-items: flex-start aligns arrow's top edge with number's top edge. */
.rw-block-stats-hero .num-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rw-space-md);
}

/* Hover arrow — absolute-positioned per Figma 564:9666 (top 32px, right 40px)
   so it never affects card content layout. Hidden by default; slides+fades
   in on card hover/focus. */
.rw-block-stats-hero .stat-arrow {
	position: absolute;
	top: 32px;
	right: 40px;
	width: 70.587px;
	height: 70.587px;
	opacity: 0;
	transform: translate(-8px, 8px);
	transition: opacity .25s ease, transform .25s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.rw-block-stats-hero .stat-arrow svg,
.rw-block-stats-hero .stat-arrow img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Hover state — Figma 564:9665. Card bg shifts to section grey, arrow appears. */
.rw-block-stats-hero .stat.is-linked:has(.stat-link:hover),
.rw-block-stats-hero .stat.is-linked:has(.stat-link:focus-visible) {
	background: #E8E8E9;
}

.rw-block-stats-hero .stat-link:hover .stat-arrow,
.rw-block-stats-hero .stat-link:focus-visible .stat-arrow {
	opacity: 1;
	transform: translate(0, 0);
}

/* Number with an ::after divider that matches the text width. The stat card's
   flex gap already provides 1.5rem separation below — we keep the divider
   flush to the number with matching margin-top. */
.rw-block-stats-hero .stat .num {
	font-family: var(--rw-font-text);
	font-weight: 600;
	/* 56px mobile (Figma 877:7164) → 70px desktop (Figma stats card). */
	font-size: clamp(3.5rem, 1.33vw + 3.17rem, 4.375rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--rw-color-primary-green);
	margin: 0;
	/* Shrink to content so ::after divider = text width. */
	width: fit-content;
}

.rw-block-stats-hero .stat .num::after {
	content: '';
	display: block;
	border-top: 2px solid var(--rw-color-primary-yellow);
	margin-top: var(--rw-space-md);
}

/* Mobile stat number tightens to 56px per Figma stats-hero (877:7164). */

/* Label + sub bundled with zero gap — tight copy block per Figma. */
.rw-block-stats-hero .label-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.rw-block-stats-hero .stat .label {
	font-family: var(--rw-font-text);
	font-weight: 700;
	font-size: var(--rw-p2-size);
	line-height: var(--rw-p2-line);
	color: var(--rw-color-primary-green);
	margin: 0;
}

.rw-block-stats-hero .stat .sub {
	font-family: var(--rw-font-text);
	font-weight: 500;
	font-size: var(--rw-p2-size);
	line-height: var(--rw-p2-line);
	color: var(--rw-color-grey-01);
	margin: 0;
}

@media (max-width: 767px) {
	.rw-block-stats-hero .layout { grid-template-columns: 1fr; row-gap: 3.5rem; }
	.rw-block-stats-hero .stat { padding: 1.5rem; }
	.rw-block-stats-hero .stat-link { gap: 1rem; }
	.rw-block-stats-hero .stat .num::after { margin-top: 1rem; }
}