@use 'variables' as *;

// KPIBar (240:904): 3 cards in a row with 16px gaps.
// Card metadata x positions: 0 / 406 / 812 in a 1196 frame → 22px gap.
// Use 16px gap for tighter packing; widens automatically to fill row.
.simplestats-kpi-bar {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 16px;

	@media ( max-width: 720px ) { grid-template-columns: 1fr; }
}

// Card (0:1175 / 0:1176 / 0:1191): 384×146, bg white, 1px "Light Stroke colour" #D0CEBC, radius 12, padding 25.
.simplestats-kpi-card {
	display: flex;
	flex-direction: column;
	gap: 8px;                       // KPICard internal gap (label → row)
	padding: 25px;
	background: #fff;
	border: 1px solid #D0CEBC;     // Light Stroke colour
	border-radius: 12px;
	min-height: 146px;

	// Label "VISITORS" / "PAGEVIEWS" / "BOUNCE RATE" (0:1178):
	// DM Sans 500, 13/20, color neutral/500 #7A7660.
	&__label {
		margin: 0;
		font-size: 13px;
		font-weight: 500;
		line-height: 20px;
		color: #7A7660;              // neutral/500
	}

	&__row {
		display: flex;
		gap: 20px;
		align-items: flex-start;
	}

	// 64×64 icon tile (0:1180): bg brand/100 #FEF9C3, icon stroke neutral/700 #32343A, radius 12.
	&__icon-tile {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 64px;
		height: 64px;
		flex-shrink: 0;
		border-radius: 12px;
		background: #FEF9C3;          // brand/100
		color: #32343A;               // neutral/700 (icon stroke)

		svg { width: 32px; height: 32px; display: block; }
	}

	&__body {
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-width: 0;
	}

	&__value-row {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	// Big number (0:1188): Typography/H2/Bold 36/44 700, color neutral/900 #18191D.
	&__value {
		font-size: 36px;
		font-weight: 700;
		line-height: 44px;
		color: #18191D;               // neutral/900
	}

	// "vs previous period" (0:1190): Typography/Caption/Regular 14/20 400, color neutral/500 #7A7660.
	&__caption {
		margin: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		color: #7A7660;               // neutral/500
	}
}
