/* Single hotel page — ported from the HotelView.astro <style> block.
   Auto-enqueued by functions.php (assets/css/*.css). */

.crumbs { padding-block: var(--space-4) 0; font-size: 0.9rem; }
.head { padding-block: var(--space-4); }
.head__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-2); }
.head__map { font-size: 0.95rem; }
.head__metro { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.head__station { color: var(--c-ink-soft); font-size: 0.95rem; }

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}
.gallery img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  scroll-snap-align: start;
  width: 100%;
}
@media (min-width: 960px) {
  .gallery { grid-auto-columns: 32%; }
}

.cols { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 960px) {
  .cols { grid-template-columns: 1fr 20rem; align-items: start; }
  .side { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

.section-sm { margin-block: var(--space-8); }

.notice {
  background: var(--c-brand-tint);
  border: 1px solid #e8cdd2;
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-block: var(--space-6);
}
.notice h2 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.notice p { margin: 0; }

.rooms { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .rooms { grid-template-columns: repeat(2, 1fr); } }
.room__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; height: 100%; }
.room__body h3 { margin: 0; }
.room__body .btn { margin-top: auto; }
.room__amen {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
}
.room__amen li {
  font-size: 0.82rem;
  color: var(--c-ink-soft);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

/* Hotel-level amenity checklist (no meta field yet — kept for parity with the
   Astro design so the section can be added without touching CSS). */
.amen {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.amen li { padding-left: 1.4rem; position: relative; }
.amen li::before { content: '✓'; position: absolute; left: 0; color: var(--c-good); font-weight: 700; }

.reviews { display: grid; gap: var(--space-4); }
.review {
  margin: 0; padding: var(--space-4);
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.review p { margin-bottom: var(--space-2); }
.review footer { font-size: 0.9rem; }

.side__card { padding: var(--space-4); }
.side__price { font-size: 1.25rem; margin-bottom: var(--space-1); }
.side__note { font-size: 0.85rem; }
.side__card .btn { margin-top: var(--space-2); }

.stickybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--c-card);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 16px rgb(38 34 31 / 0.08);
}
@media (min-width: 960px) { .stickybar { display: none; } }

/* "Translated from …" note on guest reviews. */
.review__note { font-style: italic; }