/* ═══════════════════════════════════════════════════════
   Single Hotel — detail page layout.
   Uses room-card, amenity-grid, rating-aggregate, gallery, map-section,
   feature-split, cta-band from components.css.
   ═══════════════════════════════════════════════════════ */

/* Gallery hero — hero band at the top of the page */
.hotel-hero {
  position: relative;
  isolation: isolate;
}

.hotel-hero__media {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* On mobile show only the main image; thumbs are hidden and the gallery is
   opened via the prominent "Show all N photos" button. */
@media (max-width: 767px) {
  .hotel-hero__media { max-height: 56dvh; }
  .hotel-hero__media-item--thumb { display: none; }
}

@media (min-width: 768px) {
  .hotel-hero__media {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 2 / 1;
    max-height: 620px;
    padding-inline: var(--container-px);
    padding-block: var(--space-8);
  }

  .hotel-hero__media-item--main {
    grid-row: span 2;
    border-radius: var(--radius-xl);
  }

  .hotel-hero__media-item { border-radius: var(--radius-lg); }
}

.hotel-hero__media-item {
  overflow: hidden;
  background: var(--color-bg-alt);
}

.hotel-hero__media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotel-hero__open-gallery {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 2;
  font-size: var(--text-body-s);
}

@media (max-width: 767px) {
  .hotel-hero__open-gallery {
    left: 50%;
    right: auto;
    bottom: var(--space-4);
    transform: translateX(-50%);
    min-width: 220px;
    justify-content: center;
  }
}

/* Sticky quick-info bar under the gallery hero */
.hotel-quickbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-3);
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.hotel-quickbar.is-pinned { box-shadow: var(--shadow-sm); }

@media (min-width: 1024px) {
  .hotel-quickbar { top: var(--nav-height-lg); }
}

.hotel-quickbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hotel-quickbar__identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}

.hotel-quickbar__title {
  font-family: var(--font-display);
  font-size: var(--text-heading-m);
  font-weight: var(--weight-regular);
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
}

.hotel-quickbar__meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

.hotel-quickbar__score {
  font-weight: var(--weight-semibold);
  color: var(--color-text-brand);
}

.hotel-quickbar__actions {
  margin-left: auto;
  display: inline-flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.hotel-quickbar__actions .btn {
  padding: 10px 20px;
  min-height: 40px;
  font-size: var(--text-body-s);
}

/* Mobile: drop stars, collapse meta to address only, keep Book Now prominent.
   The Call CTA is deferred to the fixed-bottom #lastcta bar. */
@media (max-width: 767px) {
  .hotel-quickbar__stars,
  .hotel-quickbar__dot,
  .hotel-quickbar__score,
  .hotel-quickbar__call { display: none; }

  .hotel-quickbar__title {
    font-size: var(--text-body-l);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hotel-quickbar__meta { font-size: var(--text-overline); }
}

/* Intro: overline + display heading + location + lead */
.hotel-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--container-narrow);
}

.hotel-intro__heading {
  font-family: var(--font-display);
  font-size: var(--text-display-l);
  font-weight: var(--weight-regular);
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin: 0;
  letter-spacing: var(--tracking-snug);
}

.hotel-intro__heading--compact {
  font-size: var(--text-display-s);
  letter-spacing: var(--tracking-snug);
}

.hotel-intro__lead p,
.hotel-intro__lead {
  line-height: 1.7;
}

.hotel-intro__location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-m);
  color: var(--color-text-secondary);
}

.hotel-intro__location svg {
  width: 18px;
  height: 18px;
  color: var(--color-brand);
  flex-shrink: 0;
}

.hotel-intro__lead {
  font-size: var(--text-body-l);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
  max-width: 65ch;
}

/* Rich-text inside the intro body — the base reset zeroes h/p margins, so
   re-establish sensible rhythm only within this prose context. */
.hotel-intro__lead > * + * { margin-top: 1em; }
.hotel-intro__lead h2,
.hotel-intro__lead h3,
.hotel-intro__lead h4 {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
  max-width: 30ch;
}
.hotel-intro__lead h2 { font-size: clamp(1.5rem, 2.4vw, 2rem);   margin-top: 1.6em; }
.hotel-intro__lead h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); margin-top: 1.4em; }
.hotel-intro__lead h4 { font-size: var(--text-heading-m); margin-top: 1.2em; }
.hotel-intro__lead h2 + p,
.hotel-intro__lead h3 + p,
.hotel-intro__lead h4 + p { margin-top: 0.5em; }
.hotel-intro__lead > :first-child { margin-top: 0; }
.hotel-intro__lead ul,
.hotel-intro__lead ol {
  margin-top: 1em;
  padding-inline-start: 1.5em;
}
.hotel-intro__lead ul li + li,
.hotel-intro__lead ol li + li { margin-top: 0.35em; }
.hotel-intro__lead a {
  color: var(--color-text-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Overview wrapper — stacks on mobile, intro + facts sidebar on desktop */
.hotel-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .hotel-overview {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: var(--space-12);
  }
}

/* Fact grid (check-in / rooms / style / etc.) */
.hotel-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .hotel-facts { grid-template-columns: repeat(4, 1fr); }
}

/* Inside .hotel-overview sidebar, facts stack as a CTA card on desktop */
@media (min-width: 1024px) {
  .hotel-overview .hotel-facts {
    grid-template-columns: 1fr;
    position: sticky;
    top: calc(var(--nav-height-lg) + var(--space-16));
    padding: var(--space-5);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
  }

  .hotel-overview .hotel-fact {
    padding: var(--space-3) 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
  }

  .hotel-overview .hotel-fact:last-of-type { border-bottom: 0; }
}

/* Remove default max-width so the intro text fills the wider column */
@media (min-width: 1024px) {
  .hotel-overview .hotel-intro { max-width: none; }
}

.hotel-fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.hotel-fact--rating .hotel-fact__value {
  color: var(--color-text-brand);
}

.hotel-fact__label {
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-secondary);
}

.hotel-fact__value {
  font-size: var(--text-body-m);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.hotel-fact__qualifier {
  display: inline-block;
  margin-left: 4px;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.hotel-fact__cta {
  margin-top: var(--space-3);
  width: 100%;
  justify-content: center;
}

@media (max-width: 1023px) {
  .hotel-fact__cta {
    grid-column: 1 / -1;
  }
}

/* Rooms grid */
.rooms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1280px) {
  .rooms-grid { grid-template-columns: repeat(3, 1fr); }
}


/* Reviews section layout (aggregate sidebar + review grid) */
.reviews-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 1024px) {
  .reviews-section {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: var(--space-12);
    align-items: start;
  }
}

/* When the review grid is absent, let the aggregate card take full width
   instead of sitting alone in a narrow left column. */
.reviews-section:not(:has(.review-grid)) {
  grid-template-columns: 1fr;
}

/* House rules / fine print */
.fine-print {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--color-bg-alt);
  border-radius: var(--radius-xl);
}

@media (min-width: 768px) {
  .fine-print { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-10); }
}

.fine-print__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body-s);
  line-height: 1.65;
}

@media (min-width: 768px) {
  .fine-print__item {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-4);
  }
}

.fine-print__item:last-child { border-bottom: 0; }
.fine-print__label {
  color: var(--color-text-secondary);
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--weight-semibold);
}
@media (min-width: 768px) {
  .fine-print__label {
    font-size: var(--text-body-s);
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--weight-regular);
  }
}
.fine-print__value { color: var(--color-text); font-weight: var(--weight-medium); }

/* ─── Amenities full list — <details> accordion ───── */
.amenities-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

@media (min-width: 768px) {
  .amenities-details { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }
}

.amenities-details__group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.amenities-details__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.amenities-details__header::-webkit-details-marker { display: none; }

.amenities-details__header:hover { background: var(--color-bg-alt); }

.amenities-details__name {
  flex: 1;
  color: var(--color-text);
  font-size: var(--text-body-m);
}

.amenities-details__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding-inline: 8px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-bg-alt);
  border-radius: var(--radius-pill);
}

.amenities-details__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-out);
}

.amenities-details__group[open] .amenities-details__chevron {
  transform: rotate(180deg);
}

.amenities-details__list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 4px;
  column-gap: var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-5);
  margin: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

@media (min-width: 576px) {
  .amenities-details__list { grid-template-columns: repeat(2, 1fr); }
}

.amenities-details__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: 2px;
  font-size: var(--text-body-s);
  color: var(--color-text-secondary);
  line-height: var(--lh-subhead);
}

.amenities-details__list li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: 9px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  flex-shrink: 0;
}

/* ─── Contact split — form + info aside ───────────── */
.contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-split { grid-template-columns: 7fr 5fr; gap: var(--space-12); }
}

.contact-split__form {
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.contact-split__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: var(--color-bg-alt);
  border-radius: var(--radius-xl);
}

.contact-split__heading {
  font-family: var(--font-body);
  font-size: var(--text-heading-m);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.contact-split__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-split__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-brand-subtle);
  color: var(--color-brand-hover);
}

.contact-split__icon svg { width: 18px; height: 18px; }

.contact-split__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-split__label {
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-secondary);
}

.contact-split__value {
  font-size: var(--text-body-m);
  color: var(--color-text);
  word-break: break-word;
}

a.contact-split__value {
  color: var(--color-text-brand);
  font-weight: var(--weight-semibold);
}

a.contact-split__value:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Review dialog (expanded long review) ────────── */
.review-dialog {
  max-width: 560px;
  width: 92vw;
  padding: 0;
  border: 0;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  color: var(--color-text);
}

.review-dialog::backdrop {
  background: rgba(28, 27, 25, 0.65);
  backdrop-filter: blur(4px);
}

.review-dialog__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
}

.review-dialog__title {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--weight-regular);
  margin: 0;
  color: var(--color-text);
}

.review-dialog__meta {
  display: block;
  font-size: var(--text-body-s);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  margin-top: var(--space-1);
}

.review-dialog__score {
  align-self: flex-start;
  padding: 6px 14px;
  background: var(--color-brand-subtle);
  color: var(--color-brand-hover);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-m);
  border-radius: var(--radius-pill);
}

.review-dialog__body {
  font-size: var(--text-body-m);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
  max-height: 60dvh;
  overflow-y: auto;
}

.review-dialog__body p {
  margin: 0;
  max-width: none;
}

.review-dialog__body p + p { margin-top: var(--space-3); }

.review-dialog__close {
  align-self: flex-end;
  margin-top: var(--space-2);
}

/* ─── Quickbar: stars row ─────────────────────────── */
.hotel-quickbar__stars {
  color: var(--color-brand);
}

/* ─── Read-more button inside review card ─────────── */
.review-card__read { align-self: flex-start; }

/* ─── Search iframe wrapper ───────────────────────── */
.search-iframe-container {
  margin-top: var(--space-10);
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-xl);
}

.hotel-search-tool {
  width: 100%;
  height: 480px;
  border: 0;
}

/* ─── Gallery Lightbox (JS-toggled, NOT a native dialog) ── */
/* Kept legacy class hooks (.gallery-close, .gallery-main, .gallery-nav,
   .gallery-thumbs, .gallery-counter) because js/single.js queries them. */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.gallery-lightbox.active {
  display: flex;
  opacity: 1;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 25, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gallery-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  background: rgba(255, 255, 255, 0.10);
  border: 0;
  color: var(--color-text-inverse);
  font-size: 2rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out);
}

.gallery-close:hover,
.gallery-close:focus-visible { background: rgba(255, 255, 255, 0.22); }

.gallery-counter {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  color: rgba(255, 255, 255, 0.70);
  font-size: var(--text-body-s);
  z-index: 2;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  color: var(--color-text-inverse);
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
  opacity: 0.75;
}

.gallery-nav:hover,
.gallery-nav:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.24);
}

.gallery-prev { left: var(--space-4); }
.gallery-next { right: var(--space-4); }

.gallery-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 72dvh;
  user-select: none;
}

.gallery-main img {
  max-width: 100%;
  max-height: 72dvh;
  object-fit: contain;
  border-radius: var(--radius-md);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.gallery-thumbs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 6px 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  max-width: 92vw;
}

.gallery-thumbs::-webkit-scrollbar { height: 4px; }
.gallery-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.30);
  border-radius: var(--radius-sm);
}

.gallery-thumbs img {
  width: 72px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.55;
  flex-shrink: 0;
  transition:
    opacity var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.gallery-thumbs img:hover { opacity: 0.85; }

.gallery-thumbs img.active {
  border-color: var(--color-brand);
  opacity: 1;
}

@media (max-width: 767px) {
  .gallery-nav { width: 40px; height: 40px; font-size: 1.25rem; }
  .gallery-main,
  .gallery-main img { max-height: 60dvh; }
  .gallery-thumbs img { width: 56px; height: 40px; }
}

/* ─── Mobile fixed CTA bar ────────────────────────── */
#lastcta { display: none; }

@media (max-width: 767px) {
  #lastcta {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-sticky);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }
  /* Hide the fixed CTA when the mobile menu or search overlay is active so
     it can't cover interactive items inside those overlays. */
  body:has(#mobile-menu.is-open) #lastcta,
  body:has(#search-overlay.is-open) #lastcta { display: none; }

  #lastcta .cta-buttons {
    display: flex;
    gap: var(--space-3);
  }
  #lastcta .cta-phone { display: none; }
  #lastcta .btn-book,
  #lastcta .cta-link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background: var(--color-brand);
    color: var(--color-dark);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }
}