/* SkyCast Weather responsive refinements */
@media (max-width: 1280px) {
  .container { max-width: 1120px; }
}

@media (max-width: 1024px) {
  .navbar { gap: 18px; }
  .nav-links { gap: 18px; }
  .u-style-017,
  .u-style-020 { grid-template-columns: repeat(4, 1fr); }
  .forecast-day { min-width: 0; }
}

@media (max-width: 980px) {
  .nav-has-dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 12px 0; }
  .nav-dropdown {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav-has-dropdown.open .nav-dropdown { display: block; }
}

@media (max-width: 768px) {
  .container { padding-inline: 20px; }
  h1 { font-size: 2.35rem; }
  h2 { font-size: 1.85rem; }
  .u-style-017,
  .u-style-020 { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { grid-template-columns: 1fr; }
  .weather-card-main { padding: 24px; }
  .footer-bottom { gap: 10px; text-align: center; }
}

@media (max-width: 425px) {
  .container { padding-inline: 16px; }
  .btn { width: 100%; padding-inline: 18px; white-space: normal; }
  .hero-actions { width: 100%; }
  .search-card { padding: 12px; }
  .card { border-radius: var(--r-md); }
  .u-style-017,
  .u-style-020 { grid-template-columns: 1fr; }
  .back-to-top { right: 16px; bottom: 16px; }
}

@media (max-width: 320px) {
  h1 { font-size: 2rem; }
  .brand { font-size: 0.95rem; }
  .city-body, .news-body { padding: 18px; }
}