/*
 * Home (design-reference/Main.dc.html): the brand film full-bleed under the
 * header, the statement, the residences, the 24/7 band, the concierge film
 * band, the grids and the membership band. Cards, spreads and films are in
 * site.css; this file only places them.
 */

/* Hero: the film fills the first screen; the headline sits at its foot over
   a gradient to 60% ebony (handoff section 6, Photography). */
.home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 560px;
  height: 100vh;
  height: 100svh;
  max-height: 960px;
  overflow: hidden;
  background: var(--ebony);
}

.home-hero__film {
  position: absolute;
  inset: 0;
}

.home-hero__film .placeholder {
  height: 100%;
  aspect-ratio: auto;
}

/* Shade at the top for the header, at the foot for the search, and on the
   left behind the headline, whatever frame of the film is showing. */
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(20,17,14,.62) 0%, rgba(20,17,14,.32) 32%, rgba(20,17,14,0) 60%),
    linear-gradient(to bottom, rgba(20,17,14,.42) 0%, rgba(20,17,14,0) 26%, rgba(20,17,14,0) 42%, rgba(20,17,14,.78) 100%);
  pointer-events: none;
}

/* The pause control moves to the top right, clear of the headline. */
.home-hero .film__toggle {
  top: calc(var(--site-header-height) + var(--space-4));
  bottom: auto;
}

/* The words sit low and to the left, like a caption on a photograph, with
   the stay search under them across the frame. */
.home-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  width: 100%;
  max-width: var(--site-max-width);
  padding: 0 var(--site-margin) var(--space-8);
}

.home-hero__words {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 46rem;
}

.home-hero__title {
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.home-hero__title em {
  font-style: italic;
}

.home-hero__lead {
  max-width: 34rem;
  font-size: var(--type-lead-size);
  line-height: 1.6;
  font-weight: 400;
  color: rgba(239, 231, 218, 0.88);
}

/* The stay search: one frosted bar of fields, the button at its end. */
.stay-search {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(239, 231, 218, 0.18);
  background: rgba(20, 17, 14, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.stay-search__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(239, 231, 218, 0.12);
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.stay-search__field:focus-within {
  background: rgba(239, 231, 218, 0.05);
}

.stay-search__field:nth-child(odd) {
  border-right: 1px solid rgba(239, 231, 218, 0.12);
}

.stay-search__field--where {
  grid-column: 1 / -1;
  border-right: 0;
}

.stay-search__field--where ~ .stay-search__field:nth-child(odd) {
  border-right: 0;
}

.stay-search__field--where ~ .stay-search__field:nth-child(even) {
  border-right: 1px solid rgba(239, 231, 218, 0.12);
}

/* Guests takes the whole last row on phones, so no cell is left empty. */
.stay-search__field:nth-of-type(4) {
  grid-column: 1 / -1;
  border-right: 0;
}

.stay-search__label {
  color: var(--brass-light);
  font-size: 12.5px;
  font-weight: var(--weight-label);
  letter-spacing: 0.02em;
}

.stay-search__control {
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ivory);
  color-scheme: dark;
  font-family: var(--font-text);
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.stay-search__control:focus {
  outline: none;
}

select.stay-search__control {
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23D2B88E' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 11px 7px;
}

select.stay-search__control option {
  background: var(--walnut);
  color: var(--ivory);
}

.stay-search__go.btn--site {
  grid-column: 1 / -1;
  height: 58px;
  border-radius: 0;
}

.stay-search:focus-within {
  border-color: rgba(184, 150, 104, 0.6);
}

@media (min-width: 960px) {
  .home-hero__content {
    padding-bottom: 72px;
  }

  .stay-search {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    max-width: 1100px;
  }

  .stay-search__field,
  .stay-search__field--where,
  .stay-search__field--where ~ .stay-search__field:nth-child(odd),
  .stay-search__field--where ~ .stay-search__field:nth-child(even),
  .stay-search__field:nth-of-type(4) {
    grid-column: auto;
    padding: 14px 22px 12px;
    border-bottom: 0;
    border-right: 1px solid rgba(239, 231, 218, 0.12);
  }

  .stay-search__go.btn--site {
    grid-column: auto;
    height: auto;
    min-height: 72px;
    padding: 0 34px;
  }
}

/* The Luxuri way: one centred statement. */
.home-way {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-10);
  text-align: center;
}

.home-way__statement {
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 30px;
  line-height: 1.3;
}

@media (min-width: 960px) {
  .home-way {
    padding-block: 120px;
  }

  .home-way__statement {
    max-width: 960px;
    font-size: 46px;
    line-height: 1.25;
  }
}

/* Residences: two spreads, then the quieter grid. */
.home-residences__spreads {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* ul.… outranks base.css ul[class], which resets list margins. */
ul.home-residences__grid {
  margin-top: var(--space-10);
}

/* 24/7: the walnut band with the brass numeral. */
.home-always {
  background: var(--walnut);
  border-block: 1px solid var(--smoke-soft);
}

.home-always__inner {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10);
}

.home-always__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

.home-always__numeral {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 112px;
  line-height: 0.9;
  color: var(--brass);
  font-variant-numeric: lining-nums;
}

.home-always__title {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
}

.home-always__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-7);
}

.home-always__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-always__label {
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: var(--weight-label);
  line-height: var(--type-label-leading);
  letter-spacing: 0.01em;
  color: var(--brass);
}

.home-always__text {
  max-width: 44ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--sand);
}

@media (min-width: 960px) {
  .home-always__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
    padding-block: var(--space-11);
  }

  .home-always__numeral {
    font-size: 190px;
  }

  .home-always__title {
    font-size: 56px;
  }
}

/* The concierge film band: the heading over the poster, the Play button
   under it; the text steps aside while the film plays (film.js marks the
   stage). */
.home-concierge {
  position: relative;
  min-height: 480px;
  height: 80vh;
  max-height: 720px;
  overflow: hidden;
  background: var(--walnut);
}

.home-concierge__film {
  position: absolute;
  inset: 0;
}

.home-concierge__film .placeholder {
  height: 100%;
  aspect-ratio: auto;
}

.home-concierge__film::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20,17,14,.35);
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.home-concierge__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: 0 var(--site-margin) 140px;
  text-align: center;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.home-concierge__title {
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
}

.home-concierge .film__play {
  top: calc(50% + 70px);
}

.home-concierge.film-stage--playing .home-concierge__content,
.home-concierge.film-stage--playing .home-concierge__film::after {
  opacity: 0;
}

/* Membership band: image and copy side by side from 960px. */
.home-membership {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--walnut);
  border-top: 1px solid var(--smoke-soft);
}

.home-membership__media .placeholder {
  height: 100%;
  min-height: 320px;
  aspect-ratio: auto;
  /* Ebony, so the block shows on the walnut band and its stone caption keeps 5:1. */
  background: var(--ebony);
}

/* The band's photograph (site.membership_media_id) fills the same block. */
.home-membership__media .picture {
  display: block;
  height: 100%;
}

.home-membership__media .picture__img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.home-membership__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-9) var(--site-margin);
}

.home-membership__title {
  font-size: var(--type-h2-size);
  line-height: 1.05;
}

ul.home-membership__list {
  padding-left: 1.2em;
  list-style: disc;
  font-size: var(--type-body-size);
  line-height: 1.9;
  color: var(--sand);
}

.home-membership__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-2);
}

@media (min-width: 960px) {
  .home-membership {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 600px;
  }

  .home-membership__body {
    justify-content: center;
    padding: 80px;
  }

  .home-membership__title {
    font-size: 54px;
  }
}