/* ============================================================
 * A hostel's own page — /h/<id> (functions/h/[id].js)
 * ------------------------------------------------------------
 * Server-rendered, so it is what Google indexes for a listing and what a
 * shared link opens on the web. It shares the site's header, footer,
 * breadcrumb style (seo.css) and tokens; this file only lays out the
 * listing itself. Every size and corner comes from the scale in styles.css.
 * ========================================================== */

.hp { padding: 8px 0 56px; }

.hp-head { margin: 14px 0 18px; }
.hp-head h1 {
  margin: 0;
  font-size: var(--fs-3xl);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.hp-sub { margin: 6px 0 0; font-size: var(--fs-md); color: var(--ink-2); }

.hp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.hp-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
}
.hp-badge--verified { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .3); color: #087443; }
.hp-badge--featured { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary); }
.hp-badge--unclaimed { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .3); color: #92400e; }
[data-theme="dark"] .hp-badge--verified { color: #6ee7b7; }
[data-theme="dark"] .hp-badge--unclaimed { color: var(--warn-ink); }

/* One large photo and up to four small ones; a single photo takes the row. */
.hp-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-2);
}
.hp-gallery.is-single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.hp-photo { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg-2); }
.hp-photo-main { grid-row: 1 / -1; }

.hp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  margin-top: 28px;
  align-items: start;
}

.hp-section { padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.hp-section:last-child { border-bottom: 0; }
.hp-section h2 { margin: 0 0 10px; font-size: var(--fs-xl); color: var(--ink); letter-spacing: -.01em; }
.hp-section h3 { margin: 18px 0 8px; font-size: var(--fs-md); color: var(--ink); }
.hp-section p, .hp-section li { font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); max-width: 70ch; }
.hp-section p { margin: 0 0 10px; }
.hp-section a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.hp-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.hp-facts div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.hp-facts dt { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.hp-facts dd { margin: 4px 0 0; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }

.hp-rooms { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.hp-rooms th, .hp-rooms td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.hp-rooms thead th { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }
.hp-rooms tbody th { font-weight: 600; color: var(--ink); }
.hp-rooms td { font-weight: 700; color: var(--ink); white-space: nowrap; }

.hp-muted { font-size: var(--fs-sm) !important; color: var(--muted) !important; margin: 10px 0 0 !important; }

.hp-amenities { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-amenities li {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--primary-50);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.hp-note { padding: 16px 18px; border: 1px solid rgba(245, 158, 11, .3); border-radius: var(--r-md); background: rgba(245, 158, 11, .06); }

/* The price and the way to book stay beside the page on a wide screen. */
.hp-side { position: sticky; top: 88px; }
.hp-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 10px;
}
.hp-price { margin: 0; font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.hp-price small { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.hp-card .hp-muted { margin: 0 !important; }

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.hp-btn:hover { border-color: var(--primary); }
.hp-btn-primary { background: var(--primary-strong); border-color: var(--primary-strong); color: var(--on-accent); }
.hp-btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }

.hp-more { margin-top: 36px; }
.hp-more h2 { margin: 0 0 14px; font-size: var(--fs-xl); color: var(--ink); }
.hp-more-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.hp-more-list a {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
}
.hp-more-list a:hover { border-color: var(--primary); }
.hp-more-name { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.hp-more-meta { font-size: var(--fs-sm); color: var(--muted); }
.hp-more > p { font-size: var(--fs-sm); color: var(--muted); }
.hp-more > p a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.hp-notice { max-width: 560px; padding: 64px 0 24px; text-align: center; }
.hp-notice h1 { font-size: var(--fs-2xl); color: var(--ink); margin: 0 0 10px; }
.hp-notice p { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.6; }
.hp-notice .hp-btn { margin: 6px 4px 0; }

@media (max-width: 880px) {
  .hp-grid { grid-template-columns: 1fr; gap: 8px; }
  /* On a phone the price card comes first, right under the photos. */
  .hp-side { position: static; order: -1; }
  .hp-gallery { aspect-ratio: 4 / 3; grid-template-columns: 1fr 1fr; grid-template-rows: 3fr 1fr; }
  .hp-photo-main { grid-row: auto; grid-column: 1 / -1; }
  .hp-gallery .hp-photo:nth-child(n + 4) { display: none; }
  .hp-gallery.is-single { grid-template-rows: 1fr; }
}

@media (max-width: 480px) {
  .hp-head h1 { font-size: var(--fs-2xl); }
  .hp-card { padding: 16px; }
}