/* oc-media.css v1.1 - 13th Sep 2026 (R2: the film trigger, dialog and consent card)
   ==========================================================================
   OliveCore - styling for THE platform media panel (/Pages/Shared/_HeroMedia).

   Theme-neutral by construction: every colour is a var() with a fallback, so
   the panel adopts whatever the theme already declares and looks native
   without the theme writing a line. A theme that wants a different control
   position overrides .oc-media-toggle and nothing else.

   The poster stays in the layout and the film sits on top of it. Two reasons:
   the film fades in only once it is genuinely playing, so a stalled or refused
   film shows a still rather than a black hole; and the panel's height comes
   from the poster, so nothing shifts when playback starts.
   ========================================================================== */

.oc-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.oc-media-poster,
.oc-media-film {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oc-media[data-oc-fit="contain"] .oc-media-poster,
.oc-media[data-oc-fit="contain"] .oc-media-film {
    object-fit: contain;
}

/* The film covers the poster only while it is actually playing. */
.oc-media-film {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
}

.oc-media.is-playing .oc-media-film {
    opacity: 1;
}

/* A film that errored is removed from view entirely - the poster is the hero. */
.oc-media.is-failed .oc-media-film {
    display: none;
}

/* ---- the control ---------------------------------------------------------
   Bottom-left by default so it does not collide with the slide dots and pause
   control themes put bottom-right. It sits above the panel's own scrim, and
   it is never the thing a visitor has to hunt for: WCAG 2.2 asks for an
   obvious mechanism, so it is opaque, not a ghost. */
.oc-media-toggle {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 4;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--pill, 50rem);
    cursor: pointer;
    color: var(--ink, #1b1c1c);
    background: var(--bg, #fff);
    box-shadow: inset 0 0 0 1.5px currentColor, 0 2px 10px rgba(0, 0, 0, .18);
    transition: background-color .2s, color .2s;
}

.oc-media-toggle:hover {
    background: var(--ink, #1b1c1c);
    color: var(--bg, #fff);
}

.oc-media-toggle:focus-visible {
    outline: 2.5px solid var(--act, currentColor);
    outline-offset: 3px;
}

/* One button, two icons: show the action that pressing it will perform. */
.oc-media-ico-play { display: none; }
.oc-media.is-paused .oc-media-ico-play { display: block; }
.oc-media.is-paused .oc-media-ico-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
    .oc-media-film { transition: none; }
}

/* Print and PDF render the still. MicrositePdfEndpoint drives a headless
   browser, so this is what lands in a generated PDF as well. */
@media print {
    .oc-media-film,
    .oc-media-toggle { display: none !important; }
}

/* ---- the deliberate film ---------------------------------------------------
   The trigger is a sibling of the panel's other links, never inside them, so it
   is styled to sit in a row of CTAs without pretending to be the primary one. */
.oc-film {
    display: inline-block;
}

.oc-film-go {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border: 0;
    border-radius: var(--pill, 50rem);
    box-shadow: inset 0 0 0 1.5px currentColor;
    background: transparent;
    color: inherit;
    font: 500 16px/1.2 inherit;
    cursor: pointer;
    transition: background-color .25s, color .25s;
}

.oc-film-go:hover {
    background: var(--ink, #1b1c1c);
    color: var(--bg, #fff);
}

.oc-film-go:focus-visible {
    outline: 2.5px solid var(--act, currentColor);
    outline-offset: 3px;
}

.oc-film-ico {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px currentColor;
    flex: none;
}

/* ---- dialog ---------------------------------------------------------------- */
/* The page behind does not scroll while a film is open - a dialog you can
   scroll away from is a dialog that has lost its focus. */
.oc-film-lock,
.oc-film-lock body {
    overflow: hidden;
}

.oc-film-dialog {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 48px);
}

.oc-film-dialog[hidden] { display: none; }

.oc-film-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .82);
    cursor: pointer;
}

.oc-film-frame {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    background: var(--bg, #fff);
    color: var(--ink, #1b1c1c);
    border-radius: var(--r, 10px);
    padding: 18px;
    max-height: 100%;
    overflow: auto;
}

.oc-film-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 14px;
}

.oc-film-title {
    margin: 0;
    font-size: clamp(19px, 2.4vw, 26px);
    line-height: 1.2;
}

.oc-film-x {
    margin-left: auto;
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.oc-film-x:hover { background: var(--ink, #1b1c1c); color: var(--bg, #fff); }

/* 16:9 is reserved before anything loads, so the dialog does not jump when the
   player arrives. */
.oc-film-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: calc(var(--r, 10px) - 2px);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.oc-film-iframe,
.oc-film-video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

/* ---- consent card -----------------------------------------------------------
   Shown INSTEAD of the player until the visitor presses play, because until
   they do, no request has been made to the provider at all. It names who the
   film comes from rather than saying "third party", which is the difference
   between informing someone and processing them. */
.oc-film-consent {
    max-width: 46ch;
    padding: 24px;
    text-align: center;
    color: #fff;
}

.oc-film-consent p {
    margin: 0 0 18px;
    line-height: 1.55;
    font-size: 15.5px;
}

.oc-film-allow {
    display: inline-flex;
    align-items: center;
    padding: 14px 30px;
    border: 0;
    border-radius: var(--pill, 50rem);
    background: #fff;
    color: #111;
    font: 600 16px/1.2 inherit;
    cursor: pointer;
}

.oc-film-allow:hover { background: var(--act, #ddd); }

.oc-film-remember {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 16px;
    font-size: 13.5px;
    opacity: .9;
    cursor: pointer;
}

.oc-film-error {
    color: #fff;
    padding: 20px;
    text-align: center;
    max-width: 40ch;
}

.oc-film-foot {
    margin: 14px 0 2px;
    font-size: 14.5px;
}

@media (max-width: 560px) {
    .oc-film-frame { padding: 12px; }
    .oc-film-go { width: 100%; justify-content: center; }
}