/* XPRS Hotelier — layout primitives. */

.xh-container {
  width: 100%;
  max-width: var(--xh-container);
  margin-inline: auto;
  padding-inline: var(--xh-space-5);
}

.xh-container--wide { max-width: var(--xh-container-wide); }
.xh-container--narrow { max-width: var(--xh-container-narrow); }
.xh-container--flush { padding-inline: 0; }

@media (max-width: 699px) {
  .xh-container { padding-inline: var(--xh-space-4); }
  .xh-container--flush { padding-inline: 0; }
}

@media (min-width: 900px) {
  .xh-container { padding-inline: var(--xh-space-7); }
}

.xh-main { display: block; }

/* Sections */
.xh-section { padding-block: var(--xh-space-8); }
.xh-section--tight { padding-block: var(--xh-space-7); }
.xh-section--roomy { padding-block: var(--xh-space-9); }
.xh-section--flush-top { padding-top: 0; }
.xh-section--alt { background: var(--xh-color-surface-2); }
.xh-section--ink {
  background: var(--xh-color-ink);
  color: var(--xh-color-surface);
}
.xh-section--ink .xh-eyebrow,
.xh-section--ink .xh-section-heading__lead { color: color-mix(in srgb, var(--xh-color-surface) 72%, transparent); }
.xh-section--hairline { border-top: 1px solid var(--xh-color-line); }

/* Content blocks are page sections, so adjacent blocks share one rhythm. */
.xh-blocks > .xh-section:first-child { padding-top: var(--xh-space-8); }
.xh-blocks > .xh-section:last-child { padding-bottom: var(--xh-space-8); }
.xh-section + .xh-section,
.xh-section + .xh-blocks,
.xh-blocks + .xh-section { border-top-color: transparent; }

@media (max-width: 699px) {
  .xh-section,
  .xh-section--roomy { padding-block: var(--xh-space-7); }
  .xh-section--tight { padding-block: var(--xh-space-6); }
  .xh-section--flush-top { padding-top: 0; }
  .xh-blocks > .xh-section:first-child { padding-top: var(--xh-space-7); }
  .xh-blocks > .xh-section:last-child { padding-bottom: var(--xh-space-7); }
}

/* Grids */
.xh-grid {
  display: grid;
  gap: var(--xh-space-6) var(--xh-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.xh-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.xh-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.xh-grid--tight { gap: var(--xh-space-4); }

@media (min-width: 1100px) {
  .xh-grid--fixed-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xh-grid--fixed-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Split */
.xh-split {
  display: grid;
  gap: var(--xh-space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .xh-split {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
    gap: var(--xh-space-8);
  }

  .xh-split--even { grid-template-columns: 1fr 1fr; align-items: center; }
  .xh-split--reverse > :first-child { order: 2; }

}

@media (min-width: 1100px) {
  .xh-layout--sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: var(--xh-space-8);
  }
}

/* Sticky rail (room rate panel, property aside) */
.xh-rail { display: grid; gap: var(--xh-space-5); }

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

/* Editorial mosaic */
.xh-mosaic {
  display: grid;
  gap: var(--xh-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xh-mosaic figure { margin: 0; overflow: hidden; }
.xh-mosaic img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .xh-mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 180px;
  }
  .xh-mosaic > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .xh-mosaic > :nth-child(4) { grid-column: span 2; }
}

/* Full-bleed helper inside a container */
.xh-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Cluster / row helpers */
.xh-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xh-space-3);
}

.xh-cluster--between { justify-content: space-between; }
.xh-stack { display: grid; gap: var(--xh-space-4); }
.xh-stack--tight { gap: var(--xh-space-2); }
.xh-center { text-align: center; }
.xh-center .xh-section-heading { margin-inline: auto; }

/* Responsive header row pattern: text shrinks, widgets keep their size. */
.xh-headrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--xh-space-4);
}

@media (min-width: 640px) {
  .xh-headrow { display: flex; flex-wrap: wrap; justify-content: space-between; }
}

.xh-headrow__text { min-width: 0; }
.xh-shrink-0 { flex-shrink: 0; }