/* ============================================================
   Play button over a podcast post's feature image.
   uh-post-media.js adds the button and puts the player here.
   ============================================================ */

/* Not relying on .hover-image-opacity, which also positions this today. */
.post-main-image-wrapper {
    position: relative;
}

/* That class also lays an invisible hover tint over the image, which paints
   above the button and would eat the click. */
.post-main-image-wrapper::after {
    pointer-events: none;
}

.uh-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 2;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.uh-play:hover,
.uh-play:focus-visible {
    opacity: 1;
}

.uh-play-icon {
    display: block;
    width: clamp(56px, 6vw, 88px);
    height: clamp(56px, 6vw, 88px);
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    position: relative;
}

/* Nudged right of centre so it reads as centred. */
.uh-play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: clamp(9px, 1vw, 14px) 0 clamp(9px, 1vw, 14px) clamp(15px, 1.7vw, 24px);
    border-color: transparent transparent transparent #ffffff;
}

.uh-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.uh-audio {
    display: block;
    width: 100%;
    margin-top: 12px;
}