/* ===========================================================
   /top-spots/day-trips, Top Spots chapter 05, and its loop pages.
   Rendered by Astro from src/content/day-trips
   (src/pages/top-spots/day-trips/). Loads after monocle.css and
   article.css, whose stat strip, body blocks, timeline, data table,
   sources list and map frame it uses as they are; the loop cards are the
   global .tile-grid. What it adds: the map (.loopmap), the key under it,
   a wide column for the cards and the map, the timetable's drive line,
   a stop's card, and the other loops. Monochrome per DESIGN.md's accent
   rule: Blue Slate marks a hovered route on the front's map and nothing
   else.
   =========================================================== */

.wide { max-width: 1120px; margin-left: auto; margin-right: auto; }
.wide .body-block p { max-width: 64ch; }
.hero-figure { max-width: 1120px; }
.loop-head .facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 14px 0 0; font: 400 13px/1.5 var(--sans); color: var(--ink-soft); }

/* ------- The cards ------- */
.loop-tiles { margin-top: 24px; }
.body-block .loop-tiles .tile .dek { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); max-width: none; }
.body-block .loop-tiles .tile h3 { margin-bottom: 0; }

/* ------- The map ------- */
.loop-figure { margin: 28px 0 0; }
.loopmap { display: block; width: 100%; height: auto; }
.loopmap .county { fill: var(--editorial-white); stroke: var(--gallery-border); stroke-width: 1; }
.loopmap .county.other { fill: var(--paper-grey); }
.loopmap .county-names text { font: 700 9px var(--sans); letter-spacing: .08em; fill: #a6a6a6; text-anchor: middle; }
.loopmap .route { fill: none; stroke: var(--press-black); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.loopmap .loop.h8 .route { stroke: var(--dispatch-grey); stroke-dasharray: 7 4; }
.loopmap .loop circle, .loopmap .stop circle { fill: var(--editorial-white); stroke: var(--press-black); stroke-width: 1.5; }
.loopmap .loop text, .loopmap .stop text { font: 700 10px var(--sans); fill: var(--press-black); text-anchor: middle; }
.loopmap .stop circle { fill: var(--press-black); stroke: var(--editorial-white); stroke-width: 2; }
.loopmap .stop text { fill: var(--editorial-white); font-size: 11px; }
.loopmap a:hover .route, .loopmap a:focus-visible .route { stroke: var(--blue-slate); stroke-width: 4; }
.loopmap a:hover circle, .loopmap a:focus-visible circle { stroke: var(--blue-slate); stroke-width: 3; }
.loopmap .home { fill: var(--editorial-white); stroke: var(--press-black); stroke-width: 2; }
.loopmap .home-label { font: 700 11px var(--sans); letter-spacing: .08em; fill: var(--press-black); }
.map-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font: 400 12px/1.4 var(--sans); color: var(--ink-soft); }
.map-key li { display: inline-flex; align-items: center; gap: 7px; }
.map-key i { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid var(--press-black); }
.map-key i.h8 { border-top: 2.5px dashed var(--dispatch-grey); }
.map-key i.home { width: 10px; height: 10px; border: 2px solid var(--press-black); background: var(--editorial-white); }
.locator { margin: 28px 0 0; }

/* ------- The table of loops ------- */
.data-table .loop a { color: var(--ink); font-weight: 700; text-decoration: none; }
.data-table .loop a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-slate); }
.data-table .loop .sub { display: block; font-weight: 400; }

/* ------- A loop's day ------- */
.tl .what .leg { display: block; margin-bottom: 2px; font: 400 12px/1.4 var(--sans); color: var(--ink-soft); }
.tl .what a { color: var(--ink); text-decoration: none; }
.tl .what a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-slate); }

/* ------- A stop ------- */
.stop-card { margin: 28px 0 0; padding-top: 14px; border-top: 2px solid var(--ink); }
.stop-card h3 { display: flex; align-items: baseline; gap: 12px; margin: 0; font: 700 24px/1.2 var(--serif); color: var(--ink); }
.stop-card h3 .n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--press-black); color: var(--editorial-white); font: 700 12px var(--sans); transform: translateY(-3px); }
.stop-card .where { margin: 6px 0 0; font: 400 13px/1.5 var(--sans); color: var(--ink-soft); }
.stop-card p { margin: 14px 0; }
.stop-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; margin: 18px 0 0; font-family: var(--sans); }
.stop-facts div { border-top: 1px solid var(--hairline); padding-top: 8px; }
.stop-facts dt { font: 700 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.stop-facts dd { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.body-block .stop-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 0; font: 700 12px var(--sans); }
.body-block .stop-links a { color: var(--ink); }

/* ------- The other loops ------- */
.other-loops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; margin: 8px 0 0; padding: 0; list-style: none; font-family: var(--sans); }
.other-loops li { border-top: 2px solid var(--ink); padding-top: 10px; }
.other-loops a { display: block; font: 700 16px/1.3 var(--serif); color: var(--ink); text-decoration: none; }
.other-loops a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-slate); }
.other-loops span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.back-to-guide { font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.back-to-guide a { color: var(--ink); }

@media (max-width: 760px) {
  .stop-facts { grid-template-columns: 1fr; gap: 8px; }
  .other-loops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}