/* =====================================================
   HOME CONCEPT - STUDIO LEGALE GUIDA
   CSS isolato dal tema originale
===================================================== */

#home-concept {
    --concept-petrol: #24554e;
    --concept-dark: #163f3a;
    --concept-ivory: #f7f6f0;
    --concept-text: #34483f;
    --concept-muted: #66746b;

    width: 100%;
    max-width: 100%;
    color: var(--concept-text);
    font-family: "DM Sans", Arial, sans-serif;
    overflow: hidden;
}

#home-concept,
#home-concept *,
#home-concept *::before,
#home-concept *::after {
    box-sizing: border-box;
}

/* Reset circoscritto al nuovo contenuto */

#home-concept section,
#home-concept article {
    clear: none;
    float: none;
    position: relative;
    margin: 0;
}

#home-concept section {
    padding: 0 !important;
}

#home-concept article {
    padding: 0 !important;
}

#home-concept h2,
#home-concept h3 {
    color: var(--concept-dark);
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

#home-concept h2 {
    margin: 0 !important;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.16;
}

#home-concept h3 {
    font-size: 23px;
    line-height: 1.3;
}

#home-concept p {
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: normal;
    text-transform: none;
}

/* Contenitore fluido */

#home-concept .wrap {
    width: 1200px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 6em;
    box-sizing: border-box;
}

/* Etichette */

#home-concept .eyebrow {
    display: inline-block;
    margin-bottom: 20px;
    color: #4b8778;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* =====================================================
   AREE DI ATTIVITÀ
===================================================== */

#home-concept .section {
    width: 100%;
    padding: 105px 0 !important;
    background: var(--concept-ivory);
}

#home-concept .section.pale {
    background: #eef1eb;
}

#home-concept .sectionHead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.65fr);
    gap: 65px;
    align-items: end;
    margin-bottom: 65px;
}

#home-concept .sectionHead p {
    max-width: 450px;
    margin: 0 0 5px;
    color: var(--concept-muted);
}

#home-concept .services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 35px;
}

#home-concept .service {
    display: block;
    min-width: 0;
    min-height: 225px;
    padding: 28px 0 !important;
    border-top: 1px solid #cbd6ca;
    background: transparent;
}

#home-concept .service .number {
    display: block;
    margin-bottom: 22px;
    color: #4b8778;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
}

#home-concept .service h3 {
    margin: 0 0 15px !important;
    font-size: 22px;
}

#home-concept .service p {
    margin: 0;
    color: var(--concept-muted);
    font-size: 14px;
}

/* =====================================================
   IL NOSTRO METODO
===================================================== */

#home-concept .vision {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    min-height: 500px;
    background: var(--concept-dark);
}

#home-concept .vision .vText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 90px clamp(40px, 7vw, 110px);
    padding-left: max(40px, calc((100vw - 1200px) / 2 + 20px));
    color: #f7f6f0;
}

#home-concept .vision .vText h2 {
    color: #f7f6f0 !important;
    font-size: clamp(34px, 3.5vw, 48px);
}

#home-concept .vision .vText p {
    max-width: 440px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.72);
}

#home-concept .vision .vArt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 400px;
    padding: 40px;
    background: #e7ece6;
}

#home-concept .vision .vArt svg {
    display: block;
    width: 85%;
    height: 85%;
    max-height: 420px;
}

/* =====================================================
   PROFESSIONISTI
===================================================== */

#home-concept .peopleGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

#home-concept .person {
    display: block;
    min-width: 0;
    padding: 24px 0 !important;
    border-top: 2px solid var(--concept-petrol);
}

#home-concept .person .role {
    display: inline-block;
    color: #4b8778;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    line-height: 1.5;
    text-transform: uppercase;
}

#home-concept .person h3 {
    margin: 10px 0 14px !important;
}

#home-concept .person p {
    margin: 0;
    color: #66746b;
    font-size: 14px;
}

/* =====================================================
   PROSPETTIVA INTERNAZIONALE
===================================================== */

#home-concept #internazionale.international {
    width: 100%;
    background: #e7ece6;
}

#home-concept .international .intlGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 70px;
    align-items: center;
}

#home-concept .international p {
    color: #5b6e62;
}

#home-concept .intlNote {
    min-width: 0;
    padding: 37px !important;
    background: #fffefa;
    border: 1px solid #d6e0d6;
}

#home-concept .intlNote h3 {
    margin: 0 0 25px !important;
}

#home-concept .intlNote div {
    padding: 13px 0;
    border-top: 1px solid #e1e8df;
    font-size: 13px;
    line-height: 1.6;
}

/* =====================================================
   TABLET E NOTEBOOK
===================================================== */

@media screen and (max-width: 1015px) {

    #home-concept .wrap {
        padding-left: 30px;
        padding-right: 30px;
    }

    #home-concept .sectionHead {
        display: block;
    }

    #home-concept .sectionHead p {
        max-width: 600px;
        margin-top: 20px;
    }

    #home-concept .services,
    #home-concept .peopleGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #home-concept .vision,
    #home-concept .international .intlGrid {
        grid-template-columns: 1fr;
    }

    #home-concept .vision .vText {
        padding: 70px 8%;
    }

    #home-concept .vision .vArt {
        min-height: 290px;
    }
}

/* =====================================================
   SMARTPHONE
===================================================== */

@media screen and (max-width: 736px) {

    #home-concept .wrap {
        padding-left: 22px;
        padding-right: 22px;
    }

    #home-concept .section {
        padding: 68px 0 !important;
    }

    #home-concept .services,
    #home-concept .peopleGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    #home-concept .service {
        min-height: 190px;
    }

    #home-concept .service h3 {
        margin-top: 20px !important;
    }

    #home-concept .vision .vText {
        padding: 60px 25px;
    }

    #home-concept .vision .vArt {
        min-height: 250px;
    }

    #home-concept .intlNote {
        padding: 24px !important;
    }
}