/* ==========================================
   SUNNY PEOPLE
   EVENT PAGE CSS
========================================== */


/* RESET */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Poppins', sans-serif;

    background:#FFF8EF;

    color:#202020;

    overflow-x:hidden;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

}


/* header, nav e menu:  css/site-chrome.css  */


/* ==========================================
   GENERAL
========================================== */


.subtitle{

    color:#F5A300;

    font-size:14px;

    font-weight:800;

    letter-spacing:4px;

}


/* ==========================================
   EVENT HERO
========================================== */


.event-hero{

    min-height:100vh;

    padding:170px 8% 100px;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

}


/* POSTER */


.event-poster{

    display:flex;

    justify-content:center;

}


.event-poster img{

    width:100%;

    max-width:560px;

    border-radius:30px;

    box-shadow:

    0 30px 80px rgba(0,0,0,.18);

    transition:.4s ease;

}


.event-poster img:hover{

    transform:translateY(-8px);

}


/* TEXT */


.event-content h1{

    font-size:100px;

    line-height:.85;

    letter-spacing:-6px;

    font-weight:900;

    margin:25px 0 35px;

}


.event-description{

    font-size:24px;

    color:#666;

    line-height:1.6;

    margin-bottom:45px;

}


/* STATUS BOX */


.event-status{

    display:flex;

    gap:50px;

    margin-bottom:45px;

}


.event-status div{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.event-status span{

    color:#999;

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

}


.event-status h3{

    font-size:22px;

    font-weight:800;

}


/* BUTTON */


.event-button{

    display:inline-block;

    padding:17px 35px;

    border-radius:50px;

    background:#F5A300;

    color:white;

    font-weight:700;

    transition:.3s ease;

}


.event-button:hover{

    background:#FFC63D;

    transform:translateY(-5px);

}


/* ==========================================
   INTRO
========================================== */


.event-intro{

    background:#202020;

    color:white;

    padding:140px 10%;

}


.event-intro h2{

    font-size:90px;

    line-height:.9;

    letter-spacing:-5px;

    margin:25px 0 35px;

}


.event-intro p{

    max-width:650px;

    color:#aaa;

    font-size:20px;

    line-height:1.8;

}


/* ==========================================
   INFO
========================================== */


.event-info{

    padding:120px 8%;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}


.info-box{

    background:#F1E8DA;

    padding:45px;

    border-radius:30px;

    transition:.3s ease;

}


.info-box:hover{

    transform:translateY(-8px);

}


.info-box span{

    color:#F5A300;

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

}


.info-box h3{

    font-size:32px;

    margin-top:20px;

}


/* ==========================================
   FINAL CTA
========================================== */


.event-final{

    background:#F5A300;

    color:white;

    text-align:center;

    padding:140px 10%;

}


.event-final h2{

    font-size:90px;

    line-height:.9;

    letter-spacing:-5px;

}


.event-final p{

    font-size:20px;

    margin:30px 0 40px;

}


.social-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}


.social-buttons a{

    color:white;

    border:2px solid white;

    border-radius:50px;

    padding:15px 30px;

    font-weight:700;

    transition:.3s ease;

}


.social-buttons a:hover{

    background:white;

    color:#F5A300;

}


/* footer:  css/site-chrome.css  */


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


@media(max-width:900px){


    .event-hero{

        grid-template-columns:1fr;

        text-align:center;

        padding-top:150px;

    }


    .event-content h1{

        font-size:65px;

    }


    .event-status{

        justify-content:center;

    }


    .event-info{

        grid-template-columns:1fr;

    }


    .event-intro h2{

        font-size:60px;

    }


    .event-final h2{

        font-size:60px;

    }


}


@media(max-width:600px){


    .event-content h1{

        font-size:50px;

    }


    .event-description{

        font-size:19px;

    }


    .event-status{

        flex-direction:column;

        gap:20px;

    }


    .event-intro{

        padding:90px 8%;

    }


    .event-intro h2{

        font-size:45px;

    }


    .event-final h2{

        font-size:45px;

    }


}

/* ==========================================
   NOTIFY ME (Avvisami per primo)
========================================== */


.event-notify{
    padding:120px 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.event-notify h2{
    font-size:70px;
    line-height:.9;
    letter-spacing:-4px;
    margin:25px 0 30px;
}

.event-notify .notify-text p{
    font-size:19px;
    color:#666;
    line-height:1.7;
    max-width:480px;
}

.notify-form{
    background:#F1E8DA;
    border-radius:30px;
    padding:45px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.notify-form label{
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#202020;
}

.notify-form label small{
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    color:#888;
}

.notify-form input[type=text],
.notify-form input[type=email],
.notify-form input[type=tel]{
    font-family:inherit;
    font-size:16px;
    padding:15px 20px;
    border:2px solid transparent;
    border-radius:16px;
    background:#FFF8EF;
    margin-bottom:10px;
    width:100%;
    min-width:0;
    outline:none;
    transition:.2s ease;
}

.notify-form input:focus{
    border-color:#F5A300;
}

.nf-hp{
    position:absolute;
    left:-9999px;
}

.notify-form .nf-check{
    display:flex;
    gap:12px;
    align-items:flex-start;
    font-size:13px;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    line-height:1.5;
    color:#555;
    margin:5px 0 15px;
}

.nf-check input{
    margin-top:3px;
    width:18px;
    height:18px;
    accent-color:#F5A300;
    flex-shrink:0;
}

.nf-check a{
    color:#F5A300;
    text-decoration:underline;
}

.notify-form .event-button{
    border:none;
    cursor:pointer;
    font-family:inherit;
    font-size:16px;
    align-self:flex-start;
}

.notify-form .event-button:disabled{
    opacity:.6;
    cursor:wait;
}

.nf-msg{
    font-size:15px;
    font-weight:600;
    min-height:22px;
}

.nf-msg.ok{ color:#2E8B57; }
.nf-msg.err{ color:#C0392B; }


@media(max-width:900px){

    .event-notify{
        grid-template-columns:minmax(0,1fr);
        gap:40px;
        text-align:center;
    }

    .event-notify .notify-text p{
        margin:0 auto;
    }

    .notify-form{
        text-align:left;
    }

    .event-notify h2{
        font-size:50px;
    }

}

@media(max-width:600px){

    .event-notify{
        padding:90px 6%;
    }

    .notify-form{
        padding:30px 22px;
    }

    .event-notify h2{
        font-size:40px;
        letter-spacing:-2px;
    }

}