/**
 * Bridge Update page template
 *
 * Scoped to `.bu-page`. Enqueued by the YTI Bridge Update plugin on the
 * Bridge Update template only.
 *
 * Leans on theme globals from style.css: --navy / --red / --ash / --blue,
 * `.textured` (gradient + contour bands), `.underline`, `.light-bg`, `.btn-primary`.
 *
 * @package yti-bridge-update
 */

.bu-page {
	--bu-serif: utopia-std, Georgia, "Times New Roman", serif;
	--bu-sans: helvetica-neue-lt-pro, var(--bs-font-sans-serif);
	--bu-tab: #d9d9d9;
	--bu-current: #dcecf7;
	--bu-muted: #b4b6b8;
	--bu-radius: 14px;

	font-family: var(--bu-sans);
	overflow-x: clip;
}

.bu-page section {
	position: relative;
	overflow: hidden;
}

.bu-page .container {
	position: relative;
	z-index: 2;
}

.bu-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Shared serif section heading (Drivers, Traffic Plan). */
.bu-serif-heading {
	font-family: var(--bu-serif);
	font-weight: 600;
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: 0;
	margin: 0 0 1.75rem;
}

/* Hero ---------------------------------------------------------------- */

/* Vertical spacing comes from the theme's `doc py-4` on every section. */

.bu-hero {
	color: #fff;
}

.bu-hero__eyebrow {
	font-family: var(--bu-serif);
	font-weight: 600;
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	margin: 0 0 0.35rem;
}

.bu-hero__title {
	font-family: var(--bu-serif);
	font-weight: 600;
	color: #fff;
	font-size: clamp(2.1rem, 4.2vw, 3.1rem);
	line-height: 1.1;
	margin: 0 0 1.5rem;
}

.bu-hero__intro {
	font-size: 1rem;
	line-height: 1.45;
	max-width: 62rem;
	margin: 0 auto 2rem;
}

.bu-hero__btn {
	min-width: 0;
}

/* Closure banner ------------------------------------------------------ */

.bu-closure {
	background: var(--red);
	color: #fff;
	text-align: center;
	padding: 0.85rem 0 1rem;
}

.bu-closure__text {
	font-size: clamp(1.3rem, 2.2vw, 1.8rem);
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
}

/* Reroute options ----------------------------------------------------- */

.bu-reroute {
	background: var(--navy);
}

/* Without a background photo this band and the Drivers band are both navy and
   read as one block, so their stacked padding would double the gap. Drop the
   Drivers top padding so the space matches the site's single py-4 gap. */
.bu-reroute--plain + .bu-drivers {
	padding-top: 0 !important;
}

.bu-reroute__card {
	display: grid;
	grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 2vw, 1.75rem);
	align-items: start;
	padding: clamp(1rem, 2.6vw, 2.25rem);
	background: #fff;
	border-radius: var(--bu-radius);
	box-shadow: 0 20px 50px rgba(0, 20, 40, 0.18);
}

/* Wider screens: give the map more of the card so the copy column fills out. */
@media (min-width: 1200px) {
	.bu-reroute__card {
		grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
	}
}

/* Maps share one grid cell so swapping them never shifts the layout. */
.bu-reroute__maps {
	display: grid;
}

.bu-reroute__map {
	grid-area: 1 / 1;
	width: 100%;
	height: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.bu-reroute__map.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease;
}

.bu-reroute__heading {
	font-family: var(--bu-sans);
	font-size: clamp(1.5rem, 2.3vw, 1.85rem);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--navy);
	margin: 0 0 2rem;
}

.bu-reroute__tabs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	margin-bottom: 1.75rem;
}

.bu-reroute__tab {
	width: 100%;
	max-width: 200px;
	padding: 0.65rem 1rem;
	border: 0;
	border-radius: 4px;
	background: var(--bu-tab);
	color: var(--navy);
	font-family: var(--bu-sans);
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.bu-reroute__tab:hover {
	background: #c8ccd0;
}

.bu-reroute__tab[aria-selected="true"] {
	background: var(--navy);
	color: #fff;
}

.bu-reroute__tab:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 2px;
}

.bu-reroute__desc {
	color: var(--navy);
	font-size: 1rem;
	line-height: 1.35;
}

.bu-reroute__desc strong,
.bu-reroute__desc b {
	font-weight: 700;
}

.bu-reroute__desc p:last-child {
	margin-bottom: 0;
}

/* Below lg the map stacks above the controls; tabs run side by side. */
@media (max-width: 991.98px) {
	.bu-reroute__card {
		grid-template-columns: 1fr;
	}

	.bu-reroute__side {
		order: -1;
		text-align: center;
	}

	.bu-reroute__heading {
		margin-bottom: 1.25rem;
	}

	.bu-reroute__tabs {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}

	.bu-reroute__tab {
		flex: 1 1 0;
		min-width: 6.5rem;
	}
}

/* What drivers should know ------------------------------------------- */

.bu-drivers {
	background: var(--navy);
	color: #fff;
}

.bu-drivers__list {
	list-style: none;
	margin: 2.25rem 0 1.5rem;
	padding: 0;
}

.bu-drivers__list li {
	font-size: 1.05rem;
	line-height: 1.35;
	margin-bottom: 1.15rem;
}

.bu-drivers__list strong {
	font-weight: 700;
}

.bu-drivers__callout {
	font-family: var(--bu-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--red);
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	line-height: 1.2;
	margin: 0;
}

/* Traffic management plan -------------------------------------------- */

.bu-plan__circle {
	width: min(100%, 410px);
	aspect-ratio: 1;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	background: var(--navy);
}

.bu-plan__circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bu-plan__card {
	background: #fff;
	border-radius: var(--bu-radius);
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
}

.bu-plan__card .bu-serif-heading {
	color: var(--navy);
	margin-bottom: 1.5rem;
}

.bu-plan__item + .bu-plan__item {
	margin-top: 1.4rem;
}

.bu-plan__title {
	font-family: var(--bu-sans);
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--navy);
	margin: 0 0 1.1rem;
}

.bu-plan__item p {
	color: var(--navy);
	font-size: 0.85rem;
	line-height: 1.4;
	margin: 0;
}

/* Timeline ------------------------------------------------------------ */

.bu-timeline {
	--bu-circle: 205px;
}

.bu-timeline__heading {
	font-family: var(--bu-serif);
	font-weight: 600;
	color: #fff;
	text-align: center;
	font-size: clamp(2.2rem, 4vw, 3rem);
	margin: 0 0 1.5rem;
}

.bu-timeline__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 2.5rem 0.85rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bu-phase {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Circle sits over the top of the card; the card is pulled up under it. */
.bu-phase__circle {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: var(--bu-circle);
	height: var(--bu-circle);
	padding: 1.5rem;
	border-radius: 50%;
	background: var(--bu-muted);
	color: #fff;
	text-align: center;
}

.bu-phase__icon {
	display: block;
	flex-shrink: 0;
	width: 60%;
	height: auto;
	max-height: 55%;
	object-fit: contain;
}

.bu-phase__label {
	font-size: 0.6rem;
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	max-width: 85%;
}

.bu-phase__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 auto;
	width: 100%;
	margin-top: calc(var(--bu-circle) * -0.45);
	padding: calc(var(--bu-circle) * 0.45 + 1.75rem) 1.5rem 2rem;
	background: #fff;
	border-radius: var(--bu-radius);
	color: var(--navy);
}

.bu-phase__date {
	font-family: var(--bu-sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
	color: var(--navy);
	margin: 0 0 1.25rem;
}

.bu-phase__body {
	align-self: stretch;
	font-size: 0.9rem;
	line-height: 1.3;
	margin: 0;
}

/* Current phase: navy circle, tinted card, red badge across the seam. */
.bu-phase.is-current .bu-phase__circle {
	background: var(--navy);
}

.bu-phase.is-current .bu-phase__card {
	background: var(--bu-current);
	padding-top: calc(var(--bu-circle) * 0.45 + 0.25rem);
}

.bu-phase__badge {
	position: relative;
	z-index: 2;
	margin: -1.6rem 0 1.25rem;
	padding: 0.45rem 1.25rem;
	border-radius: 50px;
	background: var(--red);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bu-timeline__closing {
	font-family: var(--bu-serif);
	font-style: italic;
	color: #fff;
	text-align: center;
	font-size: clamp(1.25rem, 2.1vw, 1.65rem);
	line-height: 1.3;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
}

@media (max-width: 575.98px) {
	.bu-timeline {
		--bu-circle: 170px;
	}

	.bu-timeline__grid {
		grid-template-columns: minmax(0, 340px);
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bu-reroute__map,
	.bu-reroute__map.is-active,
	.bu-reroute__tab {
		transition: none;
	}
}