/* ============================================================
   Gallery mosaic
   ============================================================ */

.gallery {
  position: relative;
  /* Room for the chips and Share button, which now hang below the mosaic's edge. */
  margin-bottom: 23px;
  background: var(--color-grey-light);
}

.gallery__mosaic {
  display: grid;
  grid-template-columns: 315fr 919fr 676fr;
  gap: 4px;
  /* 650px is the design's height on its 1920 canvas, so the photos keep that shape as the
     window narrows. The 200px is the name and address under the photos: a short window
     gives up photo height before it pushes them off the first screen. */
  height: clamp(
    280px,
    min(33.85vw, calc(100vh - var(--header-height) - 200px)),
    650px
  );
}

.gallery__mosaic--single {
  grid-template-columns: 1fr;
}

.gallery__mosaic--pair {
  grid-template-columns: 315fr 919fr;
}

.gallery__panel {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.gallery__panel > img {
  transition: scale var(--duration-slow) var(--ease-out);
}

.gallery__panel:hover > img {
  scale: 1.03;
}

.gallery__arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
}

.gallery__arrow--prev {
  left: var(--space-10);
}

.gallery__arrow--next {
  right: var(--space-10);
}

.gallery__chips,
.gallery__share {
  position: absolute;
  bottom: -23px;
  z-index: 2;
}

.gallery__chips {
  left: max(var(--space-20), calc((100% - 1280px) / 2));
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.gallery__chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  white-space: nowrap;
  height: 44px;
  padding: 0 15px;
  border-radius: 10px;
  background: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-rose);
  box-shadow: var(--shadow-field);
}

.gallery__share {
  right: max(var(--space-20), calc((100% - 1280px) / 2));
}

.gallery__expand {
  position: absolute;
  right: 132px;
  bottom: 92px;
  z-index: 2;
  width: 56px;
  height: 56px;
}

/* ============================================================
   Two-column body
   ============================================================ */

.details__layout {
  display: grid;
  grid-template-columns: minmax(0, 820px) 400px;
  justify-content: center;
  gap: var(--space-16);
  align-items: start;
  padding-block: var(--space-12) var(--space-20);
}

.detail-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px var(--space-8);
}

.detail-title__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.detail-title h1 {
  grid-column: 1 / -1;
  font-size: 50px;
  line-height: 1.2;
  font-weight: var(--weight-medium);
}

.detail-title__neighborhood {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--color-green-primary);
}

.detail-title__address {
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-secondary);
}

.detail-title__rating .rating__star {
  color: var(--color-star);
}

.detail-title__rating .rating__value {
  font-size: var(--text-lead);
  line-height: 24px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
}

.detail-title__sqft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: var(--color-rose);
}

.detail-description {
  margin-top: var(--space-8);
  color: var(--text-secondary);
}

/* The mobile-only affordances stay out of the desktop layout entirely. The unit rail
   carries lazy images, so hiding it here is also what keeps a desktop visitor from
   downloading every unit's photo set. */
.gallery__count,
.gallery__dots,
.unit-rail {
  display: none;
}

.detail-block {
  margin-top: var(--space-16);
}

.detail-block h2 {
  margin-bottom: var(--space-6);
  font-size: var(--text-h3);
}

.detail-block__lede {
  margin-bottom: var(--space-5);
  color: var(--text-secondary);
}

.detail-block__subtitle {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: var(--text-h4);
}

.detail-block__body {
  color: var(--text-secondary);
}

/* --- Amenity lists --- */

/* Reading order runs down the left column before the right, so the grid flows by column.
   A column flow needs a row count to break on, and that comes in as an inline style. */
.amenity-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.amenity-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-lead);
  line-height: 24px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
}

.amenity-list__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--color-grey-dark);
}

/* --- Location map --- */

.detail-map {
  height: 450px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-grey-light);
}

.detail-map__canvas {
  width: 100%;
  height: 100%;
}

/* --- What's around --- */

.around__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.around__head h2 {
  margin-bottom: 0;
}

.around__score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.around__score-value {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--color-green-primary);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
}

.around__score-label {
  display: flex;
  flex-direction: column;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.around__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-bottom: 15px;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid #e6ebec;
}

.around__pills .filter-pill {
  height: auto;
  gap: 5px;
  padding: 7px 14px;
  border-color: #e6ebec;
  font-size: 13px;
  line-height: normal;
  font-weight: var(--weight-regular);
  letter-spacing: -0.25px;
  color: #3a4a4e;
}

.around__pills .filter-pill.is-active {
  gap: 7px;
  border-color: #0f1a1d;
  background: var(--color-grey-secondary);
  color: var(--text-inverse);
}

.around__pills .filter-pill__count {
  opacity: 1;
  font-size: inherit;
}

.around__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.place {
  display: flex;
  align-items: center;
  gap: 15px;
  /* A grid item won't shrink below its content by default, and the name doesn't wrap.
     Without this a long name widens its whole column past the page. */
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-md);
  background: var(--color-super-light-grey);
}

.place__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid #e6ebec;
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-grey-secondary);
}

.place__copy {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.place__category {
  font-size: 10px;
  line-height: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a82a6e;
}

.place__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-body);
  line-height: 18.2px;
  font-weight: var(--weight-bold);
  color: var(--color-grey-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place__stats {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 5px;
  width: 55px;
}

.place__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--weight-semibold);
  color: #1a1a1a;
}

/* The masked glyphs take currentColor, so each keeps its own tint from the export:
   a teal star and a gray pedestrian against the near-black figures. */
.place__stat:first-child .icon {
  color: var(--color-green-secondary);
}

.place__stat + .place__stat .icon {
  color: var(--color-grey);
}

/* A place with no rating leaves the distance as the first stat, which would turn its pin teal. */
.place__stat--distance .icon {
  color: var(--color-grey);
}

.around__more {
  margin-top: var(--space-4);
}

.around__credit {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ============================================================
   Booking sidebar
   ============================================================ */

.booking {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.booking__dates {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 44px 30px 30px;
  border: 1px solid rgba(15, 118, 110, 0.4);
  border-radius: var(--radius-control-lg);
  background: #f6fbfc;
}

.booking__summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.booking__nights,
.booking__min,
.booking__from {
  font-size: var(--text-body);
  line-height: 24px;
  color: var(--color-grey-secondary);
  white-space: nowrap;
}

.booking__nights strong,
.booking__min strong {
  font-weight: var(--weight-semibold);
}

.booking__from strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 30px;
  line-height: 24px;
  font-weight: var(--weight-bold);
  color: var(--color-green-primary);
}

.booking__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.booking__field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding-inline: 15px;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-control);
  background: var(--color-white);
  overflow: hidden;
  cursor: pointer;
}

.booking__field-icon {
  flex: none;
  color: var(--color-rose);
}

.booking__field-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.2;
}

.booking__field-label {
  font-size: var(--text-xs);
  color: var(--color-grey);
}

.booking__field-value {
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
  white-space: nowrap;
}

/* The field clips its value, so the guests one has to let its dropdown out. */
.booking__field[data-stay-field='guests'] {
  position: relative;
  overflow: visible;
}

.booking__guests {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Stretches the trigger over the whole field, icon included, like the select it replaced. */
.booking__guests::after {
  content: '';
  position: absolute;
  inset: 0;
}

.booking__guests:focus-visible {
  outline: none;
}

.booking__field[data-stay-field='guests']:focus-within {
  border-color: var(--color-green-primary);
}

/* --- Guests dropdown --- */
.guest-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  /* Above the unit cards' own stacked photos and badges (z-index 1–2). */
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: min(340px, 100%);
  padding: 30px;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-control);
  background: var(--color-white);
  box-shadow: var(--shadow-field);
  cursor: default;
}

.guest-picker[hidden] {
  display: none;
}

.guest-picker__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.guest-picker__label,
.guest-picker__count {
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-grey-dark);
}

.guest-picker__stepper {
  display: flex;
  align-items: center;
  gap: 25px;
}

.guest-picker__count {
  width: 23px;
  text-align: center;
}

.guest-picker__step {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid var(--color-grey-light);
  border-radius: 50%;
  background: transparent;
  color: var(--color-grey-secondary);
  cursor: pointer;
}

/* The svg draws its glyph on the 29px circle's own grid, so it sits over the border. */
.guest-picker__step svg {
  margin: -1px;
}

.guest-picker__step:hover:not(:disabled),
.guest-picker__step:focus-visible {
  border-color: var(--color-green-primary);
  outline: none;
}

.guest-picker__step:disabled {
  color: var(--color-grey);
  cursor: default;
}

/* ============================================================
   Check Unit Availability popup
   ============================================================ */

.avail-modal__dialog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 299px;
  width: min(910px, 100%);
  border-radius: var(--radius-lg);
}

.avail-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px 44px;
}

.avail-form__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 26px;
  line-height: normal;
  font-weight: var(--weight-semibold);
  color: var(--color-grey-secondary);
}

.avail-form .form-row {
  gap: 20px;
}

.avail-form__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-body);
  color: var(--color-grey-secondary);
  cursor: pointer;
}

.avail-form__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-green-primary);
}

.avail-form__date {
  position: relative;
  display: block;
}

.avail-form__date .form-field__control {
  padding-right: 42px;
  cursor: pointer;
}

.avail-form__date-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  translate: 0 -50%;
  color: var(--color-rose);
  pointer-events: none;
}

.avail-form__purpose {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 25px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A legend ignores flex gap and sits on the fieldset's border unless it floats. */
.avail-form__purpose legend {
  float: left;
  width: 100%;
  padding: 0;
}

.avail-form__radios {
  display: flex;
  gap: 25px;
  clear: both;
}

.avail-form__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
}

.avail-form__status {
  margin-right: auto;
  font-size: var(--text-sm);
  color: var(--color-green-primary);
}

.avail-form__status.is-error {
  color: var(--color-rose);
}

.avail-form__submit {
  padding: 15px 50px;
}

.avail-modal__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 56px 36px;
  background: var(--color-green-primary);
  font-size: var(--text-body);
  color: var(--color-white);
}

.avail-modal__aside-title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 30px;
  font-weight: var(--weight-semibold);
}

.avail-modal__phone {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

.avail-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-grey-secondary);
  cursor: pointer;
}

.booking__check {
  width: 100%;
  height: 50px;
  border: 1px solid var(--color-green-primary);
  background: var(--color-white);
  color: var(--color-green-primary);
  font-size: 18px;
  letter-spacing: 1.26px;
  box-shadow: 0 10px 7.5px rgba(0, 144, 146, 0.25);
}

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

/* The Select Unit sheet's own chrome — phone only, see the 900px block. */
.booking__sheet-head,
.booking__stay {
  display: none;
}

.booking__prompt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-5);
  border: 1px dashed rgba(15, 118, 110, 0.4);
  border-radius: 14px;
  font-size: var(--text-sm);
  line-height: 22px;
  color: var(--color-grey-secondary);
}

.booking__prompt svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-rose);
}

/* --- Unit cards --- */

.unit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 30px;
  border: 1px solid rgba(15, 118, 110, 0.4);
  border-radius: 14px;
  background: #f6fbfc;
}

/* A unit that cannot hold the party is dimmed but still listed, so the list does not
   change length as the guest count changes. */
.unit-card.is-unavailable {
  opacity: 0.45;
}

.unit-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.unit-card__identity {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.unit-card__name {
  font-size: var(--text-h3);
  line-height: 26px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
  text-decoration: underline;
}

.unit-card__meta {
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-grey);
}

.unit-card__sqft {
  font-weight: var(--weight-medium);
  color: var(--color-rose);
}

.unit-card__badge {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-rose);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: var(--weight-bold);
}

.unit-photos {
  position: relative;
  flex: none;
  width: 88px;
  height: 65px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.unit-photos::before,
.unit-photos::after {
  content: '';
  position: absolute;
  border: 1px solid var(--color-grey-light);
  border-radius: 4px;
  background: var(--color-white);
}

.unit-photos::before {
  inset: 0 16px 10px 0;
}

.unit-photos::after {
  inset: 3px 8px 6px 8px;
}

.unit-photos img {
  position: absolute;
  z-index: 1;
  inset: 5px 5px 0 11px;
  width: calc(100% - 16px);
  height: calc(100% - 5px);
  object-fit: cover;
  border-radius: 4px;
  filter: brightness(0.6);
}

.unit-photos span {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: 50%;
  translate: 0 -50%;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-white);
  text-decoration: underline;
}

.unit-card__rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: 5px;
}

.unit-tour {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: #493827;
}

.unit-tour span {
  text-decoration: underline;
}

.unit-card__rate {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}

.unit-card__rate strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 20px;
  font-weight: var(--weight-bold);
  color: var(--color-green-secondary);
}

.unit-card__rate span {
  font-size: var(--text-sm);
  color: var(--color-grey);
}

.unit-card__actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.unit-card__book {
  width: 169px;
  height: 50px;
  font-size: 18px;
  letter-spacing: 1.26px;
  box-shadow: 0 10px 7.5px rgba(0, 144, 146, 0.25);
}

.unit-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
  white-space: nowrap;
}

.unit-card__nights {
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-grey-secondary);
}

.unit-card__nights strong {
  font-weight: var(--weight-semibold);
}

.unit-card__total {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}

.unit-card__total strong {
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-secondary);
}

.unit-card__total span,
.unit-card__total del {
  font-size: var(--text-sm);
  color: var(--color-grey);
}

.unit-card__due {
  font-size: var(--text-sm);
  line-height: 1;
  color: #6aa2b7;
}

.unit-card__due strong {
  font-weight: var(--weight-medium);
}

/* --- Inquire-only variant: no rate to quote, so it offers the phone line --- */

.unit-card__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-grey-dark);
}

.unit-card__reach,
.unit-card__contact a {
  font-weight: var(--weight-semibold);
  color: inherit;
}

.unit-card__limited {
  color: var(--color-grey);
}

.unit-card__check {
  width: 100%;
  height: 50px;
  font-size: 18px;
  letter-spacing: 1.26px;
}

/* ============================================================
   3D tour band
   ============================================================ */

/* The same inward arc as the home page's tour band; see home.css for why it is a circle
   and not an ellipse. */
.detail-tour {
  --arc-depth: 3.44vw;
  --arc-radius: 365.1vw;

  position: relative;
  min-height: 860px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text-inverse);
  text-align: center;

  /* The fade runs over the last 1px only. As 99.9% it was a tenth of a 365vw radius,
     a 7px blur along both arcs at 1920. */
  -webkit-mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 calc(100% - 1px), #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 calc(100% - 1px), #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 calc(100% - 1px), #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 calc(100% - 1px), #000 100%);
  mask-composite: intersect;
}

.detail-tour__media,
.detail-tour__scrim {
  position: absolute;
  inset: 0;
}

.detail-tour__scrim {
  background: rgba(0, 0, 0, 0.25);
}

/* The tabs are pinned near the top of the band; the play control sits on its center.
   The content has to span the whole band for that top offset to mean anything, so it
   stretches rather than being centered as a grid item. */
.detail-tour__content {
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  place-items: center;
}

.detail-tour__play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.detail-tour__play-disc {
  position: relative;
  display: block;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-pill);
  background: var(--color-rose);
  transition: scale var(--duration-fast) var(--ease-out);
}

/* The play triangle, drawn from borders so it needs no asset. */
.detail-tour__play-disc::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -35% -50%;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--color-white);
}

.detail-tour__play:hover .detail-tour__play-disc {
  scale: 1.06;
}

.detail-tour__play-label {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-h3);
  line-height: 32px;
  font-weight: var(--weight-medium);
  color: var(--text-inverse);
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}

.detail-tour__tabs {
  position: absolute;
  /* The arc bites arc-depth into the band at its center, right where the tabs sit, so
     the 60px is counted from the bottom of the bite rather than the band's top edge. */
  top: calc(var(--arc-depth) + 60px);
  left: 50%;
  translate: -50% 0;
  /* An absolute box at left: 50% is offered only the right half of the band, so six
     sizes wrapped to a second row with the other half empty. It takes its own width,
     up to the full band. */
  width: max-content;
  max-width: calc(100% - var(--gutter) * 2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
}

.detail-tour__tab {
  padding: var(--space-2) var(--space-5);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--text-inverse);
}

.detail-tour__tab[aria-selected='true'] {
  background: var(--color-white);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   Reviews and similar properties
   ============================================================ */

.detail-reviews {
  background: linear-gradient(180deg, var(--surface-page), var(--surface-mint));
}

/* CSS columns rather than a grid. The reviews are all different heights, and a grid would
   hold a ragged row open wherever a short one sat beside a long one. */
.detail-reviews__grid {
  columns: 2;
  column-gap: 100px;
}

.review {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Columns break mid-element by default, which would split a review across tracks. */
  break-inside: avoid;
  margin-bottom: 50px;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-grey-light);
}

.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.review__head .rating__stars {
  gap: 2px;
}

.review__verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  line-height: 16px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
  color: var(--color-green-secondary);
  white-space: nowrap;
}

.review__name {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 17px;
  line-height: 24px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.15px;
  color: var(--color-grey);
}

.review__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--weight-medium);
  color: var(--color-grey-dark);
}

.review__quote {
  font-size: var(--text-body);
  line-height: 28px;
  color: var(--color-grey-dark);
}

.detail-reviews__more {
  margin-top: var(--space-10);
  text-align: center;
}

.detail-similar__grid {
  display: flex;
  gap: 30px;
  padding-left: max(var(--gutter), calc((100% - var(--container-max)) / 2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.detail-similar__grid::-webkit-scrollbar {
  display: none;
}

.detail-similar__grid > * {
  flex: 0 0 417.5px;
  scroll-snap-align: start;
}

.detail-similar__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.detail-similar__nav[hidden] {
  display: none;
}

.detail-similar__nav .icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.detail-similar__nav .icon-btn:disabled:hover {
  background: transparent;
}

/* ============================================================
   Mobile sticky booking bar
   ============================================================ */

.booking-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 10px 20px 19px;
  background: var(--color-white);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.1);
}

.booking-bar__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.booking-bar__price strong {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--color-green-primary);
}

.booking-bar__price {
  height: 24px;
}

.booking-bar__min {
  height: 18px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.booking-bar__cta {
  width: 100%;
  margin-top: 10px;
  min-height: 56px;
  border: 1px solid var(--color-green-primary);
  color: var(--color-green-primary);
  background: transparent;
}

.booking-bar__cta:hover {
  background: var(--color-green-primary);
  color: var(--text-inverse);
}

/* ============================================================
   Lightbox
   ============================================================ */

.lightbox {
  background: rgba(10, 14, 20, 0.92);
}

.lightbox__dialog {
  display: flex;
  flex-direction: column;
  gap: 19px;
  align-items: center;
  width: min(100%, 1280px);
  /* Nothing inside may widen the dialog: the thumb strip is a full shoot laid end to end
     and would otherwise set the width and carry the close button off the screen. */
  min-width: 0;
}

.lightbox__stage {
  position: relative;
  width: 100%;
  min-width: 0;
  height: min(72vh, 750px);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--surface-dark);
}

.lightbox__photo {
  height: 100%;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
}

.lightbox__nav--prev {
  left: var(--space-4);
}

.lightbox__nav--next {
  right: var(--space-4);
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  min-width: 0;
  color: var(--text-inverse);
}

.lightbox__title {
  display: flex;
  flex-direction: column;
}

.lightbox__title strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-h4);
}

.lightbox__title span {
  font-size: var(--text-xs);
  color: var(--text-inverse-muted);
}

.lightbox__chips {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.lightbox__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-inverse);
  text-decoration: underline;
  filter: drop-shadow(0 4px 7.5px rgba(0, 0, 0, 0.1));
}

.lightbox__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
}

.lightbox__price {
  font-size: var(--text-xs);
  color: var(--text-inverse-muted);
}

.lightbox__price strong {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-h4);
  color: var(--text-inverse);
}

.lightbox__counter {
  font-size: var(--text-lead);
  line-height: 20px;
  letter-spacing: -1.12px;
  color: var(--text-inverse);
}

.lightbox__counter strong {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
}

/* The 3D tour popup borrows the lightbox's dialog, stage and bar. Only the frame and the
   size pills are its own. */
.tour-modal__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tour-modal__note {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-inverse-muted);
}

.tour-modal__bar {
  flex-wrap: wrap;
}

.tour-modal__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
}

.tour-modal__pill {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--text-inverse);
}

.tour-modal__pill[aria-selected='true'] {
  background: var(--color-white);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.lightbox__thumbs {
  display: flex;
  gap: 3px;
  align-items: center;
  margin-top: 11px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

/* The <li> is the flex item, so the size hold goes on it: the strip scrolls sideways
   rather than squeezing every thumbnail to fit. */
.lightbox__thumbs > li {
  flex: none;
}

.lightbox__thumb {
  display: block;
  width: 88px;
  height: 65px;
  border-radius: var(--radius-xs);
  overflow: hidden;
  opacity: 0.5;
  outline: 2px solid transparent;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.lightbox__thumb.is-active,
.lightbox__thumb:hover {
  opacity: 1;
  outline-color: var(--color-white);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1280px) {
  .details__layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-10);
  }

  .gallery__chips {
    left: var(--gutter);
  }

  .gallery__share,
  .gallery__expand {
    right: var(--gutter);
  }
}

@media (max-width: 1024px) {
  /* `1fr` keeps an automatic minimum, so the widest card stretched the track past the
     container. minmax(0, 1fr) plus min-width on the columns lets it shrink. */
  .details__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .details__main,
  .booking {
    min-width: 0;
  }

  .booking {
    position: static;
  }

  .detail-reviews__grid {
    columns: 1;
  }

  .review {
    margin-bottom: var(--space-5);
  }
}

@media (max-width: 900px) {
  .gallery {
    margin-bottom: 0;
    /* Clips the sliding track below. */
    overflow: hidden;
  }

  .details__layout {
    padding-top: 20px;
  }

  /* The three panels become a track resting one panel in, so the hero (the second
     panel) fills the frame with its neighbors standing by either side. details.js
     slides the track to a neighbor, then re-centers the photo window underneath. */
  .gallery__mosaic {
    display: flex;
    /* No gap: the translate steps in whole panel widths. */
    gap: 0;
    height: 280px;
    transform: translateX(-100%);
  }

  .gallery__mosaic.is-sliding {
    transition: transform var(--duration-base) var(--ease-out);
  }

  .gallery__panel {
    flex: 0 0 100%;
  }

  /* A single photo has no neighbors and no travel. */
  .gallery__mosaic--single {
    transform: none;
  }

  .gallery__share,
  .gallery__expand,
  .gallery__arrow,
  .gallery__chip[data-gallery-open] {
    display: none;
  }

  .gallery__count {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    min-width: 55px;
    height: 28px;
    padding-inline: 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-grey-dark);
  }

  .gallery__dots {
    position: absolute;
    bottom: 26px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .gallery__dots i {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.55);
    transition: width var(--duration-fast) var(--ease-out);
  }

  .gallery__dots i.is-active {
    width: 16px;
    background: var(--color-white);
  }

  /* The chip row scrolls sideways rather than wrapping a label onto two lines. */
  .gallery__chips {
    left: 0;
    right: 0;
    bottom: var(--space-3);
    gap: var(--space-2);
    padding-inline: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .gallery__chips::-webkit-scrollbar {
    display: none;
  }

  .gallery__chip {
    height: 38px;
    padding: 0 12px;
    gap: 6px;
    font-size: var(--text-xs);
    letter-spacing: 1px;
  }

  .detail-block h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .detail-title h1 {
    font-size: 30px;
    line-height: 38px;
  }

  .detail-title {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-title__address {
    font-size: 15px;
    line-height: 22px;
  }

  .detail-title__sqft {
    justify-self: start;
  }

  /* One column. The row template the desktop column flow needs comes in as an inline
     style, so beating it takes the important. */
  .amenity-list,
  .around__list {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none !important;
  }

  .amenity-list li {
    font-size: 20px;
  }

  .around__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .detail-map {
    height: 300px;
  }

  /* --- Select Unit screen ---
     On the phone the booking sidebar is a screen of its own: the same element, hidden
     until the sticky bar opens it, then full screen over the page. */
  .booking {
    display: none;
  }

  /* The header stays on screen, so the sheet starts under it. The sheet sits over the
     sticky bar but below the header and the date popover, so the popover opens on top. */
  .booking.is-open {
    display: flex;
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: var(--z-sheet);
    gap: 20px;
    padding: 0 16px 40px;
    overflow-y: auto;
    /* Without this the sheet's own scrollbar sits over the right-hand padding and clips
       the cards' edges on any browser that draws a classic scrollbar. */
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    background: var(--color-white);
  }

  .booking.is-open .booking__sheet-head,
  .booking.is-open .booking__stay,
  .booking.is-open .booking__prompt {
    display: flex;
  }

  .booking__sheet-head {
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: 20px;
  }

  .booking__sheet-head h2 {
    font-size: 28px;
    line-height: 38px;
    font-weight: var(--weight-medium);
    color: var(--color-grey-dark);
  }

  .booking__sheet-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-grey-dark);
    cursor: pointer;
  }

  .booking__stay {
    flex-direction: column;
    gap: 16px;
    margin-top: -5px;
  }

  .booking__stay-row + .booking__stay-row {
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
  }

  .booking__stay-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .booking__stay-head span {
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    color: var(--color-grey-dark);
  }

  .booking__stay-change {
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: var(--text-body);
    color: var(--color-green-primary);
    text-decoration: underline;
    cursor: pointer;
  }

  /* Also a button for the dates row, so the full-width line is its tap target. */
  .booking__stay-value {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    font-size: var(--text-body);
    text-align: left;
    color: var(--color-grey-dark);
  }

  /* The summary is the resting state, and Change reveals **one** field — not the sidebar
     panel. The panel's tinted card, its border and its "From" price all belong to the
     desktop sidebar; on this screen the price is on the sticky bar and the stay is in the
     summary above, so the panel is stripped back to the field and its submit.

     The panel itself stays visible so Check Availability is always on the sheet —
     with it hidden at rest, a sheet with no stay chosen had no button at all. The
     fields below still only show while editing, and details.js turns a submit with
     no dates into opening the calendar. */
  .booking__dates {
    display: flex;
    gap: 16px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .booking__summary {
    display: none;
  }

  .booking__field {
    display: none;
  }

  .booking.is-editing-dates [data-stay-field='dates'],
  .booking.is-editing-guests [data-stay-field='guests'] {
    display: flex;
  }

  /* On the sheet the dropdown opens inline under the field's value instead of floating
     over the Check Availability button. */
  .booking__field[data-stay-field='guests'] {
    flex-wrap: wrap;
    height: auto;
    min-height: 50px;
  }

  /* Keeps the first line the field's 50px (48 inside the border) once it can wrap. */
  .booking__field[data-stay-field='guests'] .booking__field-copy {
    min-height: 48px;
  }

  .booking__guests::after {
    bottom: auto;
    height: 50px;
  }

  .guest-picker {
    position: static;
    flex-basis: 100%;
    width: 100%;
    padding: 20px 0;
    border: 0;
    border-top: 1px solid var(--color-grey-light);
    border-radius: 0;
    box-shadow: none;
  }

  /* The availability popup stacks: the teal panel drops under the form, and the close
     button moves to the dialog's own corner so it stays at the top. */
  .avail-modal__dialog {
    grid-template-columns: minmax(0, 1fr);
  }

  .avail-form {
    padding: 30px 20px;
  }

  .avail-form__title {
    padding-right: 48px;
  }

  .avail-modal__aside {
    position: static;
    padding: 30px 20px;
  }

  .avail-modal__aside-title {
    font-size: 24px;
  }

  .booking__units {
    gap: 20px;
  }

  /* --- Unit cards: the phone draws a different card, not the desktop one shrunk --- */
  .unit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'identity rate'
      'rail     rail'
      'actions  actions';
    gap: 0;
    padding: 20px 16px;
    border: 1px solid var(--border-subtle);
    background: var(--color-white);
  }

  .unit-card__head {
    grid-area: identity;
  }

  .unit-photos {
    display: none;
  }

  .unit-card__name {
    font-size: 24px;
    line-height: 26px;
    text-decoration: none;
  }

  .unit-card__meta {
    margin-top: 5px;
    line-height: 1.4;
  }

  .unit-card__rate-row {
    grid-area: rate;
    display: block;
    padding-bottom: 0;
    text-align: right;
  }

  .unit-card__rate {
    display: block;
  }

  .unit-card__rate span {
    display: block;
  }

  /* The keyboard copy of the tour chip; the phone's visible one sits on the photos. */
  .unit-card__rate-row .unit-tour {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* The totals sit above a full-width Book Now, so the row reverses. */
  .unit-card__actions {
    grid-area: actions;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 20px;
  }

  .unit-card__price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px var(--space-4);
  }

  .unit-card__nights {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--text-body);
    text-align: left;
  }

  .unit-card__total {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .unit-card__due {
    grid-column: 2;
    grid-row: 2;
  }

  .unit-card__book {
    width: 100%;
  }

  /* The inquire card gets its own row map: contact and the button used to share the
     `actions` area, with the button's top margin leaving room for one line of contact
     text — on narrower phones "Limited Availability" wrapped onto a second line and
     disappeared behind the button. */
  .unit-card--inquire {
    grid-template-areas:
      'identity identity'
      'contact  contact'
      'actions  actions';
  }

  .unit-card__contact {
    grid-area: contact;
    flex-wrap: wrap;
    gap: 4px var(--space-4);
    margin-top: 20px;
  }

  .unit-card__check {
    grid-area: actions;
    margin-top: 16px;
    height: 56px;
  }

  /* --- In-card photo rail --- */
  .unit-rail {
    display: block;
    grid-area: rail;
    position: relative;
    /* The card's 16px padding is canceled so the photos run edge to edge. */
    margin: 20px -16px;
    height: 257px;
    overflow: hidden;
  }

  .unit-rail__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .unit-rail__track::-webkit-scrollbar {
    display: none;
  }

  .unit-rail__track img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
  }

  /* A real shoot has no guaranteed dark corner under this, so a shadow carries the
     contrast. */
  .unit-rail__count {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-white);
    text-shadow:
      0 1px 3px rgba(0, 0, 0, 0.8),
      0 0 12px rgba(0, 0, 0, 0.5);
  }

  .unit-rail__chip {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 14px;
    border-radius: 10px;
    background: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-rose);
    box-shadow: var(--shadow-field);
  }

  .unit-rail__dots {
    position: absolute;
    right: 16px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .unit-rail__dots i {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.55);
    transition: width var(--duration-fast) var(--ease-out);
  }

  .unit-rail__dots i.is-active {
    width: 16px;
    background: var(--color-white);
  }

  /* A fixed card width rather than a share of the viewport, so the next card peeks by the
     same amount on every phone. */
  .detail-similar__grid {
    gap: 20px;
  }

  .detail-similar__grid > * {
    flex: 0 0 298px;
  }

  .detail-tour__tabs {
    top: var(--space-5);
    left: var(--gutter);
    right: var(--gutter);
    translate: 0 0;
    width: auto;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: var(--radius-control-lg);
  }

  .detail-tour__tabs::-webkit-scrollbar {
    display: none;
  }

  .detail-tour__tab {
    flex: none;
  }

  /* The sticky bar replaces the sidebar CTA, so the page needs room beneath it. */
  .booking-bar {
    display: flex;
  }

  .details {
    padding-bottom: 88px;
  }

  .lightbox__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* On a phone the bar stacks and the thumb strip stays, so 72vh of stage left the
     dialog taller than the screen. The stage gives that height back. */
  .lightbox__stage {
    height: 52vh;
  }
}