/*
 * Video modal — Micromodal + YouTube facade. See inc/video-modal.php.
 *
 * Micromodal toggles `aria-hidden` on the root and adds `is-open`; it does not
 * ship any CSS, so every bit of showing/hiding is here. `aria-hidden` is the
 * single source of truth for visibility, which keeps the rendered state and the
 * accessibility tree from ever disagreeing.
 */

/*
 * Visibility keys off `is-open`, NOT off `aria-hidden`, and that is
 * load-bearing with `awaitCloseAnimation`.
 *
 * Micromodal's closeModal() sets `aria-hidden="true"` immediately and only
 * removes `is-open` once it sees `animationend`. Driving `display` from
 * `aria-hidden` therefore hides the element at the *start* of the close: a
 * display:none element runs no animation, so `animationend` never fires, the
 * close animation silently does nothing, and `is-open` is left applied for the
 * life of the page. The modal still *looks* closed — it is display:none — which
 * is what makes this worth a comment rather than obvious: it fails quietly, and
 * anything later keyed off `is-open` inherits a class that is never cleared.
 *
 * The two attributes change at different moments on purpose: `aria-hidden` is
 * the accessibility state, `is-open` is the rendered one.
 */
.video-modal { display: none; }
.video-modal.is-open { display: block; }

.video-modal__overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* The dim. Tinted with the brand navy rather than neutral black so the
       blurred page behind it reads as part of the design. */
    background: rgba(0, 12, 45, .72);
    -webkit-backdrop-filter: blur(10px) saturate(.9);
    backdrop-filter: blur(10px) saturate(.9);
}

.video-modal__container {
    position: relative;
    width: 100%;
    max-width: 1120px;
    background: #000;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

/* Names the dialog via aria-labelledby, so it must stay in the accessibility
   tree -- clipped, never `display: none` or `visibility: hidden`, both of which
   would leave the dialog unnamed. */
.video-modal__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.video-modal__player {
    position: relative;
    width: 100%;
    /* 16:9 without the padding-top hack. `aspect-ratio` is supported in every
       browser this theme targets, and unlike the hack it keeps working when the
       height is what is constrained (a short landscape viewport, below). */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.video-modal__poster,
.video-modal__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal__poster {
    /* hqdefault is 4:3 with pillarboxing; cover crops that to the player's 16:9
       instead of letting black bars sit inside black bars. */
    object-fit: cover;
    /* Above the iframe until the swap, so the visitor sees the still rather than
       the player's own blank frame while it boots. */
    z-index: 1;
}

.video-modal__status {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 2;
    margin: 0;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.video-modal__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px: Target Size (Enhanced). There is room for it here, unlike the
       pagination dots, so there is no reason to settle for the 24px minimum. */
    width: 44px;
    height: 44px;
    padding: 0;
    background: #fff;
    color: #000C2D;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    cursor: pointer;
}

/*
 * The icon must not be the click target. Micromodal's close handler is
 * `e.target.hasAttribute('data-micromodal-close') || e.target.parentNode.
 * hasAttribute(...)` — one parent level, and this icon is `button > svg > path`,
 * which is one too deep. Clicking the X then focused the button and closed
 * nothing. Making the icon transparent to pointers puts the button itself in
 * `e.target` and keeps the close working whatever the icon markup becomes.
 */
.video-modal__close svg { pointer-events: none; }

.video-modal__close:hover { background: #C23035; color: #fff; }
.video-modal__close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Sits inside the container on narrow screens, where -14px would push it off
   the viewport edge and under the rounded corner. */
@media only screen and (max-width: 575px) {
    .video-modal__close { top: 8px; right: 8px; width: 40px; height: 40px; }
}

/* A short landscape viewport (a phone turned sideways, which is exactly how
   someone watches a video) would otherwise get a 16:9 box taller than the
   screen, pushing the close button out of reach. */
@media only screen and (max-height: 520px) {
    .video-modal__overlay { padding: 12px; }
    .video-modal__container { max-width: calc((100vh - 24px) * 16 / 9); }
}

/* Opening and closing are the two states of `is-open`, told apart by
   `aria-hidden` — see the note at the top of this file. */
.video-modal.is-open[aria-hidden="false"] .video-modal__overlay { animation: video-modal-fade .18s ease-out; }
.video-modal.is-open[aria-hidden="false"] .video-modal__container { animation: video-modal-rise .18s ease-out; }

/*
 * Its own keyframes, NOT `video-modal-fade … reverse`.
 *
 * An animation only restarts when `animation-name` changes. Reusing the open
 * animation's name and flipping direction/duration leaves the name identical,
 * so the browser considers it already finished, never re-runs it, and never
 * fires `animationend` — which `awaitCloseAnimation` is waiting for. The modal
 * then hangs with `is-open` still applied: invisible progress, but the overlay
 * stays over the page and swallows every click on it.
 */
.video-modal.is-open[aria-hidden="true"] .video-modal__overlay { animation: video-modal-fade-out .15s ease-in forwards; }

@keyframes video-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes video-modal-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes video-modal-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* `awaitOpenAnimation`/`awaitCloseAnimation` wait for an `animationend` event,
   so the animations cannot simply be removed here — a duration of 0 still
   fires the event, whereas `animation: none` would leave the modal waiting
   forever and never finish closing. */
@media (prefers-reduced-motion: reduce) {
    .video-modal.is-open[aria-hidden="false"] .video-modal__overlay,
    .video-modal.is-open[aria-hidden="false"] .video-modal__container,
    .video-modal.is-open[aria-hidden="true"] .video-modal__overlay {
        animation-duration: .01ms;
    }
    .img-film-produktowy a[data-video-modal]:hover::after,
    .img-film-produktowy a[data-video-modal]:focus-visible::after { transform: translate(-50%, -50%); }
}

/*
 * The play badge on a facade thumbnail.
 *
 * Scoped to triggers, so it appears on any thumbnail wired to the modal and
 * nowhere else.
 */
.img-film-produktowy a[data-video-modal] {
    position: relative;
    display: block;
}

.img-film-produktowy a[data-video-modal]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: rgba(194, 48, 53, .92);
    /* A white triangle, drawn rather than loaded — the badge must not depend on
       a request that can fail. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l7.5-4.5z' fill='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 52% 50%;
    background-size: 34px 34px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    transition: transform .2s ease, background-color .2s ease;
    pointer-events: none;
}

.img-film-produktowy a[data-video-modal]:hover::after,
.img-film-produktowy a[data-video-modal]:focus-visible::after {
    transform: translate(-50%, -50%) scale(1.08);
    background-color: #C23035;
}

.img-film-produktowy a[data-video-modal]:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .img-film-produktowy a[data-video-modal]::after { transition: none; }
}