/*
 * RADIOLAUNCH ENERGY 106 PLAYER HERO V1
 *
 * Uses the existing homepage Belfast image.
 * Visual styling only. No playback JS changes.
 */

/* Belfast background across the full hero */

.rlv3-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(14, 0, 26, .57) 0%,
            rgba(14, 0, 26, .13) 42%,
            rgba(14, 0, 26, .16) 63%,
            rgba(14, 0, 26, .48) 100%
        ),
        url("/storage/stations/1/media-library/wdbOE12MMpkBsxbhHsuiFLgz95FiDYbHpk7HBDu9.png") !important;

    background-color: #20052f;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-bottom: 2px solid #f0078b;
}

/* Desktop hero composition */

@media (min-width: 1121px) {

    .rlv3-hero__grid {
        display: grid;
        grid-template-columns:
            minmax(0, 1.62fr)
            minmax(365px, .88fr);
        column-gap: 22px;
        align-items: center;
        min-height: 350px;
    }

    .rlv3-onair {
        min-height: 350px;
        height: 100%;
        padding:
            36px
            min(26vw, 420px)
            32px
            0;
    }

    /* Keep presenter clearly visible in the centre */

    .rlv3-presenter-image {
        right: 0;
        bottom: 0;
        width: min(29vw, 420px);
        height: 100%;
        max-height: 350px;
        object-fit: contain;
        object-position: center bottom;
    }

    /* Make the show title the hero's focal point */

    .rlv3-onair h1 {
        max-width: 620px;
        margin-top: 12px;
        font-size: clamp(42px, 4.3vw, 70px);
        line-height: .94;
        font-weight: 950;
        letter-spacing: -.04em;
        color: #fff;
        text-shadow: 0 3px 16px rgba(0,0,0,.26);
    }

    .rlv3-presenter-name {
        color: #fff;
        font-size: clamp(23px, 2vw, 31px);
        font-weight: 850;
        line-height: 1.14;
        margin-top: 7px;
    }

    .rlv3-show-time {
        color: #fff;
        font-size: 18px;
        font-weight: 800;
        margin-top: 10px;
    }

    /* Yellow on-air badge */

    .rlv3-onair .rlv3-eyebrow:not([hidden]) {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        width: fit-content;
        padding: 6px 12px;
        border: 0;
        border-radius: 5px;
        background: #ffdb00;
        color: #17001e;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 950;
        text-transform: uppercase;
        box-shadow: 0 2px 8px rgba(0,0,0,.16);
    }

    .rlv3-onair .rlv3-eyebrow > span {
        display: none;
    }

    /* Remove the old large purple radial glow */

    .rlv3-onair::before {
        background:
            linear-gradient(
                90deg,
                rgba(18, 0, 31, .35),
                rgba(18, 0, 31, 0) 85%
            ) !important;
    }

    /* Floating Now Playing card */

    .rlv3-now {
        position: relative;
        z-index: 2;
        align-self: center;
        min-width: 0;
        max-width: none;
        margin: 16px 0;
        padding: 19px 21px !important;

        border:
            1px solid
            rgba(231, 194, 243, .40) !important;

        border-radius: 11px;

        background:
            rgba(24, 3, 38, .90) !important;

        box-shadow:
            0 12px 35px
            rgba(7, 0, 17, .32);

        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
    }

    .rlv3-now__eyebrow {
        margin-bottom: 13px;
        color: #fff;
        font-size: 13px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .rlv3-now__body {
        display: grid;
        grid-template-columns:
            134px minmax(0, 1fr);
        align-items: center;
        gap: 17px;
    }

    .rlv3-now__art {
        width: 134px;
        height: 134px;
        max-width: 100%;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 6px;
    }

    .rlv3-now__art img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .rlv3-now__copy {
        min-width: 0;
    }

    .rlv3-now__copy > strong {
        font-size: 18px;
        line-height: 1.2;
        color: #fff;
    }

    .rlv3-votes {
        margin-top: 15px;
        gap: 11px;
    }
}

/* Preserve the current responsive player structure.
   The Belfast artwork carries through to mobile,
   without changing existing mobile controls. */

@media (max-width: 1120px) {
    .rlv3-hero {
        background-position: center center !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rlv3-now,
    .rlv3-onair,
    .rlv3-presenter-image {
        transition: none;
    }
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/Inter-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter/Inter-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('/fonts/rubik/Rubik-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('/fonts/rubik/Rubik-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('/fonts/rubik/Rubik-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/outfit/outfit-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/outfit/outfit-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('/fonts/outfit/outfit-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/*
 * ENERGY 106 PLAYER HOMEPAGE FONTS V1
 *
 * Match Vibe's heading, subheading and body roles.
 * All source font files come from the existing theme.
 */

/* General player body */
body.rlv3 {
    font-family: "Inter", sans-serif;
}

/* Homepage-style headings */
.rlv3 h1,
.rlv3 h2,
.rlv3 h3,
.rlv3 .rlv3-eyebrow,
.rlv3 .rlv3-now__eyebrow,
.rlv3 .rlv3-now__copy > strong {
    font-family: "Rubik", sans-serif;
}

/* On Air show title */
.rlv3 .rlv3-onair h1 {
    font-family: "Rubik", sans-serif;
    font-weight: 900;
    letter-spacing: -.045em;
}

/* Presenter name and programme time */
.rlv3 .rlv3-presenter-name,
.rlv3 .rlv3-show-time {
    font-family: "Outfit", sans-serif;
}

/* Now Playing artist and supporting text */
.rlv3 .rlv3-now__copy > span,
.rlv3 .rlv3-show-copy {
    font-family: "Inter", sans-serif;
}

/* Preserve the existing font sizes and responsive layout. */


/*
 * ENERGY 106 PLAYER CONTENT WIDTH V1
 *
 * Match the Vibe website's 1280px desktop shell.
 * Background sections remain full viewport width.
 * Tablet and mobile widths remain unchanged.
 */

@media (min-width: 1121px) {

    body.rlv3 .rlv3-frame,
    body.rlv3 .rlv3-player-bar__inner {
        width: min(
            calc(100% - 32px),
            1280px
        ) !important;

        max-width: 1280px !important;
        box-sizing: border-box;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/*
 * ENERGY 106 PLAYER HERO TYPE CORRECTION V2
 *
 * Correct the oversized heading introduced by V1.
 * Keep the existing homepage font families.
 */

@media (min-width: 1121px) {

    body.rlv3 .rlv3-onair h1[data-show-name] {
        font-size: clamp(40px, 2.7vw, 54px) !important;
        line-height: .98 !important;
        letter-spacing: -.04em !important;
        max-width: none !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        margin-bottom: 5px !important;
    }

    body.rlv3 .rlv3-onair .rlv3-presenter-name {
        font-size: 26px !important;
        line-height: 1.1 !important;
        margin-top: 5px !important;
    }

    body.rlv3 .rlv3-onair .rlv3-show-time {
        font-size: 17px !important;
        line-height: 1.2 !important;
        margin-top: 8px !important;
    }

    body.rlv3 .rlv3-onair .rlv3-eyebrow {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
}

body.rlv3 header.rlv3-header {
    background: #21082e !important;
    background-color: #21082e !important;
    background-image: none !important;
    border-bottom: 0 !important;
}


/* ENERGY-PLAYER-ONAIR-HOME-V4 */
/* ENERGY-PLAYER-NOW-HOME-V6 */

body.rlv3 .energy-player-home-contact { display: none; }

/* ENERGY-PLAYER-CONTACT-STUDIO-V7 */
@media screen and (max-width: 700px) {



    body.rlv3 header.rlv3-header {
        min-height: 65px !important;
        background: #1e092c !important;
    }

    body.rlv3 .rlv3-header__inner {
        min-height: 65px !important;
        gap: 10px !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    body.rlv3 .rlv3-logo {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    body.rlv3 .rlv3-logo img {
        display: block !important;
        width: min(53vw, 215px) !important;
        max-width: 100% !important;
        max-height: 54px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    body.rlv3 .rlv3-header-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        gap: 8px !important;
        align-items: center !important;
    }


    body.rlv3 .rlv3-hero {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 0 13px !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    body.rlv3 .rlv3-hero__grid {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: calc(100% - 28px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair {
        position: relative !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        z-index: 3 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-self: stretch !important;
        min-width: 0 !important;
        min-height: 255px !important;
        padding: 15px 10px 18px !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
        align-items: flex-start !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        isolation: isolate !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair > :not(.rlv3-presenter-image) {
        position: relative !important;
        z-index: 2 !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair .rlv3-eyebrow:not([hidden]) {
        display: inline-flex !important;
        align-items: center !important;
        align-self: flex-start !important;
        width: fit-content !important;
        margin: 0 0 10px !important;
        padding: 6px 10px !important;
        border-radius: 4px !important;
        background: #ffe100 !important;
        color: #1a0626 !important;
        font-size: 11px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        max-width: 65% !important;
        min-height: 0 !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair .rlv3-eyebrow > span {
        display: none !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair h1[data-show-name] {
        width: 100% !important;
        max-width: 62% !important;
        margin: 0 !important;
        color: #ffffff !important;
        font-size: clamp(26px, 7.5vw, 36px) !important;
        font-weight: 900 !important;
        line-height: .98 !important;
        letter-spacing: -.025em !important;
        text-wrap: balance !important;
        text-shadow: 0 2px 9px rgba(15, 3, 24, .65) !important;
        display: block !important;
        height: auto !important;
        padding: 0 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair .rlv3-presenter-name {
        max-width: 62% !important;
        margin: 7px 0 0 !important;
        color: #ffffff !important;
        font-size: clamp(15px, 4.2vw, 18px) !important;
        font-weight: 800 !important;
        line-height: 1.12 !important;
        text-transform: none !important;
        text-shadow: 0 2px 7px rgba(15, 3, 24, .65) !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair .rlv3-show-time {
        margin-top: 9px !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 750 !important;
        text-shadow: 0 2px 7px rgba(15, 3, 24, .65) !important;
        max-width: 62% !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair .rlv3-show-copy {
        display: none !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair .rlv3-show-sponsor {
        display: none !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair .rlv3-contact-actions {
        display: none !important;
    }

    body.rlv3 .rlv3-hero .rlv3-onair .rlv3-presenter-image {
        position: absolute !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 1 !important;
        display: block !important;
        width: 58% !important;
        height: 245px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: right bottom !important;
        transform: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
    }



    /* CONTACT STUDIO — COMPACT HOME-STYLE CARD */

    body.rlv3 .rlv3-hero .rlv3-now {
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 13px 13px 69px !important;
        background: #21092f !important;
        background-image: none !important;
        border: 1px solid #774586 !important;
        border-radius: 7px !important;
        box-shadow: none !important;
        transform: none !important;
        overflow: hidden !important;
    }

    body.rlv3 .rlv3-hero .rlv3-now__eyebrow {
        display: block !important;
        margin: 0 0 12px !important;
        color: #ed1584 !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
    }

    body.rlv3 .rlv3-hero .rlv3-now__body {
        position: static !important;
        display: grid !important;
        grid-template-columns:
            76px minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.rlv3 .rlv3-hero .rlv3-now__art {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        min-height: 76px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #774586 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
    }

    body.rlv3 .rlv3-hero .rlv3-now__art img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    body.rlv3 .rlv3-hero .rlv3-now__copy {
        position: static !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.rlv3 .rlv3-hero .rlv3-now__copy > strong {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.17 !important;
        color: #fff !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body.rlv3 .rlv3-hero .rlv3-now__copy > span {
        display: block !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        color: #cbb2d9 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    /* New CTA uses the existing requests popup */

    body.rlv3 .rlv3-hero .energy-player-home-contact {
        position: absolute !important;
        left: 13px !important;
        bottom: 13px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: calc(100% - 139px) !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        background: #ed1584 !important;
        border: 0 !important;
        border-radius: 5px !important;
        color: #fff !important;
        font-size: clamp(10px, 3vw, 13px) !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: normal !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    body.rlv3 .rlv3-hero
    .energy-player-home-contact svg {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
    }

    body.rlv3 .rlv3-hero
    .energy-player-home-contact:hover {
        background: #d90b78 !important;
    }

    body.rlv3 .rlv3-hero
    .energy-player-home-contact:focus-visible {
        outline: 2px solid #ecdd0e !important;
        outline-offset: 2px !important;
    }

    /* Live votes remain alongside the CTA */

    body.rlv3 .rlv3-hero .rlv3-now .rlv3-votes {
        position: absolute !important;
        top: auto !important;
        right: 10px !important;
        bottom: 13px !important;
        left: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        width: 105px !important;
        max-width: 105px !important;
        height: 43px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    body.rlv3 .rlv3-hero
    .rlv3-now .rlv3-vote-button {
        position: relative !important;
        display: inline-flex !important;
        flex: 0 0 49px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: row !important;
        gap: 3px !important;
        width: 49px !important;
        min-width: 49px !important;
        height: 43px !important;
        min-height: 43px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        color: #fff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.rlv3 .rlv3-hero
    .rlv3-now .rlv3-vote-button svg {
        display: block !important;
        width: 19px !important;
        height: 19px !important;
        flex: 0 0 19px !important;
    }

    body.rlv3 .rlv3-hero
    .rlv3-now .rlv3-votes > * {
        flex-shrink: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body.rlv3 .rlv3-hero .rlv3-now
    .rlv3-vote-button .energy-vote-counts-num {
        position: static !important;
        display: inline-block !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 1ch !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #ed1584 !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        pointer-events: none !important;
    }

}