/* ===========================================================================
   sterling-home.css — the homepage.

   Elementor owns the homepage: the hero is a Container with a background video
   and a fallback still, both set in the widget, and every colour and type size
   in the section below it is a Global. Two things the widget cannot express
   are done here, and nothing else.

   There is deliberately no JavaScript. The fallback still is the video's own
   first frame, so there is no jump to cover when playback starts, and
   Elementor's handler already skips the download entirely on phones — which is
   a widget setting, not something worth reimplementing.
   =========================================================================== */

/* Elementor's Min Height control can say 100vh and no more. On a phone that is
   the tallest the viewport ever gets, so the hero runs on under the address
   bar; svh is the height actually on screen. */
.sterling-hero {
  min-height: 100svh;
  background-size: cover;
  background-position: center;
}

/* The section's vertical rhythm, per design-system.md §3: 128 / 96 / 64.
   It used to be a linked 100px on all four sides in the widget, which set the
   page gutter and the section padding from one control — so the gutter could
   not be brought onto the site's 80/48/24 shell without also flattening the
   band. Horizontal now comes from .st-shell; vertical lives here. */
.sterling-intro {
  padding-block: 8rem;      /* 128px */
}

@media (max-width: 1279px) {
  .sterling-intro { padding-block: 6rem; }   /* 96px */
}

@media (max-width: 767px) {
  .sterling-intro { padding-block: 4rem; }   /* 64px */
}

/* ===========================================================================
   SECTION 03 — THE SPACES

   An index, not a photo grid. Neither media library holds a photograph of the
   Bridal Suite or the Balcony, and two empty cells in a grid of seven is worse
   than no grid. A ruled typographic list is also closer to the palette's own
   idiom, where emphasis comes from scale, rule weight and whitespace.

   Desktop only for now. The row grid collapses to a single column below the
   shell's tablet boundary so nothing is broken in the meantime, but the
   small-screen treatment has not been designed — see state.md.
   =========================================================================== */

.sterling-spaces {
  padding-block: 8rem;      /* 128px · the section rhythm */
}

.sterling-spaces .spaces__label .elementor-heading-title {
  color: var(--ink-muted);
}

.sterling-spaces .spaces__title .elementor-heading-title {
  color: var(--ink-strong);
  line-height: 1.12;
  margin: var(--space-5) 0 0;
}

.sterling-spaces .spaces__lead {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--ink);
  line-height: 1.7;
}

/* --- The index -------------------------------------------------------- */

.sterling-spaces .st-index {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  margin-top: var(--space-9);
  border-top: 1px solid var(--rule);
}

/* Three columns. The figure track is a fixed width rather than max-content:
   each row is its own grid, so a content-sized track is sized seven times
   independently and the dimensions land within a few pixels of each other
   instead of on one line. Fixed, they share an edge. */
.sterling-spaces .st-index__row {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  display: grid;
  grid-template-columns: minmax(0, 18rem) 7rem minmax(0, 1fr);
  column-gap: var(--space-7);
  align-items: baseline;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.sterling-spaces .st-index__name .elementor-heading-title {
  color: var(--ink-strong);
  margin: 0;
}

/* Tabular figures so the seven dimensions align digit under digit. Without
   them the primes drift and the column stops reading as a column. */
.sterling-spaces .st-index__figure .elementor-heading-title {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin: 0;
}

.sterling-spaces .st-index__detail .elementor-heading-title {
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0;
}

.sterling-spaces .spaces__cta {
  margin-top: var(--space-8);
}

@media (max-width: 1279px) {
  .sterling-spaces { padding-block: 6rem; }

  .sterling-spaces .st-index__row {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
}

/* Elementor sizes the background video from JavaScript on every resize.
   object-fit does the same job in the compositor, costs nothing, and still
   covers if that script is throttled or never runs. */
.sterling-hero .elementor-background-video-hosted {
  width: 100%;
  height: 100%;
  object-fit: cover;
}