.site-video-modal__content {
    position: relative;
    overflow: hidden;
    background: #000000;
    border: 0;
    border-radius: var(--site-radius-large);
    box-shadow: var(--site-shadow-large);
}

.site-video-modal__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
}

.site-video-modal__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 2;
    padding: .65rem;
    background-color: rgba(0, 0, 0, .65);
    border-radius: 50%;
}

.site-video-modal__close:hover,
.site-video-modal__close:focus-visible {
    background-color: rgba(0, 0, 0, .9);
}

.video-thumbnail {
    position: relative;
}

.video-thumbnail__image {
    display: block;
    width: 100%;
}

.video-thumbnail__placeholder {
    display: grid;
    min-height: 280px;
    color: var(--site-color-text-muted);
    background: var(--site-color-surface);
    border-radius: var(--site-radius-large);
    font-size: 1rem;
    gap: .75rem;
    place-content: center;
    text-align: center;
}

.video-thumbnail__placeholder i {
    color: var(--site-color-primary);
    font-size: 2rem;
}

.video-thumbnail__trigger {
    position: absolute;
    inset: 0;
    display: block;
}

.video-play-control {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 70px;
    height: 70px;
    /* The same chain .btn-primary uses in bootstrap-theme.css, because this is the same kind of
       thing: a filled primary control, not text sitting on a primary surface.

       --site-color-primary-contrast is the colour a theme certifies as legible ON the primary
       colour, and for a mid-tone brand that is usually something dark. --site-color-primary-button-text
       is the override a theme sets when its brand puts white on filled controls regardless. This
       control was reading the first and every button beside it the second, so on BioHorizons the
       play triangle came out near-black on orange while every button on the page was white - the
       inconsistency the October review picked up.

       A theme that sets no button-text token is unaffected: the fallback is the old value. */
    color: var(--site-color-primary-button-text, var(--site-color-primary-contrast));
    background: var(--site-color-primary);
    border-radius: 50%;
    place-items: center;
    transform: translate(-50%, -50%);
    transition: background-color .2s ease, transform .2s ease;
}

.video-thumbnail__trigger:hover .video-play-control,
.video-thumbnail__trigger:focus-visible .video-play-control {
    background: var(--site-color-primary-hover);
    transform: translate(-50%, -50%) scale(1.08);
}

/* Video CMS object: a standalone full-width band pairing a title, a video-thumbnail trigger, and supporting text. */
.video {
    padding-block: 3rem;
    background: var(--site-color-surface);
}

.video__inner {
    max-width: var(--site-content-width-narrow);
    text-align: center;
}

.video__title {
    margin-bottom: 1.5rem;
    color: var(--site-color-primary);
    font-weight: 300;
}

.video__media {
    overflow: hidden;
    box-shadow: var(--site-shadow-large);
    border-radius: var(--site-radius-large);
}

.video__media .video-thumbnail__image {
    max-height: 506px;
    object-fit: cover;
}

.video__text {
    margin-top: 1rem;
    color: var(--site-color-text-muted);
    font-size: 1.125rem;
}

.cms-video-preview { width: min(100%, var(--site-content-width)); }
.cms-existing-videos { width: min(100%, var(--site-content-width)); }