/* ============================================================================
   Apply Now — program cards (adult flow)
   The student portal's course card (resources/views/frontend/students/partials/group-card.blade.php, styled by
   public/assets/css/portal.css + ox-engage-cards.css) in the light theme, with its measures — a 28px chip, a 26px
   title, a line of text, icon stats, a 7px progress bar with its percentage, a closing row of 36px buttons, radius,
   shadow, spacing and font stack — taken from it and checked against it. Colours come only from the page's :root
   tokens (paper, navy ink, gold). One deliberate difference: the poster is not drawn on the far side behind a veil;
   it comes out of the card's top-right corner and dissolves into the card (see below), with the copy to its left.
   Type is the site's own pair — Plus Jakarta Sans for Latin, IBM Plex Sans Arabic (then Cairo) for Arabic.
   Two cards per row on wide screens. Motion is transform / opacity only and off for prefers-reduced-motion.
   Markup: resources/views/frontend/contact/partials/program-card.blade.php
   Behaviour: public/assets/oxford/js/program-cards.js
   ========================================================================== */

.target-programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
    gap: 24px;
    width: 100%;
    min-width: 0;
    margin-bottom: 8px;
    align-items: stretch;   /* a row of cards is one height, so fees and buttons line up */
}
.target-programs-grid .tpc-empty-state { grid-column: 1 / -1; }

/* ---------- card (.ox-engage.course-card) ---------- */
.pc-card {
    --pc-accent: var(--ink, #003366);        /* the portal's --ox-group-color */
    --pc-on-accent: #fff;                    /* the portal's --ox-group-ink */
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 240px;
    container: pc / inline-size;     /* the layout below reacts to the card's own width */
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* the site's own pair: Latin + Arabic */
    color: var(--ink, #003366);
    background-color: var(--paper, #fff);
    border: 0;
    border-radius: 8.125px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 20px 0 rgba(76, 87, 125, .12), 0 0 0 1px rgba(76, 87, 125, .08);
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    transition: transform .25s ease, box-shadow .25s ease;
}
.pc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 51, 102, .24), 0 0 0 1px rgba(76, 87, 125, .1);
}
.pc-card:active { transform: translateY(-1px) scale(.99); }
.pc-card.selected {
    transform: translateY(-4px);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, .75), 0 0 0 4px var(--ink, #003366), 0 12px 32px rgba(0, 51, 102, .24);
}
.pc-card.is-ended .pc-poster { filter: grayscale(.85); opacity: .75; }

/* ---------- the poster, merged into the card ----------
   The programme's poster comes out of the card's top-right corner and dissolves into it: it is flush with the top and
   right edges, and a radial mask centred on that corner fades it toward the left and the bottom so no edge shows.
   The copy sits to its left. (The student portal draws its photo on the far side behind a veil; this is the layout
   that was asked for.) */
.pc-top {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 240px;
    min-width: 0;
}
.pc-poster {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    z-index: 0;
    display: block;
    width: 48%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: right top;
    -webkit-mask-image: radial-gradient(ellipse 125% 125% at 100% 0, #000 0%, #000 55%, rgba(0, 0, 0, .86) 66%, rgba(0, 0, 0, .62) 77%, rgba(0, 0, 0, .36) 88%, rgba(0, 0, 0, .16) 100%), linear-gradient(to left, #000 0%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
            mask-image: radial-gradient(ellipse 125% 125% at 100% 0, #000 0%, #000 55%, rgba(0, 0, 0, .86) 66%, rgba(0, 0, 0, .62) 77%, rgba(0, 0, 0, .36) 88%, rgba(0, 0, 0, .16) 100%), linear-gradient(to left, #000 0%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
            -webkit-mask-composite: source-in, source-in, source-over;
                    mask-composite: intersect, intersect, add;
    pointer-events: none;
}
[dir="rtl"] .pc-poster {
    object-position: left top;
    -webkit-mask-image: radial-gradient(ellipse 125% 125% at 0 0, #000 0%, #000 55%, rgba(0, 0, 0, .86) 66%, rgba(0, 0, 0, .62) 77%, rgba(0, 0, 0, .36) 88%, rgba(0, 0, 0, .16) 100%), linear-gradient(to right, #000 0%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
            mask-image: radial-gradient(ellipse 125% 125% at 0 0, #000 0%, #000 55%, rgba(0, 0, 0, .86) 66%, rgba(0, 0, 0, .62) 77%, rgba(0, 0, 0, .36) 88%, rgba(0, 0, 0, .16) 100%), linear-gradient(to right, #000 0%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
            -webkit-mask-composite: source-in, source-in, source-over;
                    mask-composite: intersect, intersect, add;
}
.pc-top::before {
    /* the poster's own colours, blurred and stretched down the poster's column: the empty space under a short poster
       takes its tint, so the card reads as one piece instead of a picture next to text */
    content: '';
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    z-index: 0;
    width: 62%;
    height: 100%;
    background: var(--pc-poster, none) right top / cover no-repeat;
    filter: blur(38px) saturate(1.3);
    opacity: .24;
    transform: scale(1.3);
    transform-origin: right top;
    -webkit-mask-image: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 82%);
            mask-image: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 82%);
    pointer-events: none;
}
[dir="rtl"] .pc-top::before {
    background-position: left top;
    transform-origin: left top;
    -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 82%);
            mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 82%);
}
.pc-poster { transform-origin: right top; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
[dir="rtl"] .pc-poster { transform-origin: left top; }
.pc-card:hover .pc-poster, .pc-card.selected .pc-poster { transform: scale(1.03); }
.pc-poster-ph {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    height: 62%;
    font-size: 96px;
    color: rgba(0, 51, 102, .1);
}

/* the portal's .card-body: copy on top, the actions pinned to the bottom */
.pc-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 13px;
    width: 57%;
    min-width: 0;
    padding: 17.55px 29.25px 16.25px;
}
.pc-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7.15px; }

/* the portal's chip (.ox-engage__chip): 28px, radius 8, 11px bold, tinted — in light tones */
.pc-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    height: 28px;
    min-width: 28px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;   /* never letter-space Arabic */
    white-space: nowrap;
}
.pc-status i { font-size: 13px; line-height: 1; }
.pc-status.is-open    { background: rgba(80, 205, 137, .16); border-color: rgba(26, 127, 55, .35); color: #0f6a3a; }
.pc-status.is-closing { background: rgba(255, 199, 0, .2);  border-color: rgba(176, 120, 0, .4);  color: #7a4a00; }
.pc-status.is-soon    { background: rgba(54, 153, 255, .14); border-color: rgba(10, 74, 160, .32); color: #0a3a86; }
.pc-status.is-ended   { background: rgba(241, 65, 108, .12); border-color: rgba(180, 35, 24, .32); color: #9a1c1c; }
.pc-status.is-closing i { animation: pc-blink 1.1s ease-in-out infinite; }

/* title (.ox-engage__title: 2 lines) and the line under it */
.pc-card .pc-title {   /* the extra class outranks the page's serif `.registration-page-wrapper h3` */
    margin: 0 0 6.5px -3.25px;
    font-family: inherit;
    font-style: normal;
    font-variation-settings: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--ink, #003366);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* a programme's name is never cut short in the narrower copy column */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pc-card .pc-desc {
    margin: 0 0 6.5px;
    font-family: inherit;
    font-size: 13.975px;
    font-weight: 500;
    line-height: 17.4688px;
    color: var(--ink, #003366);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* selected tick */
.pc-check {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink, #003366);
    color: var(--gold, #ffcc00);
    font-size: 17px;
    box-shadow: 0 4px 12px rgba(0, 51, 102, .3);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.pc-card.selected .pc-check { opacity: 1; transform: scale(1); }

/* ---------- stats (.ox-engage__meta / __stat): icon in the accent colour + text ---------- */
.pc-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px 14px; margin: 0 0 9.1px; }
.pc-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #003366);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pc-stat i { color: var(--pc-accent); font-size: 14px; line-height: 1; }
.pc-stat b { font-weight: 800; }
.pc-stat-label { color: var(--ink-soft, #6c7689); font-weight: 600; }

/* progress (.ox-engage__progress): 7px track, accent-to-gold fill, the percentage and a caption */
.pc-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; width: 100%; max-width: 338px; margin: 1.95px 0 0; }
.pc-track {
    position: relative;
    flex: 1 1 117px;
    min-width: 104px;
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 51, 102, .1);
    box-shadow: inset 0 1px 2px rgba(0, 51, 102, .15);
    overflow: hidden;
}
.pc-track-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ink-3, #0a4486), var(--gold, #ffcc00));
    box-shadow: 0 0 10px rgba(255, 204, 0, .5);
    transform-origin: left center;
    transform: scaleX(var(--p, 0));
    transition: transform 1s cubic-bezier(.2, .8, .2, 1) .35s;
}
.pc-track-fill.is-hot { background: linear-gradient(90deg, var(--gold, #ffcc00), #e5483c); }
[dir="rtl"] .pc-track-fill { transform-origin: right center; }
.pc-progress-pct { min-width: 31.2px; font-size: 13px; font-weight: 800; color: var(--ink, #003366); font-variant-numeric: tabular-nums; }
.pc-progress-meta { font-size: 12px; font-weight: 600; color: var(--ink-soft, #6c7689); white-space: nowrap; }

.pc-open-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(26, 127, 55, .35);
    background: rgba(80, 205, 137, .16);
    color: #0f6a3a;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
}

/* ---------- fee: the one thing the portal card has no equivalent for, in the same stat language ---------- */
.pc-bottom { display: flex; flex-direction: column; gap: 13px; min-width: 0; margin-bottom: 6.5px; }
.pc-fee { min-width: 0; }
.pc-fee-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft, #6c7689);
}
.pc-fee-label i { color: var(--pc-accent); font-size: 14px; }
.pc-fee-label small { margin-inline-start: auto; font-weight: 600; color: var(--ink-faint, #a1a8b8); }
.pc-fee-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 2px;
    direction: ltr;
    justify-content: flex-start;
    font-variant-numeric: tabular-nums;
}
[dir="rtl"] .pc-fee-amount { justify-content: flex-end; }
.pc-fee-num {
    position: relative;
    z-index: 0;
    font-family: inherit;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--ink, #003366);
}
/* a gold highlighter stroke drawn under the amount */
.pc-fee-num::after {
    content: '';
    position: absolute;
    inset-inline: -4px;
    bottom: .06em;
    height: .36em;
    z-index: -1;
    border-radius: 3px;
    background: rgba(255, 204, 0, .6);
    transform-origin: left center;
}
.pc-fee-cur { font-size: 14px; font-weight: 700; color: var(--ink-soft, #6c7689); }
.pc-fee-min {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 204, 0, .75);
    background: var(--gold-soft, #fff9e0);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink, #003366);
}
.pc-fee-min i { color: var(--pc-accent); font-size: 13px; }
.pc-fee-min b { font-variant-numeric: tabular-nums; }
.pc-fee-lines { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.pc-fee-lines li {
    display: inline-flex;
    gap: 7px;
    padding: 3px 9px;
    border-radius: 7px;
    border: 1px solid rgba(0, 51, 102, .14);
    background: rgba(255, 255, 255, .85);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-soft, #6c7689);
}
.pc-fee-lines b { font-variant-numeric: tabular-nums; color: var(--ink, #003366); }

/* ---------- actions (.ox-engage__actions): 36px buttons, 8px apart ---------- */
.pc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pc-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 20.5px;
    border: 1px solid var(--pc-accent);
    border-radius: 9px;
    overflow: hidden;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--pc-on-accent);
    background: var(--pc-accent);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .18s ease, background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
/* a light band that sweeps across every few seconds to draw the eye */
.pc-cta::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 40%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
    transform: translateX(-130%) skewX(-12deg);
    animation: pc-shine 4.8s cubic-bezier(.4, 0, .2, 1) infinite;
    animation-delay: calc(var(--pc-delay, 0ms) + 1.4s);
    pointer-events: none;
}
[dir="rtl"] .pc-cta::after { animation-name: pc-shine-rtl; }
/* the portal's hover: the fill goes transparent, text and border keep the accent; the icon circle inverts */
.pc-cta:hover { background: transparent; color: var(--pc-accent); box-shadow: none; }
.pc-cta:active { transform: scale(.97); }
.pc-cta:focus-visible { outline: 3px solid var(--gold, #ffcc00); outline-offset: 3px; }
.pc-cta-idle, .pc-cta-on { display: inline-flex; align-items: center; gap: 7px; }
.pc-cta i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pc-on-accent);
    color: var(--pc-accent);
    font-size: 16px;
    line-height: 1;
    transition: background-color .28s ease, color .28s ease;
}
.pc-cta:hover i { background: var(--pc-accent); color: var(--pc-on-accent); }
[dir="rtl"] .pc-cta-idle i { transform: scaleX(-1); }
.pc-cta-on { display: none; }
.pc-card.selected .pc-cta { background: var(--gold, #ffcc00); border-color: var(--gold, #ffcc00); color: var(--ink, #003366); }
.pc-card.selected .pc-cta i { background: var(--ink, #003366); color: var(--gold, #ffcc00); }
.pc-card.selected .pc-cta::after { display: none; }
.pc-card.selected .pc-cta-idle { display: none; }
.pc-card.selected .pc-cta-on { display: inline-flex; }

/* the intro video: a gold play icon beside the select button, as tall as the buttons; it pulses three times when the card first shows */
.pc-play {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--ink, #003366);
    background: var(--gold, #ffcc00);
    box-shadow: 0 4px 12px rgba(255, 204, 0, .5);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform .18s ease, background-color .25s ease, color .25s ease;
}
.pc-play i { font-size: 21px; line-height: 1; margin-inline-start: 2px; }   /* the triangle reads centred when nudged */
[dir="rtl"] .pc-play i { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 2px; }
.pc-play::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--gold, #ffcc00);
    opacity: 0;
    pointer-events: none;
    animation: pc-ping 1.8s ease-out .9s 3;
}
.pc-play:hover { background: var(--ink, #003366); color: var(--gold, #ffcc00); transform: scale(1.07); }
.pc-play:active { transform: scale(.94); }
.pc-play:focus-visible { outline: 3px solid var(--ink, #003366); outline-offset: 3px; }

/* ---------- custom programme extras (age, hours, details) ---------- */
.pc-extra {
    padding: 12px 29.25px 18px;
    border-top: 1px solid rgba(76, 87, 125, .12);
    background: var(--surface, #fafbfd);
}

/* the portal's title is fluid below 1200px (its root font size is 13px from 992px and 12px below) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pc-card .pc-title { font-size: calc(17.225px + .9vw); }
}

/* ---------- below 992px: one column, and the portal's narrower measures (its rem is smaller there) ---------- */
@media (max-width: 991.98px) {
    .target-programs-grid { grid-template-columns: 1fr; }
    .pc-card { border-radius: 7.5px; }
    .pc-info { gap: 12px; padding: 16.2px 27px 15px; }
    .pc-chips { margin-bottom: 6.6px; }
    .pc-card .pc-title { margin: 0 0 6px -3px; font-size: calc(15.9px + .9vw); }
    .pc-card .pc-desc { margin-bottom: 6px; font-size: 12.9px; line-height: 16.125px; }
    .pc-meta { margin-bottom: 8.4px; }
    .pc-progress { margin-top: 1.8px; max-width: 312px; }
    .pc-track { min-width: 96px; }
    .pc-progress-pct { min-width: 28.8px; }
    .pc-bottom { margin-bottom: 6px; }
    .pc-extra { padding-inline: 27px; }
}

/* ---------- a phone-width card: the poster is the card's header (same corner, same fade) and the copy follows ---------- */
@container pc (max-width: 399.98px) {
    .pc-card, .pc-top { min-height: 0; }
    .pc-top { flex-direction: column; }
    .pc-poster { position: relative; inset: auto; width: 100%; max-height: 360px; }
    .pc-top::before { width: 100%; height: 360px; }
    .pc-poster-ph { position: relative; inset: auto; width: 100%; height: 150px; }
    .pc-info { width: 100%; padding-inline: 20px; }
    .pc-extra { padding-inline: 20px; }
}

/* ---------- entrance (armed by program-cards.js only) ---------- */
.pc-armed .pc-card:not(.pc-in) { opacity: 0; }
.pc-card.pc-in { animation: pc-rise .55s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--pc-delay, 0ms); }
.pc-card.pc-in .pc-poster { animation: pc-poster-in .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--pc-delay, 0ms) + 120ms); }
.pc-card.pc-in .pc-fee-num::after { animation: pc-mark .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--pc-delay, 0ms) + 500ms); }
.pc-armed .pc-card:not(.pc-in) .pc-cta::after,
.pc-armed .pc-card:not(.pc-in) .pc-play::after { animation-play-state: paused; }
.pc-armed .pc-card:not(.pc-in) .pc-track-fill { transform: scaleX(0); }

@keyframes pc-poster-in { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }
@keyframes pc-rise  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pc-mark  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pc-ping  { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes pc-shine { 0%, 62% { transform: translateX(-130%) skewX(-12deg); } 100% { transform: translateX(330%) skewX(-12deg); } }
@keyframes pc-shine-rtl { 0%, 62% { transform: translateX(130%) skewX(12deg); } 100% { transform: translateX(-330%) skewX(12deg); } }
@keyframes pc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- video window (opened by program-cards.js; shared by the adult and the kids cards) ---------- */
.pc-video-modal {
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 20, 45, .74);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.pc-video-modal.is-open { display: flex; animation: pc-fade .22s ease-out; }
.pc-video-dialog {
    position: relative;
    width: min(100%, 960px);
    border-radius: 14px;
    background: var(--paper, #fff);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    overflow: hidden;
}
.pc-video-head { display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-inline: 18px 10px; }
.pc-video-title { flex: 1 1 auto; margin: 0; min-width: 0; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ink, #003366); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-video-close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--surface, #fafbfd);
    color: var(--ink, #003366);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
}
.pc-video-close:hover { background: var(--rule, #e5e9f0); }
.pc-video-close:focus-visible { outline: 3px solid var(--gold, #ffcc00); outline-offset: 2px; }
.pc-video-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.pc-video-stage iframe, .pc-video-stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
@keyframes pc-fade { from { opacity: 0; } to { opacity: 1; } }

@media (hover: none) {
    .pc-card:hover { transform: none; box-shadow: 0 0 20px 0 rgba(76, 87, 125, .12), 0 0 0 1px rgba(76, 87, 125, .08); }
    .pc-card.selected { transform: none; box-shadow: 0 0 0 3px rgba(255, 204, 0, .75), 0 0 0 4px var(--ink, #003366), 0 12px 32px rgba(0, 51, 102, .24); }
}

@media (prefers-reduced-motion: reduce) {
    .pc-card, .pc-card *, .pc-card *::before, .pc-card *::after, .pc-video-modal {
        animation: none !important;
        transition: none !important;
    }
    .pc-armed .pc-card:not(.pc-in) { opacity: 1; }
    .pc-armed .pc-card:not(.pc-in) .pc-track-fill { transform: scaleX(var(--p, 0)); }
    .pc-cta::after, .pc-play::after { display: none; }
}