/* Hotel style inspiration (2026-10-29): a wall of real hotel-room photos that open full size.
   Hero and the closing contact band keep their styles from hotel-style-inspiration.css. */
.hg-section { padding: 48px 0 72px; background: #f7f3ec; }
.hg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hg-tile { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: #e8e1d5; cursor: zoom-in; aspect-ratio: 4 / 3; }
.hg-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.hg-tile:hover img, .hg-tile:focus-visible img { transform: scale(1.04); }
.hg-tile:focus-visible { outline: 2px solid #b07c44; outline-offset: 2px; }

.hg-viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 12, 10, .94); color: #f3efe6; }
.hg-viewer::backdrop { background: rgba(14, 12, 10, .94); }
.hg-viewer[open] { display: grid; place-items: center; }
.hg-viewer figure { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 56px 72px 20px; }
.hg-viewer img { display: block; max-width: min(1400px, calc(100vw - 144px)); max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 4px; }
.hg-viewer figcaption { display: flex; gap: 18px; color: rgba(243, 239, 230, .72); font-size: 13px; }
.hg-close, .hg-nav { position: fixed; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(243, 239, 230, .12); color: #f3efe6; font-size: 28px; line-height: 1; cursor: pointer; }
.hg-close { top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; width: 44px; height: 44px; }
.hg-nav { top: 50%; width: 52px; height: 52px; transform: translateY(-50%); font-size: 34px; }
.hg-prev { left: 16px; }
.hg-next { right: 16px; }
.hg-close:hover, .hg-nav:hover { background: rgba(243, 239, 230, .24); }
.hg-close:focus-visible, .hg-nav:focus-visible { outline: 2px solid #d4a35d; outline-offset: 2px; }

@media (max-width: 1100px) { .hg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hg-section { padding: 28px 0 48px; }
  .hg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hg-viewer figure { padding: 60px 8px 76px; }
  .hg-viewer img { max-width: calc(100vw - 16px); max-height: calc(100dvh - 150px); }
  .hg-nav { top: auto; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: none; }
  .hg-prev { left: calc(50% - 64px); }
  .hg-next { right: calc(50% - 64px); }
}
@media (prefers-reduced-motion: reduce) { .hg-tile img { transition: none; } }