/* hotel videos under the rooms: three photo cards with a gold play button */
.hvideos { padding-block: 3rem 2.5rem; }
.hvideos__head { display: grid; gap: 0.75rem; justify-items: center; text-align: center; margin-block-end: 2rem; }
.hvideos__head h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); font-weight: 800; }
.hvideos__head h2::after { content: ""; display: block; width: 3.5rem; height: 2px; margin: 0.875rem auto 0; background: var(--gold); }
.hvideos__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 64rem) { .hvideos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.hvideo { display: grid; gap: 0.875rem; }
.hvideo__stage { position: relative; aspect-ratio: 16 / 9; border-radius: 1.25rem; overflow: hidden; background: #000; isolation: isolate; box-shadow: 0 20px 44px -24px rgb(60 40 10 / 0.55); outline: 1px solid var(--line); outline-offset: 4px; }
.hvideo__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.hvideo__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(20 17 13 / 0.55), rgb(20 17 13 / 0.1) 60%); }
.hvideo__play { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; z-index: 2; display: grid; place-items: center; width: 4.5rem; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--gold); color: var(--ink); cursor: pointer; box-shadow: 0 10px 26px -6px rgb(181 143 81 / 0.7), 0 0 0 6px rgb(255 255 255 / 0.14); transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.hvideo__play svg { width: 36%; height: auto; scale: calc(var(--dir) * -1) 1; translate: calc(var(--dir) * -2px) 0; }
.hvideo__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: showcase-ring 2.8s var(--ease-out) infinite; }
.hvideo__play:active { transform: scale(0.95); }
.hvideo__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (hover: hover) { .hvideo__play:hover { background: #fff; } .hvideo__stage:hover .hvideo__poster { transform: scale(1.04); } }
.hvideo__name { font-weight: 800; font-size: 1.0625rem; text-align: center; }
.hvideo__media { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.hvideo__stage.is-playing .hvideo__poster, .hvideo__stage.is-playing .hvideo__shade, .hvideo__stage.is-playing .hvideo__play { display: none; }
@media (prefers-reduced-motion: reduce) { .hvideo__ring { animation: none; } .hvideo__poster { transition: none; } }

.hvideo__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }