/*
 * XPRS Hotelier — listing and detail furniture:
 * archive intro bands, card extras, rate rails, panels, tables.
 */

/* --------------------------------------------------------- Archive intro */
.xh-archive-head {
  padding-block: var(--xh-space-7) var(--xh-space-6);
  border-bottom: 1px solid var(--xh-color-line);
}

.xh-archive-head__media {
  margin: calc(var(--xh-space-7) * -1) 0 var(--xh-space-6);
  aspect-ratio: 21 / 8;
  overflow: hidden;
}

.xh-archive-head__media img { width: 100%; height: 100%; object-fit: cover; }

.xh-has-transparent-header .xh-archive-head { padding-top: calc(var(--xh-admin-bar-height) + var(--xh-header-height) + var(--xh-space-7)); }

.xh-archive-head__inner {
  display: grid;
  gap: var(--xh-space-5);
  align-items: end;
  margin-top: var(--xh-space-4);
}

@media (min-width: 900px) {
  .xh-archive-head__inner { grid-template-columns: minmax(0, 1fr) auto; }
}

.xh-archive-head__title {
  font-size: var(--xh-text-3xl);
  line-height: var(--xh-leading-tight);
  margin: 0 0 var(--xh-space-3);
  max-width: 24ch;
}

.xh-archive-head__lead {
  margin: 0;
  color: var(--xh-color-muted);
  font-size: var(--xh-text-md);
  max-width: 62ch;
}

.xh-archive-head__aside { display: flex; align-items: center; gap: var(--xh-space-4); }

.xh-archive-head__status {
  margin: var(--xh-space-3) 0 0;
  font-size: var(--xh-text-xs);
  letter-spacing: var(--xh-tracking-wide);
  text-transform: uppercase;
  color: var(--xh-color-accent);
}

.xh-archive-results[aria-busy="true"] { opacity: 0.55; }
.xh-filter-summary { margin: 0 0 var(--xh-space-4); color: var(--xh-color-muted); }

.xh-detail-panel { margin-top: var(--xh-space-6); }
.xh-detail-widgets { margin-top: var(--xh-space-5); }
.xh-article-meta { color: var(--xh-color-muted); font-size: var(--xh-text-sm); margin: 0 0 var(--xh-space-5); }
.xh-post-nav { display: flex; justify-content: space-between; gap: var(--xh-space-5); margin-top: var(--xh-space-7); padding-top: var(--xh-space-5); border-top: 1px solid var(--xh-color-line); }
.xh-post-nav a { text-decoration: none; }
.xh-search-count { margin-top: var(--xh-space-6); }
.xh-search-empty { margin-top: var(--xh-space-6); }

.xh-grid--search { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.xh-search-result { min-width: 0; }

.xh-hero__pause {
  position: absolute;
  right: var(--xh-space-4);
  bottom: var(--xh-space-4);
  z-index: 3;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(var(--xh-color-on-dark), 0.65);
  color: rgb(var(--xh-color-on-dark));
  background: rgba(var(--xh-color-scrim), 0.45);
  font-size: var(--xh-text-2xs);
  letter-spacing: var(--xh-tracking-wide);
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .xh-archive-head { padding-block: var(--xh-space-6) var(--xh-space-5); }
  .xh-archive-head__title { font-size: var(--xh-text-2xl); }
  .xh-post-nav { flex-direction: column; }
  .xh-card__actions { width: 100%; }
  .xh-card__actions .xh-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .xh-archive-results,
  .xh-card,
  .xh-hero__slide { transition: none !important; }
}

/* ------------------------------------------------------------ Card extras */
.xh-card__media--empty {
  display: grid;
  place-items: center;
  background: var(--xh-color-surface-2);
}

.xh-card__media-fallback {
  font-family: var(--xh-font-display);
  font-size: var(--xh-text-md);
  letter-spacing: var(--xh-tracking-wide);
  text-transform: uppercase;
  color: var(--xh-color-faint);
  padding-inline: var(--xh-space-4);
  text-align: center;
}

.xh-card__count {
  position: absolute;
  bottom: var(--xh-space-3);
  right: var(--xh-space-3);
  background: rgba(var(--xh-color-scrim), 0.62);
  color: rgb(var(--xh-color-on-dark));
  font-size: var(--xh-text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--xh-radius-pill);
}

.xh-card__actions { display: inline-flex; gap: var(--xh-space-2); flex-wrap: wrap; }

.xh-card__footer { flex-wrap: wrap; gap: var(--xh-space-3); }

.xh-card--room .xh-card__title,
.xh-card--offer .xh-card__title { font-size: var(--xh-text-xl); }

.xh-code {
  align-items: center;
  gap: var(--xh-space-3);
}

.xh-code__label {
  font-size: var(--xh-text-2xs);
  letter-spacing: var(--xh-tracking-wide);
  text-transform: uppercase;
  color: var(--xh-color-muted);
}

.xh-code__value {
  font-family: var(--xh-font-body);
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* ---------------------------------------------------------------- Panels */
.xh-panel {
  border: 1px solid var(--xh-color-line);
  background: color-mix(in srgb, var(--xh-color-surface) 96%, var(--xh-color-ink));
  padding: var(--xh-space-5);
  display: grid;
  gap: var(--xh-space-4);
}

.xh-panel__title {
  font-size: var(--xh-text-lg);
  margin: 0;
}

/* Sticky rate rail on room / offer detail pages. */
.xh-rate-rail {
  border: 1px solid var(--xh-color-line-strong);
  background: color-mix(in srgb, var(--xh-color-surface) 96%, var(--xh-color-ink));
  padding: var(--xh-space-5);
  display: grid;
  gap: var(--xh-space-4);
}

@media (min-width: 1000px) {
  .xh-rate-rail { position: sticky; top: calc(var(--xh-admin-bar-height) + var(--xh-header-height-condensed) + var(--xh-space-5)); }
}

.xh-rate-rail__rate {
  font-family: var(--xh-font-display);
  font-size: var(--xh-text-2xl);
  line-height: 1;
}

.xh-rate-rail__note {
  font-size: var(--xh-text-2xs);
  letter-spacing: var(--xh-tracking-wide);
  text-transform: uppercase;
  color: var(--xh-color-muted);
  margin: 0;
}

/* ----------------------------------------------------------- Spec tables */
.xh-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--xh-text-sm);
}

.xh-spec th,
.xh-spec td {
  text-align: left;
  padding: var(--xh-space-3) 0;
  border-bottom: 1px solid var(--xh-color-line);
  vertical-align: top;
}

.xh-spec th { font-weight: 500; color: var(--xh-color-muted); width: 42%; }

/* --------------------------------------------------------- Contact layout */
.xh-contact-grid {
  display: grid;
  gap: var(--xh-space-6);
}

@media (min-width: 900px) {
  .xh-contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.xh-map {
  border: 1px solid var(--xh-color-line);
  aspect-ratio: 4 / 3;
  width: 100%;
}

.xh-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------ Tab-style filters */
.xh-filters--tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--xh-space-2);
  padding: 0;
  border: 0;
  background: none;
}

a.xh-chip {
  text-decoration: none;
  transition: color var(--xh-duration) var(--xh-ease),
    border-color var(--xh-duration) var(--xh-ease),
    background var(--xh-duration) var(--xh-ease);
}

a.xh-chip:hover { border-color: var(--xh-color-line-strong); }

.xh-chip.is-active {
  background: var(--xh-color-ink);
  border-color: var(--xh-color-ink);
  color: var(--xh-color-surface);
}

/* Mosaic gallery variant used on detail and story pages. */
.xh-gallery--mosaic .xh-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }

/* ------------------------------------------- Property section navigation */
.xh-propnav {
  border-bottom: 1px solid var(--xh-color-line);
  background: var(--xh-color-surface);
  position: relative;
  z-index: 2;
}

.xh-propnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--xh-space-5);
  overflow-x: auto;
  scrollbar-width: none;
}

.xh-propnav__list::-webkit-scrollbar { display: none; }

.xh-propnav__link {
  display: inline-block;
  padding: var(--xh-space-3) 0;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--xh-color-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--xh-duration) var(--xh-ease),
    border-color var(--xh-duration) var(--xh-ease);
}

.xh-propnav__link:hover { color: var(--xh-color-ink); }

.xh-propnav__link.is-current {
  color: var(--xh-color-ink);
  border-bottom-color: var(--xh-color-ink);
}

.xh-crumbs-band { padding-top: var(--xh-space-5); }

/* --------------------------------------- Destination collection index grid */
.xh-locgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--xh-space-6);
}

.xh-locgrid__item {
  border-top: 1px solid var(--xh-color-line);
  padding-top: var(--xh-space-4);
}

.xh-locgrid__title { margin: 0; }

.xh-locgrid__count {
  margin: var(--xh-space-1) 0 var(--xh-space-3);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--xh-color-muted);
}

.xh-locgrid__list { list-style: none; margin: 0; padding: 0; }

.xh-locgrid__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--xh-space-3);
  padding: var(--xh-space-2) 0;
  border-bottom: 1px solid var(--xh-color-line);
}

.xh-locgrid__list a { text-decoration: none; }
.xh-locgrid__list a:hover { text-decoration: underline; }

.xh-locgrid__badge {
  font-size: 0.78rem;
  color: var(--xh-color-muted);
  font-variant-numeric: tabular-nums;
}

.xh-card__note {
  margin: var(--xh-space-3) 0 0;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
 * In-house booking panels (shown when the hotel sells through this website)
 * ------------------------------------------------------------------------- */

.xh-book-panel {
	display: grid;
	gap: var(--xh-space-3);
}

.xh-book-panel__label,
.xh-book-panel__note {
	margin: 0;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--xh-color-muted, currentColor);
	opacity: 0.75;
}

.xh-book-panel__note {
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.7;
}

.xh-book-panel__rate {
	margin: 0;
	font-family: var(--xh-font-display);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.1;
}

.xh-book-panel__scarce {
	margin: 0;
	padding: var(--xh-space-2) var(--xh-space-3);
	border: 1px solid var(--xh-color-line);
	font-size: 0.85rem;
}

.xh-book-panel__form {
	display: grid;
	gap: var(--xh-space-3);
	margin: 0;
	padding-top: var(--xh-space-3);
	border-top: 1px solid var(--xh-color-line);
}

.xh-book-panel__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--xh-space-3);
}

.xh-book-panel .xh-field {
	display: grid;
	gap: 0.35rem;
}

.xh-availability__rooms {
	list-style: none;
	margin: var(--xh-space-5) 0 0;
	padding: 0;
	border-top: 1px solid var(--xh-color-line);
}

.xh-availability__room {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--xh-space-4);
	flex-wrap: wrap;
	padding: var(--xh-space-4) 0;
	border-bottom: 1px solid var(--xh-color-line);
}

.xh-availability__name {
	flex: 1 1 16rem;
	display: grid;
	gap: 0.25rem;
}

.xh-availability__flag {
	font-size: 0.78rem;
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.xh-availability__rate {
	font-family: var(--xh-font-display);
	font-size: 1.1rem;
	white-space: nowrap;
}

.xh-engine__focus {
	margin: 0 0 var(--xh-space-3);
	display: flex;
	gap: var(--xh-space-3);
	flex-wrap: wrap;
	align-items: baseline;
	font-size: 0.95rem;
}

@media (max-width: 560px) {
	.xh-book-panel__row {
		grid-template-columns: 1fr;
	}

	.xh-availability__room {
		align-items: flex-start;
	}
}