/* ============================================
   SEA TO SHINING SEA — HOMEPAGE STYLES
   Loaded only on index.html. Rules are intentionally page-local
   so they can override base styles without affecting other pages.
   Extracted from the inline <style> block on 2026-04-23.
   ============================================ */

/* --- Hero overrides --- */
.hero-title {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  line-height: 1.1;
}

.hero-tagline {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-blue);
  margin-bottom: var(--space-xl);
}

.hero-subtitle a {
  color: var(--brand-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Frosted glass hero — lets eagle show through */
[data-page="home"] .hero {
  min-height: 100dvh;
  background: rgba(248, 249, 250, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
}

[data-page="home"][data-theme="dark"] .hero {
  background: rgba(15, 20, 25, 0.55);
}

/* All sections below hero get solid bg + z-index to cover fixed eagle */
[data-page="home"] .section,
[data-page="home"] section,
[data-page="home"] .stats-strip,
[data-page="home"] .footer {
  position: relative;
  z-index: 1;
}

/* --- Scroll Indicator --- */
.scroll-indicator {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(25, 118, 210, 0.4);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: bob 2.2s ease-in-out infinite;
  transition: opacity 0.4s ease, border-color 0.2s, background 0.2s;
  color: var(--brand-blue);
  z-index: 2;
}

[data-theme="dark"] .scroll-indicator {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(66, 165, 245, 0.4);
}

.scroll-indicator:hover {
  border-color: var(--brand-blue);
  background: rgba(25, 118, 210, 0.1);
}

.scroll-chevron {
  width: 22px;
  height: 22px;
}

@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(9px); }
}

/* --- Public invitation to the finish-line celebration ---
   Sits between the hero subtitle and the countdown. Auto-hides
   post-July-4 via the inline countdown script. Small, warm,
   icon-prefixed so it reads as a CTA, not a tagline. */
.hero-invitation {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 auto var(--space-lg);
  padding: 0.5rem 0.95rem;
  background: color-mix(in srgb, var(--brand-red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-red) 22%, transparent);
  border-radius: 999px;
  color: var(--brand-red);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.01em;
}

.hero-invitation .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.hero-invitation[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .hero-invitation {
    font-size: 0.85rem;
    padding: 0.45rem 0.8rem;
  }
}

/* --- Countdown Timer --- */
.hero-countdown {
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.countdown-label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--brand-blue);
  margin-bottom: var(--space-md);
}

.countdown-grid {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(25, 118, 210, 0.18);
  border-radius: var(--radius-md);
  padding: 14px 22px;
  min-width: 76px;
}

[data-theme="dark"] .countdown-unit {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(66, 165, 245, 0.22);
}

.countdown-num {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.countdown-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-top: 6px;
}

.countdown-sep {
  font-size: 2rem;
  font-weight: 900;
  color: var(--brand-blue);
  margin-bottom: 18px;
  opacity: 0.45;
  line-height: 1;
}

/* --- Section Divider --- */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(25, 118, 210, 0.35) 50%,
    transparent 100%);
  margin: 0 auto;
  max-width: 1200px;
}

[data-theme="dark"] .section-divider {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(66, 165, 245, 0.35) 50%,
    transparent 100%);
}

/* --- Stats Strip --- */
.stats-strip {
  background: linear-gradient(135deg, #0a192f 0%, #0d47a1 100%);
  padding: var(--space-2xl) var(--space-lg);
}

.stats-strip-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.strip-stat {
  text-align: center;
  padding: var(--space-lg) var(--space-2xl);
  flex: 1;
  min-width: 160px;
}

.strip-num {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
}

.strip-lbl {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  margin-top: var(--space-sm);
}

.strip-divider {
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .strip-divider { display: none; }
  .strip-stat { min-width: 140px; padding: var(--space-md) var(--space-lg); }
}

/* --- Mission Card Icon Circles --- */
.mission-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.mission-icon-red  { background: rgba(211, 47,  47,  0.1); color: var(--brand-red);  }
.mission-icon-blue { background: rgba(25,  118, 210, 0.1); color: var(--brand-blue); }
.mission-icon-gold { background: rgba(255, 167, 38,  0.1); color: var(--brand-gold); }

/* --- Ways to Give helpers --- */
.give-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--brand-blue);
  color: white;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.give-pricing {
  background: var(--bg-secondary);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}

.give-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
}

.give-price-row:last-child { border-bottom: none; }

.give-price { font-weight: 700; }
.give-price-blue { color: var(--brand-blue); }
.give-price-red  { color: var(--brand-red);  }

/* --- CTA Section --- */
.home-cta-section {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

/* --- Map Spine: pinned map + scrolling narrative panels --- */
.map-spine {
  position: relative;
  background: var(--bg-secondary);
}

.map-spine__sticky {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
}

.map-spine #routeMap {
  width: 100%;
  height: 100%;
  min-height: 360px;
}

.map-spine__narrative {
  padding: var(--space-3xl) var(--space-lg);
}

.map-panel {
  max-width: 560px;
  margin: 0 auto var(--space-3xl);
}

.map-panel:last-child {
  margin-bottom: 0;
}

.map-panel .section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.map-panel__body {
  color: var(--text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1.7;
  margin-top: var(--space-md);
}

.map-panel__cta {
  margin-top: var(--space-xl);
}

/* Mobile: map stacks above narrative at fixed height */
@media (max-width: 1023px) {
  .map-spine__sticky {
    height: 55dvh;
    min-height: 360px;
    max-height: 560px;
  }
  .map-panel {
    text-align: center;
  }
}

/* Desktop: narrative scrolls, map pins on the right */
@media (min-width: 1024px) {
  .map-spine {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    align-items: start;
  }
  .map-spine__narrative {
    grid-column: 1;
    grid-row: 1;
    padding: var(--space-4xl) var(--space-2xl) var(--space-4xl) var(--space-3xl);
  }
  .map-spine__sticky {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--nav-height);
    height: calc(100dvh - var(--nav-height));
  }
  .map-panel {
    min-height: calc(100dvh - var(--nav-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 0 auto;
    max-width: 520px;
  }
}

/* --- Bike marker: travels along the route on scroll --- */
.bike-marker {
  background: transparent !important;
  border: none !important;
}
.bike-marker__dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(211, 47, 47, 0.15);
  transition: transform 0.2s ease;
}
.bike-marker__dot svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Community Quilt --- */
.community-quilt {
  margin-top: var(--space-2xl);
}

/* Empty state (default) */
.quilt-empty {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-2xl);
  border: 2px dashed var(--border-color);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}
.quilt-empty__icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(25, 118, 210, 0.1);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quilt-empty__icon .icon {
  width: 2rem;
  height: 2rem;
}
.quilt-empty__title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
.quilt-empty__copy {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
@media (max-width: 600px) {
  .quilt-empty {
    flex-direction: column;
    text-align: center;
  }
}

/* Populated state (rendered by home.js) */
.quilt-heading {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
.quilt-subheading {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}
.quilt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}
.quilt-tile {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.quilt-tile:hover,
.quilt-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-blue);
}
.quilt-tile__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.quilt-tile__content {
  min-width: 0;
  flex: 1;
}
.quilt-tile__name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quilt-tile__dedication {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 4px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
}
.quilt-tile__meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-weight: 600;
}
.quilt-tile__amount {
  color: var(--brand-blue);
  font-weight: 700;
}

/* "Be the next face" CTA tile */
.quilt-tile--cta {
  background: var(--bg-secondary);
  border-style: dashed;
}
.quilt-tile--cta .quilt-tile__name {
  color: var(--brand-blue);
}
.quilt-tile__avatar--plus {
  background: var(--bg-card) !important;
  color: var(--brand-blue);
  border: 2px dashed var(--brand-blue);
  font-size: 1.5rem;
  font-weight: 300;
  text-shadow: none;
}

/* Overflow tiles: hidden until the grid is expanded */
.quilt-tile--extra { display: none; }
.quilt-grid--expanded .quilt-tile--extra { display: flex; }

/* Show more / show fewer toggle */
.quilt-show-more {
  display: block;
  margin: var(--space-lg) auto 0;
  padding: 10px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--brand-blue);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.quilt-show-more:hover,
.quilt-show-more:focus-visible {
  background: var(--bg-secondary);
  border-color: var(--brand-blue);
  outline: none;
}
.quilt-show-more:focus-visible {
  box-shadow: var(--focus-ring);
}

/* --- Scroll Reveal ---
   Default: visible (works with JS disabled)
   With .js class: hidden until GSAP animates in
   Reduced-motion: always visible */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   MOBILE OVERRIDES (Phase 3a)
   Home page becomes 6 screen-height sections with proximity snap.
   Desktop is untouched — every rule below is inside @media <=768px.
   ============================================================ */

/* Why-We-Ride carousel pagination dots are hidden on desktop. */
.why-dots { display: none; }

@media (max-width: 768px) {
  /* HERO: match .mobile-screen's new formula exactly — svh (stable
     across Safari chrome changes), reclaim safe-top subtraction (no
     nav on home so section extends to bottom tab bar), and pad
     content down via safe-top so it clears the notch. */
  [data-page="home"] .hero {
    min-height: calc(
      100svh
      - var(--bottom-nav-height)
      - var(--safe-bottom)
    );
    padding-top: calc(var(--safe-top) + var(--space-sm));
    padding-bottom: 64px;
  }

  /* Scroll indicator pinned to the bottom of the hero section (above
     the tab bar) so it's always visible. */
  .scroll-indicator {
    bottom: var(--space-md);
  }

  /* Tighten the vertical rhythm on mobile so the Live Tracker button
     and scroll arrow both land inside the working viewport even when
     Safari's URL bar is expanded. Desktop spacing is untouched. */
  [data-page="home"] .hero-subtitle {
    margin-bottom: var(--space-md);
  }

  .hero-countdown {
    margin-bottom: var(--space-md);
  }

  .countdown-label {
    margin-bottom: var(--space-sm);
  }

  /* COUNTDOWN: force a single row of Days/Hours/Mins/Secs on every
     mobile width. The desktop flex-wrap: wrap + min-width: 76px caused
     "Secs" to drop to a second row on iPhones (~375–430px viewport),
     which pushed the scroll indicator and CTAs behind the tab bar. */
  .countdown-grid {
    flex-wrap: nowrap;
    gap: var(--space-xs);
    width: 100%;
    max-width: 100%;
    padding: 0 var(--space-sm);
    box-sizing: border-box;
    justify-content: center;
  }

  .countdown-unit {
    flex: 1 1 0;               /* equal share of available width */
    min-width: 0;              /* let flex shrink past intrinsic */
    padding: 10px 6px;
    box-sizing: border-box;
  }

  .countdown-num {
    /* Fluid scale that fits 2-digit numbers on a 320px viewport */
    font-size: clamp(1.125rem, 5.2vw, 1.75rem);
    letter-spacing: 0;
  }

  .countdown-lbl {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
  }

  .countdown-sep {
    flex: 0 0 auto;
    font-size: 1rem;
    margin-bottom: 10px;
  }

  /* STATS STRIP: tight single row of 4 stats, no wrap, no dividers. */
  .stats-strip {
    padding: var(--space-md) var(--space-sm);
  }

  .stats-strip-inner {
    flex-wrap: nowrap;
    gap: 0;
  }

  .strip-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-sm) 4px;
  }

  .strip-num {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .strip-lbl {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin-top: 4px;
  }

  .strip-divider {
    display: none;
  }

  /* WHY WE RIDE: 3 cards become a horizontal snap-scroll carousel.
     Uses native overflow-x — no JS required for swiping.

     All section children share the same edge padding (--screen-edge)
     so the header text, carousel cards, dots, and CTA button all
     align to a single horizontal coordinate system. */
  [data-screen="why"] {
    --screen-edge: var(--space-md);   /* 16px, single source of truth */
    overflow-x: hidden;               /* safety net against grid overflow */
  }

  [data-screen="why"] .section-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: var(--space-md) 0;
  }

  /* Header anchored to the full viewport width, same edge padding as
     the grid so it's never inset more or less than the cards. */
  [data-screen="why"] .section-header {
    flex: 0 0 auto;
    margin-bottom: var(--space-md);
    padding: 0 var(--screen-edge);
    width: 100%;
    max-width: none;
    text-align: center;
  }

  [data-screen="why"] .section-subtitle {
    /* Remove desktop's 600px constraint on mobile so the subtitle
       participates in the header's viewport-width centering. */
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  [data-screen="why"] .grid.grid-cols-3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-md);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 4px var(--screen-edge);
    margin: 0;
    scrollbar-width: none;
    flex: 1 1 auto;
    align-items: stretch;
  }

  [data-screen="why"] .grid.grid-cols-3::-webkit-scrollbar {
    display: none;
  }

  [data-screen="why"] .mission-card {
    flex: 0 0 88%;
    min-width: 0;                     /* let flex shrink, never grow past 88% */
    max-width: 360px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    box-sizing: border-box;
    padding: var(--space-lg);
  }

  /* Tighter typography inside mobile carousel cards so they feel
     less "brochure-y" and all content stays above the fold. */
  [data-screen="why"] .mission-card .card-title {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }

  [data-screen="why"] .mission-card .card-body {
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 0;
  }

  [data-screen="why"] .mission-card .mission-icon-wrap {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md);
  }

  [data-screen="why"] .mission-card .mission-icon-wrap .icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  /* Pagination dots + "Learn more" CTA sit beneath the carousel. */
  [data-screen="why"] .why-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: var(--space-md) 0 0;
    flex: 0 0 auto;
  }

  .why-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--border-color);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    /* Expand hit area without enlarging visual dot. */
    position: relative;
  }

  .why-dot::before {
    content: '';
    position: absolute;
    inset: -10px;
  }

  .why-dot.is-active {
    background: var(--brand-blue);
    transform: scale(1.35);
  }

  .why-dot:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  [data-screen="why"] .section-inner > div:last-child {
    flex: 0 0 auto;
    margin-top: var(--space-md) !important;
    padding: 0 var(--screen-edge);
  }

  /* "Learn More About Our Mission" button — constrain to fit even on
     narrow phones. btn-large default padding + text is too wide on
     320–375px. Override to a reasonable size that respects the
     --screen-edge boundary. */
  [data-screen="why"] .section-inner > div:last-child .btn {
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    padding: 12px 20px;
    font-size: 0.95rem;
  }

  /* MAP SPINE on mobile: mirror the desktop pattern with map on top
     instead of right. The map sticks to the top of the viewport
     (below the nav) while all 3 narrative panels scroll past
     beneath it. The bike-marker JS is layout-agnostic — it computes
     progress from the section's bounding rect, so it drives the
     bike smoothly on mobile the same way it does on desktop.

     Each panel is its own scroll-snap target; scroll-margin-top
     offsets the snap point so the panel's top aligns just below the
     sticky map, not under it. */
  .map-spine {
    display: block;
    position: relative;
  }

  .map-spine__sticky {
    position: sticky;
    /* Home has no nav on mobile — stick below the iPhone notch, not y=0. */
    top: var(--safe-top);
    height: 42svh;
    min-height: 240px;
    max-height: 340px;
    z-index: 2;           /* keep map above narrative as it scrolls past */
    background: var(--bg-secondary);
  }

  /* Safety net: even though Leaflet's drag/zoom handlers are off,
     this explicitly allows the browser to pan-y through the map so
     touch gestures scroll the page instead of being captured. */
  #routeMap {
    touch-action: pan-y !important;
  }

  .map-spine__narrative {
    position: relative;
    z-index: 1;
    padding: 0;
  }

  /* Each panel fills the working viewport minus the sticky map, and
     snaps so its top lands right below the map's bottom edge.
     svh here to stay stable across Safari URL-bar toggles. safe-top
     matches the map-spine__sticky top offset. */
  .map-panel {
    min-height: calc(
      100svh
      - var(--safe-top)
      - 42svh
      - var(--bottom-nav-height)
      - var(--safe-bottom)
    );
    margin: 0;
    max-width: none;
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    scroll-snap-align: start;
    scroll-snap-stop: normal;
    scroll-margin-top: calc(var(--safe-top) + 42svh);
  }

  /* Route / Climbs / Every Mile Matters body text: shrink from
     desktop's --font-size-lg (1.15rem ≈ 18.4px) to a comfortable
     mobile-reading size. Matches the compressed panel height. */
  .map-panel__body {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-top: var(--space-sm);
  }
}

/* The mobile-only "View Live Tracker" CTA from Phase 3a part 2 is
   retired — the sticky-map multi-panel layout surfaces the existing
   Sponsor panel's CTA naturally. */
.map-panel__mobile-cta {
  display: none;
}

@media (max-width: 768px) {
  .map-panel__mobile-cta { display: none; }

  /* FUNDRAISING: compress everything to fit one viewport
     (header + stats row + progress bar + quilt grid). */
  [data-screen="fundraising"] {
    padding: var(--space-md) 0 !important;
  }

  [data-screen="fundraising"] .section-inner {
    padding: 0 var(--space-md);
  }

  [data-screen="fundraising"] .section-header {
    margin-bottom: var(--space-md) !important;
  }

  [data-screen="fundraising"] .section-title {
    font-size: 1.5rem;
    margin: 4px 0;
  }

  [data-screen="fundraising"] .section-subtitle {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Stats: 3-column compact row, not the 3 big desktop cards. */
  .home-fund-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-sm) !important;
    margin-bottom: var(--space-md) !important;
  }

  .home-fund-stats > .card {
    padding: var(--space-sm) !important;
  }

  .home-fund-stats > .card > div {
    font-size: 1.5rem !important;
    line-height: 1 !important;
  }

  .home-fund-stats > .card > p {
    font-size: 0.68rem !important;
    line-height: 1.2;
    margin-top: 4px !important;
    font-weight: 600;
  }

  /* Progress card: tighter padding. */
  .home-fund-progress {
    padding: var(--space-md) !important;
    margin-bottom: var(--space-md);
  }

  /* Community Quilt: 2-column compact grid so it fits the remaining
     space. Existing .quilt-tile--extra / .quilt-grid--expanded
     show-more logic in home.js handles overflow. */
  [data-screen="fundraising"] .quilt-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  [data-screen="fundraising"] .quilt-tile {
    padding: var(--space-sm);
    gap: var(--space-sm);
  }

  [data-screen="fundraising"] .quilt-tile__avatar {
    width: 32px;
    height: 32px;
    font-size: 0.72rem;
  }

  [data-screen="fundraising"] .quilt-tile__name {
    font-size: 0.8rem;
  }

  [data-screen="fundraising"] .quilt-tile__dedication {
    font-size: 0.68rem;
    margin: 2px 0 4px;
    -webkit-line-clamp: 2;
  }

  [data-screen="fundraising"] .quilt-tile__meta {
    font-size: 0.65rem;
  }

  [data-screen="fundraising"] .quilt-heading {
    font-size: 1rem;
    margin-top: var(--space-md);
  }

  [data-screen="fundraising"] .quilt-subheading {
    font-size: 0.8rem;
    margin-bottom: var(--space-sm);
  }

  /* CTA SECTION (Ready to Be Part of the Journey): centered content,
     comfortable spacing. Overrides the desktop 4xl padding. */
  .home-cta-section {
    padding: var(--space-2xl) var(--space-lg) !important;
    text-align: center;
  }

  .home-cta-section .section-title {
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: var(--space-md);
  }

  .home-cta-section .section-subtitle {
    font-size: 1rem;
    margin-bottom: var(--space-lg);
  }

  /* CTA buttons: stack full-width for thumb-friendly tap targets. */
  .home-cta-section .btn,
  .home-cta-section .hero-actions > .btn {
    width: 100%;
    max-width: 320px;
    margin: 0 auto var(--space-sm);
  }

  .home-cta-section .hero-actions {
    flex-direction: column;
    gap: var(--space-sm);
  }
}