/* ==========================================================================
   responsive.css — mobile-first breakpoint overrides
   Breakpoints: <640 mobile · 640–1023 tablet · 1024+ desktop (default above)
   ========================================================================== */

/* ----- Tablet and below (<= 1023px) ----- */
@media (max-width: 1023px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .sun-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-temp { font-size: var(--fs-3xl); }
  .hero-icon { width: 88px; height: 88px; }
}

/* ----- Mobile navigation switch (<= 860px) ----- */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav:not([hidden]) { display: flex; }
}

/* ----- Mobile (<= 639px) ----- */
@media (max-width: 639px) {
  :root {
    --header-height: 64px;
  }

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

  .hero { padding-block: var(--space-8) var(--space-7); }
  .hero-content { margin-top: var(--space-7); }

  .search-bar { padding-left: var(--space-4); }
  .search-submit { padding-inline: var(--space-4); font-size: var(--fs-xs); }

  .hero-primary {
    flex-direction: column;
    gap: var(--space-3);
  }
  .hero-temp-block { text-align: center; }
  .hero-temp { font-size: var(--fs-2xl); }
  .hero-icon { width: 72px; height: 72px; }

  .hero-actions { gap: var(--space-2); }
  .hero-actions .btn { padding-inline: var(--space-4); font-size: var(--fs-xs); }

  .metrics-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .metric-card { padding: var(--space-4); }
  .metric-value { font-size: var(--fs-lg); }

  .sun-grid { grid-template-columns: 1fr; gap: var(--space-3); }

  .section-heading { flex-direction: column; align-items: flex-start; gap: var(--space-1); }

  .forecast-track { grid-auto-columns: minmax(120px, 1fr); }

  .footer-inner { padding-inline: var(--space-4); }
}

/* ----- Small phones (<= 380px) ----- */
@media (max-width: 380px) {
  .brand-name { display: none; }
  .metrics-grid { grid-template-columns: 1fr; }
}

/* ----- Large desktop refinement (>= 1280px) ----- */
@media (min-width: 1280px) {
  .metrics-grid { grid-template-columns: repeat(4, 1fr); }
}