/**
 * AAA Stats Shortcode Styles
 *
 * @package AAA_Templates
 */

/* ──────────────────────────────────────────
   Section container
   ────────────────────────────────────────── */
.aaa-stats {
	position: relative;
	width: 100%;
	overflow: hidden;
	font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ──────────────────────────────────────────
   Background
   ────────────────────────────────────────── */
.aaa-stats__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.aaa-stats__bg-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aaa-stats__bg-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(22, 133, 205) 17.31%,
		rgb(86, 161, 209) 34.1%,
		rgba(141, 193, 226, 0.625) 56.3%,
		rgba(169, 209, 234, 0.438) 62.03%,
		rgba(197, 225, 243, 0.25) 71.57%,
		rgb(255 255 255 / 50%) 84.46% 84.46%
	);
}

/* ──────────────────────────────────────────
   Inner wrapper — aspect ratio matches SVG
   ────────────────────────────────────────── */
.aaa-stats__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	/* Match the Figma section proportions: 1309 x 660 */
	aspect-ratio: 1309 / 660;
}

/* ──────────────────────────────────────────
   SVG decorative overlay
   ────────────────────────────────────────── */
.aaa-stats__svg-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.aaa-stats__svg-overlay svg {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	bottom: -100px;
}

/* Mobile overlay is hidden by default; shown only in the mobile media query. */
.aaa-stats__svg-overlay--mobile {
	display: none;
}

/* ──────────────────────────────────────────
   Stat cards container
   ────────────────────────────────────────── */
.aaa-stats__cards {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* ──────────────────────────────────────────
   Individual stat cards — positioned by %
   SVG viewBox: 1309 x 485
   Line x-positions: 0.75, 320.75, 640.75, 960.75
   Line bottoms:     410,  484,    484,    420
   Card width: 321/1309 ≈ 24.52%
   ────────────────────────────────────────── */
.aaa-stats__card {
	position: absolute;
	width: 24.52%;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	cursor: default;
}

/* Card 1: x=0.75/1309 ≈ 0% */
.aaa-stats__card--1 {
	left: 0%;
}

/* Card 2: x=320.75/1309 ≈ 24.5% */
.aaa-stats__card--2 {
	left: 24.5%;
}

/* Card 3: x=640.75/1309 ≈ 48.9% */
.aaa-stats__card--3 {
	left: 48.9%;
}

/* Card 4: x=960.75/1309 ≈ 73.4% */
.aaa-stats__card--4 {
	left: 73.4%;
}

/* ──────────────────────────────────────────
   Hover background SVG — sits behind content,
   anchored to bottom, height as % of container (660).
     hover-1: 415/660 = 62.88%
     hover-2: 321/660 = 48.64%
     hover-3: 395/660 = 59.85%
     hover-4: 505/660 = 76.52%
   ────────────────────────────────────────── */
.aaa-stats__card-hover-bg {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: block;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 0;
}

.aaa-stats__card--1 .aaa-stats__card-hover-bg { height: 62.88%; }
.aaa-stats__card--2 .aaa-stats__card-hover-bg { height: 48.64%; }
.aaa-stats__card--3 .aaa-stats__card-hover-bg { height: 59.85%; }
.aaa-stats__card--4 .aaa-stats__card-hover-bg { height: 76.52%; }

.aaa-stats__card:hover .aaa-stats__card-hover-bg {
	opacity: 1;
}

/* ──────────────────────────────────────────
   Stat content (number + label)
   ────────────────────────────────────────── */
.aaa-stats__card-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 16px;
	bottom: 40px;
	left: 30px;
}

.aaa-stats__card--1 .aaa-stats__card-content {
	bottom: 80px;
}

.aaa-stats__card--4 .aaa-stats__card-content {
	bottom: 80px;
}

.aaa-stats__number {
	font-size: clamp(28px, 3.5vw, 48px);
	font-weight: 600;
	line-height: 1.2;
	color: #000;
	letter-spacing: -0.02em;
}

.aaa-stats__label {
	font-size: clamp(12px, 1.2vw, 16px);
	font-weight: 500;
	line-height: 1.4;
	color: #1685cd;
	letter-spacing: -0.02em;
}

/* ──────────────────────────────────────────
   Responsive — mobile
   Matches Figma mobile frame (375 × 841). Zigzag curve SVG with 4 stat
   cards absolutely positioned into the "bays" of the curve.
   ────────────────────────────────────────── */
@media (max-width: 768px) {
	.aaa-stats__inner {
		aspect-ratio: 375 / 841;
		max-width: 480px;
		padding: 0;
	}

	/* Swap the overlay: hide desktop, show mobile. */
	.aaa-stats__svg-overlay--desktop {
		display: none;
	}

	.aaa-stats__svg-overlay--mobile {
		display: block;
	}

	.aaa-stats__svg-overlay--mobile svg {
		position: absolute;
		top: 6.04%;     /* 50.8 / 841 — SVG is offset within the frame */
		left: 0;
		width: 100%;
		height: auto;
		bottom: auto;
	}

	/* Reset cards container — absolute canvas instead of grid. */
	.aaa-stats__cards {
		position: absolute;
		inset: 0;
		display: block;
	}

	.aaa-stats__card {
		position: absolute;
		display: block;
	}

	/* Figma coords → percentages of 375 × 841. */
	.aaa-stats__card--1 {
		left: 50.93%;   /* 191 / 375 */
		top: 21.88%;    /* 184 / 841 */
		width: 43.73%;  /* 164 / 375 */
	}

	.aaa-stats__card--2 {
		left: 5.33%;    /* 20 / 375 */
		top: 41.02%;    /* 345 / 841 */
		width: 35.73%;  /* 134 / 375 */
	}

	.aaa-stats__card--3 {
		left: 48.27%;   /* 181 / 375 */
		top: 60.17%;    /* 506 / 841 */
		width: 46.40%;  /* 174 / 375 */
	}

	.aaa-stats__card--4 {
		left: 5.33%;    /* 20 / 375 */
		top: 79.31%;    /* 667 / 841 */
		width: 56.27%;  /* 211 / 375 */
	}

	.aaa-stats__card-hover-bg {
		display: none;
	}

	/* Flatten the content — no panel background, no offsets. */
	.aaa-stats__card-content {
		position: static;
		padding: 0;
		gap: 8px;
		bottom: auto;
		left: auto;
	}

	.aaa-stats__card--1 .aaa-stats__card-content,
	.aaa-stats__card--4 .aaa-stats__card-content {
		bottom: auto;
	}

	.aaa-stats__number {
		font-size: clamp(32px, 10.6vw, 40px);
		line-height: 1;
	}

	.aaa-stats__label {
		font-size: clamp(12px, 3.7vw, 14px);
	}
}