/* Own-webspace films: quiet local posters, playback only after a click. */
.rio-films { margin: 38px 0 44px; text-align: left; }
.rio-films-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 32px; justify-content: center; }
.rio-films-grid--single { grid-template-columns: minmax(0, 280px); }
.rio-films .rio-film-card { min-width: 0; margin: 0; padding: 0; background: transparent; }
.rio-films .rio-film-trigger { position: relative; display: block; overflow: hidden; isolation: isolate; border-radius: 2px; background: #282e3e; color: #fff; text-decoration: none; }
.rio-films .rio-film-trigger > img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; margin: 0; cursor: pointer; }
.rio-blog-content .rio-films .rio-film-trigger > img { cursor: pointer; }
.rio-films .rio-film-trigger::after { content: ""; position: absolute; z-index: 0; inset: 45% 0 0; background: linear-gradient(transparent, rgba(16, 21, 32, .83)); pointer-events: none; }
.rio-films .rio-film-play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(23,29,43,.55); transform: translate(-50%, -50%); pointer-events: none; }
.rio-films .rio-film-play::before { content: ""; width: 0; height: 0; margin-left: 4px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #fff; }
.rio-films .rio-film-play > svg { display: none; }
.rio-films .rio-film-watch { position: absolute; z-index: 1; bottom: 18px; left: 18px; right: 18px; color: #fff; font-size: 13px; line-height: 1.5; letter-spacing: .025em; text-align: left; }
.rio-films .rio-film-watch time { display: inline; color: inherit; font: inherit; }
.rio-films .rio-film-copy { padding: 18px 0 0; }
.rio-films .rio-film-copy h3 { margin: 0 0 10px; color: #282e3e; font-size: 21px; line-height: 1.35; font-weight: 400; letter-spacing: normal; text-transform: none; }
.rio-films .rio-film-copy p { margin: 0; color: #606879; font-size: 15px; line-height: 1.7; }
.bg-accent .rio-films .rio-film-copy h3 { color: #fff; }
.bg-accent .rio-films .rio-film-copy p { color: #d7deeb; }
.rio-films .rio-film-trigger:hover .rio-film-play { background: rgba(84,122,187,.85); }
.rio-films .rio-film-trigger:focus-visible { outline: 3px solid #547abb !important; outline-offset: 5px; }

/* A single introduction can sit beside its portrait rather than fill the page. */
@media (min-width: 601px) {
  .rio-films--inline .rio-films-grid--single { display: block; max-width: 720px; margin: 0; }
  .rio-films--inline .rio-film-card { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); align-items: center; gap: 30px; }
  .rio-films--inline .rio-film-copy { padding: 0; }
}
@media (max-width: 600px) {
  .rio-films { margin: 28px 0 34px; }
  .rio-films-grid { grid-template-columns: minmax(0, 280px); gap: 30px; }
}

/* Native dialog supplies keyboard focus containment and the inert background. */
.rio-film-dialog { box-sizing: border-box; width: min(92vw, 500px); max-width: 500px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 16px; border: 1px solid #586277; border-radius: 3px; background: #181e2b; color: #fff; box-shadow: 0 18px 80px rgba(0,0,0,.35); text-align: left; overflow: auto; }
.rio-film-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.rio-film-dialog::backdrop { background: rgba(11,15,23,.91); }
.rio-film-dialog .rio-film-toolbar { display: flex; align-items: center; gap: 15px; justify-content: space-between; flex: none; }
.rio-film-dialog .rio-film-title { margin: 0; color: #fff; font: 400 17px/1.4 'Roboto Slab', Georgia, serif; letter-spacing: normal; text-transform: none; }
.rio-film-dialog .rio-film-close { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; margin: 0; border: 1px solid #7e8aa0; border-radius: 2px; background: transparent; color: #fff; font: 28px/1 Arial, sans-serif; cursor: pointer; }
.rio-film-dialog .rio-film-close:hover { background: #303c51; }
.rio-film-dialog .rio-film-close:focus-visible, .rio-film-dialog .rio-film-direct:focus-visible, .rio-film-dialog video:focus-visible { outline: 3px solid #b3caff !important; outline-offset: 3px; }
.rio-film-dialog .rio-film-stage { display: flex; align-items: center; justify-content: center; min-height: 0; background: #000; }
.rio-film-dialog video { display: block; width: auto; max-width: 100%; height: min(72vh, 780px); height: min(72dvh, 780px); max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.rio-film-dialog .rio-film-error { margin: 0; color: #fff; font: 14px/1.55 Arial, sans-serif; }
.rio-film-dialog .rio-film-error[hidden] { display: none; }
.rio-film-dialog .rio-film-direct { align-self: flex-start; color: #d1deff; font: 13px/1.5 Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
@media (max-height: 480px) and (min-width: 601px) {
  .rio-film-dialog { width: min(92vw, 640px); max-width: 640px; padding: 10px 14px; gap: 8px; }
  .rio-film-dialog video { height: calc(100vh - 145px); height: calc(100dvh - 145px); }
}