@import 'variables.css';
@import 'canvas-bg.css';
@import 'components.css';
@media (max-width:1200px){
  .hero,.metrics-card,.rain-card,.hourly-card,.aqi-card{grid-column:span 12}
  .daily-list{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:768px){
  .wrap{padding:20px 16px 70px}
  .dashboard{gap:18px}
  .hero,.metrics-card,.rain-card,.hourly-card,.aqi-card,.daily-card{padding:24px}
  .daily-list{grid-template-columns:repeat(3,1fr)}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .topbar{flex-direction:column;align-items:stretch}
  .rain-chart{height:160px}
  .hero-temp{font-size:clamp(70px,18vw,120px)}
}
@media (max-width:480px){
  .daily-list{grid-template-columns:repeat(2,1fr)}
  .rain-chart{height:140px}
  .hero-stats{grid-template-columns:1fr;gap:8px}
}