/* ============================================================
   🔹 MEDIA QUERIES
   ============================================================ */

@media (max-width: 768px) {
  header {
    height: 70px;
    padding: 8px 20px;
  }

  .logo {
    max-height: 40px;
    width: auto;
    margin-top: 2px;
  }

  nav a {
    margin-left: 12px;
    font-size: 12px;
  }

  .hero { height: 80vh; }

  .studio-layout { gap: 25px; margin-top: 30px; }

  .spot { width: 65px; height: 40px; border-radius: 6px; }

  .spot.occupied::after { font-size: 22px; }
}

@media (max-width: 400px) {
  header {
    height: 65px;
    padding: 6px 15px;
  }

  .logo { max-height: 35px; }

  nav a { margin-left: 8px; font-size: 11px; }

  .spot { width: 55px; height: 35px; }
}