/* Article media blocks: video window, PDF preview, slide viewer (inc/article-media.php).
   Version lives in the filename because ?ver= is stripped site-wide. */

/* Window frame */
.mpej-win {
    margin: 2.25rem 0;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    overflow: hidden;
    background: #0F172A;
    box-shadow: 0 30px 60px -22px rgba(15, 23, 42, 0.45), 0 12px 24px -14px rgba(15, 23, 42, 0.3);
}
.dark .mpej-win {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.75);
}
.mpej-win__bar {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 2.75rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, #1E293B, #162033);
    color: #CBD5E1;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
}
.mpej-win__dots { display: inline-flex; flex: none; gap: 7px; }
.mpej-win__dots i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #DC2626; }
.mpej-win__dots i:nth-child(2) { background: #EBA73A; }
.mpej-win__dots i:nth-child(3) { background: #64748B; }
.mpej-win__title { flex: 1; min-width: 0; }
.prose-mpej .mpej-win img { border-radius: 0; }
.mpej-win button { font-family: var(--font-sans); }

/* Prev / next arrows and counter, shared by the PDF preview and the slides */
.mpej-nav {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.68);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.is-ready .mpej-nav { display: grid; }
.mpej-nav--prev { left: 0.9rem; }
.mpej-nav--next { right: 0.9rem; }
.mpej-nav:hover:not(:disabled),
.mpej-nav:focus-visible { border-color: #EBA73A; background: #EBA73A; color: #0F172A; }
.mpej-nav:disabled { opacity: 0.3; cursor: default; }
.mpej-count {
    display: none;
    position: absolute;
    right: 0.9rem;
    bottom: 0.8rem;
    z-index: 2;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #E2E8F0;
    font: 600 0.78rem/1.4 var(--font-sans);
    font-variant-numeric: tabular-nums;
}
.is-ready .mpej-count { display: block; }

/* Video */
.mpej-video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.mpej-video video { display: block; width: 100%; height: 100%; background: #000; }
.mpej-video__play {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 0;
    border: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.5));
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.mpej-video.is-ready:not(.is-playing) .mpej-video__play { display: flex; }
.mpej-video--right .mpej-video__play { align-items: flex-end; padding-right: 11%; }
.mpej-video__icon {
    display: grid;
    width: 84px;
    height: 84px;
    place-items: center;
    border-radius: 50%;
    background: #EBA73A;
    color: #0F172A;
    box-shadow: 0 0 0 10px rgba(235, 167, 58, 0.25), 0 16px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mpej-video--right .mpej-video__icon { margin-right: 2.4rem; }
.mpej-video__icon svg { margin-left: 4px; }
.mpej-video__play:hover .mpej-video__icon,
.mpej-video__play:focus-visible .mpej-video__icon {
    transform: scale(1.06);
    box-shadow: 0 0 0 14px rgba(235, 167, 58, 0.3), 0 16px 30px rgba(0, 0, 0, 0.35);
}
.mpej-video__label {
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    white-space: nowrap;
}

/* PDF preview */
.mpej-doc__stage {
    position: relative;
    display: grid;
    place-items: center;
    padding: 1.75rem 4.25rem;
    background: radial-gradient(ellipse at top, #334155, #1E293B 70%);
}
.prose-mpej .mpej-doc__page {
    display: none;
    width: 100%;
    max-width: 540px;
    height: auto;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.prose-mpej .mpej-doc__page.is-active,
.prose-mpej .mpej-doc:not(.is-ready) .mpej-doc__page { display: block; }
.mpej-doc:not(.is-ready) .mpej-doc__page + .mpej-doc__page { margin-top: 1rem; }
.mpej-doc__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.9rem 1rem;
    background: #0F172A;
    color: #94A3B8;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    line-height: 1.4;
}
.mpej-doc__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.prose-mpej .mpej-doc__actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.prose-mpej .mpej-doc__open { border: 1px solid rgba(255, 255, 255, 0.22); color: #E2E8F0; }
.prose-mpej .mpej-doc__open:hover { border-color: #EBA73A; color: #EBA73A; }
.prose-mpej .mpej-doc__dl { background: #EBA73A; color: #0F172A; }
.prose-mpej .mpej-doc__dl:hover { background: #F3BB5C; }
.mpej-doc__dl small { font-size: 0.8em; font-weight: 500; opacity: 0.75; white-space: nowrap; }

/* Slides */
.mpej-slides:focus { outline: none; }
.mpej-slides:focus-visible { outline: 3px solid #EBA73A; outline-offset: 3px; }
.mpej-slides__stage { position: relative; aspect-ratio: 16 / 9; background: #fff; }
.mpej-slides:not(.is-ready) .mpej-slides__stage { aspect-ratio: auto; }
.prose-mpej .mpej-slides__img { display: none; width: 100%; height: 100%; object-fit: contain; }
.prose-mpej .mpej-slides__img.is-active,
.prose-mpej .mpej-slides:not(.is-ready) .mpej-slides__img { display: block; }
.mpej-slides__thumbs {
    display: none;
    gap: 0.5rem;
    padding: 0.75rem;
    overflow-x: auto;
    background: #0F172A;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}
.is-ready .mpej-slides__thumbs { display: flex; }
.mpej-slides__thumb {
    flex: none;
    width: 112px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: #1E293B;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.prose-mpej .mpej-slides__thumb img { display: block; width: 100%; height: auto; cursor: pointer !important; }
.mpej-slides__thumb:hover,
.mpej-slides__thumb:focus-visible { opacity: 0.9; }
.mpej-slides__thumb.is-active { border-color: #EBA73A; opacity: 1; }
.mpej-slides__fs {
    display: grid;
    width: 32px;
    height: 32px;
    margin: -0.3rem -0.4rem -0.3rem auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #CBD5E1;
    cursor: pointer;
}
.mpej-slides__fs[hidden] { display: none; }
.mpej-slides__fs:hover,
.mpej-slides__fs:focus-visible { background: rgba(255, 255, 255, 0.08); color: #EBA73A; }

.mpej-slides:fullscreen { display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; }
.mpej-slides:fullscreen .mpej-slides__stage { flex: 1; min-height: 0; aspect-ratio: auto; background: #0F172A; }
.prose-mpej .mpej-slides:fullscreen .mpej-slides__img { position: absolute; inset: 0; }

@media (max-width: 640px) {
    .mpej-win { margin: 1.75rem 0; border-radius: 12px; }
    .mpej-nav { width: 36px; height: 36px; }
    .mpej-nav--prev { left: 0.5rem; }
    .mpej-nav--next { right: 0.5rem; }
    .mpej-doc__stage { padding: 1rem 3rem; }
    .mpej-video__icon { width: 64px; height: 64px; }
    .mpej-video--right .mpej-video__icon { margin-right: 0.5rem; }
    .mpej-video__label { font-size: 0.85rem; }
    .mpej-slides__thumb { width: 84px; }
    .mpej-doc__actions { flex-direction: column; width: 100%; }
    .prose-mpej .mpej-doc__actions a { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .mpej-video__icon, .mpej-nav, .mpej-slides__thumb { transition: none; }
}