/* Video tour: a strip of portrait clips that play while on screen, and a full-screen viewer. Shared by the website and the landlord page. */
.tour { position: relative; }
.tour-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tour-bar .tour-count { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums; }
.tour-arrows { display: flex; gap: 8px; }
.tour-arrows button { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(11,10,8,.45); border: 1px solid var(--line); color: var(--bone); cursor: pointer; font: inherit; font-size: 18px; transition: border-color .3s, color .3s; }
.tour-arrows button:hover { border-color: var(--gold); color: var(--gold-hi); }
.tour-arrows button:disabled { opacity: .35; cursor: default; border-color: var(--line); color: var(--bone); }
.reel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
.reel::-webkit-scrollbar { display: none; }
.tile { flex: 0 0 var(--tile-w, clamp(200px, 22vw, 290px)); scroll-snap-align: start; margin: 0; position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #14120e; border: 1px solid var(--line); cursor: pointer; padding: 0; color: inherit; font: inherit; text-align: left; }
.tile video, .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,10,8,.82) 0%, rgba(11,10,8,0) 42%); pointer-events: none; }
.tile:hover video, .tile:focus-visible video { transform: scale(1.04); }
.tile:hover { border-color: rgba(214,189,128,.55); }
.tile .cap { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 4px; }
.tile .cap b { font-family: var(--font-sans); font-weight: 500; font-size: 10px; letter-spacing: .28em; color: var(--gold); font-variant-numeric: tabular-nums; }
.tile .cap span { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--bone); }
.tile .open { position: absolute; z-index: 1; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(239,233,223,.4); background: rgba(11,10,8,.35); color: var(--bone); font-size: 13px; opacity: 0; transition: opacity .3s; }
.tile:hover .open, .tile:focus-visible .open { opacity: 1; }
.tour--mini { --tile-w: 112px; }
.tour--mini .reel { gap: 8px; }
.tour--mini .tile .cap { left: 9px; right: 9px; bottom: 8px; }
.tour--mini .tile .cap b { display: none; }
.tour--mini .tile .cap span { font-size: 14px; }
.tour--mini .tile .open { display: none; }
.tour--mini .tour-bar { margin-bottom: 10px; }
.tour--mini .tour-arrows button { width: 36px; height: 36px; font-size: 15px; }

/* Full-screen viewer */
.tour-view { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(11,10,8,.96); }
.tour-view.on { display: grid; animation: tvIn .35s var(--ease) both; }
@keyframes tvIn { from { opacity: 0; } to { opacity: 1; } }
.tour-view video { height: min(88svh, 1100px); max-width: 92vw; aspect-ratio: 9 / 16; object-fit: cover; background: #14120e; border: 1px solid var(--line); }
.tour-view .tv-cap { position: absolute; left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; }
.tour-view .tv-cap b { font-size: 11px; font-weight: 500; letter-spacing: .28em; color: var(--gold); font-variant-numeric: tabular-nums; }
.tour-view .tv-cap span { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; }
.tour-view button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; background: rgba(11,10,8,.5); border: 1px solid var(--line); color: var(--bone); cursor: pointer; font: inherit; font-size: 20px; transition: border-color .3s, color .3s; }
.tour-view button:hover { border-color: var(--gold); color: var(--gold-hi); }
.tour-view .tv-close { top: calc(16px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.tour-view .tv-prev { left: max(16px, env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.tour-view .tv-next { right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
body.tv-open { overflow: hidden; }
@media (max-width: 700px) {
  .tour-arrows { display: none; }
  .tile { --tile-w: 62vw; }
  .tour--mini .tile { --tile-w: 104px; }
  .tour-view video { height: auto; width: 100vw; max-width: 100vw; max-height: 100svh; border: 0; }
  .tour-view .tv-prev, .tour-view .tv-next { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .tour-view .tv-prev { left: auto; right: calc(72px + env(safe-area-inset-right, 0px)); }
  .tour-view .tv-cap { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .tile video, .tour-view.on { transition: none; animation: none; } }