/* ══════════════════════════════════════════════════════════════════════════
   Aurelia Luxe — Homepage Fix Layer (v3.3)
   Loaded AFTER main.css and premium.css so it wins the cascade cleanly
   without having to hunt through every prior override block.
═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 & 2. HEADER: nav centred, readable on the (always-dark) header ────── */
/* .hl-header background is a dark espresso/brown glass at every scroll
   state (see main.css .hl-header / .hl-header.scrolled) — it is never a
   light surface. Nav text must stay light so it reads on that dark glass;
   forcing dark-brown text here (as a previous pass did) made it invisible. */
.hl-header__inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
}
.hl-nav {
  flex: none !important;
  justify-content: center !important;
  grid-column: 2 !important;
}
.hl-nav__menu {
  justify-content: center !important;
  width: 100%;
}
.hl-nav__menu a {
  color: rgba(255,255,255,0.82) !important;
}
.hl-nav__menu a:hover,
.hl-nav__menu .current-menu-item > a,
.hl-nav__menu .current_page_item > a,
.hl-nav__menu .is-current > a {
  color: var(--hl-gold-light) !important;
}
.hl-header__action { color: rgba(255,255,255,0.82) !important; }
.hl-header__action:hover { color: var(--hl-gold-light) !important; }
.hl-header__action--login { color: rgba(255,255,255,0.82) !important; }
.hl-hamburger { border-color: rgba(255,255,255,0.28) !important; }
.hl-hamburger__line { background: #ffffff !important; }
.hl-hamburger:hover { border-color: var(--hl-gold) !important; }

/* Logo: respect the superadmin-controlled width, never distort */
.hl-logo__img {
  height: auto !important;
  max-height: 56px;
  width: auto;
  object-fit: contain;
}
.hl-footer__logo {
  height: auto !important;
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .hl-header__inner { grid-template-columns: auto auto !important; }
  .hl-nav { display: none !important; }
}

/* ── 3. HERO: right-aligned copy on desktop/tablet, image visible on the
   left; image-first / overlay-below split on mobile ─────────────────────── */
.hl-hero { align-items: stretch !important; }
.hl-hero__bg, .hl-hero__video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: left center;
}

@media (min-width: 901px) {
  .hl-hero__overlay {
    background: linear-gradient(
      100deg,
      rgba(20,15,11,0) 0%,
      rgba(20,15,11,0.06) 32%,
      rgba(20,15,11,0.55) 62%,
      rgba(20,15,11,0.86) 100%
    ) !important;
  }
  .hl-hero__content {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end !important;
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    max-width: 620px !important;
  }
  .hl-hero__subtitle { margin-inline: 0 0 0 auto !important; text-align: right !important; }
  .hl-hero__scroll-indicator { align-items: flex-end !important; margin-left: auto; }

  /* The search bar carries 3 fields + a button — it needs more room than
     the 620px copy column above it, or the guest select and Book button
     get crushed/clipped. Let it break out of the text column's width. */
  .hl-search-bar {
    margin: 0 !important;
    margin-left: auto !important;
    max-width: 760px !important;
    width: max-content !important;
    min-width: min(760px, 92vw);
  }
  .hl-search-bar__inner { align-items: stretch !important; }
  .hl-search-bar__field {
    flex: 1 1 150px !important;
    min-width: 130px !important;
  }
  .hl-search-bar__btn { flex: 0 0 auto !important; }
}

@media (max-width: 900px) {
  .hl-hero { flex-direction: column !important; justify-content: flex-end !important; }
  .hl-hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(20,15,11,0) 0%,
      rgba(20,15,11,0.05) 40%,
      rgba(20,15,11,0.72) 64%,
      rgba(20,15,11,0.96) 100%
    ) !important;
  }
  .hl-hero__bg, .hl-hero__video { object-position: center 30%; }
  .hl-hero__content {
    text-align: center !important;
    padding-top: 6vh !important;
    padding-bottom: 1.75rem !important;
    justify-content: flex-end;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Copy: noticeably smaller so it stops swallowing the photo */
  .hl-hero__eyebrow { font-size: 0.68rem !important; margin-bottom: 0.4rem !important; }
  .hl-hero__title {
    font-size: clamp(1.7rem, 7vw, 2.3rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.6rem !important;
  }
  .hl-hero__subtitle {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
    max-width: 34ch;
    margin-inline: auto !important;
    margin-bottom: 1.25rem !important;
  }
  .hl-hero__scroll-indicator { display: none !important; }
}

@media (max-width: 640px) {
  /* Compact 2-column booking widget: check-in/check-out share a row,
     guests + Search Rooms each get their own row — instead of 4 full-width
     stacked blocks that used to push the photo almost entirely off-screen. */
  .hl-search-bar { max-width: 100% !important; width: 100% !important; }
  .hl-search-bar__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    background: rgba(255,255,255,0.97) !important;
  }
  .hl-search-bar__inner > div:nth-of-type(2),
  .hl-search-bar__inner > div:nth-of-type(4) { display: none !important; }
  .hl-search-bar__inner > div:nth-of-type(1) {
    grid-column: 1 / 2; grid-row: 1;
    border-right: 1px solid var(--hl-border);
    border-bottom: 1px solid var(--hl-border);
  }
  .hl-search-bar__inner > div:nth-of-type(3) {
    grid-column: 2 / 3; grid-row: 1;
    border-bottom: 1px solid var(--hl-border);
  }
  .hl-search-bar__inner > div:nth-of-type(5) {
    grid-column: 1 / -1; grid-row: 2;
    border-bottom: 1px solid var(--hl-border);
  }
  .hl-search-bar__field {
    padding: 0.6rem 0.85rem !important;
  }
  .hl-search-bar__field label { font-size: 0.6rem !important; margin-bottom: 0.15rem !important; }
  .hl-search-bar__field input,
  .hl-search-bar__field select { font-size: 0.82rem !important; }
  .hl-search-bar__btn {
    grid-column: 1 / -1; grid-row: 3;
    justify-content: center !important;
    padding: 0.85rem 1rem !important;
    border-radius: 0 0 var(--hl-radius-lg) var(--hl-radius-lg) !important;
  }
}

/* ── 4. Hero quick-search: make sure fields/button read as one clear unit ── */
.hl-search-bar__btn { cursor: pointer; }

/* ── 5. FEATURED ROOMS: single / pair / slider layouts ───────────────────── */
.hl-rooms-grid-wrap { position: relative; }
.hl-rooms-grid-wrap .hl-rooms-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hl-border);
  background: var(--hl-white);
  color: var(--hl-text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--hl-shadow-sm);
  transition: var(--hl-transition);
}
.hl-rooms-grid-wrap .hl-rooms-nav:hover { background: var(--hl-gold); color: var(--hl-white); border-color: var(--hl-gold); }
.hl-rooms-grid-wrap .hl-rooms-nav.is-disabled { opacity: 0.35; pointer-events: none; }
.hl-rooms-grid-wrap .hl-rooms-nav--prev { left: -22px; }
.hl-rooms-grid-wrap .hl-rooms-nav--next { right: -22px; }

/* Single room: one large, fully filled feature card */
.hl-rooms-grid--single .hl-rooms-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
}
.hl-rooms-grid--single .hl-room-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  overflow: hidden;
}
.hl-rooms-grid--single .hl-room-card__image-wrap {
  aspect-ratio: auto;
  height: 100%;
  min-height: 420px;
}
.hl-rooms-grid--single .hl-room-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
}
.hl-rooms-grid--single .hl-room-card__title { font-size: 1.9rem; }
.hl-rooms-grid--single .hl-room-card__desc { font-size: 1rem; }
@media (max-width: 760px) {
  .hl-rooms-grid--single .hl-room-card { grid-template-columns: 1fr; }
  .hl-rooms-grid--single .hl-room-card__image-wrap { min-height: 260px; }
}

/* Two rooms: simple, evenly balanced pair, never stretched wafer-thin */
.hl-rooms-grid--pair .hl-rooms-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2rem;
}
@media (max-width: 760px) {
  .hl-rooms-grid--pair .hl-rooms-grid { grid-template-columns: 1fr !important; }
}

/* Three or more rooms: horizontal slider with arrow navigation */
.hl-rooms-grid--slider .hl-rooms-grid {
  display: flex !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 2rem;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.hl-rooms-grid--slider .hl-rooms-grid::-webkit-scrollbar { display: none; }
.hl-rooms-grid--slider .hl-room-card {
  flex: 0 0 340px;
  scroll-snap-align: start;
}
@media (max-width: 640px) {
  .hl-rooms-grid--slider .hl-room-card { flex-basis: 82vw; }
  .hl-rooms-grid-wrap .hl-rooms-nav { display: none; }
}

/* ── 6. EXPERIENCES: clean editorial cards, no emoji, tone fallbacks ─────── */
/* main.css has three separate, older .hl-exp-grid / .hl-exp-card blocks
   (added across past patches) that never got fully removed; some set
   display:block or omit grid entirely, which is what collapses the tiles
   into a stacked column. These rules must win outright. */
.hl-exp-grid,
section.hl-experiences .hl-exp-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 1.75rem !important;
  width: 100% !important;
}
.hl-exp-grid > .hl-exp-card { width: auto !important; float: none !important; }
@media (max-width: 640px) {
  .hl-exp-grid,
  section.hl-experiences .hl-exp-grid { grid-template-columns: 1fr !important; }
}
.hl-exp-card {
  position: relative;
  border-radius: var(--hl-radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--hl-shadow-sm);
  border: 1px solid var(--hl-border);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s;
}
.hl-exp-card:hover { transform: translateY(-6px); box-shadow: var(--hl-shadow-lg); }
.hl-exp-card__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.hl-exp-card:hover .hl-exp-card__image { transform: scale(1.07); }
.hl-exp-card--no-image.hl-tone-1 { background: linear-gradient(155deg, #D89A7C 0%, #B16A4C 100%); }
.hl-exp-card--no-image.hl-tone-2 { background: linear-gradient(155deg, #6B5A4C 0%, #3A2F26 100%); }
.hl-exp-card--no-image.hl-tone-3 { background: linear-gradient(155deg, #8C4E34 0%, #5E3522 100%); }
.hl-exp-card--no-image.hl-tone-4 { background: linear-gradient(155deg, #9C8C7C 0%, #6B5A4C 100%); }
.hl-exp-card__overlay {
  position: absolute; inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(20,15,11,0.88) 0%, rgba(20,15,11,0.25) 55%, rgba(20,15,11,0) 100%);
  padding: 1.75rem;
}
.hl-exp-card__content { color: var(--hl-white); }
.hl-exp-card__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--hl-white);
}
.hl-exp-card__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  max-width: 34ch;
}
.hl-exp-card__icon { display: none !important; }

/* ── 7. GALLERY: see the consolidated "GALLERY — IMMERSIVE CAROUSEL" block
   in main.css, which is now the single source of truth for this section. ─ */

/* ── 8. GUEST VOICES: readable contrast, working arrows, bigger text ─────── */
.hl-testimonials.bg-dark { background: var(--hl-gradient-noir) !important; }
.hl-testimonials .hl-eyebrow--gold { color: var(--hl-gold-light) !important; }
.hl-testi-card__quote {
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
  color: var(--hl-white) !important;
  line-height: 1.6 !important;
}
.hl-testi-card__stars { font-size: 1.25rem !important; }
.hl-testi-card__name { color: var(--hl-gold-light) !important; font-size: 1rem !important; }
.hl-testi-nav {
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
}
.hl-testi-nav:hover { background: var(--hl-gold); color: var(--hl-white); }
.hl-testi-dot { border: none; cursor: pointer; }

/* ── 9. FLOATING BUTTONS: see the consolidated "FLOATING CONTACT BUTTONS"
   block in main.css, which is now the single source of truth for spacing,
   shadow and hover behaviour on these buttons. ──────────────────────────── */

/* ── 10. LOGO: superadmin-controlled sizing is respected, never distorted ── */
.hl-logo, .hl-footer__brand { line-height: 0; }