@import "styles.css";
@media screen and (min-width: 1024px) {
    /*DESKTOP HEADER*/

    h2{
        font-size: 40px;
    }

    header > a{
        height: 80px;
    }

    header img{
        height: 80px;
    }

    #header-menu-desktop-tickets, #header-menu-desktop-tickets-26{
        width: min-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
        background-color: var(--secondary);
        height: 80px;
        align-items: center;
        padding: 0px 20px;
        font-size: 16px;
        color: white;
        transition: background-color 150ms ease-out;
    }

    #header-menu-desktop-tickets-26{
        background-color: var(--primary);
    }

    #header-menu-desktop-tickets:hover{
        background-color: var(--secondary)80;;;
    }
    
    #header-menu-desktop-tickets img, #header-menu-desktop-tickets-26 img{
        width: 20px;
    }

    #header-menu-desktop-tickets-2025{
        width: min-content;
        display: flex;
        flex-direction: row;
        gap: 10px;
        background-color: var(--secondary);
        height: 80px;
        align-items: center;
        padding: 0px 20px;
        font-size: 16px;
        color: white;
        transition: background-color 150ms ease-out;
    }

    #header-menu-desktop-tickets-2025:hover{
        background-color: #120945;
    }
    
    #header-menu-desktop-tickets-2025 img{
        width: 20px;
    }

    #header-nav-desktop{
        display: flex;
        gap: 15px;
        padding: 0px 30px;
        align-items: center;
        max-width: calc(100vw - 400px);
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    #header-nav-desktop a{
        text-decoration: none;
        color: #FFF;
        font-weight: 600;
        font-size: 14px;
        transition: color 150ms ease-in-out;
    }

    #header-nav-desktop a:hover{
        color: var(--secondary);
    }

    #nav .event-card{
        padding: 40px;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        gap: 10px;
    
        width: calc(100% - 80px);
        height: calc(50% - 80px);
    }
    
    @media screen and (min-aspect-ratio: 1/1) {
        #nav{
            flex-direction: row;
        }
    
        #nav .event-card{
            width: calc(50% - 80px);
            height: calc(100% - 80px);
        }
    }

    #hero .content{
        padding: 0px 40px;
    }

    #hero .content h1{
        font-size: 32px;
    }
    
    #hero .content p{
        font-size: 18px;
    }

    #hero .slide-onerepublic{
        background-position: 0px 80px;
    }

    #countdown #countdown-wrapper .countdown-element .countdown-text{
        font-size: 72px;
    }

    .cta{
        margin-top: 50px;
    }
    
    .cta.credit{
        margin-top: 0;
    }

    .cta .container{
        padding: 60px;
    }

    .cta .container h2{
        font-size: 48px;
    }

    .cta .container p{
        font-size: 18px;
    }

    .partner-category{
        padding-top: 30px;
    }

    .partner-category h3{
        font-size: 30px;
    }

    footer .container #footer-wrapper{
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    footer #brand{
        order: 0;
        align-items: flex-start;
    }

    footer #brand p{
        text-align: left;
    }

    footer .footer-links{
        align-items: flex-start;
    }

    #events{
        flex-direction: row;
        padding-top: 0px;
    }

    #events > div{
        height: 100dvh;
    }

    #events h1{
        font-size: 48px;
    }

    #events p{
        font-size: 18px;
    }

    #events a{
        font-size: 18px;
    }

    #event-details{
        padding-top: 120px;
    }

    #event-details h1{
        color: var(--secondary);
        font-size: 48px;
    }

    #gallery{
        grid-template-columns: calc(25% - 5px) calc(25% - 5px) calc(25% - 5px) calc(25% - 5px);
        padding-top: 120px;
    }

    #gallery [data-cropped] img {
        height: 180px;
    }

    #event-gallery .container{
        flex-direction: row;
        justify-content: center;
    }
    
    #event-gallery .container a{
        padding: 20px 30px;
        width: max-content;
    }

    #news .container{
        max-width: 800px !important;
    }

    #camp .container{
        max-width: 1100px !important;
    }

    #camp .container .row img{
        width: 400px !important;
    }

    #selector .container{
        flex-direction: row;
        justify-content: center;
        padding-top: 120px;
    }

    #selector .container button{
        transition: 120ms ease-out;
    }

    #selector .container button:hover{
        background-color: var(--secondary)80;
    }
}

@media screen and (min-width: 768px) {
    #countdown #countdown-wrapper{
        gap: 40px;
    }

    #countdown #countdown-wrapper .countdown-element{
        min-width: calc(25% - 30px);
    }
    
    .lineup-wrapper-2026{
        grid-template-columns: repeat(4, 1fr);
    }

    .lineup-list .lineup-wrapper .lineup-slide{
        width: calc(25% - 15px);
    }

    .testimonial-card{
        width: 380px;
    }

    .swiper .swiper-button-prev, .swiper .swiper-button-next{
        top: calc(50%);
    }

    .swiper .swiper-button-prev{
        left: 0;
    }

    .swiper .swiper-button-next{
        right: 0;
    }

    #lineup .container .carousel-wrapper .swiper{
        padding-bottom: 0px;
    }

    #camp .camp-section-header h2{
        font-size: 56px;
        bottom: 6px;
        left: 47px;
    }

    #camp .container .row{
        flex-direction: row;
        align-items: center;
    }

    #camp .container .row img{
        width: 300px;
    }

    #camp .container .row .text-wrapper{
        text-align: left;
    }

    #camp .container .row .text-wrapper h2{
        font-size: 28px;
    }

    #faq .container{
        align-items: flex-start;
        gap: 30px;
    }

    #faq .container h1{
        font-size: 40px;
        padding-top: 20px;
    }    

    #faq .container h2{
        font-size: 24px;
    }

    #faq .container .question-wrapper{
        width: 100%;
    }

    #faq .container .question-wrapper .question{
        padding: 30px;
    }

    #cookie-banner{
        flex-direction: row;
    }
    
    #cookie-banner > p{
        font-size: 14px;
    }
    
    .cookie-button-wrapper{
        flex-direction: row;
        width: auto;
    }
}

@media screen and (min-width: 1440px) {
    #hero .content h1{
        font-size: 72px;
    }
    
    #hero .content p{
        font-size: 32px;
    }

    #hero .content a{
        padding: 20px 40px;
        font-size: 18px;
    }
}