/* An open hotel is a photographic spread, with one gallery and quiet facts. */
#hotel-dialog { width:min(var(--hotel-dialog-width),calc(100% - 48px)); max-width:none; max-height:94dvh; border-radius:28px; background:var(--catalog-panel); box-shadow:var(--shadow-dialog); }
#hotel-title:focus { outline:none; }
#hotel-dialog .dialog-top { padding:16px var(--hotel-dialog-space) 10px; min-height:72px; background:var(--catalog-panel); gap:16px; z-index:3; }
#hotel-dialog .dialog-top > span { font-size:12px; letter-spacing:.08em; color:var(--catalog-muted); }
.dialog-actions { display:flex; align-items:center; gap:12px; }
#hotel-dialog .dialog-actions button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; color:var(--catalog-ink); background:transparent; font:500 13px/1 var(--catalog-reading); }
#hotel-dialog svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#hotel-dialog #share-hotel { padding:8px 12px; border-radius:24px; }
#hotel-dialog #close-hotel { width:44px; padding:0; border-radius:50%; background:var(--catalog-paper); }
#hotel-dialog .share-status { position:absolute; top:64px; right:var(--hotel-dialog-space); padding:10px 16px; margin:0; background:var(--catalog-ocean); color:var(--white); border-radius:12px; font-size:13px; box-shadow:var(--shadow-photo); }
#hotel-dialog .share-status:empty { display:none; }
#hotel-dialog .hotel-detail { display:block; padding:8px var(--hotel-dialog-space) 28px; }
.hotel-intro { margin:0 0 26px; }
#hotel-dialog .hotel-intro h2 { max-width:30ch; margin:0 0 14px; font:400 var(--hotel-heading-size)/1.12 var(--catalog-display); letter-spacing:-.035em; text-wrap:balance; }
.hotel-location { display:flex; align-items:center; gap:14px; font-size:14px; color:var(--catalog-muted); }
#hotel-dialog .hotel-category { margin:0; border-left:1px solid var(--catalog-rule); padding-left:14px; color:var(--catalog-ink); font-size:14px; letter-spacing:.07em; }
#hotel-dialog .detail-media { display:grid; grid-template-columns:minmax(0,1fr) 192px; gap:12px; align-items:stretch; }
#hotel-dialog .hotel-photo-stage { height:var(--hotel-gallery-height); max-height:none; aspect-ratio:auto; border-radius:20px; background:var(--catalog-ocean); }
#hotel-dialog .hotel-photo-stage > img { object-fit:cover; }
#hotel-dialog .gallery-controls { position:absolute; inset:50% 16px auto; transform:translateY(-50%); display:flex; justify-content:space-between; padding:0; pointer-events:none; }
#hotel-dialog .gallery-controls button { display:grid; place-items:center; width:44px; height:44px; padding:0; background:var(--catalog-panel); border:1px solid var(--catalog-rule); border-radius:50%; color:var(--catalog-ink); pointer-events:auto; box-shadow:0 2px 8px rgb(8 47 60 / .12); }
#hotel-dialog .gallery-controls button:disabled { visibility:hidden; cursor:default; }
.gallery-index { position:absolute; bottom:18px; left:18px; padding:7px 12px; border-radius:20px; color:var(--white); background:var(--catalog-ocean); font:500 12px/1.5 var(--catalog-reading); font-variant-numeric:tabular-nums; }
.photo-expand { position:absolute; bottom:18px; right:18px; display:flex; align-items:center; gap:8px; min-height:40px; padding:10px 14px; border-radius:22px; background:var(--catalog-panel); color:var(--catalog-ink); font:500 12px/1.3 var(--catalog-reading); box-shadow:0 2px 8px rgb(8 47 60 / .12); }
#hotel-dialog .photo-expand svg { width:16px; height:16px; }
#hotel-dialog .photo-thumbnails { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:10px; padding:3px; margin:-3px; overflow:visible; }
#hotel-dialog .photo-thumbnails button { position:relative; height:auto; min-height:0; width:100%; border-radius:12px; opacity:.92; background:var(--catalog-paper); }
#hotel-dialog .photo-thumbnails button:last-child:nth-child(odd) { grid-column:1/-1; }
#hotel-dialog .photo-thumbnails button[aria-pressed=true] { opacity:1; outline:2px solid var(--catalog-action); outline-offset:2px; }
#hotel-dialog .photo-thumbnails img { position:absolute; inset:0; }
#hotel-dialog .detail-copy { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr); align-items:start; gap:48px; max-width:none; margin-top:28px; padding:0; }
#hotel-dialog .hotel-overview h3 { font:600 12px/1.5 var(--catalog-reading); color:var(--catalog-muted); margin:0 0 10px; }
#hotel-dialog .hotel-description { font:400 17px/1.65 var(--catalog-reading); color:var(--catalog-ink); margin:0; max-width:56ch; }
#hotel-dialog .review-detail { display:flex; align-items:center; justify-content:flex-start; gap:22px; padding:10px 0 10px 32px; margin:0; background:none; border-left:1px solid var(--catalog-rule); border-radius:0; }
.rating-value { flex:none; white-space:nowrap; }
#hotel-dialog .rating-value strong { display:block; font:500 34px/1.15 var(--catalog-reading); letter-spacing:-.04em; }
.rating-value > span { color:var(--catalog-muted); font-size:12px; }
#hotel-dialog .rating-info p { font:600 12px/1.5 var(--catalog-reading); margin:0; }
#hotel-dialog .rating-info small { font-size:12px; margin:5px 0; color:var(--catalog-muted); }
#hotel-dialog .rating-info a { font:400 12px/1.4 var(--catalog-reading); display:inline-block; padding-block:4px; margin-top:2px; }
#hotel-dialog .category-note { font-size:12px; margin:12px 0 0; }
#hotel-dialog .detail-sources { margin-top:28px; border-top:1px solid var(--catalog-rule); padding-top:16px; font:400 12px/1.6 var(--catalog-reading); color:var(--catalog-muted); }
#hotel-dialog .detail-sources summary { padding-block:4px; width:fit-content; cursor:pointer; }
#hotel-dialog .detail-sources p { max-width:88ch; margin:14px 0; }
.detail-source-links { display:flex; flex-wrap:wrap; gap:12px 24px; }
#hotel-dialog .detail-source-links a { margin:0; }
#hotel-dialog.photo-expanded .hotel-intro,#hotel-dialog.photo-expanded .detail-copy,#hotel-dialog.photo-expanded .detail-sources { display:none; }
#hotel-dialog.photo-expanded .detail-media { grid-template-columns:1fr; }
#hotel-dialog.photo-expanded .hotel-photo-stage { height:auto; max-height:65dvh; aspect-ratio:var(--photo-ratio,3/2); }
#hotel-dialog.photo-expanded .hotel-photo-stage > img { object-fit:contain; }
#hotel-dialog.photo-expanded .photo-thumbnails { display:flex; overflow-x:auto; gap:10px; }
#hotel-dialog.photo-expanded .photo-thumbnails button { flex:0 0 90px; height:64px; }
@media(hover:hover) {
  #hotel-dialog .photo-thumbnails button:hover { opacity:1; }
  #hotel-dialog .dialog-actions button:hover { background:var(--catalog-tint); }
  #hotel-dialog .gallery-controls button:not(:disabled):hover,.photo-expand:hover { background:var(--catalog-tint); }
}
@media(max-width:950px) {
  #hotel-dialog .detail-media { grid-template-columns:minmax(0,1fr) 152px; }
  #hotel-dialog .detail-copy { gap:24px; }
  #hotel-dialog .review-detail { gap:16px; padding-left:24px; }
  #hotel-dialog .rating-value strong { font-size:28px; }
}
@media(max-width:700px) {
  #hotel-dialog { width:calc(100% - 16px); max-height:96dvh; border-radius:24px; }
  #hotel-dialog .dialog-top { padding:10px 18px; min-height:64px; }
  #hotel-dialog .dialog-top > span { font-size:10px; letter-spacing:.03em; }
  .dialog-actions { gap:4px; }
  #hotel-dialog #share-hotel { padding:8px; }
  #hotel-dialog #share-hotel > span { display:none; }
  #hotel-dialog .share-status { top:60px; left:18px; right:18px; }
  #hotel-dialog .hotel-detail { padding:8px 18px 22px; }
  #hotel-dialog .hotel-intro { margin-bottom:20px; }
  #hotel-dialog .hotel-intro h2 { font-size:30px; margin-bottom:12px; }
  .hotel-location,#hotel-dialog .hotel-category { font-size:12px; }
  #hotel-dialog .detail-media { grid-template-columns:1fr; gap:12px; }
  #hotel-dialog .hotel-photo-stage { height:auto; aspect-ratio:1.18; border-radius:16px; }
  #hotel-dialog .gallery-controls { inset-inline:10px; }
  #hotel-dialog .gallery-controls button { width:40px; height:44px; }
  .gallery-index { bottom:12px; left:12px; font-size:11px; }
  .photo-expand { bottom:10px; right:10px; font-size:11px; padding:10px; }
  #hotel-dialog .photo-thumbnails { display:flex; overflow-x:auto; gap:8px; }
  #hotel-dialog .photo-thumbnails button { flex:0 0 62px; height:48px; border-radius:9px; }
  #hotel-dialog .detail-copy { grid-template-columns:1fr; gap:22px; margin-top:24px; }
  #hotel-dialog .hotel-description { font-size:16px; line-height:1.6; }
  #hotel-dialog .review-detail { border-left:0; border-top:1px solid var(--catalog-rule); padding:20px 0 0; gap:24px; }
  #hotel-dialog .rating-value strong { font-size:32px; }
  #hotel-dialog .detail-sources { margin-top:22px; }
  #hotel-dialog.photo-expanded .hotel-photo-stage { height:auto; max-height:62dvh; aspect-ratio:var(--photo-ratio,3/2); }
  #hotel-dialog.photo-expanded .photo-thumbnails button { flex-basis:62px; height:48px; }
}
@media(prefers-reduced-motion:reduce) {
  #hotel-dialog,#hotel-dialog * { scroll-behavior:auto; }
}