/* =========================================================
   WS48 Transit Times pattern
   Everything is scoped to .ws48-transit so it won't touch
   the rest of the site.
   ========================================================= */

.ws48-transit {
	--ws48-deep-blue: #26526E;
	--ws48-cream: #EDE8DE;
	--ws48-terracotta: #C1694A;
	--ws48-greige: #A8A296;
	--ws48-black: #1A1A1A;
	--ws48-brick: #9C3A2B;
	--ws48-white: #FFFFFF;
	--ws48-text: #3A362F;
	--ws48-muted: #4A463F;
	--ws48-border: #D9D3C7;
	--ws48-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--ws48-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
	--ws48-max: 1440px;
	--ws48-gutter: clamp(24px, 5vw, 80px);

	background: var(--ws48-cream);
	color: var(--ws48-black);
	font-family: var(--ws48-sans);
	margin-top: 0;
	margin-bottom: 0;
}

/* ---------- Full-width breakout ----------
   Breaks out of the theme's content container so every band
   runs edge to edge, whatever page template is used. */

body:has(.ws48-transit) {
	overflow-x: clip;
}

.ws48-transit,
.ws48-transit.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* In the block editor, stay inside the canvas. */
.editor-styles-wrapper .ws48-transit,
.editor-styles-wrapper .ws48-transit.alignfull {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.ws48-transit *,
.ws48-transit *::before,
.ws48-transit *::after {
	box-sizing: border-box;
}

.ws48-transit h1,
.ws48-transit h2,
.ws48-transit h3,
.ws48-transit p {
	font-family: var(--ws48-sans);
	margin-top: 0;
}

.ws48-transit a {
	color: var(--ws48-black);
}

.ws48-transit a:hover {
	color: var(--ws48-deep-blue);
}

/* ---------- Sections ---------- */

.ws48-transit .ws48-section {
	margin: 0;
	padding: 80px max(var(--ws48-gutter), calc((100% - var(--ws48-max)) / 2));
}

.ws48-transit .ws48-section > * {
	margin-top: 0;
}

/* ---------- Type ---------- */

.ws48-transit .ws48-eyebrow {
	font-family: var(--ws48-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ws48-muted);
	margin-bottom: 12px;
}

.ws48-transit .ws48-eyebrow--hub {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ws48-transit .ws48-eyebrow--hub::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 3px solid var(--ws48-black);
	background: var(--ws48-white);
	flex: none;
}

.ws48-transit .ws48-hero-title {
	font-size: clamp(38px, 5vw, 64px);
	line-height: 1.03;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: 24px;
	color: var(--ws48-black);
}

.ws48-transit .ws48-h2 {
	font-size: clamp(30px, 3.4vw, 40px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
	color: inherit;
}

.ws48-transit .ws48-lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--ws48-text);
	max-width: 620px;
	margin-bottom: 28px;
}

/* ---------- Buttons ---------- */

.ws48-transit .ws48-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ws48-transit .ws48-buttons--end {
	justify-content: flex-end;
}

.ws48-transit .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 8px;
	font-family: var(--ws48-sans);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ws48-transit .ws48-btn-primary .wp-block-button__link {
	background: var(--ws48-terracotta);
	color: var(--ws48-white);
	border: 2px solid var(--ws48-terracotta);
}

.ws48-transit .ws48-btn-primary .wp-block-button__link:hover,
.ws48-transit .ws48-btn-primary .wp-block-button__link:focus-visible {
	background: var(--ws48-brick);
	border-color: var(--ws48-brick);
	color: var(--ws48-white);
}

.ws48-transit .ws48-btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--ws48-black);
	border: 2px solid var(--ws48-black);
}

.ws48-transit .ws48-btn-outline .wp-block-button__link:hover,
.ws48-transit .ws48-btn-outline .wp-block-button__link:focus-visible {
	background: var(--ws48-black);
	color: var(--ws48-white);
}

.ws48-transit .ws48-btn-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--ws48-white);
	border: 2px solid var(--ws48-white);
}

.ws48-transit .ws48-btn-outline-light .wp-block-button__link:hover,
.ws48-transit .ws48-btn-outline-light .wp-block-button__link:focus-visible {
	background: var(--ws48-white);
	color: var(--ws48-deep-blue);
}

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

.ws48-transit .ws48-hero-section {
	padding-top: 72px;
	padding-bottom: 64px;
}

.ws48-transit .ws48-hero {
	align-items: center;
	gap: 48px;
	margin: 0;
}

.ws48-transit .ws48-map {
	margin: 0;
	background: var(--ws48-white);
	border: 1px solid var(--ws48-border);
	border-radius: 20px;
	padding: 20px;
}

.ws48-transit .ws48-map img {
	display: block;
	width: 100%;
	height: auto;
}

.ws48-transit .ws48-map figcaption {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--ws48-muted);
	text-align: left;
}

/* ---------- Stats strip ---------- */

.ws48-transit .ws48-stats {
	background: var(--ws48-black);
	color: var(--ws48-white);
	padding-top: 40px;
	padding-bottom: 40px;
}

.ws48-transit .ws48-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	margin: 0;
}

.ws48-transit .ws48-stat-number {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 6px;
	color: var(--ws48-white);
}

.ws48-transit .ws48-stat-label {
	font-size: 15px;
	color: #D6D0C4;
	margin-bottom: 0;
}

/* ---------- Zone cards ---------- */

.ws48-transit .ws48-zones {
	padding-top: 96px;
	padding-bottom: 48px;
}

.ws48-transit .ws48-zone-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 0 0 24px;
}

.ws48-transit .ws48-card {
	background: var(--ws48-white);
	border: 1px solid var(--ws48-border);
	border-radius: 16px;
	padding: 28px 24px;
}

.ws48-transit .ws48-card::before {
	content: "";
	display: block;
	width: 48px;
	height: 8px;
	border-radius: 4px;
	margin-bottom: 18px;
	background: var(--zone-color, var(--ws48-black));
}

.ws48-transit .ws48-zone-1 { --zone-color: var(--ws48-deep-blue); }
.ws48-transit .ws48-zone-2 { --zone-color: var(--ws48-terracotta); }
.ws48-transit .ws48-zone-3 { --zone-color: var(--ws48-brick); }
.ws48-transit .ws48-zone-4 { --zone-color: var(--ws48-greige); }

.ws48-transit .ws48-card .ws48-eyebrow {
	font-size: 12px;
	margin-bottom: 4px;
}

.ws48-transit .ws48-zone-title {
	font-size: 26px;
	font-weight: 800;
	margin-bottom: 8px;
	color: var(--ws48-black);
}

.ws48-transit .ws48-days {
	font-family: var(--ws48-mono);
	font-size: 15px;
	color: var(--ws48-muted);
	margin-bottom: 16px;
}

.ws48-transit .ws48-days strong {
	font-size: 32px;
	font-weight: 600;
	color: var(--ws48-black);
	margin-right: 4px;
}

.ws48-transit .ws48-zone-area {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ws48-text);
	margin-bottom: 10px;
}

.ws48-transit .ws48-zone-area strong {
	color: var(--ws48-black);
}

.ws48-transit .ws48-remote-note {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ws48-text);
	padding: 20px 24px;
	border: 2px dashed var(--ws48-greige);
	border-radius: 16px;
	margin: 0;
}

.ws48-transit .ws48-remote-note strong {
	color: var(--ws48-black);
}

.ws48-transit .ws48-remote-note a {
	font-weight: 700;
}

/* ---------- Delivery steps ---------- */

.ws48-transit .ws48-delivery {
	padding-top: 48px;
	padding-bottom: 96px;
}

.ws48-transit .ws48-panel {
	background: var(--ws48-white);
	border: 1px solid var(--ws48-border);
	border-radius: 24px;
	padding: clamp(28px, 4vw, 48px);
}

.ws48-transit .ws48-panel > .ws48-buttons {
	margin-bottom: 48px;
}

.ws48-transit .ws48-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}

.ws48-transit .ws48-steps::before {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	top: 11px;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg,
		var(--ws48-black) 0 33%,
		var(--ws48-deep-blue) 33% 66%,
		var(--ws48-terracotta) 66% 100%);
}

.ws48-transit .ws48-step {
	position: relative;
}

.ws48-transit .ws48-step::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ws48-white);
	border: 5px solid var(--step-color, var(--ws48-black));
	margin-bottom: 16px;
	position: relative;
}

.ws48-transit .ws48-step-1 { --step-color: var(--ws48-black); }
.ws48-transit .ws48-step-2 { --step-color: var(--ws48-deep-blue); }
.ws48-transit .ws48-step-3 { --step-color: var(--ws48-terracotta); }
.ws48-transit .ws48-step-4 { --step-color: var(--ws48-terracotta); }

.ws48-transit .ws48-step-4::before {
	background: var(--ws48-terracotta);
}

.ws48-transit .ws48-step .ws48-eyebrow {
	font-size: 12px;
	margin-bottom: 6px;
}

.ws48-transit .ws48-step-title {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--ws48-black);
}

.ws48-transit .ws48-step p:not(.ws48-eyebrow) {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ws48-text);
	margin-bottom: 0;
}

/* ---------- Closing CTA band ---------- */

/* The section stays cream; the blue is a contained card. */
.ws48-transit .ws48-cta {
	background: transparent;
	padding-top: 0;
	padding-bottom: 32px;
}

.ws48-transit .ws48-cta-row {
	background: var(--ws48-deep-blue);
	color: var(--ws48-white);
	border-radius: 24px;
	padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px);
}

.ws48-transit .ws48-cta .ws48-h2 {
	color: var(--ws48-white);
}

.ws48-transit .ws48-cta .ws48-lead {
	color: var(--ws48-cream);
	margin-bottom: 0;
}

.ws48-transit .ws48-cta-row {
	align-items: center;
	gap: 32px;
	margin: 0;
}

/* ---------- Footnote ---------- */

.ws48-transit .ws48-footnote {
	padding-top: 32px;
	padding-bottom: 48px;
}

.ws48-transit .ws48-footnote p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ws48-muted);
	max-width: 820px;
	margin: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.ws48-transit .ws48-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ws48-transit .ws48-steps::before {
		display: none;
	}
}

@media (max-width: 781px) {
	.ws48-transit .ws48-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.ws48-transit .ws48-buttons--end {
		justify-content: flex-start;
	}
}

@media (max-width: 520px) {
	.ws48-transit .ws48-steps {
		grid-template-columns: 1fr;
	}

	.ws48-transit .wp-block-button,
	.ws48-transit .wp-block-button .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}