/*
 * Live HTML reproduction of the Strategic Plan Dashboard metric tiles.
 *
 * Geometry is measured from the production PNGs rather than eyeballed - every
 * proportion below is a percentage of the tile's width, taken from a pixel scan of
 * Bridge-Sufficiency-Rating.png (the on-track design) and Parks-Assets-Condition.png
 * (the measuring design):
 *
 *   navy frame thickness   6.2%      outer corner radius   12.3%
 *   label cap height       6.7%      inner corner radius    6.0%
 *   value cap height      11.2%      status band height    13.6%
 *   band top, on track    66.8%      band top, measuring   53.8%
 *
 * The band is full-bleed - it runs edge to edge inside the frame - and there is
 * white below it, which is why the tile is not simply "content then footer".
 *
 * The "Goal Range: ..." line and the button underneath are NOT part of this tile.
 * The page already renders both below each tile; drawing them here would duplicate
 * them.
 *
 * Sizes use container query units so the tile scales with its column, exactly as the
 * PNG did. Fixed px values are declared first as a fallback for anything that does not
 * support them, sized for the ~210px column the tiles sit in today.
 */

.epc-sdb-tile {
	display: block;
	width: 100%;
	max-width: 210px;
	margin: 0 auto;
	box-sizing: border-box;

	/* The page is Open Sans; the PNGs were set in the same family. */
	font-family: "Open Sans", Arial, Helvetica, sans-serif;

	/* White space under the band. Larger on measuring tiles, which sit the band
	   higher because there is no number above it - matching the original PNGs. */
	--epc-sdb-after: 23px;
}

.epc-sdb-tile--measuring {
	--epc-sdb-after: 53px;
}

/* size="medium": the per-metric child pages placed the original image at WordPress
   "medium" size, 300px, shrinking only when the column is narrower. The tile does the
   same; everything inside scales with the width through the container query units
   below. */
.epc-sdb-tile--medium {
	max-width: 300px;
}

/* The navy frame. Square, like the source images. */
.epc-sdb-tile__frame {
	background: #002d5d;
	border-radius: 26px;
	padding: 13px;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
}

/* The white interior. overflow:hidden is what clips the full-bleed band to the
   rounded corners. */
.epc-sdb-tile__inner {
	background: #fff;
	border-radius: 13px;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.epc-sdb-tile__label {
	flex: 0 0 auto;
	padding: 17px 13px 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.32;
	color: #000;
	text-align: center;
	box-sizing: border-box;
}

/* Long labels - "Facilities Condition Index (Life Remaining Scale)" - are set
   smaller on the page today so they still fit two or three lines. */
.epc-sdb-tile--long-label .epc-sdb-tile__label {
	font-size: 12.5px;
	line-height: 1.28;
}

/* Takes the space between label and band, and centres the number in it. This is
   what moves the band up on a measuring tile without any separate layout. */
.epc-sdb-tile__value {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 33px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	padding: 0 8px;
	box-sizing: border-box;
}

/* Full-bleed navy band. */
.epc-sdb-tile__status {
	flex: 0 0 29px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #002d5d;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	padding: 0 6px;
	box-sizing: border-box;
}

/* The white strip below the band. Part of the design, not a margin. */
.epc-sdb-tile__after {
	flex: 0 0 var(--epc-sdb-after);
	background: #fff;
}

/*
 * Container query units: the tile scales with its column the way the PNG did,
 * instead of stepping at breakpoints.
 */
@supports (container-type: inline-size) {
	.epc-sdb-tile {
		container-type: inline-size;
		--epc-sdb-after: 11cqw;
	}

	.epc-sdb-tile--measuring {
		--epc-sdb-after: 25.2cqw;
	}

	.epc-sdb-tile__frame {
		border-radius: 12.3cqw;
		padding: 6.2cqw;
	}

	.epc-sdb-tile__inner {
		border-radius: 6cqw;
	}

	.epc-sdb-tile__label {
		padding: 8cqw 6cqw 0;
		font-size: 7.2cqw;
	}

	.epc-sdb-tile--long-label .epc-sdb-tile__label {
		font-size: 6cqw;
	}

	.epc-sdb-tile__value {
		font-size: 15.8cqw;
		padding: 0 4cqw;
	}

	.epc-sdb-tile__status {
		flex-basis: 13.6cqw;
		font-size: 10.5cqw;
		padding: 0 3cqw;
	}
}

/*
 * The grid is only used by the all-tiles shortcode, for QA and staging. The live
 * page places each tile in its own existing column, so the page layout is untouched.
 */
.epc-sdb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 28px;
	align-items: start;
}

@media print {
	.epc-sdb-tile__status,
	.epc-sdb-tile__frame {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}