/* ==========================================================
   320 FM · WEEKEND SESSIONS
   ========================================================== */


/* HERO ATMOSPHERE */

.fm-home-ref.is-weekend
.fm-home-ref-hero{
    position:relative;
}

.fm-home-ref.is-weekend
.fm-home-ref-hero:after{
    content:"WEEKEND";

    position:absolute;

    right:3%;
    top:13%;

    z-index:1;

    color:
        rgba(255,255,255,.025);

    font-size:
        clamp(72px,12vw,185px);

    font-weight:1000;
    line-height:.8;

    letter-spacing:-.075em;

    pointer-events:none;
}

.fm-home-ref.is-weekend
.fm-home-ref-hero__blend{
    background:
        linear-gradient(
            90deg,
            rgba(4,7,10,.96) 0%,
            rgba(4,7,10,.74) 37%,
            rgba(4,7,10,.25) 68%,
            rgba(4,7,10,.82) 100%
        ),
        radial-gradient(
            circle at 78% 42%,
            rgba(213,45,148,.12),
            transparent 40%
        );
}


/* WEEKEND STAGE */

.fm-weekend{
    position:relative;

    padding:
        56px 0 62px;

    overflow:hidden;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    background:
        radial-gradient(
            circle at 7% 30%,
            rgba(213,45,148,.095),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(42,175,225,.07),
            transparent 32%
        ),
        #080d11;
}

.fm-weekend:before{
    content:"PURE ELECTRONIC MUSIC";

    position:absolute;

    left:-20px;
    bottom:-19px;

    color:
        rgba(255,255,255,.018);

    font-size:
        clamp(48px,9vw,130px);

    font-weight:1000;

    letter-spacing:-.06em;

    white-space:nowrap;

    pointer-events:none;
}


.fm-weekend__head{
    position:relative;
    z-index:1;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:34px;

    margin-bottom:26px;
}

.fm-weekend__head > div:first-child{
    max-width:730px;
}

.fm-weekend__head span{
    display:block;

    margin-bottom:8px;

    color:#d52d94;

    font-size:9px;
    font-weight:950;

    letter-spacing:.16em;
}

.fm-weekend__head h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            34px,
            5vw,
            64px
        );

    line-height:.88;

    letter-spacing:-.06em;
}

.fm-weekend__head p{
    max-width:620px;

    margin:
        16px 0 0;

    color:#7c8993;

    font-size:11px;
    line-height:1.65;
}


.fm-weekend__stamp{
    flex:0 0 auto;

    display:flex;
    align-items:flex-end;

    gap:8px;

    color:
        rgba(255,255,255,.12);
}

.fm-weekend__stamp strong{
    font-size:55px;
    line-height:.8;

    letter-spacing:-.07em;
}

.fm-weekend__stamp span{
    margin:0;

    color:
        rgba(255,255,255,.2);

    font-size:8px;

    letter-spacing:.18em;
}


/* THREE EDITORIAL PANELS */

.fm-weekend__grid{
    position:relative;
    z-index:1;

    display:grid;

    grid-template-columns:
        1.35fr
        .92fr
        .92fr;

    min-height:390px;

    gap:1px;

    background:
        rgba(255,255,255,.075);
}

.fm-weekend-card{
    position:relative;

    min-width:0;
    min-height:390px;

    overflow:hidden;

    color:#fff;

    text-decoration:none;

    background:#0b1115;
}

.fm-weekend-card__art,
.fm-weekend-card__shade{
    position:absolute;
    inset:0;
}

.fm-weekend-card__art{
    background-position:center;
    background-size:cover;

    transform:scale(1.025);

    filter:
        saturate(.72)
        contrast(1.04);

    transition:
        transform .55s ease,
        filter .45s ease;
}

.fm-weekend-card:hover
.fm-weekend-card__art{
    transform:scale(1.065);

    filter:
        saturate(1)
        contrast(1.04);
}

.fm-weekend-card__shade{
    background:
        linear-gradient(
            180deg,
            rgba(3,6,9,.14),
            rgba(3,6,9,.22) 38%,
            rgba(3,6,9,.93) 100%
        );
}

.fm-weekend-card--1
.fm-weekend-card__shade{
    background:
        linear-gradient(
            180deg,
            rgba(3,6,9,.08),
            rgba(3,6,9,.15) 35%,
            rgba(3,6,9,.95) 100%
        ),
        linear-gradient(
            90deg,
            rgba(213,45,148,.08),
            transparent 50%
        );
}


.fm-weekend-card__top{
    position:absolute;

    left:21px;
    right:21px;
    top:19px;

    z-index:2;

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

    gap:14px;
}

.fm-weekend-card__top span{
    color:#fff;

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

    letter-spacing:.12em;
}

.fm-weekend-card.is-live
.fm-weekend-card__top span{
    color:#d52d94;
}

.fm-weekend-card__top time{
    color:
        rgba(255,255,255,.68);

    font-size:8px;

    letter-spacing:.09em;
}


.fm-weekend-card__copy{
    position:absolute;

    left:22px;
    right:22px;
    bottom:22px;

    z-index:2;
}

.fm-weekend-card__copy small{
    display:block;

    margin-bottom:7px;

    color:#2aafe1;

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

    letter-spacing:.13em;
}

.fm-weekend-card__copy h3{
    margin:0;

    color:#fff;

    font-size:
        clamp(
            22px,
            2.5vw,
            39px
        );

    line-height:.92;

    letter-spacing:-.045em;

    text-transform:uppercase;
}

.fm-weekend-card--2
.fm-weekend-card__copy h3,
.fm-weekend-card--3
.fm-weekend-card__copy h3{
    font-size:
        clamp(
            19px,
            2vw,
            28px
        );
}

.fm-weekend-card__copy p{
    margin:
        10px 0 16px;

    color:
        rgba(255,255,255,.62);

    font-size:9px;

    letter-spacing:.08em;
}

.fm-weekend-card__copy > strong{
    display:inline-flex;
    align-items:center;

    gap:8px;

    color:#fff;

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

    letter-spacing:.1em;
}

.fm-weekend-card__copy > strong b{
    color:#d52d94;
}


/* FALLBACK */

.fm-weekend__empty{
    position:relative;
    z-index:1;

    padding:38px;

    border:
        1px solid
        rgba(255,255,255,.07);

    background:
        rgba(255,255,255,.012);
}

.fm-weekend__empty span{
    color:#d52d94;

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

    letter-spacing:.14em;
}

.fm-weekend__empty strong{
    display:block;

    margin-top:7px;

    color:#fff;

    font-size:18px;
}


/* RESPONSIVE */

@media(max-width:900px){

    .fm-weekend__grid{
        grid-template-columns:1fr 1fr;
    }

    .fm-weekend-card--1{
        grid-column:1 / -1;
    }

    .fm-weekend-card{
        min-height:330px;
    }

}


@media(max-width:620px){

    .fm-weekend{
        padding:
            40px 0;
    }

    .fm-weekend__head{
        align-items:flex-start;
        flex-direction:column;
    }

    .fm-weekend__stamp{
        display:none;
    }

    .fm-weekend__grid{
        grid-template-columns:1fr;
    }

    .fm-weekend-card--1{
        grid-column:auto;
    }

    .fm-weekend-card{
        min-height:320px;
    }

}

/* ==========================================================
   320 FM · WEEKEND MODE · PHASE 2
   FRIDAY / SATURDAY / SUNDAY
   ========================================================== */


/* ----------------------------------------------------------
   FRIDAY NIGHT
   ---------------------------------------------------------- */

.fm-home-ref.is-weekend-friday
.fm-weekend{
    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(213,45,148,.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(42,175,225,.055),
            transparent 30%
        ),
        #080b10;
}

.fm-home-ref.is-weekend-friday
.fm-weekend__head span{
    color:#d52d94;
}

.fm-home-ref.is-weekend-friday
.fm-weekend-card--1{
    box-shadow:
        inset 0 -3px 0
        rgba(213,45,148,.78);
}

.fm-home-ref.is-weekend-friday
.fm-home-ref-hero__blend{
    background:
        linear-gradient(
            90deg,
            rgba(3,5,9,.97) 0%,
            rgba(6,5,11,.72) 40%,
            rgba(19,5,17,.22) 70%,
            rgba(5,5,10,.88) 100%
        ),
        radial-gradient(
            circle at 79% 40%,
            rgba(213,45,148,.18),
            transparent 39%
        );
}


/* ----------------------------------------------------------
   SATURDAY SESSIONS
   ---------------------------------------------------------- */

.fm-home-ref.is-weekend-saturday
.fm-weekend{
    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(42,175,225,.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 76%,
            rgba(213,45,148,.1),
            transparent 31%
        ),
        #071015;
}

.fm-home-ref.is-weekend-saturday
.fm-weekend__head span{
    color:#2aafe1;
}

.fm-home-ref.is-weekend-saturday
.fm-weekend-card--1{
    box-shadow:
        inset 0 -3px 0
        rgba(42,175,225,.82);
}

.fm-home-ref.is-weekend-saturday
.fm-weekend-card__copy small{
    color:#2aafe1;
}

.fm-home-ref.is-weekend-saturday
.fm-home-ref-hero__blend{
    background:
        linear-gradient(
            90deg,
            rgba(3,7,10,.96) 0%,
            rgba(3,10,14,.69) 40%,
            rgba(4,14,19,.24) 70%,
            rgba(3,8,12,.86) 100%
        ),
        radial-gradient(
            circle at 78% 42%,
            rgba(42,175,225,.13),
            transparent 40%
        );
}


/* ----------------------------------------------------------
   SUNDAY SELECTION
   ---------------------------------------------------------- */

.fm-home-ref.is-weekend-sunday
.fm-weekend{
    background:
        radial-gradient(
            circle at 9% 28%,
            rgba(255,255,255,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 86% 70%,
            rgba(42,175,225,.065),
            transparent 31%
        ),
        #0a0f12;
}

.fm-home-ref.is-weekend-sunday
.fm-weekend__head span{
    color:#a7bac6;
}

.fm-home-ref.is-weekend-sunday
.fm-weekend__head p{
    color:#8d9aa3;
}

.fm-home-ref.is-weekend-sunday
.fm-weekend-card--1{
    box-shadow:
        inset 0 -3px 0
        rgba(167,186,198,.62);
}

.fm-home-ref.is-weekend-sunday
.fm-weekend-card__art{
    filter:
        saturate(.58)
        contrast(1.02);
}

.fm-home-ref.is-weekend-sunday
.fm-weekend-card:hover
.fm-weekend-card__art{
    filter:
        saturate(.82)
        contrast(1.02);
}

.fm-home-ref.is-weekend-sunday
.fm-home-ref-hero__blend{
    background:
        linear-gradient(
            90deg,
            rgba(5,8,10,.97) 0%,
            rgba(7,10,12,.71) 42%,
            rgba(9,14,17,.24) 71%,
            rgba(5,9,11,.87) 100%
        ),
        radial-gradient(
            circle at 77% 44%,
            rgba(125,157,174,.095),
            transparent 41%
        );
}


/* ----------------------------------------------------------
   DAY WATERMARKS
   ---------------------------------------------------------- */

.fm-home-ref.is-weekend-friday
.fm-weekend:before{
    content:"FRIDAY NIGHT";
}

.fm-home-ref.is-weekend-saturday
.fm-weekend:before{
    content:"SATURDAY SESSIONS";
}

.fm-home-ref.is-weekend-sunday
.fm-weekend:before{
    content:"SUNDAY SELECTION";
}


/* ----------------------------------------------------------
   HERO WEEKEND LABEL
   ---------------------------------------------------------- */

.fm-home-ref.is-weekend-friday
.fm-home-ref-hero:after{
    content:"FRIDAY";
}

.fm-home-ref.is-weekend-saturday
.fm-home-ref-hero:after{
    content:"SATURDAY";
}

.fm-home-ref.is-weekend-sunday
.fm-home-ref-hero:after{
    content:"SUNDAY";
}


/* ==========================================================
   320 FM · WEEKEND · WEEKDAY EMPHASIS
   ========================================================== */

.fm-weekend__head > div:first-child > span{
    position:relative;

    display:inline-block;

    padding-bottom:5px;

    font-weight:1000 !important;

    letter-spacing:.17em !important;

    text-shadow:
        0 0 18px
        rgba(255,255,255,.04);
}

.fm-weekend__head > div:first-child > span:after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:24px;
    height:1px;

    background:currentColor;

    opacity:.55;
}


/* Freitag */

.fm-home-ref.is-weekend-friday
.fm-weekend__head > div:first-child > span{
    color:#e33aa4 !important;

    text-shadow:
        0 0 18px
        rgba(213,45,148,.16);
}


/* Samstag */

.fm-home-ref.is-weekend-saturday
.fm-weekend__head > div:first-child > span{
    color:#3bb8e6 !important;

    text-shadow:
        0 0 18px
        rgba(42,175,225,.14);
}


/* Sonntag */

.fm-home-ref.is-weekend-sunday
.fm-weekend__head > div:first-child > span{
    color:#b7c7d0 !important;

    text-shadow:
        0 0 16px
        rgba(183,199,208,.1);
}


/* ==========================================================
   320 FM · WEEKEND · FULL WIDTH FIX
   ========================================================== */

/*
 * Die alte Homepage ist ein flex-wrap Composer.
 * Weekend Sessions muss deshalb ausdrücklich eine
 * komplette Zeile belegen.
 */
.home-composable > .fm-weekend{
    flex:
        0 0 100% !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0;

    align-self:
        auto;
}


/*
 * Weekend beginnt als eigener redaktioneller Abschnitt.
 */
.home-composable > .fm-weekend{
    margin:
        0 !important;
}


/*
 * Timeline darf wieder ihre natürliche Höhe annehmen.
 */
.fm-home-ref-timeline{
    align-self:
        flex-start;
}


/*
 * Etwas saubererer Übergang Timeline -> Weekend.
 */
.fm-home-ref.is-weekend
.fm-home-ref-timeline{
    margin-bottom:
        0;
}

.fm-home-ref.is-weekend
.fm-weekend{
    margin-top:
        0 !important;
}