/* The exam homepage shares its desktop design with the theme. These rules
   give its data-heavy sections a readable layout at phone widths. */
@media (max-width: 640px) {
	.pgh-hero--exam {
		padding-top: 36px;
		padding-bottom: 42px;
	}
	.pgh-hero--exam .pgh-hero__title {
		font-size: clamp(30px, 8.5vw, 38px);
		line-height: 1.1;
		margin-top: 20px;
	}
	.pgh-hero--exam .pgh-hero__sub {
		font-size: 15.5px;
		line-height: 1.55;
		margin-top: 16px;
	}
	.pgh-hero--exam .pgh-statepick { margin-top: 24px; }
	.pgh-hero--exam .pgh-hero__media { margin-top: 28px; }
	.pgh-hero--exam .pgh-hero__fact {
		max-width: calc(100% - 20px);
		padding: 7px 10px;
		font-size: 12px;
		line-height: 1.3;
		white-space: normal;
	}
	.pgh-hero--exam .pgh-hero__fact--b { text-align: right; }
	.pgh-trust { padding-block: 18px; }
	.pgh-trust__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.pgh-trust__item {
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	.pgh-trust__n, .pgh-trust__l--strong { font-size: 19px; line-height: 1.2; }
	.pgh-trust__l { font-size: 12.5px; line-height: 1.35; }

	.pgh-bars__row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 5px 12px;
	}
	.pgh-bars__label {
		min-width: 0;
		white-space: normal;
		overflow: visible;
	}
	.pgh-bars__track { grid-column: 1 / -1; grid-row: 2; }
	.pgh-bars__n { grid-column: 2; grid-row: 1; }

	.pgh-ctaband { border-radius: 20px; }
	.pgh-ctaband__actions .pgt-btn { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
	/* The theme's two-column rule leaves only ~130px per state at 320px.
	   A compact list keeps names, test labels, and counts legible. */
	.pgh-states:not(.pgh-states--national) { grid-template-columns: minmax(0, 1fr); gap: 7px; }
	.pgh-states:not(.pgh-states--national) .pgh-statecard,
	.pgh-states:not(.pgh-states--national) .pgh-statecard--mine {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-content: center;
		padding: 10px 14px;
		gap: 2px 10px;
	}
	.pgh-states:not(.pgh-states--national) .pgh-statecard__name {
		grid-column: 1;
		font-size: 15px;
		overflow-wrap: normal;
	}
	.pgh-states:not(.pgh-states--national) .pgh-statecard__tests {
		grid-column: 1 / -1;
		font-size: 12.5px;
	}
	.pgh-states:not(.pgh-states--national) .pgh-statecard__count {
		grid-column: 2;
		grid-row: 1;
		align-self: baseline;
		font-size: 12px;
		white-space: nowrap;
	}
	.pgh-states:not(.pgh-states--national) .pgh-statecard__mine { grid-column: 1 / -1; }
	.pgh-states:not(.pgh-states--national) .pgh-statecard__icon { display: none; }
	.pgh-states--national .pgh-statecard { padding-right: 16px; }
	.pgh-road__stage { padding: 20px 18px; }
	.pgh-road__nums > div { min-width: 0; padding: 9px; }
	.pgh-road__nums dt { font-size: 11px; }
}