/* Ride planning and track discovery. Shared type, colour and spacing tokens; no page JS. */
@layer components {
  .mp-ride { --mp-color-text-2: color-mix(in srgb, var(--mp-color-text) 80%, var(--mp-color-surface)); }
  .mp-ride > * { grid-column: wide; }
  .mp-ride p { max-inline-size: none; }
  /* The panorama leads. The copy overlaps only its soft lower edge, then stays in flow. */
  .mp-ride--opening { padding-block-start: var(--mp-space-xs); }
  .mp-ride__opening { isolation: isolate; }
  .mp-ride__intro { position: relative; margin-block-start: calc(-1 * var(--mp-space-2xl)); min-inline-size: 0; }
  .mp-ride__intro .mp-hero { min-block-size: 0; margin: 0; border-radius: 0; background: none; color: inherit; overflow: visible; }
  .mp-ride .mp-ride__intro .mp-hero__body { padding: 0; background: none; }
  .mp-ride .mp-ride__intro .mp-hero__title { max-inline-size: none; font-size: var(--mp-fs-display-xl); }
  .mp-ride__intro .mp-hero__lede { max-inline-size: 35em; font-size: var(--mp-fs-lead); color: var(--mp-color-text-2); }
  .mp-ride__intro .mp-hero__body > .mp-eyebrow { color: var(--mp-color-text); }
  .mp-ride__intro .mp-hero__actions { margin-block-start: var(--mp-space-s); }
  .mp-ride__hero-rate { display: flex; flex-wrap: wrap; gap: var(--mp-space-s); align-items: center; padding-block-start: var(--mp-space-m); }
  .mp-ride__hero-rate strong { font: var(--mp-weight-display) var(--mp-fs-display-xs) / var(--mp-lh-tight) var(--mp-font-display); }
  .mp-ride__hero-rate span { flex: 1 1 10em; font-size: var(--mp-fs-sm); color: var(--mp-color-text-2); }
  .mp-ride__photo { margin: 0; min-inline-size: 0; }
  .mp-ride__image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--mp-radius-lg); }
  .mp-ride__photo--hero { position: relative; }
  .mp-ride__photo--hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 48%, color-mix(in srgb, var(--mp-color-surface) 75%, transparent) 78%, var(--mp-color-surface)); pointer-events: none; }
  .mp-ride__photo--hero .mp-ride__image { aspect-ratio: 1; object-position: 60% 50%; }
  /* Phone (Nick 2026-11-05): the panorama breaks out to the screen edges, square and flush under
     the header; the intro stays on the page gutter, a gutter in from the photo's edge. */
  @media (width < 48rem) {
    .mp-prose > .mp-ride--opening { padding-block-start: 0; }
    .mp-ride__photo.mp-ride__photo--hero { margin-inline: calc(-1 * var(--mp-gutter)); } /* over .mp-ride__photo's margin: 0 */
    .mp-ride__photo--hero .mp-ride__image { border-radius: 0; }
  }
  .mp-ride__nav { --_nav-surface: var(--mp-ink); --_nav-text: var(--mp-white); --_nav-hover: var(--mp-green-text); display: grid; gap: var(--mp-space-xs); margin-block-start: var(--mp-space-l); }
  .mp-ride__nav-label { font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-body) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  .mp-ride__nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mp-border); padding: var(--mp-border); border-radius: var(--mp-radius-lg); background: color-mix(in srgb, var(--_nav-text) 18%, var(--_nav-surface)); overflow: hidden; }
  .mp-ride__nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-xs); min-block-size: var(--mp-space-2xl); padding: var(--mp-space-xs) var(--mp-space-s); background: var(--_nav-surface); color: var(--_nav-text); font-size: var(--mp-fs-sm); font-weight: var(--mp-weight-ui); line-height: var(--mp-lh-snug); text-decoration: none; }
  .mp-ride__nav a::after { content: '↓'; color: currentColor; }
  .mp-ride__nav a:hover, .mp-ride__nav a:focus-visible { background: var(--_nav-hover); color: var(--_nav-text); }
  .mp-ride__nav a:focus-visible { outline-color: var(--_nav-text); outline-offset: calc(-1 * var(--mp-space-3xs)); }
  .mp-ride__link { display: inline-flex; align-items: center; min-block-size: var(--mp-tap); font-weight: var(--mp-weight-ui); text-underline-offset: .22em; }
  .mp-ride__head { display: grid; gap: var(--mp-space-m); margin-block-end: var(--mp-space-l); }
  .mp-ride__title { margin: 0; font-size: var(--mp-fs-display-m); }
  .mp-ride__head .mp-eyebrow { margin-block: 0 var(--mp-space-s); }
  .mp-ride__lede { margin: 0; font-size: var(--mp-fs-lead); color: var(--mp-color-text-2); }
  .mp-ride__subhead { margin: 0; font-size: var(--mp-fs-display-xs); }
  .mp-ride__smallhead { margin: 0; font-size: var(--mp-fs-lead); }
  .mp-ride__note { font-size: var(--mp-fs-sm); color: var(--mp-color-text-2); }
  .mp-ride__tracks { display: grid; gap: var(--mp-space-l); }
  .mp-ride__track { min-inline-size: 0; }
  .mp-ride__track-copy { padding-block-start: var(--mp-space-m); }
  .mp-ride__track-copy .mp-eyebrow { margin-block: 0 var(--mp-space-xs); }
  .mp-ride__trail, .mp-ride__camp { display: grid; gap: var(--mp-space-l) var(--mp-space-xl); align-items: center; }
  .mp-ride__trail { border-block-start: var(--mp-border) solid var(--mp-color-line); padding-block-start: var(--mp-space-xl); margin-block-start: var(--mp-space-xl); }
  .mp-ride__copy { display: grid; gap: var(--mp-space-s); }
  .mp-ride__copy > * { margin: 0; }
  .mp-ride__copy .mp-btn { justify-self: start; }
  .mp-ride__photo--map .mp-ride__image { aspect-ratio: auto; object-fit: contain; }
  .mp-ride__bmx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-l); border-block: var(--mp-border) solid var(--mp-color-line); padding-block: var(--mp-space-l); }
  .mp-ride__bmx > div { flex: 1 1 17em; }
  .mp-ride__bmx-mark { font: var(--mp-weight-display) var(--mp-fs-display-l) / 1 var(--mp-font-display); color: var(--mp-color-accent-text); }
  .mp-ride__bmx p { margin-block-end: 0; }
  .mp-ride__first { display: grid; gap: var(--mp-space-m); padding: var(--mp-space-l); border: var(--mp-border) solid var(--mp-color-line); background: var(--mp-color-surface-2); border-radius: var(--mp-radius-lg); }
  .mp-ride__first p { margin-block: var(--mp-space-xs) 0; }
  .mp-ride__membership-buy { margin-block-start: var(--mp-space-s); }
  .mp-ride__membership-buy, .mp-ride__price-card .mp-btn { max-inline-size: 100%; white-space: normal; text-align: center; }
  .mp-ride__first-price { display: grid; grid-template-columns: 1fr auto 1fr; align-content: center; gap: var(--mp-space-2xs) var(--mp-space-s); }
  .mp-ride__first-price strong { grid-row: 1; font: var(--mp-weight-display) var(--mp-fs-display-xs) / var(--mp-lh-tight) var(--mp-font-display); }
  .mp-ride__first-price span { grid-row: 2; font-size: var(--mp-fs-sm); }
  .mp-ride__first-price .mp-ride__plus { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: var(--mp-fs-display-xs); }
  .mp-ride__prices { display: grid; gap: var(--mp-space-m); }
  .mp-ride__price-card { display: flex; flex-direction: column; align-items: start; padding: var(--mp-space-l); background: var(--mp-color-surface-2); border: var(--mp-border) solid var(--mp-color-line); border-radius: var(--mp-radius-lg); }
  .mp-ride__price-card .mp-eyebrow { margin-block-start: 0; }
  .mp-ride__amount { font: var(--mp-weight-display) var(--mp-fs-display-xs) / var(--mp-lh-tight) var(--mp-font-display); margin-block: var(--mp-space-m) 0; }
  .mp-ride__price-card a { margin-block-start: auto; }
  .mp-ride__price-card p:last-of-type { margin-block-end: var(--mp-space-s); }
  .mp-ride__amenities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mp-space-xs); list-style: none; padding: 0; font-size: var(--mp-fs-sm); font-weight: var(--mp-weight-ui); }
  .mp-ride__amenities li::before { content: '+'; margin-inline-end: var(--mp-space-xs); color: var(--mp-color-accent-text); }
  .mp-ride__steps { display: grid; gap: var(--mp-space-l); padding: 0; list-style: none; }
  .mp-ride__steps li { display: flex; flex-direction: column; align-items: start; gap: var(--mp-space-xs); }
  .mp-ride__step-no { font: var(--mp-weight-display) var(--mp-fs-display-l) / 1 var(--mp-font-display); color: var(--mp-color-accent-text); margin-block-end: var(--mp-space-xs); }
  .mp-ride__steps p { margin: 0; }
  .mp-ride__steps a { margin-block-start: auto; }
  .mp-ride__rules { display: grid; gap: var(--mp-space-l); }
  .mp-ride__rules article { border-block-start: var(--mp-border) solid var(--mp-color-line); padding-block-start: var(--mp-space-m); }
  /* A single closing composition: invitation, riding photo, then practical arrival details. */
  .mp-ride__finish { display: grid; gap: var(--mp-space-l); align-items: center; }
  .mp-ride__finish-copy { min-inline-size: 0; }
  .mp-ride__finish-copy > .mp-eyebrow { margin: 0 0 var(--mp-space-s); }
  .mp-ride__finish-title { margin: 0; font-size: var(--mp-fs-display-xl); }
  .mp-ride .mp-ride__finish-lede { max-inline-size: 29em; margin-block: var(--mp-space-m); font-size: var(--mp-fs-lead); color: var(--mp-color-text-2); }
  .mp-ride__finish-actions { display: flex; flex-wrap: wrap; gap: var(--mp-space-xs); }
  .mp-ride__finish-actions .mp-btn { white-space: normal; text-align: center; }
  .mp-ride__finish-help { display: grid; gap: var(--mp-space-s); margin-block-start: var(--mp-space-l); padding-block-start: var(--mp-space-m); border-block-start: var(--mp-border) solid var(--mp-color-line); }
  .mp-ride__finish-help a { display: grid; gap: var(--mp-space-3xs); min-block-size: var(--mp-tap); color: inherit; text-decoration: none; }
  .mp-ride__finish-help a > span { color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  .mp-ride__finish-help strong { font-weight: var(--mp-weight-ui); }
  .mp-ride__finish-help strong span { margin-inline-start: var(--mp-space-2xs); }
  .mp-ride__finish-help a:hover strong { text-decoration: underline; text-underline-offset: .22em; }
  .mp-ride__finish-photo { margin: 0; min-inline-size: 0; }
  .mp-ride__finish-photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 40%; border-radius: var(--mp-radius-lg); }
  .mp-ride__arrival { display: grid; gap: var(--mp-space-m); margin-block-start: var(--mp-space-l); padding: var(--mp-space-m); border-radius: var(--mp-radius-lg); background: var(--mp-color-surface); }
  .mp-ride__arrival p { margin: 0; }
  .mp-ride__arrival .mp-eyebrow { margin-block-end: var(--mp-space-2xs); }
  .mp-ride__arrival-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-xs) var(--mp-space-m); }
  .mp-ride__arrival-actions .mp-btn { white-space: normal; text-align: center; }
  @media (width < 30rem) {
    .mp-ride__finish-actions { display: grid; }
  }
  @media (width < 48rem) {
    .mp-ride .mp-ride__intro .mp-hero__title { font-size: var(--mp-fs-display-l); }
    .mp-ride__intro .mp-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
    .mp-ride__intro .mp-hero__actions .mp-btn { padding-inline: var(--mp-space-xs); }
  }
  @media (width >= 48rem) {
    .mp-ride__finish { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mp-space-xl); }
    .mp-ride__finish-photo img { aspect-ratio: 4 / 5; }
    .mp-ride__finish-help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-ride__arrival { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--mp-space-l); }
    .mp-ride__arrival-actions { justify-content: end; }
    .mp-ride__photo--hero .mp-ride__image { aspect-ratio: 2 / 1; }
    .mp-ride__intro { margin-block-start: calc(-1 * var(--mp-space-3xl)); padding-inline: var(--mp-space-l); }
    .mp-ride__nav-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mp-ride__head, .mp-ride__tracks, .mp-ride__trail, .mp-ride__camp, .mp-ride__rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-ride__head { align-items: end; column-gap: var(--mp-space-xl); }
    .mp-ride__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (width >= 64rem) {
    .mp-ride__finish-photo img { aspect-ratio: 6 / 5; }
    .mp-ride__intro { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: end; gap: var(--mp-space-xl); margin-block-start: calc(-2 * var(--mp-space-3xl)); }
    .mp-ride__hero-rate { display: block; border-inline-start: var(--mp-border) solid var(--mp-color-line); padding: var(--mp-space-xs) 0 var(--mp-space-xs) var(--mp-space-l); }
    .mp-ride__hero-rate strong, .mp-ride__hero-rate span { display: block; }
    .mp-ride__hero-rate span { margin-block-start: var(--mp-space-xs); }
    .mp-ride__nav-links { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .mp-ride__first { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mp-space-xl); }
    .mp-ride__prices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

@layer schemes {
  .mp-ride__intro .mp-hero { background: none; color-scheme: light; --mp-color-surface: var(--mp-white); --mp-color-surface-2: var(--mp-tint); --mp-color-text: var(--mp-ink); --mp-color-text-2: var(--mp-ink-2); --mp-color-accent-text: var(--mp-green-text); --mp-color-line: var(--mp-hairline); --mp-color-line-strong: var(--mp-stone); --mp-color-line-hover: var(--mp-ink); }
}