
.metro-station-page {
    background: #fff;
    color: #12213a;
}
.station-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 64px;
}
.station-breadcrumbs {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin:0 0 34px;
    color:#61708a;
    font-size:14px;
}
.station-breadcrumbs a {
    color:#31557d;
    text-decoration:none;
}
.station-breadcrumbs a:hover { text-decoration:underline; }

.station-hero {
    border:1px solid #dbe4ee;
    border-radius:22px;
    padding:42px 34px;
    background:linear-gradient(135deg,#f8fbff,#ffffff);
    margin-bottom:22px;
}
.station-eyebrow {
    display:block;
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    color:#5d6f89;
    margin-bottom:9px;
}
.station-hero h1,
.station-error h1 {
    margin:0;
    color:#10233f;
    font-size:clamp(32px,5vw,52px);
    line-height:1.08;
    letter-spacing:-.025em;
}
.station-location {
    display:flex;
    gap:8px;
    margin-top:13px;
    color:#66758b;
    font-size:17px;
}
.station-line-pills {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:22px;
}
.station-line-pill {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid #dbe4ee;
    border-radius:999px;
    background:#fff;
    font-weight:700;
    color:#203654;
}
.station-line-pill i,
.station-color-dot,
.station-mini-line i {
    width:10px;
    height:10px;
    display:inline-block;
    border-radius:50%;
    flex:0 0 10px;
}

.station-card {
    border:1px solid #e0e7ef;
    border-radius:18px;
    padding:28px;
    margin-bottom:18px;
    background:#fff;
}
.station-section-heading {
    margin-bottom:20px;
}
.station-section-heading h2 {
    margin:0;
    font-size:25px;
    line-height:1.2;
    color:#142845;
}
.station-section-heading p {
    margin:7px 0 0;
    color:#6b7a8e;
    line-height:1.6;
}
.station-stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.station-stat {
    padding:17px;
    border-radius:12px;
    background:#f7f9fc;
}
.station-stat span,
.station-timing-row span {
    display:block;
    font-size:12px;
    color:#728097;
    margin-bottom:5px;
}
.station-stat strong {
    display:block;
    color:#182e4b;
    font-size:16px;
    line-height:1.35;
}
.station-copy,
.station-address {
    margin:0;
    color:#50627a;
    line-height:1.75;
    font-size:16px;
}
.station-line-list {
    display:grid;
    gap:10px;
}
.station-line-row {
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px;
    border:1px solid #e5eaf1;
    border-radius:12px;
}
.station-line-row > div { flex:1; }
.station-line-row strong { display:block; color:#1a304d; }
.station-line-row small {
    display:block;
    margin-top:3px;
    color:#718097;
}
.station-order {
    color:#6b7890;
    font-size:13px;
}
.station-timing-list {
    display:grid;
    gap:10px;
}
.station-timing-row {
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:24px;
    align-items:center;
    padding:15px;
    border:1px solid #e5eaf1;
    border-radius:12px;
}
.station-timing-row > div:first-child strong { display:block; }
.station-timing-row > div:not(:first-child) strong { color:#19314f; }
.station-timing-row small { color:#728097; }

.station-interchange-list {
    display:grid;
    gap:12px;
}
.station-interchange {
    padding:17px;
    border:1px solid #e3e9f0;
    border-radius:13px;
}
.station-interchange-lines {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
}
.station-mini-line {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-weight:700;
    color:#203654;
}
.station-interchange-meta {
    color:#718097;
    font-size:13px;
    margin:8px 0;
}
.station-interchange a {
    color:#245d96;
    font-weight:700;
    text-decoration:none;
}

.station-line-group + .station-line-group {
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #edf0f4;
}
.station-line-group-head {
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:11px;
    color:#1b314e;
}
.station-neighbour-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:11px;
}
.station-neighbour {
    display:block;
    padding:15px;
    border:1px solid #e3e9f0;
    border-radius:12px;
    text-decoration:none;
}
.station-neighbour span {
    display:block;
    color:#748197;
    font-size:12px;
    margin-bottom:5px;
}
.station-neighbour strong {
    color:#1d4f80;
}

.station-nearby-list {
    display:grid;
    gap:8px;
}
.station-nearby-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:14px 15px;
    border:1px solid #e5eaf1;
    border-radius:12px;
    text-decoration:none;
}
.station-nearby-row strong {
    display:block;
    color:#1d4f80;
}
.station-nearby-row small {
    display:block;
    color:#77859a;
    margin-top:3px;
}
.station-nearby-row b {
    white-space:nowrap;
    color:#344a65;
    font-size:14px;
}
.station-coordinates {
    display:grid;
    grid-template-columns:auto 1fr auto 1fr;
    gap:8px 12px;
    margin-top:14px;
    padding:14px;
    background:#f7f9fc;
    border-radius:11px;
    font-size:14px;
}
.station-coordinates span { color:#748197; }
.station-coordinates strong { color:#253b58; }

.station-planner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    margin-top:20px;
    padding:28px;
    border-radius:18px;
    background:#102d4e;
    color:#fff;
}
.station-planner .station-eyebrow { color:#b7c8dc; }
.station-planner h2 {
    margin:0;
    color:#fff;
    font-size:26px;
}
.station-planner p {
    margin:7px 0 0;
    color:#c7d3e1;
}
.station-primary-link {
    display:inline-block;
    padding:12px 17px;
    border-radius:10px;
    background:#fff;
    color:#102d4e;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
}

.station-error {
    max-width:810px;
    margin:70px auto;
    padding:52px 30px;
    text-align:center;
    border:1px solid #dbe4ee;
    border-radius:22px;
}
.station-error p {
    color:#66758b;
    font-size:18px;
    margin:22px 0 30px;
}
.station-error .station-primary-link { background:#102d4e; color:#fff; }

@media (max-width: 760px) {
    .station-wrap { padding:20px 14px 48px; }
    .station-hero { padding:30px 22px; border-radius:17px; }
    .station-card { padding:22px 18px; border-radius:15px; }
    .station-stats { grid-template-columns:repeat(2,1fr); }
    .station-neighbour-grid { grid-template-columns:1fr; }
    .station-planner { display:block; padding:24px 20px; }
    .station-planner .station-primary-link { margin-top:18px; }
}
@media (max-width: 480px) {
    .station-breadcrumbs { font-size:13px; margin-bottom:22px; }
    .station-hero h1 { font-size:32px; }
    .station-location { font-size:15px; }
    .station-stats { grid-template-columns:1fr 1fr; }
    .station-stat { padding:14px; }
    .station-stat strong { font-size:14px; }
    .station-timing-row { grid-template-columns:1fr 1fr; gap:14px; }
    .station-timing-row > div:first-child { grid-column:1 / -1; }
    .station-coordinates { grid-template-columns:1fr 1fr; }
    .station-nearby-row { padding:13px; }
}
