/* Trailer: play button, poster tile and the shared player dialog (trailer.js). Files: /assets/video/trailer-{1080,720}.mp4 + trailer-poster.jpg */
.trailer-btn { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:999px; border:1px solid var(--line);
               background:var(--btn); color:var(--fg); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; }
.trailer-btn:hover, .trailer-btn:focus-visible { background:#ffffff26; border-color:var(--accent); }
.trailer-btn svg { width:14px; height:14px; fill:var(--accent-hi); flex:none; }
.trailer-poster { position:relative; display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:18px; overflow:hidden;
                  background:#000; cursor:pointer; color:inherit; }
.trailer-poster:hover, .trailer-poster:focus-visible { border-color:var(--accent); }
.trailer-poster:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.trailer-poster img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.trailer-poster .play { position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%;
                        background:var(--accent); display:grid; place-items:center; box-shadow:0 6px 24px #0008; }
.trailer-poster .play svg { width:28px; height:28px; fill:var(--on-accent, #fff); margin-left:4px; }
.trailer-meta { margin-top:8px; font-size:.82rem; color:var(--muted); }
.trailer-meta a { color:var(--accent-hi); }
dialog.trailer { margin:auto; padding:0; border:1px solid var(--line); border-radius:16px; background:#000; color:var(--fg);
                 width:min(960px, calc(100vw - 24px)); max-width:none; overflow:visible; }
dialog.trailer::backdrop { background:#05070fcc; backdrop-filter:blur(6px); }
dialog.trailer video { display:block; width:100%; max-height:calc(100svh - 24px); aspect-ratio:16/9; border-radius:15px; background:#000; }
dialog.trailer .tr-x { position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
                       background:#151a36; color:var(--fg); font-size:1.1rem; line-height:1; cursor:pointer; z-index:1; }
dialog.trailer .tr-x:hover, dialog.trailer .tr-x:focus-visible { border-color:var(--accent); color:var(--accent-hi); }
@media (max-width:520px) { dialog.trailer .tr-x { top:-40px; right:0; } }