/*
================================================
Savings panel - the money block of the dashboard
================================================

Option B of A_Documents/plans/marketing-boxes-separation-mockup.html.

The cards above the panel report kWh read a moment ago, the cards inside it report euros
summed over a year. Until now both were the same white card in the same type scale, so
nothing but the unit told a reader which kind of number they were looking at. A tint and a
heading say it before anything is read.

Kept out of style.css (the template's own stylesheet, identical in both modules) so this
stays reviewable and easy to drop. Loaded for every page from common/commonHead.xhtml,
only base.xhtml carries the markup.
*/

.savings-panel {
	background-color: #f2f8f4;
	border: 1px solid #d6e7dc;
	border-radius: 6px;
	padding: 14px 16px 16px;
}

/* the eyebrow above each row in the panel */
.savings-panel-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #4b7a5c;
	margin: 0 0 10px 2px;
}

/* a second row inside the panel needs air above it, the first one does not */
.savings-row + .savings-panel-title {
	margin-top: 18px;
}

/* the template's card shadow is blue and reads as a halo on the tint */
.savings-panel .card {
	box-shadow: 0 6px 14px 0 rgba(31, 94, 56, 0.1);
}

/*
 Four columns, not "share the row between whatever was rendered". A .card-group stretches
 its children, so the charging row - two boxes where vehiclesConfig.fuelComparison is off,
 four where it is on - would otherwise draw two half-page cards under a row of quarter-page
 ones. The grid keeps every card the same width in both cases and simply leaves the unused
 columns empty. Below the breakpoint bootstrap stacks a .card-group, and so do we.
*/
@media (min-width: 576px) {
	.savings-row {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
}