@media (max-width: 1024px) {
  .location-content,
  .contact-content {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  
  .rooms-grid {
    grid-template-columns: 1fr;
  }
  
  .amenities-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-4);
  }
  
  .nav {
    padding: 0 var(--space-4);
    height: 70px;
  }
  
  .nav-actions {
    display: none;
  }
  
  .nav-weather {
    position: static;
    transform: none;
    order: -1;
    margin-bottom: var(--space-2);
  }
  
  .nav {
    flex-direction: column;
    height: auto;
    padding: var(--space-4);
  }
  
  .hero {
    padding-top: 70px;
  }

  .hero-weather {
    margin-top: var(--space-4);
  }
  
  .title-main {
    font-size: var(--font-size-4xl);
  }
  
  .title-sub {
    font-size: var(--font-size-xl);
  }
  
  .section-title {
    font-size: var(--font-size-4xl);
  }
  
  .hero-cta {
    flex-direction: column;
  }
  
  .rooms-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

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

  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-brand {
    flex-direction: column;
    text-align: center;
  }

  .footer-info {
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }

  .lightbox-close {
    top: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
  }

  .lightbox-content {
    padding: var(--space-12) var(--space-4);
  }

  .lightbox-swiper {
    max-height: 80vh;
  }

  .lightbox-swiper .swiper-slide img {
    max-height: 80vh;
  }

  .lightbox-swiper .swiper-button-prev,
  .lightbox-swiper .swiper-button-next {
    width: 44px;
    height: 44px;
  }

  .lightbox-swiper .swiper-button-prev::after,
  .lightbox-swiper .swiper-button-next::after {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 480px) {
  .hero {
    padding-top: 100px;
  }
  
  .title-main {
    font-size: var(--font-size-3xl);
  }
  
  .section-title {
    font-size: var(--font-size-3xl);
  }

  .cta-primary {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
  }
  
  .cta-primary.large {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-lg);
  }
}