/* Virtual-tour player + "closer look" actions for the SEO pages (neighborhoods, FAQ, guides).
   Self-contained: uses only the brand tokens from site.css. */

.tvid {
  position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, var(--purple-light) 0%, var(--purple-deep) 100%);
  box-shadow: 0 12px 40px rgba(27,18,48,0.28);
  border: 1px solid rgba(255,255,255,0.18);
}
.tvid img.tvid-poster, .tvid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tvid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,18,48,0) 45%, rgba(27,18,48,0.55) 100%);
}
.tvid.is-playing::after { display: none; }
.tvid-play {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--white);
  background: rgba(91,44,142,0.78); color: var(--white); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.tvid-play svg { width: 26px; height: 26px; margin-left: 3px; }
.tvid:hover .tvid-play { background: var(--purple); transform: translate(-50%, -50%) scale(1.07); }
.tvid-play:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }
.tvid-cap {
  position: absolute; z-index: 2; left: 14px; bottom: 12px; font-size: 0.8rem; font-weight: 600;
  color: var(--white); text-shadow: 0 1px 6px rgba(27,18,48,0.7);
}
.tvid-fallback { position: absolute; z-index: 3; inset: auto 12px 12px 12px; }
.tvid-fallback a { color: var(--white); font-weight: 600; text-decoration: underline; }

/* "Want a closer look?" strip */
.tour-actions { padding: 56px 0 8px; }
.tour-actions .container { max-width: 760px; text-align: center; }
.tour-actions h2 { margin: 0 0 8px; }
.tour-actions p { margin: 0 auto 22px; max-width: 54ch; }
.tour-actions-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }

/* "See more" cover: a native <details>, so it works without JavaScript */
.more-cover { margin-top: 18px; }
.more-cover > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.more-cover > summary::-webkit-details-marker { display: none; }
.more-cover > summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
.more-cover[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.more-cover-panel {
  margin-top: 16px; padding: 22px; border-radius: 16px; background: var(--purple-wash);
  border: 1px solid var(--purple-mist);
}
.more-cover-panel p { margin: 0 0 14px; }

@media (max-width: 480px) {
  .tvid-play { width: 60px; height: 60px; }
  .tour-actions-row .btn, .more-cover > summary { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tvid-play, .more-cover > summary::after { transition: none; }
}

/* Hero tour card is a link to the home page tour (the video plays there) */
.tvid-link { position: absolute; inset: 0; z-index: 2; display: block; color: var(--white); text-decoration: none; }
.tvid-link:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: -3px; border-radius: 16px; }
.tvid-link:hover .tvid-play { background: var(--purple); transform: translate(-50%, -50%) scale(1.07); }