/**
 * Video Library
 *
 * Values come from the approved Figma design (Project Eagle, node 2000:17566), which was in turn
 * built on tokens measured off the live site: #000 base, #121314 raised, #333 borders, radius 0.
 * Grid: 1200 main + 40 gap + 280 rail inside the theme's 1520 content width; cards 3-up at 384.
 */

/* Scoped border-box. Several elements here combine width/max-width with padding (the CTA body,
   the sheet's scroller, the search field); under the default content-box the padding is added
   OUTSIDE the width and they overflow the viewport on narrow screens. Scoped to this component
   so it cannot affect the rest of the theme. */
[class*="cpro-video-"],
[class*="cpro-video-"]::before,
[class*="cpro-video-"]::after,
[class*="cpro-video-"] * {
    box-sizing: border-box;
}

/* ---------- archive hero ---------- */

.cpro-video-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 40px;
    align-items: start;
    padding-block: 8px 48px;
}

/* Hero with the sizzle reel behind it. The copy sits on top of moving footage, so everything here
   is about keeping it readable without washing the picture out. */
.cpro-video-hero--media {
    position: relative;
    isolation: isolate;
    align-items: center;
    min-height: 440px;
    padding: 56px 48px;
}

/* A full-bleed video hero belongs flush under the header, not floated 140px below it.
 *
 * Three paddings stacked above it: the theme's .tm-main.uk-section (70px), our own wrapper — which
 * was a second .uk-section nested inside the first, so it doubled the theme's padding for no reason
 * (70px) — and the hero's own internal padding (56px, which stays: that is the copy's breathing
 * room, not dead space).
 *
 * Scoped to this archive by body class so no other .tm-main loses its section padding.
 */
body.post-type-archive-videos .tm-main {
    padding-top: 0;
}

body.post-type-archive-videos .cpro-video-page {
    padding-top: 0;
}

/* FULL BLEED.
 * The theme wraps archive output in its own .uk-container (1200 content), so the hero has to break
 * out of it. Capped at 1600 rather than a bare 100vw because .tm-page is itself max-width:1600 —
 * an unbounded 100vw hero would be wider than the entire site on a large display.
 *
 * Safe without an overflow guard of our own: the theme already sets `body { overflow-x: clip }`.
 * clip, not hidden — hidden would make body a scroll container and break the rail's position:sticky.
 *
 * The inner padding then re-establishes the 1200 reading column so the copy stays aligned with the
 * library below it rather than drifting out to the bleed edge.
 */
.cpro-video-hero--bleed {
    width: min(100vw, 1600px);
    margin-inline: calc(50% - min(50vw, 800px));
    /* Restore the 1200 reading column exactly, so the headline sits on the same left edge as the
       strip and the row headings below. 40px is the theme container's own padding, which is what
       the content falls back to once the viewport is narrower than 1200. */
    padding-inline: max(40px, calc((min(100vw, 1600px) - 1200px) / 2));
}

.cpro-video-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background-color: #000;
    background-size: cover;
    background-position: center;   /* the poster, shown before load and under reduced-motion */
}

.cpro-video-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The reel is already cropped to its safe band (1280x402, 3.18:1) so this only trims the
       remainder. Centre is right now — the baked crop has no heads near the edges to protect. */
    object-position: center;
    display: block;
}

/* Two-stop scrim: a left-weighted wash so the headline has contrast, plus a floor of overall
   darkening so a bright beat (the RGB bar shot) cannot blow out the copy mid-loop. */
.cpro-video-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgb(0 0 0 / .88) 0%, rgb(0 0 0 / .72) 42%, rgb(0 0 0 / .35) 100%),
        linear-gradient(0deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / .25) 100%);
}

.cpro-video-hero--media .cpro-video-hero__copy,
.cpro-video-hero--media .cpro-video-subscribe {
    position: relative;
    z-index: 1;
}

/* The card would otherwise read as a hole punched in the footage. */
.cpro-video-hero--media .cpro-video-subscribe {
    background: rgb(18 19 20 / .82);
    backdrop-filter: blur(6px);
}

/* prefers-reduced-motion: drop the video entirely and let the poster stand. Not merely paused —
   a paused autoplaying video still decodes a frame and still animates on some engines. */
@media (prefers-reduced-motion: reduce) {
    .cpro-video-hero__video {
        display: none;
    }
}

/* the subscribe card: one link, the whole card is the target */
.cpro-video-subscribe {
    display: block;
    padding: 28px;
    background: #121314;
    border: 1px solid #333;
    color: #fff;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease;
}

.cpro-video-subscribe:hover,
.cpro-video-subscribe:focus-visible {
    border-color: #fff;
    background: #17181a;
    color: #fff;
}

/* YouTube mark drawn in CSS — no icon font or remote asset */
.cpro-video-subscribe__glyph {
    position: relative;
    display: block;
    width: 34px;
    height: 24px;
    background: #fff;
    border-radius: 6px / 10px;
}

.cpro-video-subscribe__glyph::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -35% -50%;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #121314;
}

.cpro-video-subscribe__head {
    display: block;
    margin-block-start: 18px;
    font-size: 24px;
    line-height: 1.3;
}

.cpro-video-subscribe__link {
    display: block;
    margin-block-start: 12px;
    font-size: 14px;
    opacity: .7;
}

.cpro-video-subscribe:hover .cpro-video-subscribe__link {
    opacity: 1;
}

/* ---------- what's in the library ---------- */

.cpro-video-strip {
    padding-block: 36px 44px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    margin-block-end: 48px;
}

.cpro-video-strip__eyebrow {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
}

.cpro-video-strip__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-block-start: 28px;
}

.cpro-video-strip__head {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    text-transform: uppercase;
}

.cpro-video-strip__desc {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: .65;
}

/* ---------- support band ---------- */

.cpro-video-cta {
    display: grid;
    grid-template-columns: 45% minmax(0, 1fr);
    align-items: stretch;
    margin-block-start: 72px;
    background: #121314;
}

.cpro-video-cta__still {
    min-height: 420px;
    background-color: #000;
    background-size: cover;
    background-position: center;
}

/* the still is decorative; dim it so the copy beside it stays dominant */
.cpro-video-cta__still:not(.cpro-video-cta__still--empty) {
    filter: grayscale(1) brightness(.55);
}

.cpro-video-cta__body {
    align-self: center;
    padding: 64px 72px;
}

.cpro-video-cta__eyebrow {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
}

.cpro-video-cta__head {
    margin: 16px 0 0;
    font-size: 32px;
    line-height: 1.25;
    text-transform: uppercase;
    max-width: 16ch;
}

.cpro-video-cta__sub {
    margin: 18px 0 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.55;
    opacity: .7;
}

.cpro-video-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-block-start: 32px;
}

/* equal widths by design — the Kino wireframe had 196 vs 180, which read as misaligned */
.cpro-video-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 52px;
    border-radius: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.cpro-video-btn--solid {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}

.cpro-video-btn--solid:hover,
.cpro-video-btn--solid:focus-visible {
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: #000;
}

.cpro-video-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.cpro-video-btn--ghost:hover,
.cpro-video-btn--ghost:focus-visible {
    background: rgb(255 255 255 / .12);
    color: #fff;
}

@media (max-width: 1199px) {
    .cpro-video-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .cpro-video-cta {
        grid-template-columns: minmax(0, 1fr);
    }

    .cpro-video-cta__still {
        min-height: 240px;
    }

    .cpro-video-cta__body {
        padding: 44px 40px;
    }
}

/* Below 960 the three columns are ~220px — too narrow for the headings, so one wraps to two lines
   and the descriptions start at different heights. Stacking reads better than a ragged baseline. */
@media (max-width: 959px) {
    .cpro-video-strip__items {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 639px) {
    .cpro-video-cta__body {
        padding: 36px 24px;
    }

    .cpro-video-btn {
        width: 100%;
    }
}


.cpro-video-hero__eyebrow {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .65;
}

.cpro-video-hero__title {
    margin: 14px 0 0;
    font-size: 64px;
    line-height: 1.1;
    text-transform: uppercase;
}

.cpro-video-hero__sub {
    margin: 18px 0 0;
    max-width: 620px;
    font-size: 20px;
    line-height: 1.5;
    opacity: .7;
}

@media (max-width: 959px) {
    /* 48px of side padding costs a quarter of the width on a phone. 15px, not a rounder number,
       because that is what UIkit's .uk-container drops to below 640 — the hero copy has to sit on
       the same left edge as the body content, not 9px inside it. */
    .cpro-video-hero--media {
        padding: 40px 15px;
        min-height: 380px;
    }

    /* The left-weighted wash assumes copy beside footage; stacked, it needs to be even. */
    .cpro-video-hero__scrim {
        background:
            linear-gradient(0deg, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / .55) 60%, rgb(0 0 0 / .45) 100%);
    }

    .cpro-video-hero__title {
        font-size: 42px;
    }

    .cpro-video-hero__sub {
        font-size: 17px;
    }
}

.cpro-video-library {
    --cpro-vid-surface: #000;
    --cpro-vid-raised: #121314;
    --cpro-vid-border: #333;
    --cpro-vid-text: #fff;
    --cpro-vid-gap: 24px;
    --cpro-vid-rail: 280px;

    color: var(--cpro-vid-text);
}

.cpro-video-library__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cpro-vid-rail);
    gap: 40px;
    align-items: start;
}

.cpro-video-library__grid--norail {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------- rows ---------- */

.cpro-video-row {
    padding-block-end: 28px;
    border-bottom: 1px solid var(--cpro-vid-border);
    margin-block-end: 44px;
}

.cpro-video-row:last-child {
    margin-block-end: 0;
}

.cpro-video-row__head,
.cpro-video-results__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 24px;
}

.cpro-video-row__title {
    margin: 0;
    font-size: 24px;
    line-height: 1.4;
    text-transform: uppercase;
}

.cpro-video-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    color: var(--cpro-vid-text);
    opacity: .7;
    text-decoration: none;
    white-space: nowrap;
}

.cpro-video-link:hover,
.cpro-video-link:focus-visible {
    opacity: 1;
}

.cpro-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px var(--cpro-vid-gap);
}

/* ---------- card ---------- */

.cpro-video-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.cpro-video-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--cpro-vid-raised);
    border: 1px solid var(--cpro-vid-border);
    overflow: hidden;
}

.cpro-video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* play affordance — a ring plus a triangle, no icon font dependency */
.cpro-video-card__play {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: 56px;
    height: 56px;
    border: 2px solid rgb(255 255 255 / .8);
    border-radius: 50%;
    transition: background-color .2s ease, border-color .2s ease;
}

.cpro-video-card__play::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -40% -50%;
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent rgb(255 255 255 / .9);
}

.cpro-video-card__link:hover .cpro-video-card__play,
.cpro-video-card__link:focus-visible .cpro-video-card__play {
    background: rgb(255 255 255 / .15);
    border-color: #fff;
}

/* Duration badge — bottom-right of the thumb, as the design had it. Rendered only when the
   duration meta exists (see cpro_video_card). */
.cpro-video-card__duration {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3px 7px;
    background: rgb(0 0 0 / .78);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.cpro-video-card__title {
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 1.4;
    /* two-line clamp: the design reserves a two-line block so cards share one baseline grid */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cpro-video-card__desc {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    opacity: .6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Family · Application. Absent entirely when the video has neither — 55% have no family. */
.cpro-video-card__meta {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .45;
}

/* ---------- rail ---------- */

/* The aside must span the whole grid row, or position:sticky inside it has nowhere to travel.
   `.cpro-video-library__grid` uses `align-items: start`, so without this the rail is only as tall
   as its own content and the filters scroll away after the first section and never come back.
   Scoped to the rail so the main column keeps its natural height. The downloads library already
   carries the identical rule and comment — these two stylesheets are deliberate duplicates, so a
   fix to one belongs in the other. */
.cpro-video-rail {
    align-self: stretch;
}

.cpro-video-rail__inner {
    position: sticky;
    top: 100px; /* clears the 80px sticky navbar */
    background: var(--cpro-vid-raised);
    border: 1px solid var(--cpro-vid-border);
    padding: 20px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.cpro-video-rail__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.cpro-video-rail__title {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cpro-video-rail__search {
    margin-block-start: 14px;
}

.cpro-video-rail__search input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: var(--cpro-vid-surface);
    border: 1px solid var(--cpro-vid-border);
    border-radius: 0;
    color: var(--cpro-vid-text);
    font-size: 14px;
}

.cpro-video-rail__search input::placeholder {
    color: rgb(255 255 255 / .45);
}

.cpro-video-facet {
    margin-block-start: 22px;
    padding-block-start: 18px;
    border-top: 1px solid var(--cpro-vid-border);
}

.cpro-video-facet:first-of-type {
    border-top: 0;
    padding-block-start: 0;
}

.cpro-video-facet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--cpro-vid-text);
    font: inherit;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
}

.cpro-video-facet__count {
    opacity: .5;
    margin-inline-start: 4px;
}

.cpro-video-facet__icon {
    position: relative;
    width: 12px;
    height: 12px;
    flex: none;
}

.cpro-video-facet__icon::before,
.cpro-video-facet__icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    inset: 50% 0 auto 0;
    height: 1px;
}

/* the vertical stroke disappears when the group is open, turning + into – */
.cpro-video-facet__icon::after {
    inset: 0 50% auto auto;
    width: 1px;
    height: 100%;
    translate: 50% 0;
    transition: opacity .15s ease;
}

.cpro-video-facet__head[aria-expanded="true"] .cpro-video-facet__icon::after {
    opacity: 0;
}

.cpro-video-facet__body {
    margin-block-start: 12px;
}

.cpro-video-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 4px;
    font-size: 14px;
    cursor: pointer;
}

.cpro-video-check input {
    width: 13px;
    height: 13px;
    flex: none;
    accent-color: #fff;
    margin: 0;
}

.cpro-video-check__name {
    flex: 1 1 auto;
    opacity: .85;
}

.cpro-video-check__count {
    opacity: .4;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ---------- results / empty ---------- */

.cpro-video-empty {
    margin: 32px 0 0;
    opacity: .6;
}

.cpro-video-library.is-loading .cpro-video-library__main {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
    .cpro-video-library__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cpro-video-rail {
        order: -1;
    }

    .cpro-video-rail__inner {
        position: static;
        max-height: none;
    }
}

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

@media (max-width: 639px) {
    .cpro-video-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cpro-video-row__title {
        font-size: 20px;
    }
}

/* Support band with no art: one panel rather than a half-empty two-column one. The copy is centred
   here — left-aligned copy constrained to ~16ch inside a full-width band just reads as broken.
   Art is opt-in via the `cpro_video_cta_art` filter — see inc/videos/video-functions.php. */
.cpro-video-cta--noart {
    grid-template-columns: minmax(0, 1fr);
}

.cpro-video-cta--noart .cpro-video-cta__body {
    width: 100%;
    max-width: 780px;
    margin-inline: auto;
    padding-block: 72px;
    text-align: center;
}

.cpro-video-cta--noart .cpro-video-cta__head,
.cpro-video-cta--noart .cpro-video-cta__sub {
    max-width: none;
}

.cpro-video-cta--noart .cpro-video-cta__actions {
    justify-content: center;
}

/* =========================================================================
   MOBILE FILTER SHEET

   Ported from Kino Flo's Learning Library. Below 1200 the rail becomes a bottom
   sheet raised by a Filters button. The SAME <aside> moves — it is not cloned —
   so there is one set of inputs and the filter JS never knows the difference.

   A sheet rather than UIkit offcanvas: offcanvas only slides from the sides, and
   filters you reach by thumb belong at the bottom of the screen.
   ========================================================================= */

/* The sheet chrome only exists below 1200; above it the rail is a plain sidebar. */
.cpro-video-rail__close,
.cpro-video-rail__ctas,
.cpro-video-fab,
.cpro-video-sheet-backdrop {
    display: none;
}

/* The sheet takes focus on open so the dialog is announced. It is not a control and
   must not look like one; its children keep their focus rings. */
.cpro-video-rail:focus {
    outline: none;
}

.cpro-video-library :is(button, a, input):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 1199px) {
    /* The rail leaves the flow entirely — it is fixed — so the main column is simply full width.
       No `order` juggling: there is nothing left in the grid to order. */
    .cpro-video-library__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cpro-video-fab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        right: 16px;
        bottom: 16px;
        z-index: 1090;
        padding: 13px 22px;
        border: 1px solid #333;
        border-radius: 0;
        cursor: pointer;
        background: #121314;
        color: #fff;
        font: inherit;
        font-size: 13px;
        letter-spacing: .06em;
        text-transform: uppercase;
        box-shadow: 0 6px 20px rgb(0 0 0 / .45);
    }

    .cpro-video-fab__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: #fff;
        color: #000;
        font-size: 11px;
        letter-spacing: 0;
    }

    .cpro-video-fab__count[hidden] {
        display: none;
    }

    .cpro-video-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1095;
        background: rgb(0 0 0 / .6);
        opacity: 0;
        transition: opacity .28s ease;
    }

    .cpro-video-sheet-backdrop[hidden] {
        display: none;
    }

    .cpro-video-library[data-filters-open="1"] .cpro-video-sheet-backdrop {
        opacity: 1;
    }

    .cpro-video-rail {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1100;
        max-height: 85vh;
        overflow: hidden;
        background: #121314;
        border-top: 1px solid #333;
        box-shadow: 0 -8px 40px rgb(0 0 0 / .5);
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility .28s;
    }

    .cpro-video-library[data-filters-open="1"] .cpro-video-rail {
        transform: translateY(0);
        visibility: visible;
    }

    /* Decoration: signals "this pulls up from the bottom". */
    .cpro-video-rail::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        translate: -50% 0;
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: #555;
        z-index: 3;
    }

    /* __inner scrolls; head and CTAs stick to its edges. Done this way rather than a flex
       column so no extra wrapper is needed around the facets. */
    .cpro-video-rail__inner {
        position: static;
        max-height: 85vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0 20px;
        border: 0;
        background: #121314;
    }

    .cpro-video-rail__head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #121314;
        padding: 24px 0 12px;
    }

    /* Redundant inside the sheet — the CTA bar carries Clear all where a thumb can reach it. */
    .cpro-video-rail__head .cpro-video-rail__clear {
        display: none;
    }

    .cpro-video-rail__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-inline-start: auto;
        width: 32px;
        height: 32px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        color: #fff;
        font-size: 24px;
        line-height: 1;
        opacity: .7;
    }

    .cpro-video-rail__ctas {
        display: flex;
        gap: 10px;
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: #121314;
        padding: 14px 0 18px;
        margin-block-start: 8px;
        border-top: 1px solid #333;
    }

    .cpro-video-rail__ctas .cpro-video-btn {
        flex: 1 1 0;
        width: auto;
        min-height: 48px;
        height: auto;
        gap: 6px;
    }
}

@media (max-width: 639px) {
    /* Two columns of checkboxes in an 85vh panel is a lot of scanning. */
    .cpro-video-facet__body {
        columns: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpro-video-rail,
    .cpro-video-sheet-backdrop {
        transition: none;
    }
}

/* Flat-results pagination. Hidden whenever the server says there is no next page, so an exhausted
   grid never shows a button that would return nothing. */
.cpro-video-results__more {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.cpro-video-results__more .cpro-video-btn[hidden] {
    display: none;
}

.cpro-video-results__more .cpro-video-btn[disabled] {
    opacity: .55;
    pointer-events: none;
}