/* ==================================================
   LINEUP
   Mazury Hip Hop Festival Premium Theme
   Refactored Production Version
================================================== */


/* ==================================================
   SECTION
================================================== */


.lineup-section {

    position:relative;

    overflow-x:clip;

    padding-block:var(--section-padding);

    background:

        radial-gradient(
            circle at top left,
            rgba(255,0,120,.18),
            transparent 45%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(0,217,255,.12),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #060913,
            #101735
        );

}



.lineup__container {

    width:min(
        calc(100% - 3rem),
        var(--container-width)
    );

    margin:auto;

}



/* ==================================================
   HEADER
================================================== */


#lineup .section-header {

    align-items:center;

    text-align:center;

    margin-bottom:4rem;

}



#lineup .section-header__title {

    color:#fff;

}



#lineup .section-header__description {

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

}



/* ==================================================
   DAY TABS
================================================== */


.lineup-tabs {

    display:flex;

    justify-content:center;

    gap:1rem;

    margin:3rem 0;

}



.lineup-tabs__item {

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

    background:rgba(255,255,255,.06);

    color:#fff;

    padding:.85rem 1.8rem;

    border-radius:999px;

    font-weight:800;

    cursor:pointer;

    transition:.35s ease;

}



.lineup-tabs__item:hover,
.lineup-tabs__item.is-active {

    background:

        linear-gradient(
            135deg,
            #ff0055,
            #ff7a00
        );

    border-color:transparent;

}



/* ==================================================
   DAYS
================================================== */


.lineup-day {

    display:none;

    margin-bottom:4rem;

}



.lineup-day.is-active {

    display:block;

}



.lineup-day__title {

    color:#fff;

    font-size:2rem;

    font-weight:900;

    margin-bottom:2rem;

}



/* ==================================================
   CARD CORE
================================================== */


.lineup-card {

    flex:0 0 340px;

    width:340px;

    min-width:0;

    scroll-snap-align:start;

    position:relative;

    isolation:isolate;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    border-radius:28px;

    border:

        1px solid rgba(255,255,255,.14);


    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.01)
        ),
        #101827;


    box-shadow:

        0 20px 45px rgba(0,0,0,.25);


    transition:

        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}



.lineup-card:hover:not(.is-dragging){

    transform:translateY(-8px);

    border-color:

        rgba(255,255,255,.28);


    box-shadow:

        0 25px 55px rgba(0,0,0,.45);

}

/* ==================================================
   MEDIA
================================================== */


.lineup-card__media {

    position:relative;

    height:255px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:28px 28px 0 0;

}



.lineup-card__image,
.lineup-card__soon-image {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



.lineup-card__image {

    filter:

        brightness(.92)
        saturate(1.05);


    transition:

        transform .65s ease,
        filter .45s ease;

}



/* ==================================================
   IMAGE MOTION
================================================== */


.lineup-card:hover .lineup-card__image {

    transform:scale(1.035);


    filter:

        brightness(1)
        saturate(1.15);

}



/* ==================================================
   IMAGE OVERLAY
================================================== */


.lineup-card__media::before {

    content:"";

    position:absolute;

    inset:0;


    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,.05),
            transparent 40%
        );


    pointer-events:none;

    z-index:1;

}



.lineup-card__media::after {

    content:"";

    position:absolute;

    inset:0;


    background:

        linear-gradient(
            180deg,
            transparent 55%,
            rgba(16,24,39,.45) 100%
        );


    pointer-events:none;

    z-index:1;

}



/* ==================================================
   CONTENT
================================================== */


.lineup-card__content {

    flex:1;

    display:flex;

    flex-direction:column;

    padding:1.5rem;


    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(16,24,39,1)
        );

}



/* ==================================================
   TYPOGRAPHY
================================================== */


.lineup-card__title {

    display:block;

    flex-shrink:0;

    color:#fff;

    font-size:1.8rem;

    font-weight:900;

    line-height:1.15;

    letter-spacing:.015em;

    margin:0 0 1rem;

}



.lineup-card__description {

    color:

        rgba(255,255,255,.55);


    font-size:.9rem;

    line-height:1.5;

    text-transform:none;

    letter-spacing:0;

}

/* ==================================================
   NEXT DROP CONTENT
================================================== */


.lineup-card--soon {

    flex:0 0 380px;

    border:

        1px solid rgba(255,0,85,.7);


    box-shadow:

        0 0 45px rgba(255,0,85,.25);

}



.lineup-card--soon:hover {

    transform:translateY(-8px);

    border-color:#ff4d88;


    box-shadow:

        0 18px 55px rgba(255,0,85,.28);

}



.lineup-card--soon .lineup-card__media {

    height:285px;

}



.lineup-card__content--soon {

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    flex:1;

    padding:1.8rem;


    background:

        linear-gradient(
            180deg,
            rgba(16,24,39,.98),
            rgba(9,14,28,1)
        );

}



.lineup-card__content--soon .lineup-card__title {

    margin:0 0 .9rem;

    font-size:2rem;

    font-weight:900;

    line-height:1.1;

    letter-spacing:.03em;

    text-transform:uppercase;


    background:

        linear-gradient(
            135deg,
            #ff0055,
            #ff7a00
        );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



.lineup-card__content--soon .lineup-card__description {

    max-width:280px;

    margin:0 auto 1rem;

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

    font-size:1rem;

    line-height:1.7;

}



.lineup-card__soon-highlight {

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:1rem;

    padding:.55rem 1.2rem;

    border-radius:999px;


    background:

        linear-gradient(
            135deg,
            #ff0055,
            #ff7a00
        );


    color:#fff;

    font-size:.8rem;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;

}



/* ==================================================
   FESTIVAL TIME
================================================== */


.lineup-card__meta {

    margin-top:auto;

    padding-top:1rem;

    border-top:

        1px solid rgba(255,255,255,.12);

}



.lineup-card__time {

    display:flex;

    align-items:center;

    gap:.45rem;

    color:#fff;

    font-size:.9rem;

    font-weight:800;

}


.lineup-card__time-icon {

    width:22px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #ff0055,
        #ff7a00
    );

    color:#fff;

    font-size:.75rem;

}





/* ==================================================
   BADGES
================================================== */


.badge {

    position:absolute;

    top:1rem;

    left:1rem;

    z-index:3;


    display:inline-flex;

    align-items:center;

    gap:.35rem;


    padding:.4rem .85rem;


    border-radius:999px;


    font-size:.68rem;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;


    backdrop-filter:blur(8px);

}



.badge--headliner {

    background:

        linear-gradient(
            135deg,
            #f1cf66,
            #b58a1b
        );


    color:#111;


    box-shadow:

        0 8px 25px rgba(0,0,0,.35),

        0 0 25px rgba(241,207,102,.35);

}



.badge--soon {

    background:

        rgba(255,0,85,.15);


    border:

        1px solid rgba(255,0,85,.45);


    color:#ff8aaa;


    box-shadow:

        0 8px 24px rgba(255,0,85,.2);

}

/* ==================================================
   HEADLINER PREMIUM
================================================== */


.lineup-card--headliner {

    border-color:

        rgba(241,207,102,.65);


    background:

        linear-gradient(
            180deg,
            rgba(18,25,40,1),
            rgba(13,19,32,1)
        );


    box-shadow:

        0 25px 60px rgba(0,0,0,.45),

        0 0 45px rgba(241,207,102,.18);

}



/* ==================================================
   HEADLINER IMAGE
================================================== */


.lineup-card--headliner .lineup-card__image {

    filter:

        saturate(1.08)
        contrast(1.03);

}



.lineup-card--headliner:hover .lineup-card__image {

    transform:scale(1.06);


    filter:

        saturate(1.18)
        contrast(1.08);

}



/* ==================================================
   HEADLINER LAYER CONTROL
================================================== */


.lineup-card--headliner > * {

    position:relative;

    z-index:1;

}



/* ==================================================
   HEADLINER HOVER
================================================== */


.lineup-card--headliner:hover:not(.is-dragging) {

    transform:translateY(-10px);


    border-color:

        rgba(241,207,102,.9);


    box-shadow:

        0 30px 70px rgba(0,0,0,.55),

        0 0 60px rgba(241,207,102,.3);

}



/* ==================================================
   HEADLINER BADGE SHIMMER
================================================== */


.badge--headliner {

    position:absolute;

    overflow:hidden;

}



.badge--headliner::after {

    content:"";


    position:absolute;

    top:0;

    left:-120%;


    width:60%;

    height:100%;


    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.65),
            transparent
        );


    transform:skewX(-20deg);


    animation:

        headlinerShine 4s infinite;

}



@keyframes headlinerShine {


    0% {

        left:-120%;

    }


    35% {

        left:140%;

    }


    100% {

        left:140%;

    }

}

.lineup-grid{

    gap:1.5rem;

    padding:12px 1rem 1.5rem;

    align-items:stretch;

}

/* ==================================================
   SLIDER EDGE FADE
================================================== */


.lineup-slider::after {

    content:"";

    position:absolute;


    top:12px;

    right:0;


    width:40px;

    height:255px;


    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(16,23,53,.45)
        );


    pointer-events:none;

    z-index:3;

}

/* ==================================================
   RESPONSIVE
================================================== */


/* ==================================================
   TABLET
================================================== */


@media(max-width:1024px){


    .lineup-card {

        flex-basis:300px;

    }


}



/* ==================================================
   MOBILE
================================================== */


@media(max-width:768px){


    .lineup__container {

        width:

            calc(100% - 1.5rem);

    }



    /* ------------------------------
       TABS
    ------------------------------ */


    .lineup-tabs {

        gap:.6rem;

        margin-bottom:2rem;

    }



    .lineup-tabs__item {

        padding:.7rem 1.1rem;

        font-size:.85rem;

    }



    /* ------------------------------
       SLIDER
    ------------------------------ */


	.lineup-grid {
	
	    gap:1rem;
	
	    padding-inline:.75rem;
	
	    scroll-snap-type:x mandatory;
	
	}



    .lineup-card {

        flex:0 0 82%;

        width:auto;

        border-radius:24px;

        scroll-snap-align:center;

    }



    /* ------------------------------
       MEDIA
    ------------------------------ */


    .lineup-card__media {

        height:220px;

        border-radius:

            24px 24px 0 0;

    }



    /* ------------------------------
       CONTENT
    ------------------------------ */


    .lineup-card__content {

        padding:1.25rem;

    }



    .lineup-card__title {

        font-size:1.55rem;

        line-height:1.15;

        margin-bottom:.7rem;

    }



    .lineup-card__description {

        font-size:.9rem;

        margin-bottom:.8rem;

    }



    /* ------------------------------
       TIME
    ------------------------------ */


    .lineup-card__meta {

        padding-top:.9rem;

    }



    .lineup-card__time {

        font-size:1.1rem;

    }



    .lineup-card__time-icon {

        width:24px;

        height:24px;

    }



    /* ------------------------------
       NEXT DROP
    ------------------------------ */


    .lineup-card--soon {

        flex-basis:92vw;

    }



    .lineup-card--soon .lineup-card__media {

        height:230px;

    }


}

/* ==================================================
   PLACEHOLDER
================================================== */


.lineup-card__placeholder {

    width:100%;

    height:100%;


    display:flex;

    align-items:center;

    justify-content:center;

}



/* ==================================================
   FOOTER
================================================== */


.lineup-footer {

    margin-top:4rem;

    text-align:center;

}



.lineup-footer p {

    color:

        rgba(255,255,255,.7);

}



/* ==================================================
   FINAL TRANSITIONS
================================================== */


/*
   Prevent accidental text selection
   during slider dragging
*/


.lineup-grid.is-dragging,
.lineup-grid.is-dragging * {

    user-select:none;

}



/*
   Smooth card rendering
*/


.lineup-card {

    will-change:transform;

}



/*
   Accessibility
*/


.slider-arrow:focus-visible,
.lineup-tabs__item:focus-visible{

    outline:2px solid #ff0055;

    outline-offset:4px;

}