/* ============================================================
   Growniti Travel — responsive layer
   The base sheet is mobile-first (360 px and up). This file only
   handles genuine layout changes at wider widths, plus a couple
   of narrow-phone and input-modality refinements.
   Checked at 360 / 768 / 1024 / 1440.
   ============================================================ */

/* ---------- Very narrow phones (320–359 px) ---------- */
@media (max-width: 480px) {
  /* Traveller lines like "2 adults, 1 child, older traveller" need the
     full width on a phone rather than half of it. */
  .overview-facts { grid-template-columns: 1fr 1fr; }
  .overview-facts > div:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 359px) {
  :root { --pad-x: 14px; }
  .brand-lockup { height: 38px; }
  .brand-tag { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .stepper-row { grid-template-columns: 1fr; }
  .overview-facts { grid-template-columns: 1fr; }
  .indicators { grid-template-columns: 1fr; }
  .day-number { width: 46px; height: 46px; }
  .stop-node { width: 48px; }
  .stop-time { min-width: 48px; font-size: 0.74rem; }
  .timeline::before { left: calc(var(--pad-x) + 23px); }
}

/* ---------- Large phones (480 px+) ---------- */
@media (min-width: 480px) {
  .skeleton-grid { grid-template-columns: 1fr 1fr; }
  .sk-panel { grid-column: 1 / -1; }
  .overview-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Tablet (768 px+) ---------- */
@media (min-width: 768px) {
  html { scroll-padding-top: 88px; }

  .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
  .segmented { grid-template-columns: repeat(3, 1fr); }
  .segmented-3 { grid-template-columns: repeat(3, 1fr); }

  .indicators { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overview-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-md); }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .source-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-actions .btn { flex: 0 0 auto; }
  .routeline { height: 116px; }

  /* Stops become image-beside-text on tablet and up */
  .stop {
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas: "rail media";
    align-items: start;
    gap: var(--gap);
  }
  .stop-rail { grid-area: rail; align-items: flex-start; }
  .stop-media { grid-area: media; aspect-ratio: 4 / 3; }
  .stop--break { grid-template-columns: 1fr; grid-template-areas: "rail"; }
  .stop-time { margin-top: 2px; }

  .footer-top { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; }
  .footer-links { justify-content: flex-end; }

  .fav-list { grid-template-columns: 1fr 1fr; }
  .legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-md) var(--gap-lg); }
}

/* ---------- Desktop nav (900 px+) ---------- */
@media (min-width: 900px) {
  .brand-lockup { height: 50px; }
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: flex; align-items: center; gap: 4px;
    padding: 0; background: none; border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  }
  .site-nav a { padding: 9px 14px; font-size: 0.92rem; }
  .nav-cta { padding: 10px 20px !important; margin: 0 0 0 8px; border-radius: var(--r-pill); }

  .header-inner { min-height: 74px; }
}

/* ---------- Laptop (1024 px+) ---------- */
@media (min-width: 1024px) {
  .hero-inner { max-width: 900px; }

  /* The form stays one column and is capped instead: a 1180 px wide
     input row is harder to scan than a narrow, well-spaced one. */
  #planner .section-head,
  .planner-card { max-width: 880px; margin-inline: auto; }

  .overview { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; }
  .overview-weather {
    padding-left: var(--gap-md);
    border-left: 1px solid var(--line);
  }

  .indicators { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .legal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .source-grid { grid-template-columns: repeat(4, 1fr); }

  .stop { grid-template-columns: minmax(0, 1fr) 260px; }
  .weather-strip { flex-wrap: wrap; overflow: visible; }
  .weather-day { flex: 1 1 68px; }
}

/* ---------- Large desktop (1440 px+) ---------- */
@media (min-width: 1440px) {
  :root { --shell: 1280px; }
  body { font-size: 17px; }
  .days { gap: var(--gap-lg); }
  .stop { grid-template-columns: minmax(0, 1fr) 300px; }
  .hero { padding-block: 128px 72px; }
}

/* ---------- Pointer-precision refinements ---------- */
@media (hover: none) {
  /* Nothing on a touch screen should depend on hover to be discoverable */
  .btn:hover, .pill:hover, .icon-btn:hover, .steps li:hover, .chip span:hover { transform: none; }
}

@media (any-pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .combo-list li { padding: 14px; }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-block: 32px 24px; }
  .routeline { display: none; }
  .site-nav { max-height: 70vh; overflow-y: auto; }
}

/* ---------- High-contrast / forced colours ---------- */
@media (forced-colors: active) {
  .btn, .pill, .chip span, .seg span, .day-card, .overview { border: 1px solid CanvasText; }
  .grad { color: CanvasText; -webkit-text-fill-color: CanvasText; }
}