/* Location page template (DUMBO, Central Park, ...) */
.hero { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(34px, 5.4vw, 66px); }
.hero + .why { padding-top: clamp(34px, 5.4vw, 66px); } /* 40% tighter gap below the lead section */

/* Location pages: lead photo runs to the left edge of the screen, text on the right */
.hero-bleed { display: grid; grid-template-columns: 60% minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); overflow-x: clip; }
.hero-bleed-img { width: 100%; height: clamp(460px, 58vw, 820px); object-fit: cover; }
.hero-bleed-text { padding: 40px max(var(--gutter), calc((100% / 0.4 - var(--wrap)) / 2 * 0.4 + var(--gutter))) 40px 0; }
.hero-bleed-text .lead { margin-bottom: 30px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-sub { margin: 10px 0 22px; }
.hero .lead { margin-bottom: 30px; }
.hero-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.why h2 { max-width: 13em; margin-bottom: 36px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; }

.facts-sec { padding: 48px 0; border-bottom: 1px solid var(--border); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.facts .display-m { margin-bottom: 8px; }


.route { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.route-map { width: 100%; border: 1px solid var(--border); background: #fff; }
.route h2 { margin-bottom: 28px; }
.timeline { list-style: none; padding: 0; margin: 0 0 32px; }
.timeline li { display: grid; grid-template-columns: 92px 34px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--border); }
.timeline .t { font: 700 15px/30px var(--display); letter-spacing: .05em; color: var(--muted); }
.timeline .pin { width: 30px; height: 30px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; font: 700 15px var(--display); }
.timeline .pin--f { background: #FF6319; } /* MTA orange for the F */
.timeline strong { display: block; font-weight: 700; line-height: 1.35; padding-top: 3px; }
.timeline em { font-style: normal; color: var(--muted); font-size: 15px; }

.stops-sec h2 { margin-bottom: clamp(36px, 6vw, 72px); }
.stop { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(48px, 8vw, 96px); }
.stop:last-child { margin-bottom: 0; }
.stop--flip .stop-img { order: 2; }
.stop-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stop-num { font: 900 clamp(64px, 8vw, 104px)/0.9 var(--display); color: var(--coral); margin-bottom: 12px; }
.stop .where { color: var(--muted); font-size: 15px; letter-spacing: .03em; margin: 10px 0 18px; }
.stop blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 4px solid var(--yellow); font-weight: 700; font-size: 18px; line-height: 1.45; }
.stop .dur { display: inline-block; margin-top: 18px; padding: 6px 12px; background: var(--ink); color: #fff; font: 700 14px var(--display); letter-spacing: .12em; text-transform: uppercase; }

.tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.tips > div { background: #fff; border: 1px solid var(--border); padding: 28px; }
.tips .display-m { margin-bottom: 14px; }

.cta { text-align: center; }
.cta h2 { max-width: 12em; margin: 0 auto 22px; }
.cta .lead { margin: 0 auto 34px; color: rgba(255,255,255,.82); }
.cta .btn:hover { box-shadow: 4px 4px 0 var(--coral); }

@media (max-width: 900px) {
  .hero-bleed { grid-template-columns: 1fr; gap: 0; }
  .hero-bleed-img { height: clamp(320px, 90vw, 560px); }
  .hero-bleed-text { padding: 32px var(--gutter) 8px; }
  .hero-grid, .two-col, .route, .stop { grid-template-columns: 1fr; }
  .stop--flip .stop-img { order: 0; }
  .facts { grid-template-columns: 1fr 1fr; }
  .tips { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; gap: 24px; }
  .timeline li { grid-template-columns: 74px 30px 1fr; gap: 10px; }
}
.photo-credit { margin-top: 48px; font-size: 13px; color: var(--muted); }