/**
 * Project: Yukon Energy
 * Style Sheet: Homepage electricity system warning
 * Adapted from the supplied mutual aid banner proof.
 * Normal page flow, outside the hero gallery; no slideshow or JavaScript hooks.
 */

.yec-stage-banner {
	position: relative;
	background: #F47B20;
	color: #1A1A1A;
	font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
	font-weight: 400;
}

.yec-stage-banner[data-stage="red"] { background: #C8102E; color: #FFFFFF; }
.yec-stage-banner[data-stage="black"] { background: #111111; color: #FFFFFF; }

.yec-stage-banner__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 32px;
	padding: 20px 10px;
	box-sizing: border-box;
}

.yec-stage-banner__stage {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 32px;
	border-right: 1px solid rgba(26, 26, 26, .3);
}

.yec-stage-banner .yec-stage-banner__name {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
}

.yec-stage-banner__capacity { font-size: 14px; font-weight: 600; line-height: 1.4; }
.yec-stage-banner__pips { display: flex; gap: 4px; margin-top: 4px; }
.yec-stage-banner__pips span { width: 22px; height: 5px; background: rgba(26, 26, 26, .25); }
.yec-stage-banner__pips span.is-on { background: #1A1A1A; }
.yec-stage-banner__content { min-width: 0; }

.yec-stage-banner .yec-stage-banner__message {
	margin: 0;
	font-size: 17px;
	line-height: 1.45;
	overflow-wrap: break-word;
}

.yec-stage-banner__message strong { font-weight: 700; }
.yec-stage-banner .yec-stage-banner__more { margin: 8px 0 0; font-size: 16px; line-height: 1.4; }
.yec-stage-banner__more a:link,
.yec-stage-banner__more a:visited,
.yec-stage-banner__more a:hover,
.yec-stage-banner__more a:active {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: break-word;
}
.yec-stage-banner__more a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.yec-stage-banner__updated {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-end;
	padding-left: 32px;
	border-left: 1px solid rgba(26, 26, 26, .3);
	white-space: nowrap;
}

.yec-stage-banner__updated-label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.yec-stage-banner__updated time { font-size: 15px; font-weight: 600; }

.yec-stage-banner[data-stage="red"] .yec-stage-banner__stage,
.yec-stage-banner[data-stage="black"] .yec-stage-banner__stage,
.yec-stage-banner[data-stage="red"] .yec-stage-banner__updated,
.yec-stage-banner[data-stage="black"] .yec-stage-banner__updated { border-color: rgba(255, 255, 255, .35); }
.yec-stage-banner[data-stage="red"] .yec-stage-banner__pips span,
.yec-stage-banner[data-stage="black"] .yec-stage-banner__pips span { background: rgba(255, 255, 255, .3); }
.yec-stage-banner[data-stage="red"] .yec-stage-banner__pips span.is-on,
.yec-stage-banner[data-stage="black"] .yec-stage-banner__pips span.is-on { background: #FFFFFF; }

/* The proof stacks below 800px; retain the site's existing .wrap gutters. */
@media (max-width: 800px) {
	.yec-stage-banner__inner { grid-template-columns: 1fr; gap: 12px; padding: 16px 10px; }
	.yec-stage-banner__stage { padding-right: 0; border-right: 0; }
	.yec-stage-banner .yec-stage-banner__message { font-size: 16px; }
	.yec-stage-banner__updated {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		align-items: baseline;
		padding-left: 0;
		border-left: 0;
		white-space: normal;
	}
}