/* ══════════════════════════════════════
     RELATIVO À HOMEPAGE
  ══════════════════════════════════════ */

/*========================================
QUARTA DOBRA - SERVIÇOS
=========================================*/
/* GRID */

.iap-expertise-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2px;
    padding: 0px 10px;
}

/* CARD */

.iap-exp-card{
    position:relative;
    overflow:hidden;
    height:55vh;
    min-height:450px;
    cursor:pointer;
}

/* IMAGEM */

.iap-exp-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;

    filter:grayscale(100%);
    transition:
        filter .6s ease,
        transform .8s ease;
}

.iap-exp-card:hover img{
    filter:grayscale(0%);
    transform:scale(1.03);
}

/* OVERLAY */

.iap-exp-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:60px 50px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.65) 0%,
            rgba(0,0,0,.25) 35%,
            rgba(0,0,0,0) 70%
        );
}

/* TÍTULO */

.iap-exp-overlay h2{
    color:#fff;
    margin:0;

    font-size:14px;
    line-height:.95;
}

/* CONTEÚDO ESCONDIDO */

.iap-exp-content{
    overflow:hidden;

    max-height:0;

    opacity:0;

    transform:translateY(-20px);

    transition:
        max-height .5s ease,
        opacity .45s ease,
        transform .45s ease;

    margin-top:0;
}

/* HOVER */

.iap-exp-card:hover .iap-exp-content{
    max-height:250px;
    opacity:1;
    transform:translateY(0);
    margin-top:20px;
}

/* TEXTO */

.iap-exp-content p{
    color:#fff;

    margin:0 0 24px;

    max-width:320px;

    font-size:1rem;
    line-height:1.6;
}

/* MOBILE */

@media (max-width: 991px){

    .iap-expertise-grid{
        grid-template-columns:1fr;
        margin: 0 auto;
    }

    .iap-exp-card{
        height:55vh;
        min-height:450px;
    }

    /*
     * Mobile não tem hover.
     * Mantemos o conteúdo visível.
     */

    .iap-exp-content{
        max-height:300px;
        opacity:1;
        transform:none;
        margin-top:16px;
    }

    .iap-exp-card img{
        filter:grayscale(100%);
    }
}


/* ══════════════════════════════════════
     QUINTA DOBRA - CTA
  ══════════════════════════════════════ */
  
  .expertise-cta .iap-cta {
      display: flex;
    flex-direction: row; /* Default */
  justify-content: center; 
  }