.route-hero {
padding: 4rem 2rem;
text-align: center;
border-bottom: 1px solid #e5e7eb;
}

.route-title {
font-size: 2.8rem;
font-weight: 700;
}

.route-description {
max-width: 700px;
margin: 1rem auto 0;
font-size: 1.1rem;
color: #555;
}

.route-nodes {
padding: 3rem 2rem;
}

.route-node-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}

.route-node-card {
padding: 1.5rem;
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
}

.route-node-card:hover {
transform: translateY(-3px);
}

.route-node-distance {
font-size: 0.85rem;
text-transform: uppercase;
color: #888;
margin-top: 0.5rem;
}
.route-hero {
position: relative;
padding: 6rem 2rem;
background: linear-gradient(to bottom, #1f2937, #111827);
color: white;
text-align: center;
}

.route-hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}

.route-subtitle {
max-width: 700px;
margin: 0 auto;
opacity: 0.85;
}

.route-meta-bar {
background: #f3f4f6;
padding: 1rem 2rem;
border-bottom: 1px solid #e5e7eb;
}

.route-meta-inner {
display: flex;
gap: 2rem;
justify-content: center;
font-weight: 600;
}

.route-map {
height: 300px;
background: #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
}

.route-linear {
max-width: 900px;
margin: 4rem auto;
position: relative;
padding-left: 60px;
}

.route-linear::before {
content: "";
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 3px;
background: #d1d5db;
}

.route-stop {
position: relative;
margin-bottom: 3rem;
}

.route-stop-marker {
position: absolute;
left: -5px;
top: 5px;
}

.route-distance {
display: inline-block;
background: #2563eb;
color: white;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 8px;
border-radius: 20px;
}

.route-stop-card {
background: white;
padding: 1.5rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.03);
}

.route-stop-card h2 {
margin: 0 0 0.5rem 0;
}