/* XPRS Hotelier — pattern layer: hero, editorial bands, booking search, trust. */

/* ------------------------------------------------------------------- Hero */
.xh-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(92vh, 900px);
  overflow: hidden;
  background: var(--xh-color-surface-2);
  color: rgb(var(--xh-color-on-dark));
  isolation: isolate;
}

.xh-hero--compact { min-height: clamp(300px, 42vh, 440px); }

/* Campaign pages: taller, centred, full-bleed. */
.xh-hero--cinematic {
  min-height: min(100vh, 1000px);
  align-items: center;
  text-align: center;
}

.xh-hero--cinematic .xh-hero__inner {
  max-width: 60ch;
  margin-inline: auto;
  padding-block: calc(var(--xh-header-height) + var(--xh-space-8)) var(--xh-space-8);
}

.xh-hero--cinematic .xh-hero__title { font-size: var(--xh-text-6xl, var(--xh-text-5xl)); }
.xh-hero--cinematic .xh-hero__actions { justify-content: center; }

@media (max-width: 48rem) {
  .xh-hero--cinematic { min-height: min(88vh, 720px); }
}

.xh-hero--compact .xh-hero__inner {
  padding-block: calc(var(--xh-header-height-condensed) + var(--xh-space-6)) var(--xh-space-6);
}

.xh-hero--compact .xh-hero__title { font-size: var(--xh-text-3xl); }
.xh-hero--split { align-items: center; }

.xh-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.xh-hero__media img,
.xh-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xh-hero__media img { animation: xh-slow-zoom 18s var(--xh-ease-out) forwards; }
.xh-hero--slideshow .xh-hero__media img { animation: none; }

.xh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(var(--xh-color-scrim), 0.78) 0%,
    rgba(var(--xh-color-scrim), 0.34) 46%,
    rgba(var(--xh-color-scrim), 0.42) 100%
  );
}

.xh-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--xh-space-9) var(--xh-space-8);
  width: 100%;
}

.xh-hero__title {
  color: inherit;
  font-family: var(--xh-font-display);
  font-weight: 400;
  line-height: var(--xh-leading-tight);
  letter-spacing: var(--xh-tracking-tight);
  font-size: var(--xh-text-4xl);
  margin-bottom: var(--xh-space-4);
  animation: xh-fade-up var(--xh-duration-slow) var(--xh-ease-out) both;
  max-width: 18ch;
}

.xh-hero__lead {
  font-size: var(--xh-text-md);
  color: rgba(var(--xh-color-on-dark), 0.88);
  margin: 0;
  max-width: 44ch;
  animation: xh-fade-up var(--xh-duration-slow) var(--xh-ease-out) 120ms both;
}

.xh-hero .xh-eyebrow {
  color: rgba(var(--xh-color-on-dark), 0.78);
  animation: xh-fade-up var(--xh-duration-slow) var(--xh-ease-out) both;
}

.xh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xh-space-3);
  margin-top: var(--xh-space-6);
  animation: xh-fade-up var(--xh-duration-slow) var(--xh-ease-out) 220ms both;
}

.xh-hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--xh-space-5);
  transform: translateX(-50%);
  z-index: 3;
  font-size: var(--xh-text-2xs);
  letter-spacing: var(--xh-tracking-wider);
  text-transform: uppercase;
  color: rgba(var(--xh-color-on-dark), 0.75);
  display: grid;
  justify-items: center;
  gap: var(--xh-space-2);
}

.xh-hero__cue span {
  display: block;
  width: 1px;
  height: 34px;
  background: rgba(var(--xh-color-on-dark), 0.6);
  animation: xh-scroll-cue 2.4s var(--xh-ease) infinite;
}

/* Slideshow slides */
.xh-hero__slides { position: absolute; inset: 0; z-index: -2; }

.xh-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1400ms var(--xh-ease-out);
}

.xh-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.xh-hero__slide[data-active="true"] { opacity: 1; }
.xh-hero__slide[data-active="true"] img { animation: xh-slow-zoom 12s var(--xh-ease-out) forwards; }

.xh-hero__dots {
  position: absolute;
  right: var(--xh-space-5);
  bottom: var(--xh-space-6);
  z-index: 3;
  display: flex;
  gap: var(--xh-space-2);
}

.xh-hero__dot {
  width: 28px;
  height: 2px;
  background: rgba(var(--xh-color-on-dark), 0.4);
}

.xh-hero__dot[aria-current="true"] { background: rgb(var(--xh-color-on-dark)); }

/* Mute control for video heroes */
.xh-hero__mute {
  position: absolute;
  right: var(--xh-space-5);
  top: calc(var(--xh-header-height) + var(--xh-space-4));
  z-index: 3;
  color: rgb(var(--xh-color-on-dark));
  border: 1px solid rgba(var(--xh-color-on-dark), 0.45);
  border-radius: var(--xh-radius-pill);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: var(--xh-text-xs);
}

/* Typographic fallback when no media is set */
.xh-hero--plain {
  color: var(--xh-color-ink);
  min-height: min(72vh, 720px);
  background:
    radial-gradient(120% 90% at 10% 6%, color-mix(in srgb, var(--xh-color-accent) 16%, transparent), transparent 58%),
    linear-gradient(180deg, var(--xh-color-surface) 0%, var(--xh-color-surface-2) 100%);
}

.xh-hero--plain::after { display: none; }
.xh-hero--plain .xh-hero__lead { color: var(--xh-color-muted); }
.xh-hero--plain .xh-eyebrow { color: var(--xh-color-muted); }
.xh-hero--plain .xh-hero__title { max-width: 18ch; }
.xh-hero--plain .xh-btn--on-dark { --xh-btn-fg: var(--xh-color-ink); --xh-btn-border: var(--xh-color-line-strong); }
.xh-hero--plain .xh-btn--on-dark:hover { --xh-btn-bg: var(--xh-color-ink); --xh-btn-fg: var(--xh-color-surface); }

/* Page header for archives and inner pages */
.xh-pagehead {
  padding-block: calc(var(--xh-header-height) + var(--xh-space-7)) var(--xh-space-7);
  border-bottom: 1px solid var(--xh-color-line);
}

.xh-pagehead__title { font-size: var(--xh-text-3xl); margin-bottom: var(--xh-space-3); max-width: 24ch; }
.xh-pagehead__lead { color: var(--xh-color-muted); max-width: 52ch; margin: 0; }

/* --------------------------------------------------------- Booking search */
.xh-search {
  --xh-search-bg: var(--xh-color-surface);
  position: relative;
  z-index: 20;
  background: var(--xh-search-bg);
  border: 1px solid var(--xh-color-line);
  box-shadow: var(--xh-shadow-md);
  color: var(--xh-color-ink);
}

/* Floating over the hero */
.xh-search--float {
  margin-top: calc(var(--xh-space-8) * -1);
  margin-bottom: var(--xh-space-8);
}

.xh-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 900px) and (max-width: 1199px) {
  .xh-search__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xh-search__form--destination { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xh-search__form--destination .xh-search__field:first-of-type { grid-column: 1 / -1; }
  .xh-search__submit { grid-column: auto; }
}

@media (min-width: 1200px) {
  .xh-search__form { grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(220px, 0.8fr); }
  .xh-search__form--destination { grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(150px, 0.9fr)) minmax(220px, 0.8fr); }
}

.xh-search__field {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--xh-space-4) var(--xh-space-5);
  border-bottom: 1px solid var(--xh-color-line);
  text-align: left;
  min-width: 0;
}

@media (min-width: 1200px) {
  .xh-search__field { border-bottom: 0; border-right: 1px solid var(--xh-color-line); }
  .xh-search__field:last-of-type { border-right: 0; }
}

/* The date and guest boxes are buttons, but must read as plain fields. */
.xh-search__trigger {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.xh-search__trigger:focus-visible { outline: 2px solid var(--xh-color-ink); outline-offset: 4px; }

.xh-search__label {
  font-size: var(--xh-text-2xs);
  font-weight: 600;
  letter-spacing: var(--xh-tracking-wider);
  text-transform: uppercase;
  color: var(--xh-color-muted);
  display: flex;
  align-items: center;
  gap: var(--xh-space-2);
}

.xh-search__value {
  font-family: var(--xh-font-display);
  font-size: var(--xh-text-lg);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xh-search__value--placeholder { color: var(--xh-color-faint); }

.xh-search__select {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--xh-font-display);
  font-size: var(--xh-text-lg);
  width: 100%;
}

.xh-search__submit {
  display: flex;
  align-items: stretch;
  padding: var(--xh-space-4) var(--xh-space-5);
}

@media (min-width: 900px) {
  .xh-search__submit { padding: var(--xh-space-3); min-width: 0; }
}

.xh-search__submit .xh-btn { width: 100%; min-height: 56px; }
.xh-search__promo { margin-top: var(--xh-space-4); }
.xh-search__done { margin: var(--xh-space-4) 0 0; text-align: right; }
.xh-search__note { margin: 0; padding: var(--xh-space-3) var(--xh-space-5); border-top: 1px solid var(--xh-color-line); }

@media (max-width: 699px) {
  .xh-search--float { margin-top: calc(var(--xh-space-6) * -1); margin-bottom: var(--xh-space-7); }
  .xh-search__field,
  .xh-search__submit,
  .xh-search__native { padding-inline: var(--xh-space-4); }
}

/* Popovers (date picker, guests) */
.xh-search__pop {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: min(340px, 92vw);
  padding: var(--xh-space-5);
  background: var(--xh-color-surface);
  border: 1px solid var(--xh-color-line);
  box-shadow: var(--xh-shadow-lg);
  z-index: 30;
}

.xh-search__pop[hidden] { display: none; }

/* With scripting the panels stay closed until their trigger is used, whatever
   fields the current property mode renders. */
.xh-js .xh-search__pop:not([data-open="true"]) { display: none; }

/* Panels attached to the last field would run off the right edge. */
.xh-search__field:last-of-type .xh-search__pop { left: auto; right: 0; }


/* No-script fallback: real date and number fields carry the search instead. */
.xh-search__native { display: grid; gap: var(--xh-space-2); padding: var(--xh-space-4) var(--xh-space-5); }
.xh-search__native .xh-input { width: 100%; }
.xh-js .xh-search__native { display: none; }
html:not(.xh-js) .xh-search__trigger { display: none; }
html:not(.xh-js) .xh-search__pop {
  position: static;
  box-shadow: none;
  border: 0;
  border-top: 1px solid var(--xh-color-line);
  min-width: 0;
  padding: var(--xh-space-5);
}
html:not(.xh-js) .xh-search__pop--wide,
html:not(.xh-js) .xh-cal,
html:not(.xh-js) .xh-cal__head,
html:not(.xh-js) .xh-cal__foot,
html:not(.xh-js) .xh-stepper__controls { display: none; }
.xh-search__native-input { width: 6em; }
.xh-js .xh-search__native-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.xh-search__pop--wide { min-width: min(640px, 94vw); }

/* The calendar is too wide to hang off a single field: in single-property mode
   the dates field is the first one, so an edge-anchored panel fell outside the
   viewport. Centre it instead, at every width and in every variant. */
.xh-js .xh-search__pop--wide,
.xh-js .xh-search--sticky .xh-search__pop--wide,
.xh-js .xh-search__field:last-of-type .xh-search__pop--wide {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 2rem));
  min-width: 0;
  max-height: min(86vh, 720px);
  overflow-y: auto;
  z-index: 90;
}

@media (max-width: 700px) {
  .xh-search__pop { position: fixed; inset: auto 0 0 0; min-width: 0; max-height: 82vh; overflow-y: auto; }
  .xh-js .xh-search__pop--wide { inset: auto; top: 50%; left: 50%; }
}


/* Date picker */
.xh-cal { display: grid; gap: var(--xh-space-5); }

@media (min-width: 720px) {
  .xh-cal--dual { grid-template-columns: 1fr 1fr; }
}

.xh-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xh-space-3);
  margin-bottom: var(--xh-space-3);
}

.xh-cal__month { font-family: var(--xh-font-display); font-size: var(--xh-text-lg); }
.xh-cal__nav { display: flex; gap: var(--xh-space-2); }

.xh-cal__nav button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--xh-color-line-strong);
  border-radius: var(--xh-radius-pill);
  display: grid;
  place-items: center;
}

.xh-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }

.xh-cal__dow {
  font-size: var(--xh-text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--xh-color-muted);
  text-align: center;
  padding-bottom: var(--xh-space-2);
}

.xh-cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: var(--xh-text-sm);
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  border-radius: var(--xh-radius);
  background: transparent;
}

.xh-cal__day:hover:not([disabled]) { border-color: var(--xh-color-ink); }
.xh-cal__day[disabled] { color: var(--xh-color-faint); cursor: not-allowed; }
.xh-cal__day[data-state="in-range"] { background: color-mix(in srgb, var(--xh-color-accent) 16%, transparent); }
.xh-cal__day[data-state="start"],
.xh-cal__day[data-state="end"] { background: var(--xh-color-ink); color: var(--xh-color-surface); }
.xh-cal__day--empty { visibility: hidden; }

.xh-cal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xh-space-3);
  margin-top: var(--xh-space-4);
  padding-top: var(--xh-space-4);
  border-top: 1px solid var(--xh-color-line);
  font-size: var(--xh-text-sm);
  color: var(--xh-color-muted);
}

/* Condensed sticky variant */
.xh-search--sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--xh-z-bookbar);
  margin: 0;
  border-inline: 0;
  border-bottom: 0;
  transform: translateY(110%);
  transition: transform var(--xh-duration) var(--xh-ease-out);
}

.xh-search--sticky[data-visible="true"] { transform: none; }
.xh-search--sticky .xh-search__field { padding-block: var(--xh-space-3); }
.xh-search--sticky .xh-search__value { font-size: var(--xh-text-base); }

/* The bar sits on the bottom edge, so its panels have to open upwards. */
.xh-search--sticky .xh-search__pop {
  top: auto;
  bottom: calc(100% + 1px);
  max-height: min(70vh, 620px);
  overflow-y: auto;
}

html:not(.xh-js) .xh-search--sticky .xh-search__pop--wide { left: auto; right: 0; }
.xh-search--sticky[data-visible="false"] { pointer-events: none; }

/* Phones open the same search from the bottom bar rather than losing it. */
@media (max-width: 780px) {
  .xh-search--sticky {
    bottom: 74px;
    transform: translateY(130%);
    max-height: min(78vh, 620px);
    overflow-y: auto;
  }

  .xh-search--sticky[data-open="true"] {
    transform: none;
    pointer-events: auto;
  }

  .xh-search--sticky[data-open="false"] {
    pointer-events: none;
  }

  .xh-search--sticky .xh-search__form {
    flex-wrap: wrap;
  }
}

html.no-js .xh-bookbar__search { display: none; }


/* Legacy booking band (engine embed / link-out) */
.xh-booking {
  background: var(--xh-color-surface-2);
  color: var(--xh-color-ink);
  padding-block: var(--xh-space-6);
  border-block: 1px solid var(--xh-color-line);
}

.xh-booking__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--xh-space-4);
}

.xh-booking__lead { margin: 0; font-family: var(--xh-font-display); font-size: var(--xh-text-xl); }
.xh-booking__embed { width: 100%; }

/* ------------------------------------------------------- Editorial bands */
.xh-feature {
  display: grid;
  gap: var(--xh-space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .xh-feature { grid-template-columns: 1fr 1fr; gap: var(--xh-space-8); }
  .xh-feature--reverse .xh-feature__media { order: 2; }
  .xh-feature--offset .xh-feature__body { padding-inline: var(--xh-space-6); }
}

.xh-feature__media { position: relative; overflow: hidden; }
.xh-feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.xh-feature__body { max-width: 48ch; }

/* Stat row */
.xh-stats {
  display: grid;
  gap: var(--xh-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  border-top: 1px solid var(--xh-color-line);
  padding-top: var(--xh-space-6);
}

.xh-stat__value { font-family: var(--xh-font-display); font-size: var(--xh-text-2xl); line-height: 1; }
.xh-stat__label { font-size: var(--xh-text-2xs); letter-spacing: var(--xh-tracking-wider); text-transform: uppercase; color: var(--xh-color-muted); margin: var(--xh-space-2) 0 0; }

/* Quote / testimonial */
.xh-quote {
  background: transparent;
  padding: 0;
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.xh-quote__text {
  font-family: var(--xh-font-display);
  font-size: var(--xh-text-2xl);
  line-height: 1.3;
  margin: 0 0 var(--xh-space-5);
}

.xh-quote__stars { color: var(--xh-color-accent); letter-spacing: 0.3em; font-size: var(--xh-text-sm); margin-bottom: var(--xh-space-4); }
.xh-quote__cite { font-size: var(--xh-text-2xs); letter-spacing: var(--xh-tracking-wider); text-transform: uppercase; color: var(--xh-color-muted); font-style: normal; }

/* CTA band */
.xh-cta {
  position: relative;
  overflow: hidden;
  background: var(--xh-color-ink);
  color: var(--xh-color-surface);
  text-align: center;
  padding-block: var(--xh-space-9);
}

.xh-cta__media { position: absolute; inset: 0; opacity: 0.32; }
.xh-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.xh-cta__inner { position: relative; z-index: 2; max-width: 56ch; margin-inline: auto; }
.xh-cta__title { color: inherit; font-size: var(--xh-text-3xl); }
.xh-cta .xh-eyebrow { color: color-mix(in srgb, var(--xh-color-surface) 70%, transparent); }

/* Awards / press strip */
.xh-awards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--xh-space-6) var(--xh-space-8);
  padding-block: var(--xh-space-6);
  border-block: 1px solid var(--xh-color-line);
}

.xh-awards__item {
  font-family: var(--xh-font-display);
  font-size: var(--xh-text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xh-color-muted);
  text-align: center;
}

.xh-awards img { max-height: 46px; width: auto; filter: grayscale(1); opacity: 0.7; }

/* Why book direct */
.xh-benefits {
  display: grid;
  gap: var(--xh-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.xh-benefit__title { font-family: var(--xh-font-display); font-size: var(--xh-text-lg); margin: 0 0 var(--xh-space-2); }
.xh-benefit__text { margin: 0; font-size: var(--xh-text-sm); color: var(--xh-color-muted); }
.xh-benefit__num { font-size: var(--xh-text-2xs); letter-spacing: 0.2em; color: var(--xh-color-accent); display: block; margin-bottom: var(--xh-space-3); }

/* Map band */
.xh-map { position: relative; min-height: 380px; background: var(--xh-color-surface-2); }
.xh-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

/* Rate rail (room / offer detail) */
.xh-rate {
  border: 1px solid var(--xh-color-line-strong);
  padding: var(--xh-space-5);
  display: grid;
  gap: var(--xh-space-4);
}

.xh-rate__amount { font-family: var(--xh-font-display); font-size: var(--xh-text-2xl); line-height: 1; }
.xh-rate__note { font-size: var(--xh-text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--xh-color-muted); }

/* Empty state (editors only) */
.xh-empty {
  border: 1px dashed var(--xh-color-line-strong);
  padding: var(--xh-space-6);
  background: var(--xh-color-surface-2);
}

.xh-empty__badge { font-size: var(--xh-text-2xs); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.62; margin: 0 0 var(--xh-space-2); }
.xh-empty__title { font-family: var(--xh-font-display); font-size: var(--xh-text-lg); margin: 0 0 var(--xh-space-2); }
.xh-empty__text { margin: 0 0 var(--xh-space-4); max-width: 60ch; }

/* ---------------------------------------------------------- Block styles */
.wp-block-button.is-style-xh-outline .wp-block-button__link {
  background: transparent;
  color: var(--xh-color-ink);
  border: 1px solid var(--xh-color-line-strong);
  border-radius: var(--xh-radius);
  text-transform: uppercase;
  letter-spacing: var(--xh-tracking-wide);
  font-size: var(--xh-text-xs);
}

.wp-block-image.is-style-xh-frame img {
  border: 1px solid var(--xh-color-line);
  padding: var(--xh-space-3);
  background: var(--xh-color-surface);
}

.wp-block-quote.is-style-xh-guest {
  border: 0;
  text-align: center;
  padding: var(--xh-space-6) 0;
  font-family: var(--xh-font-display);
  font-size: var(--xh-text-xl);
}