/* ══════════════════════════════════════════════════════════════
   EDUCATIONAL CORNER — page-specific styles
   Everything else (page hero, listing chrome, article layout, share
   buttons, CTA band) comes from mainstyle.css and listing-filters.css.
   Colours and type are the site tokens declared on :root there.

   The one bold move on these pages is the white-framed video: it breaks
   the bottom edge of the navy hero on the landing page and sits on the
   off-white band on the homepage. Everything else stays quiet.
   ══════════════════════════════════════════════════════════════ */

/* ── Shared bits ── */
.ec-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Visually hidden, read by screen readers. */
.ec-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Text that may be an untranslated fallback: let the browser pick the
   direction from the words themselves, so an English paragraph on an
   Arabic or Kurdish page keeps its punctuation and alignment. */
[dir="auto"].ec-bidi,
.ec-bidi [dir="auto"] {
    unicode-bidi: plaintext;
}

.ec-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: var(--muted);
}

/* A topic reads as a quiet gold-dotted line rather than a boxed badge. */
.ec-topic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--navy);
}

    .ec-topic::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold);
        flex-shrink: 0;
    }

.ec-meta-duration,
.ec-meta-date,
.ec-meta-captions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The play glyph that sits on every poster */
.ec-play {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin-inline-start: -30px;
    margin-top: -30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(13, 31, 62, .35);
    transition: background .2s, color .2s, transform .2s;
}

    .ec-play svg {
        width: 26px;
        height: 26px;
        margin-inline-start: 3px;
        /* The triangle keeps pointing "forward"; it is a symbol, not text. */
        direction: ltr;
    }

.ec-play--sm {
    width: 48px;
    height: 48px;
    margin-inline-start: -24px;
    margin-top: -24px;
}

    .ec-play--sm svg {
        width: 20px;
        height: 20px;
        margin-inline-start: 2px;
    }

.ec-play--lg {
    width: 84px;
    height: 84px;
    margin-inline-start: -42px;
    margin-top: -42px;
}

    .ec-play--lg svg {
        width: 36px;
        height: 36px;
        margin-inline-start: 4px;
    }

.ec-media-link:hover .ec-play,
.ec-media-link:focus-visible .ec-play,
.ec-facade:hover .ec-play,
.ec-facade:focus-visible .ec-play {
    background: var(--gold);
    color: var(--white);
    transform: scale(1.06);
}

.ec-duration {
    position: absolute;
    inset-inline-end: 12px;
    bottom: 12px;
    background: rgba(13, 31, 62, .82);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 6px;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.ec-poster-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1d3566 0%, var(--navy) 60%, #0f1d3a 100%);
    color: rgba(255, 255, 255, .35);
}

    .ec-poster-placeholder svg {
        width: 64px;
        height: 64px;
    }

/* ── Landing page: hero with the campus photograph ── */
.ec-landing {
    background: var(--off-white);
}

.page-hero--corner {
    padding: 64px 0 220px;
    background-color: #0d1f3e;
    background-image:
        linear-gradient(180deg, rgba(13, 31, 62, .55) 0%, rgba(13, 31, 62, .35) 45%, rgba(23, 43, 84, .92) 100%),
        url(../images/main-bg.png);
    background-position: center top, center bottom;
    background-size: auto, cover;
    background-repeat: no-repeat;
}

    .page-hero--corner .page-hero-inner {
        max-width: 760px;
    }

    .page-hero--corner .page-hero-desc {
        max-width: 60ch;
    }

/* The library at a glance: three facts in a row under the description,
   serif numerals with small uppercase labels, divided by hairlines. */
.ec-facts {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 0;
}

.ec-fact {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding-inline-end: 26px;
    margin-inline-end: 26px;
    border-inline-end: 1px solid rgba(255, 255, 255, .18);
}

    .ec-fact:last-child {
        padding-inline-end: 0;
        margin-inline-end: 0;
        border-inline-end: 0;
    }

.ec-fact-value {
    font-family: 'DM Serif Display', serif;
    font-size: 30px;
    line-height: 1;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

.ec-fact-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .64);
}

/* The framed video overlaps the hero's bottom edge. */
.ec-stage {
    position: relative;
    z-index: 3;
    margin-top: -170px;
}

/* ── The white frame ── */
.ec-frame {
    position: relative;
    background: var(--white);
    border-radius: 24px;
    padding: 18px;
    box-shadow:
        0 36px 70px -34px rgba(13, 31, 62, .6),
        0 6px 18px rgba(13, 31, 62, .08);
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
    gap: 32px;
    align-items: center;
}

/* The landing and homepage frames: the video takes two thirds, and the
   column beside it carries only the title and a description. */
.ec-frame--corner,
.ec-frame--home {
    grid-template-columns: minmax(0, 2.1fr) minmax(240px, 1fr);
    gap: 40px;
}

.ec-frame--minimal .ec-frame-body {
    padding-block: 16px;
    padding-inline: 4px 28px;
}

.ec-frame--minimal .ec-frame-title {
    font-size: clamp(26px, 2.8vw, 36px);
    margin-bottom: 16px;
}

    /* The same gold rule the page heroes use, anchoring the column. */
    .ec-frame--minimal .ec-frame-title::before {
        content: '';
        display: block;
        width: 40px;
        height: 3px;
        border-radius: 2px;
        background: var(--gold);
        margin-bottom: 18px;
    }

.ec-frame--minimal .ec-frame-desc {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 40ch;
}

.ec-frame--home {
    box-shadow:
        0 28px 56px -30px rgba(13, 31, 62, .3),
        0 2px 8px rgba(13, 31, 62, .06);
}

.ec-frame--detail {
    display: block;
    padding: 12px;
    box-shadow:
        0 30px 60px -36px rgba(13, 31, 62, .45),
        0 2px 8px rgba(13, 31, 62, .06);
}

.ec-frame-media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
}

    .ec-frame-media .ec-player {
        margin: 0;
        border-radius: 14px;
    }

.ec-frame-body {
    padding: 10px 14px 10px 0;
    padding-inline: 0 14px;
    min-width: 0;
}

.ec-frame-label {
    margin: 0 0 10px;
}

.ec-frame-title {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin: 0 0 12px;
}

    .ec-frame-title a {
        color: inherit;
        text-decoration: none;
    }

        .ec-frame-title a:hover {
            color: var(--gold);
        }

        .ec-frame-title a:focus-visible {
            outline: 3px solid var(--gold);
            outline-offset: 3px;
            border-radius: 4px;
        }

.ec-frame .ec-meta {
    margin-bottom: 14px;
}

.ec-frame-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0 0 22px;
    max-width: 44ch;
}

.ec-frame-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .ec-frame-cta svg {
        width: 12px;
        height: 12px;
        direction: ltr;
    }

/* ── Player ── */
.ec-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

    .ec-player iframe,
    .ec-player video,
    .ec-player .ec-facade {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* While YouTube's player loads, a ring spins over the black stage; the
   iframe fades in once it has loaded. */
.ec-player.is-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .22);
    border-top-color: var(--gold);
    animation: ec-spin .8s linear infinite;
    pointer-events: none;
    z-index: 2;
}

.ec-player iframe {
    animation: ec-fade-in .45s ease;
}

@keyframes ec-spin {
    to { transform: rotate(360deg); }
}

@keyframes ec-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ec-video {
    display: block;
    background: #000;
    object-fit: contain;
}

.ec-facade {
    display: block;
    padding: 0;
    margin: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    font: inherit;
    color: inherit;
}

    .ec-facade:focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: -3px;
    }

.ec-facade-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.ec-facade:hover .ec-facade-poster {
    transform: scale(1.03);
}

.ec-external {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}

    .ec-external:hover {
        color: var(--navy);
        border-bottom-color: var(--navy);
    }

    .ec-external .fa-youtube {
        color: #e53935;
        margin-inline-end: 4px;
    }

/* ── The grid of nine ── */
.rp-page--videos {
    padding-top: 64px;
    background: linear-gradient(180deg, var(--off-white) 0%, var(--off-white) 60%, var(--white) 100%);
}

.rp-page--no-hero {
    padding-top: 40px;
}

.ec-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
}

    .ec-section-head .section-label {
        margin-bottom: 8px;
    }

.ec-section-title {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: clamp(26px, 2.8vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--navy);
    margin: 0;
}

.ec-section-page {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.ec-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 28px;
    margin-top: 24px;
}

.rp-page--videos .rp-pagination {
    margin-top: 48px;
}

.ec-grid--home {
    margin-top: 28px;
}

/* The same card language as the rest of the site (.rp-card / .news-card):
   white, hairline border, 10px corners, a gold edge and a lift on hover. */
.ec-card {
    background: var(--white);
    border: 1px solid #dbe8ff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 1px 2px rgba(23, 43, 84, .04);
    transition: box-shadow .25s, transform .25s, border-color .25s, opacity .5s ease, translate .5s ease;
}

    .ec-card:hover,
    .ec-card:focus-within {
        transform: translateY(-4px);
        border-color: rgba(201, 151, 0, .6);
        box-shadow: 0 22px 44px -22px rgba(23, 43, 84, .38);
    }

/* Reveal on scroll: only once the page has declared itself scripted
   (html.ec-js, set inline in the head) are cards held back, and only until
   they enter the viewport. `translate` is its own property, so the hover
   lift on `transform` is untouched. */
.ec-js [data-ec-reveal] .ec-card {
    opacity: 0;
    translate: 0 16px;
    transition-delay: calc(var(--ec-i, 0) * 60ms);
}

    .ec-js [data-ec-reveal] .ec-card.is-in {
        opacity: 1;
        translate: none;
    }

    /* Hover/focus must answer immediately, whatever the reveal delay was. */
    .ec-js [data-ec-reveal] .ec-card.is-in:hover,
    .ec-js [data-ec-reveal] .ec-card.is-in:focus-within {
        transition-delay: 0s;
    }

/* "Watched": a quiet pill in the poster's bottom-left corner, shown by the
   script for videos this visitor has already started. Physically left in
   both directions: the running-time pill keeps its own LTR direction, so it
   always sits bottom-right, and the two must never share a corner. */
.ec-watched {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .94);
    color: var(--navy);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    padding: 6px 9px 6px 7px;
    border-radius: 6px;
    pointer-events: none;
}

    .ec-watched[hidden] {
        display: none;
    }

    .ec-watched svg {
        width: 11px;
        height: 11px;
        color: #1b8a4b;
    }

.ec-card-media,
.ec-featured-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0f1d3a;
}

/* The link fills the poster box; the duration pill is its sibling so the
   link's accessible name stays "Watch …" (clicks on the pill fall through). */
.ec-media-link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

    .ec-media-link img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .5s ease;
    }

.ec-card:hover .ec-media-link img {
    transform: scale(1.05);
}

.ec-media-link:focus-visible,
.ec-card-title a:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.ec-card-body {
    padding: 22px 24px 26px;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ec-card-title {
    font-size: 19px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
}

    .ec-card-title a {
        color: inherit;
        text-decoration: none;
    }

        .ec-card-title a:hover {
            color: var(--gold);
        }

/* ── Detail page ── */
.ec-detail {
    padding-top: 40px;
    background: linear-gradient(180deg, #eef1f7 0%, var(--white) 420px);
}

.ec-container {
    max-width: 980px;
}

.ec-detail-title {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--navy);
    margin: 30px 0 12px;
}

.ec-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding: 16px 0;
    border-top: 1px solid #e3e8f1;
    border-bottom: 1px solid #e3e8f1;
    margin: 0 0 30px;
    font-size: 13.5px;
    color: var(--muted);
}

    .ec-detail-meta .author-byline {
        text-align: start;
    }

    .ec-detail-meta .share-links {
        margin-inline-start: auto;
    }

.ec-detail .article-body {
    margin-bottom: 32px;
}

/* ── Transcript ── */
.ec-transcript {
    margin: 0 0 32px;
    border-top: 1px solid #e3e8f1;
}

    .ec-transcript-summary {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 18px 0 12px;
        cursor: pointer;
        list-style: none;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--navy);
    }

    .ec-transcript-summary::-webkit-details-marker {
        display: none;
    }

    .ec-transcript-summary:hover {
        color: var(--gold);
    }

    .ec-transcript-summary:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 4px;
        border-radius: 2px;
    }

    .ec-transcript-summary svg {
        width: 12px;
        height: 12px;
        flex: none;
        transition: transform .2s ease;
    }

    .ec-transcript[open] .ec-transcript-summary svg {
        transform: rotate(90deg);
    }

    [dir="rtl"] .ec-transcript-summary svg {
        transform: rotate(180deg);
    }

    [dir="rtl"] .ec-transcript[open] .ec-transcript-summary svg {
        transform: rotate(90deg);
    }

    .ec-transcript-body {
        max-width: 72ch;
        padding-bottom: 8px;
        font-size: 16.5px;
        line-height: 1.7;
        color: #2d3748;
    }

    .ec-transcript-body p {
        margin: 0 0 1em;
    }

    .ec-transcript-body p:last-child {
        margin-bottom: 0;
    }

.ec-detail-footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e3e8f1;
}

.ec-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border-radius: 6px;
    transition: gap .2s, color .2s;
}

    .ec-back:hover {
        gap: 12px;
        color: var(--navy);
    }

    .ec-back:focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: 3px;
    }

    .ec-back svg {
        width: 11px;
        height: 11px;
    }

    /* The chevron is drawn for LTR; mirror it, as the pagination does. */
    [dir="rtl"] .ec-back svg {
        transform: scaleX(-1);
    }

/* Letter-spacing breaks the joined Arabic script; the uppercase treatment
   has no meaning there either. */
[dir="rtl"] .ec-fact-label,
[dir="rtl"] .ec-section-page,
[dir="rtl"] .ec-back,
[dir="rtl"] .ec-transcript-summary,
[dir="rtl"] .ec-watched {
    letter-spacing: 0;
}

/* ── Homepage strip ── */
.ec-home .hs-section-header {
    margin-bottom: 28px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ec-frame {
        grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
        gap: 24px;
    }

    .ec-frame--corner,
    .ec-frame--home {
        grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr);
        gap: 28px;
    }
}

@media (max-width: 1024px) {
    .ec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .page-hero--corner {
        padding: 48px 0 150px;
    }

    .ec-stage {
        margin-top: -120px;
    }

    .ec-frame,
    .ec-frame--corner,
    .ec-frame--home {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 12px;
        border-radius: 18px;
    }

    .ec-frame-body,
    .ec-frame--minimal .ec-frame-body {
        padding: 8px 10px 12px;
    }

    .ec-frame--minimal .ec-frame-desc {
        max-width: none;
    }

    .ec-frame-desc {
        margin-bottom: 16px;
        max-width: none;
    }
}

@media (max-width: 640px) {
    .ec-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ec-facts {
        margin-top: 22px;
        gap: 12px 0;
    }

    .ec-fact {
        gap: 7px;
        padding-inline-end: 16px;
        margin-inline-end: 16px;
    }

    .ec-fact-value {
        font-size: 24px;
    }

    .ec-fact-label {
        font-size: 10px;
        letter-spacing: .1em;
    }

    .ec-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .ec-section-page {
        margin: 0;
    }

    .ec-detail-footer {
        margin-top: 32px;
    }

    .page-hero--corner {
        padding: 40px 0 120px;
    }

    .ec-stage {
        margin-top: -90px;
    }

    .ec-frame {
        padding: 10px;
        border-radius: 16px;
    }

    .ec-frame-media,
    .ec-frame-media .ec-player {
        border-radius: 10px;
    }

    .ec-frame-title {
        font-size: 22px;
    }

    .ec-card-body {
        padding: 18px 18px 22px;
        min-height: 0;
    }

    .ec-detail {
        padding-top: 24px;
    }

    .ec-detail-title {
        margin-top: 22px;
    }

    .ec-transcript-body {
        font-size: 15.5px;
    }

    /* Byline, date and share buttons get a row of their own on phones. */
    .ec-detail-meta .share-links {
        margin-inline-start: 0;
        width: 100%;
    }
}

@media (hover: none) {
    .ec-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ec-card,
    .ec-media-link img,
    .ec-facade-poster,
    .ec-play {
        transition: none;
    }

    .ec-js [data-ec-reveal] .ec-card {
        opacity: 1;
        translate: none;
        transition-delay: 0s;
    }

    .ec-player iframe {
        animation: none;
    }

    .ec-player.is-loading::after {
        animation-duration: 2s;
    }

    .ec-card:hover,
    .ec-card:focus-within {
        transform: none;
    }

    .ec-card:hover .ec-media-link img,
    .ec-facade:hover .ec-facade-poster {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   THE THEATRE
   The landing page's one <dialog>: a navy panel on a dimmed page, the
   video large on the left, its description beneath it, and the playlist of
   the page's videos — publishing order, newest first — scrolling beside it
   with the playing entry framed in gold. Everything about it answers the
   visitor: it settles in when a card is chosen, moves when they pick what
   is next, and fades when they leave. On a tablet the playlist drops under
   the text; on a phone the whole thing becomes a full-height sheet.
   ══════════════════════════════════════════════════════════════ */
.ec-theatre {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 24px;
    border: 0;
    background: transparent;
    color: var(--white);
    overflow: auto;
    overscroll-behavior: contain;
}

    .ec-theatre[open] {
        display: flex;
        flex-direction: column;
    }

    .ec-theatre::backdrop {
        background: rgba(10, 20, 44, .86);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

/* Auto margins centre the panel and, unlike centring on the dialog, never
   push its top edge out of reach when it is taller than the viewport. The
   width follows the viewport's height so the whole scene is in view on a
   laptop without scrolling: the video column is (height − bar − text) at
   16:9, plus the playlist column. */
.ec-theatre-panel {
    --ec-playlist-w: 340px;
    width: min(1240px, 100%, calc((100vh - 48px - 372px) * 16 / 9 + var(--ec-playlist-w)));
    min-width: min(100%, 760px);
    margin: auto;
    /* A flex item would shrink to the dialog's height and clip its own
       scene; keep the panel its content's size and let the dialog scroll. */
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ec-playlist-w);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "bar bar"
        "media list"
        "text list";
    background: #0d1f3e;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 40px 90px -30px rgba(0, 0, 0, .7),
        0 0 0 1px rgba(255, 255, 255, .06);
}

.ec-theatre[open] .ec-theatre-panel {
    animation: ec-theatre-in .24s cubic-bezier(.2, .7, .2, 1);
}

.ec-theatre[open]::backdrop {
    animation: ec-fade-in .2s ease-out;
}

.ec-theatre.is-closing .ec-theatre-panel {
    animation: ec-theatre-out .16s ease-in forwards;
}

.ec-theatre.is-closing::backdrop {
    animation: ec-fade-out .16s ease-in forwards;
}

@keyframes ec-theatre-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@keyframes ec-theatre-out {
    to { opacity: 0; transform: translateY(6px) scale(.99); }
}

@keyframes ec-fade-out {
    to { opacity: 0; }
}

/* The scene slot is only a hook for the script; its media and text are
   laid out by the panel's grid. */
.ec-theatre-scene {
    display: contents;
}

/* The bar: where the visitor is, and the three ways to move. */
.ec-theatre-bar {
    grid-area: bar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    padding-inline: 22px 12px;
}

.ec-theatre-where {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.ec-theatre-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-theatre-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: var(--white);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}

    .ec-theatre-btn svg {
        width: 14px;
        height: 14px;
    }

    .ec-theatre-btn:hover:not(:disabled) {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--navy);
    }

    .ec-theatre-btn:focus-visible {
        outline: 3px solid var(--gold-light);
        outline-offset: 2px;
    }

    .ec-theatre-btn:disabled {
        opacity: .28;
        cursor: default;
    }

.ec-theatre-close {
    margin-inline-start: 6px;
}

/* The chevrons are drawn for LTR; on an RTL page "next" travels left. */
[dir="rtl"] [data-ec-theatre-prev] svg,
[dir="rtl"] [data-ec-theatre-next] svg {
    transform: scaleX(-1);
}

/* ── The scene ── */
.ec-scene-media {
    grid-area: media;
    background: #000;
}

    .ec-scene-media .ec-player {
        border-radius: 0;
    }

.ec-scene-text {
    grid-area: text;
    min-width: 0;
    padding: 20px 28px 24px;
}

.ec-scene-title {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: clamp(22px, 2.1vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--white);
    margin: 0 0 10px;
}

.ec-scene-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0 0 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .66);
}

.ec-scene-topic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

    .ec-scene-topic::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--gold);
        flex-shrink: 0;
    }

.ec-scene-duration,
.ec-scene-date,
.ec-scene-captions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The description: a few lines, the rest behind "see more". The fade at
   the fold only shows while there is something folded away. */
.ec-scene-description {
    margin: 0 0 16px;
    max-width: 66ch;
}

.ec-scene-description-body {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
    max-height: calc(1.65em * 4);
    overflow: hidden;
}

    .ec-scene-description.is-folded:not(.is-expanded) .ec-scene-description-body {
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }

    .ec-scene-description.is-expanded .ec-scene-description-body {
        max-height: none;
    }

    .ec-scene-description-body p,
    .ec-scene-description-body ul,
    .ec-scene-description-body ol {
        margin: 0 0 .8em;
    }

    .ec-scene-description-body ul,
    .ec-scene-description-body ol {
        padding-inline-start: 1.3em;
    }

    .ec-scene-description-body > :last-child {
        margin-bottom: 0;
    }

    .ec-scene-description-body a {
        color: var(--gold-light);
    }

    .ec-scene-description-body img,
    .ec-scene-description-body iframe,
    .ec-scene-description-body video {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

.ec-scene-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    border-radius: 4px;
    transition: color .2s;
}

    .ec-scene-more:hover {
        color: var(--gold-light);
    }

    .ec-scene-more:focus-visible {
        outline: 3px solid var(--gold-light);
        outline-offset: 3px;
    }

    .ec-scene-more svg {
        width: 11px;
        height: 11px;
        transition: transform .2s;
    }

    .ec-scene-description.is-expanded .ec-scene-more svg {
        transform: rotate(180deg);
    }

.ec-scene-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-light);
    text-decoration: none;
    border-radius: 4px;
    transition: gap .2s, color .2s;
}

    .ec-scene-link:hover {
        gap: 12px;
        color: var(--white);
    }

    .ec-scene-link:focus-visible {
        outline: 3px solid var(--gold-light);
        outline-offset: 3px;
    }

    .ec-scene-link svg {
        width: 11px;
        height: 11px;
    }

    [dir="rtl"] .ec-scene-link svg {
        transform: scaleX(-1);
    }

/* ── The playlist ── */
/* The column takes the height of the video and text beside it; the list
   inside scrolls on its own. */
.ec-playlist-col {
    grid-area: list;
    position: relative;
    min-height: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, .08);
}

.ec-playlist {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 14px 16px 16px;
    padding-inline: 16px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

    .ec-playlist::-webkit-scrollbar {
        width: 8px;
    }

    .ec-playlist::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .28);
        border-radius: 8px;
        border: 2px solid #0d1f3e;
    }

    .ec-playlist::-webkit-scrollbar-track {
        background: transparent;
    }

.ec-playlist-title {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 18px 0 12px;
    background: #0d1f3e;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.ec-playlist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.ec-playlist-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 8px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    color: var(--white);
    text-decoration: none;
    transition: background .2s, border-color .2s;
}

    .ec-playlist-item:hover,
    .ec-playlist-item:focus-visible {
        background: rgba(255, 255, 255, .07);
    }

    .ec-playlist-item:focus-visible {
        outline: 2px solid var(--gold-light);
        outline-offset: 1px;
    }

    /* The playing entry: a gold frame and a "now playing" line. */
    .ec-playlist-item.is-active {
        border-color: var(--gold);
        background: rgba(201, 151, 0, .12);
    }

    .ec-playlist-item.is-active .ec-playlist-name {
        color: var(--gold-light);
    }

.ec-playlist-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

    .ec-playlist-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .4s ease;
    }

    .ec-playlist-item:hover .ec-playlist-thumb img {
        transform: scale(1.05);
    }

    .ec-playlist-thumb .ec-duration {
        inset-inline-end: 5px;
        bottom: 5px;
        padding: 3px 5px;
        font-size: 10px;
    }

.ec-play--xs {
    width: 28px;
    height: 28px;
    margin-inline-start: -14px;
    margin-top: -14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

    .ec-play--xs svg {
        width: 12px;
        height: 12px;
        margin-inline-start: 2px;
    }

.ec-playlist-item:hover .ec-play,
.ec-playlist-item:focus-visible .ec-play,
.ec-playlist-item.is-active .ec-play {
    background: var(--gold);
    color: var(--white);
}

.ec-playlist-text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ec-playlist-name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s;
}

.ec-playlist-topic {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
}

.ec-playlist-now {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
}

    .ec-playlist-now::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold);
        animation: ec-pulse 1.4s ease-in-out infinite;
    }

    .ec-playlist-item.is-active .ec-playlist-now {
        display: inline-flex;
    }

@keyframes ec-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.7); }
}

/* ── Load more ── */
.ec-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 44px;
}

.ec-more-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 30px;
    border: 1px solid #dbe8ff;
    border-radius: 6px;
    background: var(--white);
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s, gap .2s;
}

    .ec-more-btn:hover {
        background: var(--navy);
        border-color: var(--navy);
        color: var(--white);
    }

    .ec-more-btn:focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: 3px;
    }

    .ec-more-chevron {
        width: 12px;
        height: 12px;
        transition: transform .2s;
    }

    .ec-more-btn:hover .ec-more-chevron {
        transform: translateY(2px);
    }

    /* While the next cards load the label steps aside for a ring. */
    .ec-more-btn.is-loading {
        color: transparent;
        pointer-events: none;
    }

    .ec-more-btn.is-loading::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 18px;
        height: 18px;
        margin: -9px 0 0 -9px;
        border-radius: 50%;
        border: 2px solid rgba(23, 43, 84, .18);
        border-top-color: var(--gold);
        animation: ec-spin .8s linear infinite;
    }

.ec-more-start {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}

    .ec-more-start:hover {
        color: var(--navy);
        border-bottom-color: var(--navy);
    }

    .ec-more-start:focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: 3px;
        border-radius: 2px;
    }

/* Letter-spacing breaks the joined Arabic script. */
[dir="rtl"] .ec-theatre-where,
[dir="rtl"] .ec-scene-link,
[dir="rtl"] .ec-playlist-title,
[dir="rtl"] .ec-playlist-now,
[dir="rtl"] .ec-more-btn {
    letter-spacing: 0;
}

/* ── Theatre: responsive ── */
/* Short, wide screens (small laptops): a narrower playlist and a shorter
   fold keep the video large. */
@media (max-width: 1280px) and (min-width: 1024px) {
    .ec-theatre-panel {
        --ec-playlist-w: 300px;
    }
}

@media (max-height: 800px) and (min-width: 1024px) {
    .ec-theatre-panel {
        width: min(1240px, 100%, calc((100vh - 48px - 340px) * 16 / 9 + var(--ec-playlist-w)));
    }

    .ec-scene-description-body {
        max-height: calc(1.65em * 3);
    }
}

/* Tablets (portrait) and large phones: the playlist drops beneath the
   text and scrolls in a box; a landscape tablet keeps the side layout. */
@media (max-width: 1023px) {
    .ec-theatre-panel {
        width: min(100%, 920px);
        min-width: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "bar"
            "media"
            "text"
            "list";
    }

    .ec-scene-text {
        padding: 18px 22px 20px;
    }

    .ec-playlist-col {
        position: static;
        border-inline-start: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .ec-playlist {
        position: static;
        max-height: 380px;
        padding-inline: 18px;
    }

    .ec-playlist-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 12px;
    }
}

/* Phones: a full-height sheet that scrolls inside its own panel, so the
   bar stays put and any scrollbar sits on the navy, not beside it. The
   playlist runs to its end — the sheet is the scroller. */
@media (max-width: 640px) {
    .ec-theatre {
        padding: 0;
        overflow: hidden;
    }

    .ec-theatre-panel {
        width: 100%;
        min-width: 0;
        height: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        grid-template-rows: auto auto auto 1fr;
        align-content: start;
    }

    .ec-theatre-bar {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #0d1f3e;
        padding-inline: 16px 10px;
    }

    .ec-theatre-btn {
        width: 38px;
        height: 38px;
    }

    .ec-scene-text {
        padding: 16px 16px 20px;
    }

    .ec-scene-title {
        font-size: 21px;
    }

    .ec-scene-description-body {
        max-height: calc(1.65em * 5);
    }

    .ec-playlist {
        max-height: none;
        padding-inline: 12px;
    }

    .ec-playlist-title {
        padding-top: 14px;
    }

    .ec-playlist-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ec-playlist-item {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .ec-more {
        margin-top: 32px;
    }

    .ec-more-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Landscape phones: give the sheet's video room without a mile of text. */
@media (max-width: 920px) and (max-height: 500px) {
    .ec-theatre {
        padding: 0;
        overflow: hidden;
    }

    .ec-theatre-panel {
        width: 100%;
        min-width: 0;
        height: 100%;
        margin: 0;
        border-radius: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        grid-template-columns: minmax(0, 1fr) 280px;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "bar bar"
            "media list"
            "text list";
    }

    .ec-playlist-col {
        position: relative;
        border-top: 0;
        border-inline-start: 1px solid rgba(255, 255, 255, .08);
    }

    .ec-playlist {
        position: absolute;
        inset: 0;
        max-height: none;
    }

    .ec-playlist-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ec-theatre[open] .ec-theatre-panel,
    .ec-theatre[open]::backdrop,
    .ec-theatre.is-closing .ec-theatre-panel,
    .ec-theatre.is-closing::backdrop,
    .ec-playlist-now::before {
        animation: none;
    }

    .ec-theatre-btn,
    .ec-scene-link,
    .ec-scene-more svg,
    .ec-playlist-item,
    .ec-playlist-name,
    .ec-playlist-thumb img,
    .ec-more-btn,
    .ec-more-chevron {
        transition: none;
    }

    .ec-playlist-item:hover .ec-playlist-thumb img,
    .ec-more-btn:hover .ec-more-chevron {
        transform: none;
    }

    .ec-more-btn.is-loading::after {
        animation-duration: 2s;
    }
}