/* Shared external media card (external_embeds.js, ticket f59fa8a0). No box, border or
   notice text around a preview: a cover/thumbnail with a play button, one grey hint line,
   and the link card of "Social & Platforms" as the fallback. Tokens come from the film
   page (--f-*), then the Studio (--pf-*), then the surrounding text colour. */
.xm,.xm-link{
  --xm-text:var(--f-text,var(--pf-fg,currentColor));
  --xm-muted:var(--f-muted,var(--pf-dim,color-mix(in srgb,currentColor 62%,transparent)));
  --xm-accent:var(--f-accent,var(--pf-accent,#e97c33));
  --xm-surface:var(--f-surface,var(--pf-light,color-mix(in srgb,currentColor 6%,transparent)));
  --xm-radius:var(--f-radius,12px);
  box-sizing:border-box;min-width:0;color:var(--xm-text);font:inherit;text-align:left}
.xm *,.xm-link *{box-sizing:border-box}
.xm [hidden]{display:none!important}
.xm{display:flex;flex-direction:column;gap:8px;width:100%}
.xm button{font:inherit;color:inherit}
.xm-poster{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;
  cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.xm-poster:focus-visible,.xm a:focus-visible,.xm-off:focus-visible,.xm-link:focus-visible{
  outline:2px solid var(--xm-accent);outline-offset:3px}
.xm-thumb{display:block;width:100%;height:100%;object-fit:cover}
.xm-glyph{position:absolute;inset:0;display:grid;place-items:center}
.xm-glyph svg{width:40px;height:40px}

/* Video (YouTube · Vimeo · TikTok with a thumbnail): 16:9 frame + centred play. */
.xm-frame{aspect-ratio:16/9;overflow:hidden;border-radius:var(--xm-radius);background:#141317;color:#fff}
.xm-frame .xm-glyph{opacity:.45}
.xm-frame .xm-thumb{position:absolute;inset:0}
.xm-frame .xm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;transition:transform .2s ease,background .2s ease}
.xm-frame:hover .xm-play,.xm-frame:focus-visible .xm-play{transform:translate(-50%,-50%) scale(1.06);
  background:var(--xm-accent)}
.xm-play svg{width:24px;height:24px;margin-left:3px}
.xm-tiktok .xm-frame,.xm-tiktok.xm-video .xm-player iframe{aspect-ratio:9/16;width:min(100%,300px)}

/* Audio (Spotify · SoundCloud) and TikTok profiles: cover + title + round play,
   the same footprint as the link cards next to it. */
.xm-row{display:flex;align-items:center;gap:14px;padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--xm-text) 16%,transparent);border-radius:var(--xm-radius);
  background:color-mix(in srgb,var(--xm-surface) 62%,transparent);transition:border-color .25s ease}
.xm-row:hover{border-color:var(--xm-accent)}
.xm-cover{position:relative;flex-shrink:0;width:64px;height:64px;overflow:hidden;
  border-radius:calc(var(--xm-radius) - 2px);color:var(--xm-accent);
  background:color-mix(in srgb,var(--xm-accent) 14%,transparent)}
.xm-cover .xm-thumb{position:absolute;inset:0}
.xm-cover .xm-glyph svg{width:26px;height:26px}
.xm-row .xm-play{flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--xm-accent);color:var(--f-accent-text,#fff)}
.xm-row .xm-play svg{width:19px;height:19px;margin-left:2px}

.xm-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.xm-meta b{font-size:.95rem;font-weight:800;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.xm-meta span{font-size:.76rem;color:var(--xm-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xm-caption .xm-meta b{font-size:.9rem}

.xm-player iframe{display:block;width:100%;border:0;border-radius:var(--xm-radius);background:var(--xm-surface)}
.xm-video .xm-player iframe{aspect-ratio:16/9;height:auto}
.xm-audio .xm-player iframe{height:152px}

/* The one grey line: who plays it, their policy, and the way out to the platform. */
.xm-hint{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0;font-size:11px;
  line-height:1.5;color:var(--xm-muted)}
.xm-hint a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.xm-hint a:hover{color:var(--xm-accent)}
.xm-off{margin-left:auto;padding:0;border:0;background:none;font-size:11px;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* Link card — the "Social & Platforms" card; also every fallback. */
.xm-link{display:flex;align-items:center;gap:14px;padding:14px 18px;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--xm-text) 16%,transparent);border-radius:var(--xm-radius);
  background:color-mix(in srgb,var(--xm-surface) 62%,transparent);
  transition:border-color .25s ease,transform .25s ease}
.xm-link:hover{border-color:var(--xm-accent);transform:translateY(-2px)}
.xm-ic{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:11px;color:var(--xm-accent);background:color-mix(in srgb,var(--xm-accent) 14%,transparent)}
.xm-ic svg{width:22px;height:22px}
.xm-arrow{color:var(--xm-accent)}

@media (prefers-reduced-motion:reduce){
  .xm-link,.xm-row,.xm-frame .xm-play{transition:none}
  .xm-link:hover{transform:none}
}
