.hpep-player.hpep-player {
    --hpep-accent: #AD854D;
    align-items: stretch;
    background: #303030;
    border: 1px solid var(--hpep-accent);
    border-radius: 8px;
    box-sizing: border-box;
    color: #fff;
    display: grid !important;
    gap: 0;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    grid-template-rows: minmax(160px, auto);
    max-width: 100%;
    overflow: hidden;
    padding: 0 !important;
    width: 100%;
}

.hpep-player.hpep-player--no-artwork {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto;
}

/*
 * The Classic Editor can wrap a shortcode in <code> when its Code toolbar
 * button is active. Flatten that accidental wrapper so the artwork and content
 * still participate in the player's grid as separate columns.
 */
.hpep-player.hpep-player > code,
.hpep-player.hpep-player > pre {
    background: transparent !important;
    border: 0 !important;
    color: inherit !important;
    display: contents !important;
    font: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
}

.hpep-player__artwork {
    align-self: center;
    background: #050505;
    border-radius: 0 !important;
    display: block !important;
    grid-column: 1;
    grid-row: 1;
    height: 160px !important;
    margin: 0 !important;
    min-height: 0 !important;
    max-height: 160px !important;
    object-fit: cover;
    width: 160px !important;
}

.hpep-player__content {
    align-self: center;
    box-sizing: border-box;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 16px;
    width: 100%;
}

.hpep-player--no-artwork .hpep-player__content {
    grid-column: 1;
}

.hpep-player__heading {
    color: inherit;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 4px;
}

.hpep-player__meta {
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    margin: 0 0 12px;
}

.hpep-player__audio {
    accent-color: var(--hpep-accent);
    display: block;
    height: 42px;
    max-width: 100%;
    width: 100%;
}

.hpep-player-message {
    border-left: 4px solid var(--hpep-accent, #AD854D);
    padding-left: 12px;
}

/* Hide legacy PowerPress/Blubrry output only after a HubSpot player is added. */
body.hpep-has-player .powerpress_player,
body.hpep-has-player .powerpress_links,
body.hpep-has-player iframe[src*="player.blubrry.com"] {
    display: none !important;
}

@supports selector(body:has(.hpep-player)) {
    body.hpep-auto-hide-blubrry:has(.hpep-player) .powerpress_player,
    body.hpep-auto-hide-blubrry:has(.hpep-player) .powerpress_links,
    body.hpep-auto-hide-blubrry:has(.hpep-player) iframe[src*="player.blubrry.com"] {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .hpep-player.hpep-player {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        grid-template-rows: minmax(128px, auto);
    }

    .hpep-player__artwork {
        height: 96px !important;
        max-height: 96px !important;
        width: 96px !important;
    }

    .hpep-player__content {
        padding: 12px;
    }

    .hpep-player__heading {
        font-size: .95rem;
    }

    .hpep-player__meta {
        font-size: .8rem;
        margin-bottom: 8px;
    }
}