/*
 * Purpose: Container, grid and section rhythm. Mobile-first: the base is the
 * 4-column mobile grid, widening to 8 at tablet and 12 at desktop.
 */

.rh-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.rh-container--narrow {
  max-width: var(--container-narrow);
}

/* ---------------------------------------------------------------- SECTIONS */

.rh-section {
  padding-block: var(--space-48);
}

@media (min-width: 768px) {
  .rh-section {
    padding-block: var(--space-80);
  }
}

@media (min-width: 1024px) {
  .rh-section {
    padding-block: var(--space-96);
  }
}

/*
 * A section that opens with the breadcrumb trail. The trail carries the gap
 * under the header on every other page type, so this section must not stack
 * its own on top - that is what pushed article pages far below the listings.
 */
.rh-section.rh-section--crumbs {
  padding-top: 0;
}

/*
 * Two sections sharing a background read as one continuous block, so their
 * stacked padding is just a hole in the page - 192px between the two FAQ
 * groups on /faq/, with no visual boundary to justify it. The first section's
 * bottom padding already provides the separation.
 */
.rh-section--white + .rh-section--white,
.rh-section--surface + .rh-section--surface {
  padding-top: 0;
}

.rh-section--tight {
  padding-block: var(--space-32);
}

@media (min-width: 768px) {
  .rh-section--tight {
    padding-block: var(--space-48);
  }
}

/*
 * The white tight section is the one that sits directly above a heading that
 * opens the next block - the trust strip above "What kind of place are you
 * after?". At 48px the strip crowded the heading below it, so the bottom alone
 * opens up. The top keeps the tight rhythm, since what precedes it is usually
 * the hero and already has room.
 */
.rh-section--white.rh-section--tight {
  padding-bottom: var(--space-48);
}

@media (min-width: 768px) {
  .rh-section--white.rh-section--tight {
    padding-bottom: var(--space-64);
  }
}

@media (min-width: 1024px) {
  .rh-section--white.rh-section--tight {
    padding-bottom: var(--space-80);
  }
}

/* Section background treatments, limited to the approved palette. */
.rh-section--white {
  background-color: var(--rh-white);
}

.rh-section--surface {
  background-color: var(--rh-surface);
}

.rh-section--teal {
  background-color: var(--rh-teal-light);
}

.rh-section--dark {
  background-color: var(--rh-dark);
  color: var(--rh-text-inverse);
}

.rh-section--dark h1,
.rh-section--dark h2,
.rh-section--dark h3,
.rh-section--dark h4 {
  color: var(--rh-text-inverse);
}

/* ------------------------------------------------------------ SECTION HEAD */

.rh-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: var(--space-32);
  max-width: 720px;
}

@media (min-width: 768px) {
  .rh-section-head {
    margin-bottom: var(--space-48);
  }
}

.rh-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.rh-section-head--split {
  max-width: none;
}

@media (min-width: 768px) {
  .rh-section-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-32);
  }

  .rh-section-head--split .rh-section-head__text {
    max-width: 720px;
  }
}

.rh-section-head__eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rh-teal);
}

.rh-section--dark .rh-section-head__eyebrow {
  color: var(--rh-lime);
}

.rh-section-head__text > * + * {
  margin-top: var(--space-12);
}

.rh-section-head__lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--rh-text-secondary);
  max-width: 680px;
}

.rh-section--dark .rh-section-head__lead {
  color: rgba(255, 255, 255, 0.78);
}

/* ------------------------------------------------------------------- GRID */

.rh-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .rh-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rh-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/*
 * Auto-fit card grids. Cards never become too narrow just to fit more columns -
 * the minimum width is enforced, so columns drop instead of squeezing.
 */
.rh-cards {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
  .rh-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rh-cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .rh-cards--auto {
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  }
}

/* Compact grids for smaller tiles such as property types. */
.rh-tiles {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .rh-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16);
  }
}

@media (min-width: 1024px) {
  .rh-tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ SPLIT */

/*
 * Columns start at the top. Centring works for a short blurb beside an image,
 * but beside a tall form it floated the heading down to the middle of the page
 * with a large empty gap above it.
 */
.rh-split {
  display: grid;
  gap: var(--space-32);
  align-items: start;
}

@media (min-width: 1024px) {
  .rh-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-64);
  }

  /*
   * Optical alignment for a split whose other half is a form: the first label
   * sits below its own field edge, so the text column needs nudging down to
   * look level with it.
   *
   * This is opt-in. As a blanket rule on every .rh-split__body it pushed the
   * text column 32px below a plain sibling - on the owner block the heading
   * started a third of the way down the checklist beside it, which read as a
   * mistake because it was one.
   */
  .rh-split--offset .rh-split__body {
    padding-top: var(--space-32);
  }

  .rh-split--media-left .rh-split__media {
    order: -1;
  }
}

.rh-split__body > * + * {
  margin-top: var(--space-16);
}

/* ------------------------------------------------------------------ STACK */

.rh-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.rh-stack--sm {
  gap: var(--space-8);
}

.rh-stack--lg {
  gap: var(--space-24);
}

.rh-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

/* Reserve media dimensions to avoid layout shift. */
.rh-ratio {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-media);
  background-color: var(--rh-surface-alt);
}

.rh-ratio::before {
  content: "";
  display: block;
  padding-top: 75%; /* 4:3 - the standard property card ratio */
}

.rh-ratio--16-10::before {
  padding-top: 62.5%;
}

.rh-ratio--16-9::before {
  padding-top: 56.25%;
}

.rh-ratio--square::before {
  padding-top: 100%;
}

.rh-ratio > img,
.rh-ratio > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*
 * A readable measure that lines up with every other section.
 *
 * The container keeps its normal width and gutters, and the measure is applied
 * to the content inside it. Narrowing the container itself moved its left edge
 * away from the page's other sections.
 */
.rh-container--flush > * {
  max-width: var(--container-narrow);
  margin-inline: 0;
}

/*
 * Spacing modifiers that used to be inline styles. The project bans inline
 * styles for a reason: a value written into the markup cannot be overridden by
 * a stylesheet, cannot respond to a media query, and is invisible when you are
 * reading the CSS trying to work out where a gap came from.
 */

/* An action row closing a block of body copy. */
.rh-row--actions {
  margin-top: var(--space-24);
}

/* A single action closing a full-width section. */
.rh-section-foot {
  margin-top: var(--space-40);
}