/* Photo-first listing hero, facts bar, and click-to-play video */
.listing-hero--photo { background: var(--black); }
.listing-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  min-height: 320px;
  object-fit: cover;
  object-position: center 55%;
}
.listing-hero-actions {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 3rem 3rem 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  pointer-events: none;
}
.listing-hero-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  color: var(--white);
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 2px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.listing-hero-chip:hover { background: rgba(10,10,10,0.8); border-color: var(--gold); color: var(--gold); }
.listing-hero-chip svg { width: 14px; height: 14px; fill: currentColor; }

.listing-factsbar { background: var(--ink); color: var(--ivory); }
.listing-factsbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 3rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.listing-factsbar-price { font-family: var(--serif, inherit); font-size: 1.9rem; line-height: 1; color: var(--gold); }
.listing-factsbar-price small { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-subtle); margin-left: 0.5rem; }
.listing-factsbar-facts { display: flex; gap: 2rem; flex-wrap: wrap; flex: 1; }
.listing-factsbar-fact strong { display: block; font-size: 1.15rem; font-weight: 500; }
.listing-factsbar-fact span { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--stone); }
.listing-factsbar .btn { white-space: nowrap; }

.listing-video { background: var(--ivory); padding: 3rem 3rem 2.5rem; }
.listing-video-inner { max-width: 1100px; margin: 0 auto; }
.listing-video-eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1rem; }
.listing-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--black); border-radius: 2px; overflow: hidden; }
.listing-video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.listing-video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s, opacity 0.3s; }
.listing-video-play:hover .listing-video-thumb { transform: scale(1.02); }
.listing-video-play::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.25); transition: background 0.3s; }
.listing-video-play:hover::after { background: rgba(0,0,0,0.1); }
.listing-video-icon {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--gold); color: var(--black);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  transition: transform 0.2s, background 0.2s;
}
.listing-video-play:hover .listing-video-icon { transform: scale(1.08); background: var(--gold-light); }
.listing-video-play:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.listing-video-icon svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.listing-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.listing-video-label { position: absolute; z-index: 1; left: 1.25rem; bottom: 1rem; color: var(--white); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }

@media (max-width: 900px) {
  .listing-hero-actions { padding: 2rem 1.25rem 1rem; }
  .listing-factsbar-inner { padding: 1.1rem 1.25rem; gap: 1rem 1.5rem; }
  .listing-factsbar-facts { gap: 1.25rem; }
  .listing-factsbar .btn { width: 100%; justify-content: center; }
  .listing-video { padding: 2rem 1.25rem 1.5rem; }
}
@media (max-width: 640px) {
  .listing-hero-img { aspect-ratio: 4 / 3; max-height: none; min-height: 0; }
  .listing-hero-actions { gap: 0.5rem; justify-content: flex-start; }
  .listing-hero-chip { padding: 0.6rem 0.8rem; font-size: 0.65rem; letter-spacing: 0.06em; white-space: nowrap; }
  .listing-factsbar-price { font-size: 1.6rem; }
  .listing-video-icon { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .listing-video-icon svg { width: 24px; height: 24px; }
}