.at-a-glance-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* group A | group B */
	grid-template-rows: repeat(4, auto); /* owned here so both groups' row bands line up — see .aag-group */
	padding-bottom: var(--padding);
	padding-top: var(--padding);

	@media screen and (max-width: 768px) {
		padding-bottom: calc(var(--padding)*2);
		padding-top: calc(var(--padding)*2);
	}

	/* Groups stack instead of re-flowing — each still shows its own 2 columns below.
	   Row alignment between the groups no longer matters once they're stacked. */
	@media screen and (max-width: 1188px) {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
}

.aag-group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: column;      /* fills column 1 top-to-bottom, then column 2 */

	/* Subgrid the row tracks from .at-a-glance-grid so group A and group B's row bands
	   size against each other, not independently — otherwise, eg. group A's short header
	   row and group B's taller first row would disagree on where row 1 ends. */
	grid-row: 1 / span 4;
	grid-template-rows: subgrid;

	@media screen and (max-width: 1188px) {
		grid-row: auto;
		grid-template-rows: repeat(4, auto);
	}

	@media screen and (max-width: 768px) {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-template-rows: auto;
	}
}

.aag-panel {
	--panel-fg: #FFFFFF;
	--panel-icon: #FFFFFF;
	align-items: center;
	background: var(--panel-bg);
	color: var(--panel-fg);
	display: grid;
	padding: 40px 30px;
	position: relative;
	row-gap: 25px;
	text-align: center;
	&:has(> .aag-panel__graphic.float) {
		align-content: center !important;
		align-items: center !important;
		min-height: 180px;
	}
}

/* for inline SVGs using currentColor */
.aag-panel__graphic {
	color: var(--panel-icon, var(--panel-fg));
	&.float {
		left: 50%;
		opacity: 0.2;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 0;
	}
}
svg.aag-panel__graphic path:not([fill]):not([stroke]) {
	fill: var(--panel-icon, var(--panel-fg)) !important;
}
svg.aag-panel__graphic path[fill] { 
	fill: var(--panel-icon, var(--panel-fg)) !important; 
} 
svg.aag-panel__graphic path[stroke] { 
	stroke: var(--panel-icon, var(--panel-fg)) !important; 
} 

body.home {
	--tall-svg: none;
}

body:not(.home) {

	--tall-svg: 125px;

	.aag-panel__graphic {
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		max-height: var(--tall-svg);
		width: auto;
	}

}



/* STAT */
.aag-panel--stat {

	.aag-panel__graphic {
		order: 2;
		justify-self: center;
	}

	.aag-panel__number {
		font-family: var(--wp--preset--font-family--petit-serif);
		font-size: 60px;
		line-height: 1;
		order: 1;
	}
	.aag-panel__text {
		color: #FFFFFF;
		font-family: var(--light);
		font-size: 14px;
		font-weight: 300;
		line-height: 1.2;
		margin-left: auto;
		margin-right: auto;
		max-width: 280px;
		order: 3;
		text-wrap: balance;
	}

}

/* Header */
.aag-panel--header {

	.aag-panel__title {
		font-size: 30px !important;
		margin-bottom: 0 !important;
	}

	.aag-panel__graphic {
		order: 2;
		justify-self: center;
	}

	.aag-panel__subtitle {
		font-family: var(--light);
		font-size: 12px;
		font-weight: 300;
		line-height: 1.2;
		order: 3;
	}

}


.aag-panel--emblem {
	display: grid;
	place-content: center;
	svg path {
		fill: #FFFFFF !important;
	}

	/* Pinned to the top of group B's last column while that group has 2 columns
	   (desktop and tablet). Once the group drops to a single column on mobile,
	   this is dropped so the emblem just falls in as the group's last panel. */
	@media screen and (min-width: 769px) {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* Panel colors come from the "Panel Color" field in the editor, per row — the
   render template outputs --panel-bg / --panel-fg inline on each panel (see
   at-a-glance-block-render.php). Nothing here sets color; the rules below only
   handle layout quirks tied to specific panel positions. */

/* 02 — 25,474 — background graphic sits centered behind the stat as a watermark */
.aag-group--a > .aag-panel:nth-child(2) {
	position: relative;
	*:not(svg):not(img) {
		z-index: 1;
	}
	svg,
	img {
		left: 50%;
		opacity: 0.2;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 0;
	}
}

/* 03 — 91.5 (tall panel) */
.aag-group--a > .aag-panel:nth-child(3) {
	align-content: space-between;
	display: grid;
	grid-row: span 2;
	justify-content: center;

	.aag-panel__graphic {
		max-height: var(--tall-svg);
	}

}

/* 04 — 30 (tall panel) */
.aag-group--a > .aag-panel:nth-child(4) {
	align-content: space-between;
	display: grid;
	grid-row: span 2;
	justify-content: center;

	.aag-panel__graphic {
		max-height: var(--tall-svg);
	}

}

/* 09 — 45+ (tall panel) */
.aag-group--b > .aag-panel:nth-child(3) {
	align-content: space-between;
	display: grid;
	grid-row: span 2;
	justify-content: center;

	.aag-panel__graphic {
		max-height: var(--tall-svg);
	}

}

/* 10 — 90 (tall panel) */
.aag-group--b > .aag-panel:nth-child(4) {
	align-content: space-between;
	display: grid;
	grid-row: span 2;
	justify-content: center;

	.aag-panel__graphic {
		max-height: var(--tall-svg);
	}

}