/**
 * Property details page layout — gallery mosaic, two-column body with the sticky
 * booking sidebar, and the lightbox.
 * Loads after browse.css because it reuses that file's CTA, FAQ and map-pin styles.
 */

/* ============================================================
   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);
}

/* The middle column is the hero. The narrow column on the left peeks at the previous
   photo, the one on the right at the next. */
.gallery__mosaic {
  display: grid;
  grid-template-columns: 315fr 919fr 676fr;
  gap: 4px;
  height: 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);
}

/* Figma `87:6699` / `87:6951`: the chips and the Share button sit on the 1280 content
   column — not the full-bleed mosaic — and straddle its bottom edge, hanging ~23px
   below it rather than sitting inside. */
.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);
}

/* Figma `87:6699`: white 44px buttons on a 10px radius, rose Inter SemiBold 14 with
   2px tracking — not the frosted pills the first build used. */
.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));
}

/* Figma places this low and inside the right-hand panel, not on the vertical center. */
.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);
}

/* Figma `87:6717`: 10px between the rows — the tag and rating share the top row, then
   the name, then the address with the size ranged right against it. */
.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);
}

/* The same teal uppercase tag the property cards wear. */
.detail-title__neighborhood {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.4px;
  font-weight: var(--weight-semibold);
  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__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 --- */

/* Figma `401:18593`: two 400px columns on a 20px gutter, rows 20px apart. */
/* Figma fills the left column before the right — reading order runs down, not across —
   so the grid flows by column. The row count comes in as an inline style, because a
   column flow has nothing to break on without it. */
.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);
}

/* A bare 24px glyph — the design has no tinted tile behind it. */
.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);
}

/* Figma `87:6825`: the pill row sits on a hairline with 15px of clearance below it. */
.around__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-bottom: 15px;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid #e6ebec;
}

/* These run smaller and darker than the shared browse-filter pill. */
.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;
}

/* Figma `87:6860`: a tinted 12px-radius panel, 40px glyph tile, category label over
   the name, and the rating / walk-time column pinned right. */
.place {
  display: flex;
  align-items: center;
  gap: 15px;
  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);
}

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

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

/* Figma `87:6880`: a #F6FBFC panel inside a translucent teal border, 14px radius,
   44px of head room above the summary and 30px everywhere else. */
.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__from {
  font-size: var(--text-body);
  line-height: 24px;
  color: var(--color-grey-secondary);
  white-space: nowrap;
}

.booking__nights 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);
}

/* Both fields are the 50px control with the label stacked over its value inside. */
.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;
}

.booking__guests {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
}

/* An outline button, not the solid teal one — the design keeps the fill white. */
.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;
}

/* Stands in for the unit list until a stay is chosen. */
.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 ---
   Figma `87:6881`: every card is expanded — there is no collapsed state — on a #F6FBFC
   panel inside a translucent teal border at a 14px radius with 30px padding. */

.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);
}

/* The square footage is picked out in rose medium inside the meta line. */
.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);
}

/* Figma fans three cards behind the thumbnail; two offset pseudo-elements read the
   same at 88x65 without shipping the composite as an asset. */
.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;
  /* The dark wash the label sits on. */
  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;
}

/* The 3D TOUR chip, on the units that have one. */
.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 ---
   The design's last card: no rate to quote, so it offers the phone line instead. */

.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__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
   ============================================================ */

/* Figma `87:6889`: an 860px band curved inward top and bottom, exactly as the home
   page's tour band. The arc is a shallow circular segment — see home.css for why an
   ellipse is wrong — carved out with two circle gradients intersected. */
.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;

  -webkit-mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 99.9%, #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 99.9%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--arc-radius) at 50%
      calc(var(--arc-depth) - var(--arc-radius)), #0000 99.9%, #000 100%),
    radial-gradient(circle var(--arc-radius) at 50%
      calc(100% - var(--arc-depth) + var(--arc-radius)), #0000 99.9%, #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;
  top: 60px;
  left: 50%;
  translate: -50% 0;
  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);
  backdrop-filter: blur(6px);
}

.detail-tour__tab {
  padding: var(--space-2) var(--space-5);
  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));
}

.detail-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.review h3 {
  font-size: var(--text-h4);
}

.review__role {
  font-size: var(--text-xs);
  color: var(--color-rose);
}

.review__quote {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 24px;
  color: var(--text-secondary);
}

.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;
}

/* Bare arrows centered under the rail, at every width — the design draws them on the
   desktop frame too, not only on the phone. */
.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
   ============================================================ */

/* Figma `195:18530`: price and minimum-stay centered over a full-width outlined
   Check Availability button. */
.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);
}

/* Figma `342:19085`: the price row is 24px tall, the minimum-stay line 18px under it. */
.booking-bar__price {
  height: 24px;
}

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

/* `342:19090`: a 56px outlined button, 10px under the price block. */
.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);
}

/* Figma `435:19524`: stage and bar 19px apart, then 30px down to the thumb strip. */
.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);
}

/* Two groups, as in the design: the media links on the left and the position on the
   right. The title and price ride along in those groups — the design's unit variant
   is the only one that shows them. */
.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);
}

/* Over the photo these read as plain underlined links, not the white buttons the
   gallery mosaic uses. */
.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);
}

.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 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  /* The 23px belongs to the chips that hang below the desktop mosaic. On the phone they
     sit inside the photo, so it was 23px of nothing — and the layout's 48px of head room
     sat under it. `195:18553` starts the title 20px below the photo. */
  .gallery {
    margin-bottom: 0;
  }

  .details__layout {
    padding-top: 20px;
  }

  .gallery__mosaic {
    grid-template-columns: 1fr;
    height: 280px;
  }

  /* Only the hero frame survives at mobile widths; the rest live in the lightbox. The
     hero is the second panel, except where the property has a single photo. */
  .gallery__panel:not(:nth-child(2)) {
    display: none;
  }

  .gallery__panel:only-child {
    display: block;
  }

  /* The mobile frame swaps the arrows for a counter pill and dots, and drops the
     photos chip — 3D TOUR stays. Swipe replaces the arrows; see details.js. */
  .gallery__share,
  .gallery__expand,
  .gallery__arrow,
  .gallery__chip[data-gallery-open] {
    display: none;
  }

  /* Figma `195:18551`: a 55x28 pill inset 16px from the top-right of the 280px photo. */
  .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);
  }

  /* `342:19072`: the dots ride on the chips row, 16px in from the right edge and 26px up
     from the foot of the photo. The current one stretches to a 16px pill; the rest are
     6px circles on a 6px gap. */
  .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 mobile frame keeps the chips fully inside the photo's bottom-left, and the row
     tightens and 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;
  }

  /* Larger section headings than the shrunken --text-h3 token. */
  .detail-block h2 {
    font-size: 26px;
    line-height: 32px;
  }

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

  /* Mobile title (`195:18530`): everything single-column, with the size range on its
     own line under the address. */
  .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, Figma `356:21697` ---
     `195:18530` draws no booking panel on the details page, because the panel is its own
     screen. This is that screen: the same sidebar element, hidden until the sticky bar
     opens it, then full screen over the page. */
  .booking {
    display: none;
  }

  /* `356:21698`: the site header stays on the Select Unit screen, so the sheet starts
     under it rather than covering it. It sits over the sticky bar but below both the
     header and the date popover, which is why the popover can open on top of it. */
  .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;
  }

  /* `358:19298`: the title row, 20px down from the top of the screen. */
  .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;
  }

  /* `359:19299`: each row is a label with Change ranged right, the value under it, and a
     hairline between the two rows. */
  .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;
  }

  .booking__stay-value {
    margin-top: 12px;
    font-size: var(--text-body);
    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 submit stays, and has to: a new stay means new rates, and rates come from the
     availability service, not from script. */
  .booking__dates {
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .booking.is-editing-dates .booking__dates,
  .booking.is-editing-guests .booking__dates {
    display: flex;
    gap: 16px;
  }

  .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;
  }

  /* `413:22499` sets the cards 20px apart. */
  .booking__units {
    gap: 20px;
  }

  /* --- Unit cards, Figma `356:21697` ---
     The phone draws a different component, not the desktop card shrunk. It is a white
     card on the page rather than a tinted panel, the rate moves up beside the name, the
     photos run full width inside it, and Book Now is a solid teal bar across the foot.

     The card is 358 wide with 16px of padding, and the two blocks inside it are 20px
     from the top and 20px from the bottom. */
  .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;
  }

  /* The 88x65 stack is a desktop affordance; the phone shows the photos themselves. */
  .unit-photos {
    display: none;
  }

  /* `357:18976` draws the name plain; the underline is a sidebar treatment. */
  .unit-card__name {
    font-size: 24px;
    line-height: 26px;
    text-decoration: none;
  }

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

  /* `357:18988`: the rate stacks against the right edge — figure over the word, not the
     inline "$178.33 /Night" the sidebar uses. */
  .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;
  }

  /* `357:18996`: the night count sits left, with the total over the deposit on the
     right — one row, not the right-aligned stack the sidebar uses. */
  .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 phone line and Limited Availability fit side by side at 326px, so they stay
     on one row; only the wrap guard is needed for a longer number. */
  .unit-card__contact {
    grid-area: actions;
    flex-wrap: wrap;
    gap: 4px var(--space-4);
  }

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

  /* --- In-card photo rail (`356:21699`) --- */
  .unit-rail {
    display: block;
    grid-area: rail;
    position: relative;
    /* The card's 16px padding is cancelled 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;
  }

  /* The frame sets this in plain white over a dark corner of its photo. A real shoot has
     no such guarantee, so the shadow carries the contrast rather than a pill, which would
     add chrome the design does not draw. */
  .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);
  }

  /* A white pill with the rose glyph and label, as the gallery chips wear. */
  .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);
  }

  /* The rail is the same control at every width; only the numbers change. Figma
     `340:28525` puts four 298px cards on a 20px gap, inset 16px — a fixed measure, not 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;
  }

  /* The tour chips run as one scrollable row under the band's top edge. */
  .detail-tour__tabs {
    top: var(--space-5);
    left: var(--gutter);
    right: var(--gutter);
    translate: 0 0;
    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;
  }
}