/* Click-to-play video tour and guest-guide link on the property pages (see scripts/add-stay-video.mjs, public/video.js).
   Uses the colour variables from shared.css. */
.yt-facade { position: relative; margin: 1rem 0; max-width: 760px; }
.yt-link { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius, 14px); overflow: hidden; border: 1px solid var(--gold-line, rgba(201,169,110,.35)); background: var(--slate, #364253); }
.yt-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: rgba(13, 17, 25, .72); border: 2px solid var(--gold, #C9A96E); }
.yt-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--gold, #C9A96E); }
.yt-link:hover .yt-play, .yt-link:focus-visible .yt-play { background: rgba(13, 17, 25, .9); }
.yt-frame { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--gold-line, rgba(201,169,110,.35)); border-radius: var(--radius, 14px); display: block; }
.yt-cap { margin: .45rem 0 0; font-size: .9rem; opacity: .85; }
.pp-guide-link { margin: .8rem 0 0; }
.pp-guide-link a { color: var(--gold, #C9A96E); text-decoration: underline; text-underline-offset: 3px; }
@media print { .yt-facade { display: none !important; } }