/**
 * Metrocorp Countdown Banner
 *
 * Sizing follows Countdown-Banner-Specs.pdf. Each breakpoint sets the same set
 * of custom properties and the rules below derive everything from them, so a
 * spec change is a variable change rather than a rule rewrite.
 *
 *              band      creative   gap    number block   padding
 *   Desktop    1500x125  725x95     75px   370x95         15px
 *   Tablet     768x75    365x50     30px   195x50         12.5px
 *   Mobile     428x150   400x65     11px   195x50         14px / 10px
 *
 * Colors are driven by five custom properties set inline per banner rule:
 * --mc-cdb-banner-bg, --mc-cdb-banner-image, --mc-cdb-numbers-bg,
 * --mc-cdb-border-color and --mc-cdb-text-color. The fallbacks below apply when
 * a rule leaves one empty.
 */

/* Full bleed band: carries the background so it spans the viewport. */
.mc-cdb {
	/* Mobile first, per the 428px column in the spec. */
	--mc-cdb-content-max: 400px;
	--mc-cdb-pad-top: 14px;
	--mc-cdb-pad-bottom: 10px;
	--mc-cdb-pad-x: 14px;
	--mc-cdb-gap: 11px;
	--mc-cdb-creative-h: 65px;
	--mc-cdb-block-w: 195px;
	--mc-cdb-block-h: 50px;
	--mc-cdb-value-size: 14px;
	--mc-cdb-label-size: 8px;
	--mc-cdb-label-gap: 2px;
	--mc-cdb-unit-gap: 4px;
	--mc-cdb-dot-size: 3px;

	/* Everything under the number box, used to centre the box on the midline. */
	--mc-cdb-label-block: calc(var(--mc-cdb-label-size) * 1.2 + var(--mc-cdb-label-gap));

	margin: 0;
	padding: var(--mc-cdb-pad-top) var(--mc-cdb-pad-x) var(--mc-cdb-pad-bottom);
	background-color: var(--mc-cdb-banner-bg, #000);
	background-image: var(--mc-cdb-banner-image, none);
	border: 1px solid var(--mc-cdb-border-color, #fff);
	border-radius: 2px;
	color: var(--mc-cdb-text-color, #fff);
}

/* Content sits a little wider than site content, centred in the band. */
.mc-cdb__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--mc-cdb-gap);
	width: 100%;
	max-width: var(--mc-cdb-content-max);
	margin: 0 auto;
	color: var(--mc-cdb-text-color, #fff);
	text-decoration: none;
}

a.mc-cdb__inner:hover,
a.mc-cdb__inner:focus {
	color: var(--mc-cdb-text-color, #fff);
	text-decoration: none;
}

.mc-cdb__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 100%;
	height: var(--mc-cdb-creative-h);
	min-width: 0;
}

/* Contain, never cover: ad creative must not be cropped. */
.mc-cdb__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.mc-cdb__clock {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--mc-cdb-block-w);
	height: var(--mc-cdb-block-h);
	gap: var(--mc-cdb-unit-gap);
}

/*
 * The unit is centred as a whole, so without this the label's height would push
 * the number box above the midline. A top margin of one label block shifts the
 * border box down by half that (flexbox centres the margin box), landing the
 * number box dead centre with the label hanging below it.
 */
.mc-cdb__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin-top: var(--mc-cdb-label-block);
}

/*
 * Colon between units, drawn as two stacked dots. Height matches the number box
 * (font-size * line-height 1.25 + 0.18em padding top and bottom + 1px border
 * top and bottom) so the colon centres on the digits rather than on the
 * digits-plus-label column.
 */
.mc-cdb__sep {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--mc-cdb-value-size) * 0.3);
	height: calc(var(--mc-cdb-value-size) * 1.61 + 2px);
}

.mc-cdb__sep::before,
.mc-cdb__sep::after {
	content: "";
	display: block;
	width: var(--mc-cdb-dot-size);
	height: var(--mc-cdb-dot-size);
	background-color: currentColor;
	border-radius: 50%;
}

.mc-cdb__value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9em;
	padding: 0.18em 0.24em;
	background-color: var(--mc-cdb-numbers-bg, transparent);
	border: 1px solid var(--mc-cdb-border-color, #fff);
	color: var(--mc-cdb-text-color, #fff);
	font-size: var(--mc-cdb-value-size);
	font-weight: 700;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}

.mc-cdb__label {
	margin-top: var(--mc-cdb-label-gap);
	color: var(--mc-cdb-text-color, #fff);
	font-size: var(--mc-cdb-label-size);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Tablet: creative and number block sit side by side. */
@media (min-width: 768px) {

	.mc-cdb {
		--mc-cdb-content-max: 590px;
		--mc-cdb-pad-top: 12.5px;
		--mc-cdb-pad-bottom: 12.5px;
		--mc-cdb-pad-x: 15px;
		--mc-cdb-gap: 30px;
		--mc-cdb-creative-h: 50px;
	}

	.mc-cdb__inner {
		flex-direction: row;
	}

	.mc-cdb__media {
		flex: 1 1 auto;
		width: auto;
	}
}

@media (min-width: 1200px) {

	.mc-cdb {
		--mc-cdb-content-max: 1170px;
		--mc-cdb-pad-top: 15px;
		--mc-cdb-pad-bottom: 15px;
		--mc-cdb-gap: 75px;
		--mc-cdb-creative-h: 95px;
		--mc-cdb-block-w: 370px;
		--mc-cdb-block-h: 95px;
		--mc-cdb-value-size: 26px;
		--mc-cdb-label-size: 11px;
		--mc-cdb-label-gap: 5px;
		--mc-cdb-unit-gap: 8px;
		--mc-cdb-dot-size: 5px;
	}
}