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

   OSHO PREMMARG - HOME EVENTS

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

   CSS dedicato esclusivamente al blocco eventi della Home.



   NON modificare:

   - Home.css

   - Common.css

   - Menu.css

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





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

   CONTENITORE PRINCIPALE

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



.home-events {

    display: grid;

    grid-template-columns: minmax(260px, 1.15fr) minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr) minmax(130px, .55fr);

    column-gap: clamp(28px, 3vw, 58px);

    align-items: start;

    padding-top: 72px;

    padding-bottom: 100px;

}





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

   INTRO

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



.home-events-intro {

    min-width: 0;

}



    .home-events-intro h2 {

        margin: 0 0 20px 0;

        color: #27362e;

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

        font-size: clamp(30px, 2vw, 40px);

        font-weight: 400;

        line-height: 1.1;

    }



    .home-events-intro p {

        margin: 0;

        color: #3f443f;

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

        font-size: 14px;

        font-weight: 400;

        line-height: 1.45;

    }





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

   EVENT CARD

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



.home-events-card {

    position: relative;

    display: grid;

    grid-template-columns: 42px minmax(0, 1fr);

    grid-template-rows: auto auto;

    column-gap: 14px;

    align-items: start;

    min-width: 0;

    margin: 0;

}





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

   DATA

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



.home-events-date {

    grid-column: 1;

    grid-row: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding-top: 3px;

    color: #183528;

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

    line-height: 1;

}



    .home-events-date strong {

        display: block;

        margin: 0 0 7px 0;

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

        font-size: 27px;

        font-weight: 400;

        line-height: 1;

    }



    .home-events-date span {

        display: block;

        font-size: 11px;

        font-weight: 600;

        letter-spacing: .10em;

        line-height: 1;

    }





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

   IMMAGINE

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



.home-events-image {

    grid-column: 2;

    grid-row: 1;

    width: 100%;

    height: 104px;

    overflow: hidden;

}



    .home-events-image img {

        display: block;

        width: 100%;

        height: 100%;

        object-fit: cover;

    }





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

   GROUP TITLE

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



.home-events-card h3 {

    grid-column: 2;

    grid-row: 2;

    margin: 15px 0 0 0;

    color: #27362e;

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

    font-size: 14px;

    font-weight: 400;

    line-height: 1.25;

}





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

   LINK TUTTI GLI EVENTI

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



.home-events-link {

    align-self: start;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-top: 18px;

    color: #27362e;

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

    font-size: 12px;

    font-weight: 400;

    line-height: 1.2;

    text-decoration: none;

    white-space: nowrap;

}



    .home-events-link span {

        transition: transform .20s ease;

    }



    .home-events-link:hover span {

        transform: translateX(4px);

    }





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

   TABLET

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



@media (max-width: 1200px) {



    .home-events {

        grid-template-columns: minmax(220px, .9fr) repeat(3, minmax(190px, 1fr));

        column-gap: 24px;

    }



    .home-events-link {

        grid-column: 2 / -1;

        justify-self: end;

        margin-top: 28px;

    }

}





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

   TABLET PICCOLO

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



@media (max-width: 900px) {



    .home-events {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 45px 30px;

        padding-top: 60px;

        padding-bottom: 80px;

    }



    .home-events-intro {

        grid-column: 1 / -1;

    }



    .home-events-link {

        grid-column: 1 / -1;

        justify-self: start;

        margin-top: 0;

    }

}





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

   MOBILE

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



@media (max-width: 640px) {



    .home-events {

        grid-template-columns: 1fr;

        gap: 38px;

        padding-top: 50px;

        padding-bottom: 65px;

    }



    .home-events-intro,

    .home-events-link {

        grid-column: 1;

    }



    .home-events-card {

        grid-template-columns: 46px minmax(0, 1fr);

        column-gap: 15px;

    }



    .home-events-image {

        height: 150px;

    }

}