/*
 * Video block (blocks/video.php): placeholder overlay, play button and image mode.
 *
 * Separate from assets/css/styles.css for the same reason as two-column-process.css:
 * that file can't be safely rebuilt. All values are theme variables from it.
 */

/* Wraps the video so the overlay covers exactly the video, at its existing size and position. */
.video-block__media {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.video-block__player {
    display: block;
}

.video-block__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: var(--color-black);
}

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

.video-block__overlay-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play button: the site's cyan button colour, white icon. */
.video-block__play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
    border-radius: 9999px;
    background: var(--color-cyan-500);
    color: var(--color-white);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.video-block__play svg {
    width: 45%;
    height: 45%;
    margin-left: 8%; /* optical centring of the triangle */
}

@media (width >= 40rem) {
    .video-block__play {
        width: calc(var(--spacing) * 20);
        height: calc(var(--spacing) * 20);
    }
}

.video-block__overlay:hover .video-block__play,
.video-block__overlay:focus-visible .video-block__play {
    background: var(--color-cyan-600);
    transform: scale(1.05);
}

.video-block__overlay:focus-visible {
    outline: 2px solid var(--color-cyan-500);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .video-block__play {
        transition: none;
    }
}

/* Image mode: a static image in the video's place. */
.video-block__image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}