/* Click-to-play YouTube embeds (docs/_includes/video_embed.html) and the list on the Videos page. */
.video-embed {
    margin: 1rem 0 1.5rem;
    max-width: 46rem;
}
.video-lite,
.video-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
}
.video-lite {
    position: relative;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: #0f172a;
}
.video-lite img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.15s;
}
.video-lite:hover img,
.video-lite:focus-visible img {
    filter: brightness(0.85);
}
.video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.78);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, transform 0.15s;
}
.video-play::after {
    content: "";
    position: absolute;
    left: 29px;
    top: 22px;
    border-style: solid;
    border-width: 14px 0 14px 22px;
    border-color: transparent transparent transparent #fff;
}
.video-lite:hover .video-play,
.video-lite:focus-visible .video-play {
    background: #7253ed;
    transform: scale(1.06);
}
.video-embed figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.video-meta {
    margin-left: 0.25rem;
    color: #5c6670;
}
.video-text {
    display: block;
    margin-top: 0.25rem;
    color: #444d56;
}
.video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px 24px;
    margin: 1rem 0 1.5rem;
}
.video-list .video-embed {
    margin: 0;
    max-width: none;
}