/* =========================================================
   VANGIA CLIENTS
   ========================================================= */

.vangia-clients{
    --vc-navy:#15294b;
    --vc-gold:#a87932;
    --vc-text:#526071;
    --vc-line:#e5e6e7;
    --vc-bg:#faf9f7;

    width:100%;
    background:var(--vc-bg);
    padding:70px 30px 55px;
}

.vangia-clients__inner{
    width:min(1480px, 100%);
    margin:0 auto;
}


/* HEADER
--------------------------------------------------------- */

.vangia-clients__header{
    text-align:center;
    max-width:760px;
    margin:0 auto 42px;
}

.vangia-clients__eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    color:var(--vc-gold);
    font-size:12px;
    font-weight:600;
    letter-spacing:.22em;
    margin-bottom:16px;
}

.vangia-clients__eyebrow span{
    display:block;
    width:48px;
    height:1px;
    background:var(--vc-gold);
}

.vangia-clients__header h2{
    margin:0 0 15px;

    color:var(--vc-navy);
    font-size:clamp(32px, 3vw, 48px);
    line-height:1.08;
    font-weight:500;
}

.vangia-clients__header p{
    max-width:660px;
    margin:0 auto;

    color:var(--vc-text);
    font-size:16px;
    line-height:1.6;
}


/* GRID
--------------------------------------------------------- */

.vangia-clients__grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);

    border:1px solid var(--vc-line);
    border-radius:12px;
    overflow:hidden;

    background:#fff;
}


/* CLIENT CELL
--------------------------------------------------------- */

.vangia-client{
    position:relative;

    min-width:0;
    height:145px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:22px 24px;

    border-right:1px solid var(--vc-line);
    border-bottom:1px solid var(--vc-line);

    transition:
        background-color .25s ease,
        transform .25s ease;
}


/* remove right border every 5th */

.vangia-client:nth-child(5n){
    border-right:0;
}


/* remove bottom border last row */

.vangia-client:nth-last-child(-n+5){
    border-bottom:0;
}


.vangia-client:hover{
    background:#f6f3ed;
}


/* LOGOS
--------------------------------------------------------- */

.vangia-client__logo{
    width:100%;
    height:90px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.vangia-client__logo img{
    display:block;

    width:auto;
    height:auto;

    max-width:88%;
    max-height:78px;

    object-fit:contain;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.vangia-client:hover .vangia-client__logo img{
    transform:scale(1.035);
}


/* TEXT CLIENTS
--------------------------------------------------------- */

.vangia-client__text{
    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}

.vangia-client__line{
    width:26px;
    height:2px;

    background:var(--vc-gold);

    margin-bottom:14px;

    transition:width .25s ease;
}

.vangia-client:hover .vangia-client__line{
    width:42px;
}

.vangia-client__name{
    color:var(--vc-navy);

    font-size:14px;
    line-height:1.4;
    font-weight:600;
}


/* FOOTER
--------------------------------------------------------- */

.vangia-clients__footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    margin-top:30px;

    color:#65758a;

    font-size:10px;
    font-weight:600;
    letter-spacing:.24em;
}

.vangia-clients__footer span{
    display:block;
    width:55px;
    height:1px;
    background:#b7bdc5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .vangia-clients{
        padding:60px 24px 48px;
    }

    .vangia-clients__grid{
        grid-template-columns:repeat(3, 1fr);
    }

    .vangia-client{
        height:140px;
    }

    .vangia-client:nth-child(5n){
        border-right:1px solid var(--vc-line);
    }

    .vangia-client:nth-child(3n){
        border-right:0;
    }

    .vangia-client:nth-last-child(-n+5){
        border-bottom:1px solid var(--vc-line);
    }

    .vangia-client:nth-last-child(-n+3){
        border-bottom:0;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px){

    .vangia-clients{
        padding:48px 15px 38px;
    }

    .vangia-clients__header{
        margin-bottom:30px;
    }

    .vangia-clients__eyebrow{
        font-size:10px;
        gap:10px;
    }

    .vangia-clients__eyebrow span{
        width:28px;
    }

    .vangia-clients__header h2{
        font-size:30px;
    }

    .vangia-clients__header p{
        font-size:14px;
    }


    .vangia-clients__grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .vangia-client{
        height:125px;
        padding:16px 12px;
    }


    /* reset tablet */

    .vangia-client:nth-child(3n){
        border-right:1px solid var(--vc-line);
    }

    .vangia-client:nth-last-child(-n+3){
        border-bottom:1px solid var(--vc-line);
    }


    /* 2 columns */

    .vangia-client:nth-child(2n){
        border-right:0;
    }

    /*
     * 15 clients = odd number.
     * Last card spans the full row.
     */

    .vangia-client:last-child{
        grid-column:1 / -1;
        border-right:0;
        border-bottom:0;
    }

    .vangia-client__logo{
        height:72px;
    }

    .vangia-client__logo img{
        max-width:90%;
        max-height:62px;
    }

    .vangia-client__name{
        font-size:12px;
    }

    .vangia-clients__footer{
        margin-top:25px;
        font-size:9px;
        gap:10px;
        letter-spacing:.15em;
    }

    .vangia-clients__footer span{
        width:25px;
    }
}