/* Mehmonxona rasmlari sahifasi. Saytning umumiy tili: ravoq, Sora, yulduz naqshi
   styles.css dan keladi — bu yerda faqat galereya. Prefiks .g- / .mx- to'qnashuvni oldini oladi. */

.g-topbar { max-width: 1180px; margin: 0 auto 20px; display: flex; justify-content: center }
.g-topbar .back { text-decoration: none }

/* Mehmonxonani almashtirish tablari */
.g-tablar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; margin: 0 auto 22px }
.g-tab {
  border: 1.5px solid #E0D6C6; background: #fff; color: #6B5F50; cursor: pointer;
  border-radius: 999px; padding: 10px 18px;
  font-family: var(--fd); font-weight: 700; font-size: 13px; letter-spacing: .2px;
  transition: background .15s, color .15s, border-color .15s;
}
.g-tab:hover { border-color: var(--brand) }
.g-tab.faol { background: var(--brand); border-color: var(--brand); color: #151007; box-shadow: 0 3px 0 var(--brand-d) }
.g-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }

.mx { max-width: 980px; margin: 0 auto }
.mx-head { text-align: center; margin: 4px 0 18px }
.mx-head h2 { font-family: var(--fd); font-weight: 800; font-size: 24px; letter-spacing: .4px; color: #262320 }
.mx-head p { font-family: var(--fb); font-weight: 700; color: #8A6300; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; margin-top: 5px }

/* Bosh rasm — ravoq. Tugma sifatida: bosilsa lightbox ochiladi. */
.g-hero {
  display: block; width: 100%; border: 0; padding: 0; margin: 0 0 12px;
  cursor: zoom-in; border-radius: 150px 150px 22px 22px; overflow: hidden;
  box-shadow: 0 14px 32px rgba(40, 30, 20, .18); background: none;
}
.g-hero img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover }

/* Masonry: columns turli nisbatdagi rasmlarni qirqmasdan teradi. */
.gal { columns: 3 240px; column-gap: 10px }
.g-item {
  display: block; width: 100%; border: 0; padding: 0; margin: 0 0 10px;
  cursor: zoom-in; break-inside: avoid; border-radius: 16px; overflow: hidden; background: none;
}
.g-item img { width: 100%; display: block; transition: transform .25s ease }
.g-ochish:hover img { transform: scale(1.03) }
.g-ochish:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px }

/* ---------- lightbox ---------- */
.g-lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible }
.g-lb::backdrop { background: rgba(22, 17, 10, .9) }
.g-lb img { max-width: 94vw; max-height: 86vh; display: block; margin: 0 auto; border-radius: 14px }
.g-nav {
  position: fixed; z-index: 2; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--brand); color: #151007; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--brand-d);
  font-family: var(--fb);
}
.g-nav:hover { transform: scale(1.06) }
.g-oldingi { left: 14px; top: 50% ; transform: translateY(-50%) }
.g-keyingi { right: 14px; top: 50%; transform: translateY(-50%) }
.g-oldingi:hover, .g-keyingi:hover { transform: translateY(-50%) scale(1.06) }
.g-yopish { right: 14px; top: 14px; font-size: 20px }

@media (max-width: 640px) {
  .g-tab { font-size: 12px; padding: 9px 14px }
  .g-hero { border-radius: 64px 64px 16px 16px }
  .g-hero img { aspect-ratio: 4/3 }
  .gal { columns: 2 140px; column-gap: 8px }
  .g-item { margin-bottom: 8px; border-radius: 12px }
  .g-nav { width: 40px; height: 40px }
}