/* ============================================================================
   Cumbria Guru — responsive overrides (mobile-first: these scale UP)
   ========================================================================== */

/* --- ≥ 640px ---------------------------------------------------------------- */
@media (min-width: 640px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.65rem; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .perk-grid { grid-template-columns: repeat(2, 1fr); }
  .town-grid { grid-template-columns: repeat(4, 1fr); }
  .town-tile { height: 136px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .forecast-note { display: block; }

  .watch-grid { grid-template-columns: 14rem 1fr; align-items: start; }
  .watch-player { margin: 0; }
  .stop-card-inner { display: flex; gap: 14px; }
  .stop-media { width: 130px; height: auto; border-radius: 10px; overflow: hidden; flex-shrink: 0; align-self: stretch; min-height: 96px; }
  .stop-media .scene { height: 100%; }
  .stop-body { flex: 1; }
}

/* --- ≥ 768px (tablet / small laptop) ------------------------------------------ */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .main-nav { display: flex; }
  .header-cta-mobile { display: none; }
  .site-header-inner { height: 64px; }
  .chat-composer { bottom: 0; }
  .toast { bottom: 30px; }

  .wrap { padding: 0 24px; }
  .chip-rail { margin: 0; padding: 4px 0; flex-wrap: wrap; overflow: visible; }
  .card-rail { margin: 0; padding: 4px 0 10px; }

  .hero-inner { padding: 70px 0 44px; }
  .hero h1 { font-size: 3.1rem; }

  .pillars { grid-template-columns: repeat(4, 1fr); }
  .pillar { padding: 18px; }

  .weather-card { display: flex; gap: 24px; padding: 26px; }
  .weather-main { flex: 1; }
  .weather-side { width: 240px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; position: relative; }
  .weather-side .scene { position: absolute; inset: 0; height: 100%; }

  .trust-band { padding: 36px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
  .trust-stats { margin: 0; }

  .plan-layout { display: grid; grid-template-columns: 21rem 1fr; gap: 28px; align-items: start; }
  .plan-prefs { position: sticky; top: 80px; }

  .place-layout { display: grid; grid-template-columns: 1fr 16.5rem; gap: 28px; align-items: start; }
  .place-aside { position: sticky; top: 80px; }

  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .perk-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .hype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .clip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .clip-grid-5 { grid-template-columns: repeat(5, 1fr); }

  .live-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }

  .itinerary-hero { height: 280px; }
  .itinerary-layout { display: grid; grid-template-columns: 1fr 15.5rem; gap: 28px; align-items: start; }
  .action-bar { top: 64px; margin: 0 0 8px; padding: 10px 0; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* --- ≥ 1024px (desktop) ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .explore-layout { grid-template-columns: 1fr 19rem; align-items: start; }
  .map-panel {
    display: block; position: sticky; top: 80px;
    height: 540px; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-card); background: var(--soft-green);
  }
  .map-panel svg { width: 100%; height: 100%; }
  .map-tip {
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    background: rgba(255,255,255,0.95); border-radius: var(--radius-sm);
    padding: 10px 13px; box-shadow: var(--shadow-lift);
  }
  .map-tip strong { display: block; font-family: var(--font-display); font-size: 0.9rem; }
  .map-tip span { font-size: 0.72rem; color: var(--ink-faint); }

  .explore-results .card-grid { grid-template-columns: repeat(2, 1fr); }

  .hero h1 { font-size: 3.6rem; }
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- Reduced motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}