/* SAGE_RADIO_SPOTLIGHT_V1 */

.feature-panel[data-panel-id="radio"].sage-radio-daily {
    position: relative !important;

    overflow: hidden !important;

    background: #050609 !important;
}

.sage-radio-daily-shell {
    position: absolute;

    inset: 0;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            #11151b,
            #030405
        );

    color: #f4f6f8;
}

.sage-radio-daily-background {
    position: absolute;

    z-index: 0;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.25;

    filter:
        grayscale(0.55)
        contrast(1.15)
        brightness(0.62);

    transform: scale(1.02);

    transition:
        transform 700ms ease,
        opacity 500ms ease,
        filter 500ms ease;
}

.sage-radio-daily-veil {
    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        radial-gradient(
            circle at 76% 22%,
            rgba(137, 151, 168, 0.16),
            transparent 43%
        ),
        linear-gradient(
            90deg,
            rgba(2, 4, 7, 0.97),
            rgba(4, 7, 11, 0.82) 63%,
            rgba(2, 4, 7, 0.94)
        );
}

.sage-radio-daily-content {
    position: relative;

    z-index: 3;

    height: 100%;

    box-sizing: border-box;

    display: grid;

    grid-template-rows:
        auto
        auto
        auto
        auto
        1fr
        auto
        auto;

    align-content: stretch;

    gap: 3px;

    padding:
        8px
        10px
        7px;
}

.sage-radio-daily-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;
}

.sage-radio-on-air {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.16em;

    color: #f4f6f8;
}

.sage-radio-on-air i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #e8edf3;

    box-shadow:
        0 0 8px
        rgba(232, 237, 243, 0.9);

    animation:
        sage-radio-pulse
        1.3s
        ease-in-out
        infinite;
}

.sage-radio-date {
    color: #aeb7c3;

    font-size: 7px;

    letter-spacing: 0.05em;
}

.sage-radio-daily-label {
    color: #aeb7c3;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 0.18em;
}

.sage-radio-daily-title {
    margin: 0 !important;

    max-width: 100%;

    color: #ffffff !important;

    font:
        400
        clamp(
            15px,
            1.32vw,
            21px
        )
        / 1.05
        Georgia,
        serif !important;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    text-shadow:
        0 1px 8px
        rgba(0, 0, 0, 0.9);
}

.sage-radio-daily-meta {
    margin: 0 !important;

    color: #ccd2da;

    font-size: 8px;
    line-height: 1.1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.sage-radio-eq {
    min-height: 32px;

    display: flex;

    align-items: end;

    gap: 2px;

    padding:
        1px
        0
        2px;
}

.sage-radio-eq span {
    flex: 1 1 0;

    min-width: 2px;

    height:
        var(
            --radio-height,
            55%
        );

    border-radius:
        2px
        2px
        0
        0;

    transform-origin: bottom;

    background:
        linear-gradient(
            to top,
            #646e7c,
            #d7dde5 62%,
            #ffffff
        );

    box-shadow:
        0 0 5px
        rgba(216, 225, 236, 0.22);

    animation:
        sage-radio-eq
        var(
            --radio-speed,
            0.9s
        )
        ease-in-out
        var(
            --radio-delay,
            0s
        )
        infinite
        alternate;
}

.sage-radio-play-status {
    align-self: end;

    margin: 0 !important;

    color: #919ba8;

    font-size: 7px;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.sage-radio-daily-controls {
    display: grid;

    grid-template-columns:
        1fr
        0.92fr
        1.25fr;

    gap: 5px;
}

.sage-radio-daily-controls button,
.sage-radio-daily-controls a {
    min-width: 0;

    min-height: 24px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        4px
        6px;

    border:
        1px solid
        #7f8997;

    border-radius: 999px;

    background:
        linear-gradient(
            145deg,
            #303640,
            #090b0e
        );

    color: #f4f6f8;

    font:
        700
        7px
        / 1
        Arial,
        sans-serif;

    letter-spacing:
        0.045em;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;
}

.sage-radio-daily-controls button:hover,
.sage-radio-daily-controls button:focus-visible,
.sage-radio-daily-controls a:hover,
.sage-radio-daily-controls a:focus-visible {
    border-color: #f5f7fa;

    background:
        linear-gradient(
            145deg,
            #626c7b,
            #171b21
        );

    outline: none;
}

.sage-radio-daily-controls button:disabled {
    opacity: 0.52;

    cursor: default;
}

.sage-radio-source {
    display: block;

    color: #6f7885;

    font-size: 6px;

    line-height: 1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.feature-panel[data-panel-id="radio"].sage-radio-daily:hover
.sage-radio-daily-background,
.feature-panel[data-panel-id="radio"].sage-radio-daily:focus-within
.sage-radio-daily-background {
    opacity: 0.34;

    filter:
        grayscale(0.32)
        contrast(1.18)
        brightness(0.72);

    transform: scale(1.055);
}

.feature-panel[data-panel-id="radio"].sage-radio-daily:hover
.sage-radio-eq span,
.feature-panel[data-panel-id="radio"].sage-radio-is-playing
.sage-radio-eq span {
    animation-duration:
        calc(
            var(
                --radio-speed,
                0.9s
            )
            * 0.62
        );

    box-shadow:
        0 0 8px
        rgba(230, 237, 245, 0.52);
}

.feature-panel[data-panel-id="radio"].sage-radio-is-playing
.sage-radio-on-air i {
    box-shadow:
        0 0 5px #ffffff,
        0 0 14px rgba(255,255,255,0.95);
}

/* ABOUT RADIO */

.sage-radio-about-overlay {
    position: fixed;

    z-index: 15030;

    inset: 0;

    display: grid;

    place-items: center;

    padding:
        clamp(
            1rem,
            3vw,
            2.5rem
        );

    background:
        rgba(1, 2, 4, 0.9);

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);
}

.sage-radio-about-overlay[hidden] {
    display: none !important;
}

.sage-radio-about-panel {
    position: relative;

    box-sizing: border-box;

    width:
        min(
            760px,
            100%
        );

    max-height:
        calc(
            100vh - 2rem
        );

    overflow: auto;

    padding:
        clamp(
            1.5rem,
            4vw,
            3rem
        );

    border:
        1px solid
        #8e99a8;

    background:
        radial-gradient(
            circle at top right,
            rgba(160, 173, 190, 0.15),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #15191f,
            #050609
        );

    box-shadow:
        0 28px 90px
        rgba(0, 0, 0, 0.78);

    color: #dfe4eb;
}

.sage-radio-about-close {
    position: absolute;

    top: 0.8rem;
    right: 0.85rem;

    width: 2.5rem;
    height: 2.5rem;

    border:
        1px solid
        #808b99;

    border-radius: 50%;

    background: #090b0e;

    color: #ffffff;

    font-size: 1.35rem;

    cursor: pointer;
}

.sage-radio-about-kicker {
    margin:
        0
        0
        0.55rem;

    color: #aeb7c3;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}

.sage-radio-about-panel h2 {
    margin:
        0
        3rem
        1.2rem
        0;

    color: #ffffff;

    font:
        400
        clamp(
            2rem,
            5vw,
            3.5rem
        )
        / 1.02
        Georgia,
        serif;
}

.sage-radio-about-panel p {
    margin:
        0
        0
        1rem;

    line-height: 1.7;
}

.sage-radio-about-actions {
    display: flex;

    gap: 0.7rem;

    flex-wrap: wrap;

    margin-top: 1.4rem;
}

.sage-radio-about-actions a {
    padding:
        0.75rem
        1rem;

    border:
        1px solid
        #8e99a8;

    border-radius: 999px;

    color: #ffffff;

    text-decoration: none;

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.sage-radio-about-actions a:hover,
.sage-radio-about-actions a:focus-visible {
    background: #dde3ea;

    color: #08090b;

    outline: none;
}

body.sage-radio-about-open {
    overflow: hidden;
}

@keyframes sage-radio-eq {
    from {
        transform:
            scaleY(0.28);

        opacity: 0.58;
    }

    to {
        transform:
            scaleY(1);

        opacity: 1;
    }
}

@keyframes sage-radio-pulse {
    0%,
    100% {
        opacity: 0.42;
    }

    50% {
        opacity: 1;
    }
}

@media (max-width: 760px) {
    .sage-radio-daily-content {
        padding:
            10px
            11px
            8px;
    }

    .sage-radio-daily-title {
        font-size:
            20px !important;
    }

    .sage-radio-eq {
        min-height: 42px;
    }

    .sage-radio-daily-controls
    button,
    .sage-radio-daily-controls
    a {
        min-height: 30px;

        font-size: 7.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sage-radio-eq span,
    .sage-radio-on-air i {
        animation: none !important;
    }

    .sage-radio-eq span {
        transform: scaleY(0.72);
    }

    .sage-radio-daily-background {
        transition: none !important;
    }
}