/* Phone layout for /roads/<track> road pages (loaded at (max-width: 760px)). */
/* Also covers "No road here" (same _head). On a phone: the download sits
   above the fold full width, screenshots become a swipe row instead of a
   tall stack, facts are a tight 2-up grid, and the related roads read as one
   grouped list. Everything else is spacing and tap-size tuning. */

.road-wrap { padding: 22px 16px 16px; }

/* Breadcrumb is a real nav: legible, and each link gets a taller hit box
   without moving the line. */
.crumbs { font-size: 12.5px; line-height: 1.6; }
.crumbs a { display: inline-block; padding: 8px 0; margin: -8px 0; }

.road-wrap h1 { font-size: 1.85rem; line-height: 1.12; margin: 8px 0 8px; }
.road-wrap h1 .sub { font-size: .56em; line-height: 1.35; margin-top: 6px; }
.road-wrap h2 { font-size: 1.18rem; line-height: 1.25; margin: 30px 0 12px; }
.road-meta { font-size: 12.5px; margin-bottom: 16px; }
.road-lede { font-size: 15.5px; margin-bottom: 20px; }

/* Primary action: full width at every phone width (the page's own rule only
   kicks in under 640px), the download a notch taller than the ghost. */
.cta-row { gap: 10px; margin: 20px 0 8px; }
.cta-row .btn { flex: 1 1 100%; min-height: 46px; text-align: center; }
.cta-row .btn-primary { min-height: 52px; font-size: 1rem; }
.dl-error { font-size: 14px; }
.sub-cta { font-size: 13.5px; line-height: 1.55; margin-bottom: 26px; }

/* The default <figure> margin (40px each side) squeezed the outline into a
   narrow box; let it use the column. */
.road-layout { margin: 0 0 14px; padding: 18px 14px; }
.road-layout img { max-height: 230px; }

/* Screenshots: a horizontal swipe row, edge to edge, one shot and a peek of
   the next, instead of three full-width images stacked down the page. */
.road-shots {
  display: flex; gap: 10px; margin: 0 -16px 22px; padding: 0 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.road-shots::-webkit-scrollbar { display: none; }
.road-shots img { flex: 0 0 86%; scroll-snap-align: start; }
.road-shots img:only-child { flex-basis: 100%; }

/* Facts: always two up, compact. dd has the UA's 40px indent otherwise. */
.road-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.road-facts div { padding: 10px 12px; }
.road-facts dt { font-size: 11.5px; letter-spacing: .1em; }
.road-facts dd { margin: 2px 0 0; font-size: 15px; line-height: 1.35;
  overflow-wrap: anywhere; }

.road-steps { padding-left: 20px; font-size: 15px; gap: 10px; }
/* The tracks/ path is one unbreakable word: let it wrap at 360px. */
.road-steps code { overflow-wrap: anywhere; }

/* FAQ rows: full 48px tap height, the question text at body size. */
.road-faq details { margin-bottom: 8px; }
.road-faq summary { padding: 13px 14px; min-height: 48px; font-size: 15px;
  line-height: 1.4; }
.road-faq details p { padding: 0 14px 14px; font-size: 15px; }

/* Related roads: one grouped list with hairline dividers, not a stack of
   separate cards: same tap height, a third less scrolling. */
.related ul { gap: 0; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--contour);
  border-radius: var(--radius); overflow: hidden; background: var(--basalt); }
.related li + li a { border-top: 1px solid var(--contour); }
.related li a { border: 0; border-radius: 0; min-height: 50px;
  align-items: center; padding: 12px 14px; font-size: 15px; line-height: 1.3; }
.related .meta { font-size: 12px; }
/* A long unbroken road name wraps instead of widening the list. */
.related li a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.related .more { display: block; padding: 12px 0; margin-top: 6px; font-size: 15px; }

/* Region links: full-width rows at tap height rather than 32px pills. */
.road-region { flex-direction: column; gap: 8px; margin-top: 18px; }
.road-region a { display: flex; align-items: center; min-height: 44px;
  padding: 0 16px; font-size: 13px; border-radius: 10px; }

/* Desktop's 96px gap above the footer is mostly empty scroll on a phone. */
.foot { margin-top: 48px; padding: 30px 0 calc(36px + env(safe-area-inset-bottom)); }
.foot .legal { font-size: 12.5px; }