/*
 * Our hospitality (design-reference/Hospitality.dc.html): the dark hero, the
 * four pillars, the host placeholders, the five moments of a stay and the
 * concierge desk line. Eyebrows and section heads come from site.css.
 */
.hospitality-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-11) var(--site-margin);
  background: var(--walnut);
  border-bottom: 1px solid var(--smoke);
  text-align: center;
}

.hospitality-hero__title {
  max-width: 16ch;
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
}

/* Jost 300 only from 19px up (handoff section 6), so phones get 400. */
.hospitality-hero__lead {
  max-width: 720px;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-leading);
  color: var(--sand);
}

@media (min-width: 960px) {
  .hospitality-hero__lead {
    font-weight: var(--weight-lead);
  }
}

.hospitality-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: var(--space-10) var(--site-margin) 0;
}

.hospitality-section--last {
  padding-bottom: var(--space-11);
}

/* The Luxuri standard ---------------------------------------------------------- */
.hospitality-pillars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.hospitality-pillars__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: 18px;
  border-top: 1px solid var(--ivory);
}

.hospitality-pillars__title {
  font-family: var(--font-text);
  font-weight: var(--weight-label);
  font-size: 17px;
  line-height: 1.4;
}

.hospitality-pillars__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sand);
}

/* Meet the hosts ------------------------------------------------------------------ */
.hospitality-hosts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
}

.hospitality-hosts__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hospitality-hosts__item .placeholder {
  border-radius: 0;
}

.hospitality-hosts__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 28px;
  line-height: 1.1;
}

.hospitality-hosts__residences {
  font-size: var(--type-small-size);
  color: var(--sand);
}

/* Day and night, start to finish ------------------------------------------------- */
.hospitality-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.hospitality-flow__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 150px;
  padding: var(--space-5);
  background: var(--walnut);
  border: 1px solid var(--smoke);
}

.hospitality-flow__when {
  font-size: 13px;
  font-weight: var(--weight-label);
  color: var(--brass);
}

.hospitality-flow__what {
  font-size: 15px;
  line-height: 1.6;
}

.hospitality-concierge {
  font-size: 15px;
  color: var(--sand);
  scroll-margin-top: var(--space-6);
}

@media (min-width: 640px) {
  .hospitality-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .hospitality-pillars,
  .hospitality-hosts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hospitality-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* A published host's few lines (phase 4 design D12). */
.hospitality-hosts__bio {
  margin: var(--space-2) 0 0;
  color: var(--sand);
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
}