button[data-event-film] { position: relative; overflow: hidden; cursor: pointer; isolation: isolate; }
button[data-event-film] > * { position: relative; z-index: 2; }
button[data-event-film] > img, button[data-event-film] > div:first-of-type { z-index: 0; }
button[data-event-film] > video.event-film-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
button[data-event-film].event-film-previewing > video.event-film-preview { opacity: 1; }
button[data-event-film]:focus-visible { outline: 3px solid #72a8ff; outline-offset: -3px; }
html.event-film-modal-open { overflow: hidden; }
.event-film-dialog { width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 0; border: 1px solid #444; background: #0b0b0b; color: #f5f3ed; overflow: auto; }
.event-film-dialog::backdrop { background: rgba(0,0,0,.86); }
.event-film-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.event-film-toolbar h2 { font: 600 20px/1.3 sans-serif; margin: 0; }
.event-film-close { border: 1px solid #777; background: transparent; color: inherit; cursor: pointer; font: 30px/1 sans-serif; width: 44px; height: 44px; flex: 0 0 44px; }
.event-film-close:focus-visible { outline: 3px solid #72a8ff; outline-offset: 3px; }
.event-film-player { width: 100%; max-height: calc(100dvh - 130px); display: block; background: #000; aspect-ratio: 16 / 9; }
.event-film-error { padding: 0 20px 16px; color: #eee; font: 16px/1.5 sans-serif; }
@media (prefers-reduced-motion: reduce) { button[data-event-film] > video.event-film-preview { transition: none; } }

/* Let the film itself take focus, without badges or dimming. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .acre-previous-rooms-grid { isolation: isolate; }
  button[data-event-film] { transition: transform .28s ease, filter .28s ease; transform-origin: center; }
  button[data-event-film]:nth-child(3n + 1) { transform-origin: left center; }
  button[data-event-film]:nth-child(3n) { transform-origin: right center; }
  button[data-event-film].event-film-previewing { transform: scale(1.5); z-index: 10; }
  .acre-previous-rooms-grid:has(.event-film-previewing) > button[data-event-film]:not(.event-film-previewing) { filter: blur(3px); }
}