/* Phone layout for /roads/<region> hub pages (loaded at (max-width: 760px)). */
/* Also covers "No region here" (same _head). On a phone: headline scaled so
   "drift maps in <Region>" doesn't break word by word, the suggest CTA full
   width, the region's roads (up to ~160) as one grouped list with dividers
   instead of separate cards, and the closing links at tap height. */

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

.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.8rem; line-height: 1.12; margin: 8px 0 8px; }
.road-wrap h2 { font-size: 1.15rem; line-height: 1.25; }
.road-meta { font-size: 12.5px; margin-bottom: 16px; }
.road-lede { font-size: 15.5px; margin-bottom: 16px; }

.cta-row { gap: 10px; margin: 22px 0 8px; }
.cta-row .btn { flex: 1 1 100%; min-height: 46px; text-align: center;
  white-space: normal; line-height: 1.25; }
.cta-row .btn-primary { min-height: 52px; font-size: 1rem; }

.dir-country h2 { margin: 30px 0 0; }
.related h2 { margin: 30px 0 12px; }

/* Grouped lists with hairline dividers (roads, then sibling regions). */
.dir-list, .related ul { gap: 0; grid-template-columns: minmax(0, 1fr); margin-top: 12px;
  border: 1px solid var(--contour); border-radius: var(--radius);
  overflow: hidden; background: var(--basalt); }
.dir-list li + li a, .related li + li a { border-top: 1px solid var(--contour); }
.dir-list li a, .related li a { border: 0; border-radius: 0; min-height: 48px;
  align-items: center; padding: 11px 14px; font-size: 15px; line-height: 1.3; }
.dir-list .meta, .related .meta { font-size: 12px; }
/* A long unbroken road name wraps instead of widening the list. */
.dir-list li a > span:first-child, .related li a > span:first-child {
  min-width: 0; overflow-wrap: anywhere; }

/* "Every road in <country> · Every road, by country": two real links in
   small print; give each a full tap row. */
.sub-cta { font-size: 0; line-height: 0; }
.sub-cta a { display: flex; align-items: center; min-height: 44px;
  font-size: 15px; line-height: 1.3; border-bottom: 1px solid var(--contour); }
.sub-cta a:last-child { border-bottom: 0; }

.foot { margin-top: 48px; padding: 30px 0 calc(36px + env(safe-area-inset-bottom)); }
.foot .legal { font-size: 12.5px; }