/* Outdoor engine blocks */
.icon { flex: none; color: var(--accent); }

/* highlights strip under the hero */
.highlights { background: var(--panel); padding-block: 1.8rem; }
.highlights ul { list-style: none; margin: 0 auto; display: grid; gap: 1.3rem 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.highlights li { display: flex; gap: .9rem; align-items: flex-start; }
.highlights b { display: block; font-weight: 600; margin-bottom: .15rem; }
.highlights span { font-size: .92rem; color: var(--muted); line-height: 1.5; display: block; }

/* route cards: photo with the name over it, then tag, summary and a stats row */
.route-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.rc-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); }
.rc-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .4s ease; }
a.route-card:hover .rc-img img { transform: scale(1.04); }
.rc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 12, 10, .65)); }
.rc-img h3 { position: absolute; left: 1.1rem; right: 1.1rem; bottom: .8rem; margin: 0; color: #fff; z-index: 1; font-size: 1.35rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.rc-body { padding: 1rem 1.2rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.rc-body p:not(.kicker) { font-size: .95rem; color: var(--muted); }
.stats { display: flex; justify-content: space-between; gap: .5rem; margin: auto 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.stats div { text-align: center; flex: 1; }
.stats dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stats dd { margin: 0; font-weight: 600; font-size: .98rem; }

/* short answers */
.answers { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); margin-bottom: 1.5rem; }
.answers .card h3 { font-family: var(--font); font-size: 1.05rem; font-weight: 650; margin-bottom: .5rem; }
.answers .card p { font-size: .96rem; color: var(--muted); margin-bottom: 0; }

/* conditions, parking, maps */
.conditions { background: #fff; box-shadow: var(--shadow); }
.conditions .facts li { box-shadow: none; background: var(--panel); }
.conditions .table-wrap { box-shadow: none; border: 1px solid var(--line); }
.hourly td, .hourly th { white-space: nowrap; }
.daily td:first-child { white-space: normal; }
.start { background: #fff; box-shadow: var(--shadow); }
.start h3 { margin-top: 0; }
.start .table-wrap { box-shadow: none; }
.start table th { width: 9.5rem; background: transparent; color: var(--muted); font-weight: 600; font-size: .88rem; }
.tariff { width: auto; margin: 0; }
.tariff td { border: 0; padding: .1rem 1rem .1rem 0; }
.map { height: 28rem; max-height: 70vh; border-radius: var(--radius); background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; }   /* fixed height: no jump when the map loads */
.map.open { display: block; }
.overview, .profile { width: 100%; display: block; }
.overview { max-height: 30rem; }
.hero + .crumbs, .crumbs { margin-bottom: 1.2rem; }
.highlights + .conditions, .highlights + p + .conditions { margin-top: 2rem; }
.route-cards { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.stats dd { white-space: nowrap; }
.conditions .facts { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.conditions .facts li { padding: .65rem .8rem; }
@media (max-width: 34rem) {
  .conditions { padding: 1rem .9rem; }
  .conditions .facts { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .conditions .facts b { font-size: 1.05rem; }
  .conditions .facts span { font-size: .8rem; }
  .hourly .c-feels, .hourly .c-gust { display: none; }
  .hourly td, .hourly th { padding: .5rem .45rem; font-size: .88rem; white-space: normal; }
}