/* =========================================================

   OSHO PREMMARG - EVENTS

   =========================================================

   CSS dedicato esclusivamente a:



   /Events.aspx



   NON utilizzato da altre pagine.

   ========================================================= */





/* =========================================================

   PAGE

   ========================================================= */



.events-page {

    width: 100%;

    background: #f4f0e8;

    color: #27362e;

}





/* =========================================================

   HERO

   ========================================================= */



.events-hero {

    display: grid;

    grid-template-columns: 42% 58%;

    min-height: 320px;

    overflow: hidden;

    background: #eee8dd;

}



.events-hero-copy {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: var(--page-pad);

    padding-right: clamp(35px, 5vw, 90px);

}



.events-eyebrow {

    margin: 0 0 18px 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .18em;

    color: #888b84;

}



.events-hero h1 {

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(54px, 5vw, 88px);

    font-weight: 400;

    line-height: .95;

    color: #183528;

}



.events-hero-text {

    margin: 25px 0 0 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(18px, 1.5vw, 25px);

    font-weight: 400;

    line-height: 1.25;

    color: #27362e;

}



.events-hero-image {

    width: 100%;

    height: 320px;

    overflow: hidden;

}



    .events-hero-image img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

    }





/* =========================================================

   LIST

   ========================================================= */



.events-list {

    padding-top: 65px;

    padding-bottom: 110px;



    padding-left: calc(var(--page-pad) + 100px);

    padding-right: calc(var(--page-pad) + 100px);

}





/* =========================================================

   YEAR

   ========================================================= */



.events-year + .events-year {

    margin-top: 70px;

}



.events-year-heading {

    display: grid;

    grid-template-columns: auto 1fr;

    align-items: center;

    gap: 32px;

    margin-bottom: 12px;

    /* L'anno esce leggermente dalla colonna degli eventi */

    margin-left: -100px;

}



    .events-year-heading h2 {

        width: 110px;

        margin: 0;

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(36px, 3vw, 52px);

        font-weight: 400;

        line-height: 1;

        color: #183528;

        text-align: left;

    }



.events-year-line {

    width: 100%;

    height: 1px;

    background: rgba(39, 54, 46, .55);

}





/* =========================================================

   EVENT ROW

   ========================================================= */



.events-row {

    display: grid;

    grid-template-columns: 80px minmax(180px, 250px) minmax(300px, 1fr) auto;

    column-gap: clamp(25px, 3vw, 48px);

    align-items: center;

    min-height: 160px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(39, 54, 46, .14);

}





/* =========================================================

   DATE

   ========================================================= */



.events-date {

    align-self: start;

    padding-top: 13px;

    color: #183528;

}



    .events-date strong {

        display: block;

        font-family: Georgia, "Times New Roman", serif;

        font-size: 48px;

        font-weight: 400;

        line-height: .9;

    }



    .events-date span {

        display: block;

        margin-top: 10px;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 13px;

        font-weight: 400;

        letter-spacing: .08em;

    }





/* =========================================================

   IMAGE

   ========================================================= */



.events-picture {

    width: 100%;

    height: 125px;

    overflow: hidden;

}



    .events-picture img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform .45s ease;

    }



.events-row:hover .events-picture img {

    transform: scale(1.025);

}





/* =========================================================

   CONTENT

   ========================================================= */



.events-content {

    min-width: 0;

}



.events-category {

    margin: 0 0 7px 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: #183528;

}



.events-content h3 {

    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(23px, 1.7vw, 31px);

    font-weight: 400;

    line-height: 1.05;

    color: #27362e;

}



.events-therapist {

    margin: 7px 0 0 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    color: #5f655f;

}



.events-description {

    margin: 11px 0 0 0;

    max-width: 650px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.45;

    color: #777b75;

}





/* =========================================================

   ACTION

   ========================================================= */



.events-action {

    justify-self: end;

}



    .events-action a {

        display: inline-flex;

        align-items: center;

        gap: 16px;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 12px;

        font-weight: 400;

        white-space: nowrap;

        color: #27362e;

        text-decoration: none;

    }



        .events-action a span {

            font-size: 17px;

            transition: transform .20s ease;

        }



        .events-action a:hover span {

            transform: translateX(5px);

        }





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 1050px) {



    .events-hero {

        grid-template-columns: 48% 52%;

    }



    .events-row {

        grid-template-columns: 70px 190px minmax(250px, 1fr);

    }



    .events-action {

        grid-column: 3;

        justify-self: start;

        margin-top: 12px;

    }

}





/* =========================================================

   TABLET SMALL

   ========================================================= */



@media (max-width: 800px) {



    .events-hero {

        grid-template-columns: 1fr;

    }



    .events-hero-copy {

        min-height: 300px;

        padding-top: 60px;

        padding-bottom: 60px;

    }



    .events-hero-image {

        height: 260px;

    }



    .events-row {

        grid-template-columns: 65px minmax(150px, 220px) 1fr;

        column-gap: 20px;

    }



    .events-date strong {

        font-size: 40px;

    }

}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 640px) {



    .events-list {

        padding-top: 50px;

        padding-bottom: 75px;

    }



    .events-year + .events-year {

        margin-top: 55px;

    }



    .events-year-heading {

        gap: 20px;

    }



    .events-row {

        grid-template-columns: 55px 1fr;

        gap: 15px 18px;

        padding: 25px 0;

    }



    .events-date {

        grid-column: 1;

        grid-row: 1 / span 2;

    }



    .events-picture {

        grid-column: 2;

        grid-row: 1;

        height: 150px;

    }



    .events-content {

        grid-column: 2;

        grid-row: 2;

    }



    .events-action {

        grid-column: 2;

        grid-row: 3;

        margin-top: 0;

    }



    .events-description {

        font-size: 12px;

    }

}