/* ==========================================================
   VIVA PIATÃ
   CONHEÇA O TERRITÓRIO
========================================================== */


/* ==========================================================
   SECTION
========================================================== */


.territorio {

    padding:100px 0;

    background:#f8fafb;

}



.section-header {

    max-width:850px;

    margin:0 auto 60px;

    text-align:center;

}



.section-header span {

    display:inline-block;

    margin-bottom:15px;

    color:var(--cor-primaria);

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}



.section-header h2 {

    font-size:

        clamp(2rem,4vw,3rem);

    line-height:1.15;

    margin-bottom:20px;

}



.section-header p {

    font-size:1.15rem;

    color:#52616b;

    line-height:1.7;

}





/* ==========================================================
   GRID
========================================================== */


.territorio-grid {


    display:grid;


    grid-template-columns:

        repeat(3,1fr);


    gap:30px;


}





/* ==========================================================
   CARD
========================================================== */


.territorio-card {


    background:white;


    border-radius:28px;


    overflow:hidden;


    box-shadow:

        0 20px 50px rgba(13,44,58,.08);


    transition:

        transform .4s ease,
        box-shadow .4s ease;


}



.territorio-card:hover {


    transform:

        translateY(-8px);


    box-shadow:

        0 30px 70px rgba(13,44,58,.15);


}





/* ==========================================================
   IMAGENS
========================================================== */


.territorio-imagem {


    height:330px;


    display:grid;


    grid-template-columns:

        1fr 1fr;


    gap:5px;


    overflow:hidden;


}



.territorio-imagem img {


    width:100%;


    height:100%;


    object-fit:cover;


}



.territorio-imagem img:only-child {


    grid-column:

        span 2;


}





.imagem-secundaria {


    transition:

        transform .5s ease;


}



.territorio-card:hover img {


    transform:

        scale(1.04);


}





/* ==========================================================
   CONTEÚDO
========================================================== */


.territorio-conteudo {


    padding:32px;


}



.territorio-conteudo h3 {


    font-size:1.7rem;


    margin-bottom:15px;


    color:var(--cor-primaria);


}



.territorio-conteudo p {


    line-height:1.7;


    color:#52616b;


    margin-bottom:25px;


}



.territorio-conteudo a {


    display:inline-flex;


    text-decoration:none;


    font-weight:600;


    color:var(--cor-primaria);


    transition:.3s ease;


}



.territorio-conteudo a:hover {


    transform:

        translateX(5px);


}





/* ==========================================================
   RESPONSIVO
========================================================== */


@media(max-width:1000px){


    .territorio-grid {


        grid-template-columns:

            1fr 1fr;


    }


}



@media(max-width:700px){


    .territorio {


        padding:70px 0;


    }


    .territorio-grid {


        grid-template-columns:

            1fr;


    }


    .territorio-imagem {


        height:260px;


    }


}