/* ===================================
   Engadina Now - Responsive Breakpoints
   Mobile First Design
   =================================== */

/* ===== Base styles are for mobile (320px+) ===== */

/* ===== Small phones (< 375px) ===== */
@media (max-width: 374px) {
  :root {
    --text-hero: 28px;
    --text-xlarge: 20px;
    --card-padding: 16px;
  }

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

/* ===== Tablets (768px+) ===== */
@media (min-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .app-container {
    max-width: 768px;
    margin: 0 auto;
    padding-top: var(--header-height);
  }

  .section {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
  }

  .section-title {
    font-size: var(--text-xlarge);
    margin-bottom: var(--space-2xl);
  }

  /* Keep vertical layout for weather cards */
  .weather-list {
    gap: var(--space-lg);
  }

  /* Grid layout for pass cards */
  .pass-status-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* Hero card adjustments */
  .hero-card {
    padding: var(--space-3xl) var(--space-2xl);
  }

  /* Better touch targets on tablet */
  .weather-card-compact,
  .pass-card,
  .alert-card {
    transition: transform var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth);
  }
}

/* ===== Desktop (1024px+) ===== */
@media (min-width: 1024px) {
  :root {
    --header-height: 72px;
  }

  .app-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: var(--header-height);
  }

  .section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
  }

  /* Bottom nav centered on desktop */
  .bottom-nav {
    left: 50%;
    transform: translateX(-50%);
    max-width: 700px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 16px rgba(76, 144, 164, 0.15);
  }

  /* Hover states only on desktop */
  .weather-card-compact:hover,
  .pass-card:hover,
  .alert-card:hover {
    cursor: pointer;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(76, 144, 164, 0.15);
  }

  /* Better spacing for cards - keep vertical */
  .weather-list {
    gap: var(--space-xl);
  }

  .pass-status-list {
    gap: var(--space-xl);
  }
}

/* ===== Large Desktop (1280px+) ===== */
@media (min-width: 1280px) {
  .app-container {
    width: 100%;
    max-width: none;
  }

  .section {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-2xl);
  }

  /* Keep vertical layout for weather cards on large screens */
  .weather-list {
    gap: var(--space-2xl);
  }

  .pass-status-list {
    gap: var(--space-2xl);
  }

  /* Larger text for better readability */
  .section-title {
    font-size: var(--text-xlarge);
  }
}

/* ===== Extra Large Desktop (1440px+) ===== */
@media (min-width: 1440px) {
  .app-container {
    width: 100%;
    max-width: none;
  }

  .section {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-4xl) var(--space-3xl);
  }

  .bottom-nav {
    max-width: 800px;
  }
}

/* ===== Landscape Mobile (height < 500px) ===== */
@media (max-height: 500px) {
  .hero-card {
    padding: var(--space-lg) var(--space-lg);
  }

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

  .section-title {
    font-size: var(--text-body);
    margin-bottom: var(--space-md);
  }
}

/* ===== High DPI Displays ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders on retina displays */
  .weather-card-compact,
  .pass-card,
  .alert-card,
  .hero-card {
    border-width: 0.5px;
  }
}

/* ===== Dark Mode Support (Future) ===== */
@media (prefers-color-scheme: dark) {
  /* Note: Dark mode tokens not implemented yet */
  /* This is a placeholder for future dark mode support */
}

/* ===== Print Styles ===== */
@media print {
  .bottom-nav {
    display: none;
  }

  .section {
    display: block !important;
    page-break-inside: avoid;
  }

  .card-lift:hover {
    transform: none;
  }
}