/* Play button from /video-play.js: centered on the photo, clear of the caption at the bottom of the poster. */
.video-play-host {
    position: relative;
}
.video-play-button {
    background: rgba(255, 253, 248, 0.94);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55);
    cursor: pointer;
    height: 68px;
    left: 50%;
    padding: 0;
    position: absolute;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 68px;
}
.video-play-button[hidden] { display: none; }
.video-play-button::before {
    border-block: 13px solid transparent;
    border-left: 21px solid #765ab6;
    content: "";
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-38%, -50%);
}
.video-play-button:focus-visible {
    outline: 3px solid #ffd76a;
    outline-offset: 3px;
}
.video-play-button--labelled {
    align-items: center;
    background: #fffdf8;
    border-radius: 20px;
    color: #302540;
    display: flex;
    font: 600 16px/1.4 var(--font, sans-serif);
    gap: 14px;
    height: auto;
    max-width: 280px;
    padding: 18px 20px;
    text-align: left;
    text-wrap: pretty;
    top: 65%;
    width: calc(100% - 44px);
}
.video-play-button--labelled::before {
    border-block-width: 10px;
    border-left-width: 16px;
    flex: 0 0 auto;
    position: static;
    transform: none;
}
.video-play-button--labelled:hover {
    background: #f1e9ff;
}