/* =========================================================================
   Responsive breakpoints
   Narrow phones: < 360px (base styles in styles.css)
   Mobile: 360–767px
   Tablet: 768–1023px
   Desktop: >= 1024px
   ========================================================================= */

/* ---------- Tablet ---------- */

/* ---------- Narrow phones (below 360px) ---------- */
/* The base rules drop the tab icons so all three tabs fit a 320px screen;
   every phone from 360px up gets them back. */
@media (min-width: 360px) {
  .main-tab-icon { display: inline-flex; }
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-6); }

  #hero-root, .hero { min-height: 240px; }
  .hero-content { padding: var(--space-8) var(--space-6) var(--space-7); }

  .day-nav-list { overflow-x: visible; flex-wrap: wrap; }

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

  .timeline-item { grid-template-columns: 64px 20px 1fr; }
  .timeline-item::before { left: 73px; }

  /* Park days keep their time column collapsed at every width. */
  .timeline--no-time .timeline-item { grid-template-columns: 20px 1fr; }
  .timeline--no-time .timeline-item::before { left: 9.5px; }

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

/* ---------- Desktop ---------- */

@media (min-width: 1024px) {
  .utility-bar-inner, .main-tabs-bar .container, .tab-panel { padding-inline: var(--space-7); }

  #hero-root, .hero { min-height: 300px; }
  #main-tabs-root { min-height: 57px; }
  .hero-title { font-size: 38px; }

  .main-tabs { gap: var(--space-4); }
  .main-tab { font-size: 15px; padding-inline: var(--space-3); }

  .restaurant-grid { grid-template-columns: repeat(3, 1fr); }
  .restaurant-grid--nearby { grid-template-columns: repeat(2, 1fr); max-width: 620px; }

  .timeline-item { grid-template-columns: 72px 20px 1fr; }
  .timeline-item::before { left: 81px; }
  .detail-content { max-width: 640px; }

  .timeline-media { width: 68px; height: 68px; }

  .hotel-list { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: var(--space-4); }
}

@media (min-width: 1280px) {
  .day-section { display: grid; grid-template-columns: minmax(0, 720px) 1fr; column-gap: var(--space-8); align-items: start; }
  .day-header { grid-column: 1 / -1; }
  /* The briefing spans both columns, otherwise it takes the wide column on
     its own and strands the weather card halfway down an empty right side. */
  .briefing-card { grid-column: 1 / -1; grid-row: 2; }
  .weather-card {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
    align-self: start;
    position: sticky;
    top: calc(var(--utility-bar-height, 47px) + var(--main-tabs-height, 49px) + var(--day-nav-height, 64px) + var(--space-4));
  }
  .timeline { grid-column: 1; grid-row: 3; }
}