/* CSS for Radio Ads Block - WOARADIO */ 
:root {
    --woa-breakpoint-md: var(--breakpoint-md, 800px);
    --woa-spacing-sm: var(--spacing-sm, 1rem);
    --woa-spacing-md: var(--spacing-md, 1.5rem);
    --woa-font-size-md: var(--font-size-md, 1.25rem);
}
.woaradio-outer.grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--spacing-md);
    row-gap: var(--spacing-lg);
}
.woaradio-outer.grid .woaradio-inner {
    flex-basis: 100%;
    max-width: 100%;
    padding: var(--spacing-xs);
}
@media only screen and (min-width: 800px) {
    .woaradio-outer.grid .woaradio-inner {
        flex-basis: 40%;
        max-width: 40%;
    }
}
@media only screen and (min-width: 1000px) {
    .woaradio-outer.grid .woaradio-inner {
        flex-basis: 30%;
        max-width: 30%;
    }
}
.woaradio-outer.list .woaradio-inner {
    padding: var(--woa-spacing-sm);
}
.woaradio-outer.row {
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-lg);
}
.woaradio-header:not(.woaradio-single-header) {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xxs);
}
.woaradio-header h3 {
    margin: 0;
    font-size: var(--woa-font-size-md);
}
.woaradio-header:not(.woaradio-single-header) p:before {
    content: '|';
    padding-right: var(--spacing-sm);
}
.woaradio-header p {
    white-space: nowrap;
}
.woaradio-single-header p.woaradio-date {
    margin-bottom: var(--spacing-sm);
}
.woaradio-single-content .woaradio-inner {
    max-width: var(--woa-breakpoint-md); 
    margin: auto;
    padding: var(--woa-spacing-md);
}
.woaradio-single-content .woaradio-body {
    margin: var(--spacing-md) 0;
}
.woaradio-body .mejs-controls a.mejs-horizontal-volume-slider {
    display: none !important;
}
.woaradio-body .mejs-container {
    border-radius: 2rem;
}
.woaradio-body .mejs-container .mejs-controls, .woaradio-body .mejs-embed, .woaradio-body .mejs-embed body {
    background: none;
}
.woaradio-body .mejs-controls button {
    border-radius: 50%;
}
.woaradio-body .mejs-controls button:hover {
    background: var(--color-primary) url('/wp-includes/js/mediaelement/mejs-controls.svg') !important;
}
.woaradio-single-content .woaradio-footer .nav-links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}