/* ==========================================================================
   Layout — Responsive Grid, Breakpoints, Map Container
   ICE Out PWA
   ========================================================================== */

/* ---------- Breakpoints Reference ----------
   xs:  0–479px     (phones, portrait)
   sm:  480–767px   (phones, landscape / small tablets)
   md:  768–1023px  (tablets)
   lg:  1024–1439px (small desktops / landscape tablets)
   xl:  1440px+     (large desktops)
   ------------------------------------------------ */

/* ---------- App Shell Layout ---------- */

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Main content area — fills space between header/banner and nav */
.app-main {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* ---------- View Panels ---------- */

.view-panel {
  display: none;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.view-panel.active {
  display: block;
}

/* ---------- Map Container ---------- */

.map-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: var(--z-map);
}

#map {
  width: 100%;
  height: 100%;
}

/* ---------- Staleness Banner ---------- */

.staleness-banner {
  position: relative;
  z-index: var(--z-banner);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-warning);
  color: var(--color-text-inverse);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.staleness-banner__refresh {
  padding: 2px var(--space-sm);
  border: 1px solid var(--color-text-inverse);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
}

.staleness-banner__refresh:hover,
.staleness-banner__refresh:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.staleness-banner[hidden] {
  display: none;
}

/* ---------- Bottom Navigation ---------- */

.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 56px;
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-surface);
  z-index: var(--z-nav);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  flex: 1;
  height: 100%;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-decoration: none;
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav__item:hover,
.bottom-nav__item:focus-visible {
  color: var(--color-text);
  text-decoration: none;
}

.bottom-nav__item.active {
  color: #ee5570; /* Lightened from --color-primary for WCAG AA contrast (4.67:1 on --color-bg-light) */
}

.bottom-nav__icon {
  width: 24px;
  height: 24px;
}

/* ---------- Content Containers ---------- */

.container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-md);
}

.container--wide {
  max-width: 960px;
}

.container--full {
  max-width: none;
}

/* ---------- Disclaimer Footer ---------- */

.disclaimer {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-light);
  border-top: 1px solid var(--color-surface);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------- Landing Page Layout ---------- */

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}

.landing__hero {
  max-width: 480px;
  margin-bottom: var(--space-xl);
}

.landing__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-md);
}

.landing__tagline {
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
}

.landing__description {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

/* ---------- Card Layout ---------- */

.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.card + .card {
  margin-top: var(--space-md);
}

/* ---------- Grid Utilities ---------- */

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid--2 {
  grid-template-columns: 1fr;
}

/* ---------- Responsive: xs (320px minimum support) ---------- */

@media (max-width: 359px) {
  .container {
    padding: var(--space-sm);
  }

  .landing__title {
    font-size: var(--font-size-xl);
  }

  .landing__description {
    font-size: var(--font-size-base);
  }

  .landing__tagline {
    font-size: var(--font-size-base);
  }

  .bottom-nav__item {
    font-size: 10px;
    gap: 2px;
  }

  .bottom-nav__icon {
    width: 20px;
    height: 20px;
  }
}

/* ---------- Responsive: sm (480px+) ---------- */

@media (min-width: 480px) {
  .landing__title {
    font-size: calc(var(--font-size-2xl) * 1.25);
  }

  .container {
    padding: var(--space-lg);
  }
}

/* ---------- Responsive: md (768px+) ---------- */

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .container {
    padding: var(--space-xl);
  }

  .bottom-nav {
    height: 64px;
  }

  .bottom-nav__item {
    font-size: var(--font-size-sm);
  }
}

/* ---------- Responsive: lg (1024px+) ---------- */

@media (min-width: 1024px) {
  /* Side-by-side layout: map + panel */
  .app-shell--desktop {
    flex-direction: row;
  }

  .app-shell--desktop .app-main {
    flex: 2;
  }

  .app-shell--desktop .side-panel {
    flex: 1;
    max-width: 400px;
    border-left: 1px solid var(--color-surface);
    overflow-y: auto;
  }

  /* Move nav to a sidebar on large screens */
  .bottom-nav--desktop {
    flex-direction: column;
    width: 72px;
    height: 100%;
    border-top: none;
    border-right: 1px solid var(--color-surface);
  }
}

/* ---------- Responsive: xl (1440px+) ---------- */

@media (min-width: 1440px) {
  .container {
    max-width: 720px;
  }

  .container--wide {
    max-width: 1200px;
  }
}

/* ---------- Safe Area (notch / pill) ---------- */

@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-shell {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}