/* ==========================================================================
   Responsive layers. Mobile -> tablet -> desktop -> large TV.
   The base stylesheet is written desktop-first for the kiosk, so these
   blocks mostly simplify the grid downward.
   ========================================================================== */

/* ---------- Large desktop / TV: give the map more room ---------- */
@media (min-width: 1600px) {
  .dash { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .schedule__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 2200px) {
  :root { --gap: 1.35rem; --pad: 1.9rem; }
  .dash { max-width: 3400px; margin: 0 auto; }
  .schedule__body { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Tablet / small laptop ---------- */
@media (max-width: 1100px) {
  .dash {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "hero"
      "cards"
      "map"
      "schedule"
      "legal";
  }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .hero__clockwrap { order: 2; }
  .map-stage svg { max-height: 52vh; }
  .topbar { grid-template-columns: auto 1fr; row-gap: .5rem; }
  .topbar__meta { grid-column: 1 / -1; justify-content: space-between; }
  .clock { text-align: left; }
  .clock__zone { justify-content: flex-start; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  :root { --ticker-h: 52px; }

  .topbar { grid-template-columns: 1fr; justify-items: start; text-align: left; }
  .topbar__meta { width: 100%; gap: .5rem; }
  .topbar__h1 { font-size: 1.35rem; }
  .topbar__h1-icon { width: 1.35em; height: 1.35em; }
  .clock__time { font-size: 1.2rem; }

  .countdown { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .cd-box { padding: .55rem .2rem .45rem; }
  .cd-box__num { font-size: clamp(1.5rem, 9vw, 2.6rem); }
  .cd-box__label { font-size: .5rem; letter-spacing: .1em; }

  .countdown.is-dateonly { grid-template-columns: minmax(0, 1fr); }

  .hero__carrier { font-size: 1.6rem; }
  .hero__service { font-size: 1rem; }

  .dcard { grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
  .dcard__days { font-size: 1.7rem; }

  .map-stage svg { max-height: 44vh; }
  .map-tip { max-width: min(260px, 82vw); font-size: .74rem; }

  .schedule__body { grid-template-columns: minmax(0, 1fr); }
  .svc-table th:nth-child(3), .svc-table td:nth-child(3) { display: none; }

  .ticker__store { display: none; }
  .store-card { grid-template-columns: minmax(0, 1fr); }

  .modal__dialog { padding: 1rem; max-height: 92vh; }
  .set-row { grid-template-columns: minmax(0, 1fr); }
  .set-row > :last-child { justify-self: start; }
}

@media (max-width: 420px) {
  .topbar__year { display: none; }
  .carrier-filter { width: 100%; }
  .chip { flex: 1 1 auto; text-align: center; }
}

/* ---------- Short landscape (phones held sideways) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --topbar-h: 58px; --ticker-h: 42px; }
  .map-stage svg { max-height: 60vh; }
}

/* ---------- Print: a staff-friendly one-pager ---------- */
@media print {
  body { background: #fff; color: #111; }
  .snow-canvas, .ticker, .icon-btn, .carrier-filter, .map-panel, .modal, .skip-link { display: none !important; }
  .panel { box-shadow: none; border: 1px solid #ccc; background: #fff; }
  .dash { grid-template-columns: 1fr; grid-template-areas: "hero" "cards" "schedule" "legal"; padding-bottom: 0; }
  .topbar { background: #fff; }
  .topbar__h1, .hero__carrier, .panel__title, .dcard__carrier, .svc-name { color: #000079; }
  .dcard, .svc-table td, .carrier-block { color: #111; }
  .dcard__service, .hero__service { color: #b8000a; }
  .panel__note, .dcard__date, .dcard__note, .svc-meta, .disclaimer__text, .disclaimer__meta { color: #444; }
}