/*
 RL-E106-HOME-CARD-STANDARD-V1

 Energy 106 homepage only.
 Shared desktop + mobile card colours.

 Primary border: #523866
 Border width:   1px
 Corner radius:  5px
 Card background: #250638

 Preserves programme imagery, background art,
 buttons, listener functionality and on-air states.
*/

html body.vibe-site {

    --e106-home-card-border: var(--e106-border, #523866);
    --e106-home-card-bg: var(--e106-card, #250638);
    --e106-home-card-radius: 5px;
    --e106-home-card-accent: var(--e106-pink, #ed1584);

}

/*
 ==================================================
 1. ALL MAIN HOMEPAGE CARDS
 ==================================================
*/

html body.vibe-site .vibe-homepage
.vibe-home-recent-slot .vibe-sidebar-recent__track,

html body.vibe-site .vibe-homepage
.energy-home-tiles .energy-home-tiles__card,

html body.vibe-site .vibe-homepage
.vibe-today-schedule--energy
.vibe-today-schedule__item:not(.is-on-air),

html body.vibe-site .vibe-homepage
.vibe-today-schedule--energy
.vibe-today-schedule__promo,

html body.vibe-site .vibe-homepage
.vibe-news-blogs--energy-buzz .vibe-news-card,

html body.vibe-site .vibe-homepage
.vibe-events__grid > .vibe-event,

html body.vibe-site .vibe-homepage
.vibe-listen-again--compact .vibe-la-mini__card,

html body.vibe-site .vibe-homepage
.vibe-listen-again__card,

html body.vibe-site .vibe-homepage
.energy-home-chart__card,

html body.vibe-site .vibe-homepage
.energy-home-chart__aside,

html body.vibe-site .vibe-homepage
.vibe-energy-app-promo,

html body.vibe-site .vibe-energy-app-promo,

html body.vibe-site .vibe-homepage
.energy-meet-banner,

html body.vibe-site .energy-meet-banner,

html body.vibe-site
.e106-crew-ad-layout__art,

html body.vibe-site
.e106-crew-ad-layout .ecv3.ecv3--reference {

    border: 1px solid var(
        --e106-home-card-border
    ) !important;

    border-radius: var(
        --e106-home-card-radius
    ) !important;

    box-sizing: border-box !important;
}

/*
 ==================================================
 2. IDENTICAL CARD BACKGROUND ON DESKTOP + MOBILE
 ==================================================

 Only sets background-colour.

 Does not replace background images,
 gradients, presenter artwork or promo imagery.
*/

html body.vibe-site .vibe-homepage
.vibe-home-recent-slot .vibe-sidebar-recent__track,

html body.vibe-site .vibe-homepage
.vibe-today-schedule--energy
.vibe-today-schedule__item,

html body.vibe-site .vibe-homepage
.vibe-today-schedule--energy
.vibe-today-schedule__promo,

html body.vibe-site .vibe-homepage
.vibe-news-blogs--energy-buzz .vibe-news-card,

html body.vibe-site .vibe-homepage
.vibe-events__grid > .vibe-event,

html body.vibe-site .vibe-homepage
.vibe-listen-again--compact .vibe-la-mini__card,

html body.vibe-site .vibe-homepage
.vibe-listen-again__card,

html body.vibe-site .vibe-homepage
.energy-home-chart__card,

html body.vibe-site .vibe-homepage
.energy-home-chart__aside,

html body.vibe-site
.e106-crew-ad-layout .ecv3.ecv3--reference {

    background-color: var(
        --e106-home-card-bg
    ) !important;
}

/*
 ==================================================
 3. ON-AIR PROGRAMME
 ==================================================

 Same border thickness and corner radius.
 Keep the intentional pink highlight.
*/

html body.vibe-site .vibe-homepage
.vibe-today-schedule--energy
.vibe-today-schedule__item.is-on-air {

    border: 1px solid var(
        --e106-home-card-accent
    ) !important;

    border-radius: var(
        --e106-home-card-radius
    ) !important;
}

/*
 Programme hover retains its pink feedback.
*/

html body.vibe-site .vibe-homepage
.vibe-today-schedule--energy
.vibe-today-schedule__item:hover,

html body.vibe-site .vibe-homepage
.vibe-today-schedule--energy
.vibe-today-schedule__item:focus-visible {

    border-color: var(
        --e106-home-card-accent
    ) !important;
}

/*
 ==================================================
 4. THE ENERGY CONNECTION
 ==================================================

 Match the programme card border exactly.
 Header and feed separators use the same purple.
*/

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference {

    border: 1px solid var(
        --e106-home-card-border
    ) !important;

    border-radius: var(
        --e106-home-card-radius
    ) !important;

    box-shadow: none !important;
}

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__content,

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__panel,

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__promo {

    background-color: var(
        --e106-home-card-bg
    ) !important;
}

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__promo,

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__item,

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__tabs,

html body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3r6__footer {

    border-color: var(
        --e106-home-card-border
    ) !important;
}

/*
 ==================================================
 5. ADVERTISING ARTWORK
 ==================================================

 Match the border without changing the image.
*/

html body.vibe-site
.e106-crew-ad-layout
.e106-crew-ad-layout__art {

    border: 1px solid var(
        --e106-home-card-border
    ) !important;

    border-radius: var(
        --e106-home-card-radius
    ) !important;

    box-shadow: none !important;

    overflow: hidden;
}

/*
 ==================================================
 6. MOBILE / DESKTOP COLOUR PARITY
 ==================================================

 These rules apply at every viewport size.
 Mobile layout, column stacking and card sizes
 are still controlled by the existing mobile CSS.

 No different mobile border colours or radii.
*/

/*
 Extra specificity for the existing
 mobile Club Map override.
*/

html body.vibe-site .vibe-homepage
.energy-outout .vibe-events__grid > .vibe-event {

    border: 1px solid var(
        --e106-home-card-border
    ) !important;

    border-radius: var(
        --e106-home-card-radius
    ) !important;

    background-color: var(
        --e106-home-card-bg
    ) !important;
}

/*
 ==================================================
 7. INTENTIONAL EXCEPTIONS
 ==================================================

 Do not restyle:
 - buttons or their pink borders
 - On Air label
 - Control Chart rank badges
 - listener headphones
 - heading accent bars
 - artwork and image elements
 - decorative circular elements
 - active player controls
*/