/* ============================================================
   RESPONSIVE — mobile-first additions & overrides
   ============================================================ */

/* ---- LANG TOGGLE ---- */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-opt {
  padding: 6px 11px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  border: none;
  background: none;
}
.lang-opt + .lang-opt {
  border-left: 1px solid rgba(255,255,255,0.12);
}
.lang-opt.active {
  background: var(--gold);
  color: var(--dark);
}
.lang-opt:hover:not(.active) {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

/* Mobile lang toggle inside menu */
.mobile-lang {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.mobile-lang .lang-opt {
  font-size: 1rem;
  padding: 10px 20px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  color: rgba(255,255,255,0.5);
}
.mobile-lang .lang-opt.active {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}

/* ---- RESPONSIVE GRID FIXES ---- */

/* Rooms grid on medium screens */
@media (max-width: 860px) {
  .rooms-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

  /* Inline room cards (rooms.html) go single column */
  .room-card[style*="grid-template-columns:1fr 1fr"],
  .room-card[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .room-card [style*="order:1"] { order: 0 !important; }

  /* Room detail page */
  div[style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Gallery on small screens */
@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr !important;
  }
  .gallery-item[style*="grid-column:span 2"],
  .gallery-item[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
    min-height: 200px !important;
  }
}

/* Contact grid */
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
}

/* About grid */
@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-visual { min-height: 240px; }
}

/* Stats grid */
@media (max-width: 500px) {
  .about-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}

/* Attraction items */
@media (max-width: 640px) {
  .attraction-item {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 28px 24px !important;
  }
  .attraction-item__num { font-size: 1.6rem !important; }
}

/* Booking bar */
@media (max-width: 720px) {
  .booking-bar__inner {
    flex-direction: column !important;
  }
  .booking-bar__field {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    width: 100% !important;
    padding: 16px 20px !important;
  }
  .booking-bar__btn {
    width: 100% !important;
    min-height: 56px !important;
    font-size: 0.85rem !important;
  }
}

/* Footer grid */
@media (max-width: 800px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .footer__grid > div:first-child {
    grid-column: span 2 !important;
  }
}
@media (max-width: 500px) {
  .footer__grid {
    grid-template-columns: 1fr !important;
  }
  .footer__grid > div:first-child {
    grid-column: span 1 !important;
  }
  .footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

/* Info card grid */
@media (max-width: 540px) {
  .info-grid {
    grid-template-columns: 1fr !important;
  }
  .info-card { padding: 32px 24px !important; }
}

/* Hero actions */
@media (max-width: 400px) {
  .hero__actions {
    flex-direction: column !important;
    align-items: center !important;
  }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* Page hero */
@media (max-width: 640px) {
  .page-hero { padding: 110px 0 56px !important; }
  .page-hero h1 { font-size: 2rem !important; }
}

/* Section padding on mobile */
@media (max-width: 640px) {
  .section { padding: 48px 0 !important; }
  .container { padding: 0 16px !important; }
  h2 { font-size: 1.5rem !important; }
}

/* Navbar mobile */
@media (max-width: 768px) {
  .navbar__nav,
  .navbar__book { display: none !important; }
  .navbar__hamburger { display: flex !important; }
  /* Show lang toggle in mobile nav instead */
  .navbar .lang-toggle { display: none !important; }
}
@media (min-width: 769px) {
  .mobile-lang { display: none !important; }
}

/* Form row on mobile */
@media (max-width: 580px) {
  .form__row {
    grid-template-columns: 1fr !important;
  }
}

/* Room features wrap nicely */
.room-card__features { flex-wrap: wrap; }

/* Map on mobile */
@media (max-width: 640px) {
  .map-container { height: 240px !important; }
}

/* CTA buttons row */
@media (max-width: 440px) {
  div[style*="display:flex"][style*="gap:16px"][style*="justify-content:center"] {
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* Print */
@media print {
  .navbar, .mobile-nav, .hero__scroll, .booking-bar { display: none !important; }
  .page-hero { padding: 24px 0 !important; }
  body { font-size: 11pt; }
}