/* ==================================================
   TRACEHAUS V3
   SERVICES
================================================== */


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

.services {

    width: 100%;

    background: var(--white);

    color: var(--black);

}


/* ==================================================
   INNER
================================================== */

.services-inner {

    width: 100%;

    max-width: 1920px;

    margin: 0 auto;

    padding:
        55px
        var(--page-padding)
        65px;

}


/* ==================================================
   HEADER
================================================== */

.services-header {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin-bottom: 25px;

}


/* ==================================================
   LINE
================================================== */

.services-header .section-line {

    width: 30px;

    height: 2px;

    margin-bottom: 12px;

    background: var(--accent);

}


/* ==================================================
   EYEBROW
================================================== */

.services-header .eyebrow {

    font-size: 10px;

    line-height: 1;

    font-weight: 600;

}


/* ==================================================
   SERVICES LIST
================================================== */

.services-list {

    width: 100%;

}


/* ==================================================
   SERVICE ROW
================================================== */

.service-row {

    position: relative;

    display: grid;

    grid-template-columns:
        80px
        minmax(300px, 1fr)
        300px
        210px
        55px;

    align-items: center;

    min-height: 170px;

    border-bottom: 1px solid
        rgba(10, 11, 17, 0.18);

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );

}


/* first line */

.service-row:first-child {

    border-top: 0;

}


/* reveal */

.service-row.is-visible {

    opacity: 1;

    transform: translateY(0);

}


/* ==================================================
   NUMBER
================================================== */

.service-number {

    align-self: center;

    font-size: 30px;

    line-height: 1;

    font-weight: 400;

}


/* ==================================================
   NUMBER COLORS
================================================== */

.service-01 {
    color: #ff4667;
}

.service-02 {
    color: #43cce7;
}

.service-03 {
    color: #c9df38;
}

.service-04 {
    color: #ff4667;
}


/* ==================================================
   SERVICE NAME
================================================== */

.service-name {

    font-size:
        clamp(
            55px,
            5vw,
            100px
        );

    line-height: 0.9;

    letter-spacing: -0.06em;

    font-weight: 400;

}


/* ==================================================
   DESCRIPTION
================================================== */

.service-description {

    max-width: 240px;

    font-size: 12px;

    line-height: 1.45;

}


/* ==================================================
   IMAGE
================================================== */

.service-image {

    width: 100%;

    height: 155px;

    overflow: hidden;

    background: #e9e9e9;

}


.service-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: grayscale(100%);

    transition:
        transform 0.7s
        cubic-bezier(
            .22,
            .61,
            .36,
            1
        );

}


/* ==================================================
   IMAGE HOVER
================================================== */

.service-row:hover
.service-image img {

    transform: scale(1.04);

}


/* ==================================================
   PLUS
================================================== */

.service-plus {

    justify-self: end;

    font-size: 34px;

    line-height: 1;

    font-weight: 300;

    transition:
        transform 0.35s ease;

}


.service-row:hover
.service-plus {

    transform:
        rotate(90deg);

}


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

@media (max-width: 1200px) {

    .service-row {

        grid-template-columns:
            65px
            minmax(240px, 1fr)
            230px
            160px
            45px;

        min-height: 145px;

        column-gap: 15px;

    }


    .service-name {

        font-size:
            clamp(
                48px,
                5vw,
                75px
            );

    }


    .service-image {

        height: 125px;

    }


    .service-description {

        max-width: 200px;

        font-size: 10px;

    }


    .service-number {

        font-size: 24px;

    }

}


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

@media (max-width: 700px) {

    .services-inner {

        padding:
            45px
            var(--page-padding)
            55px;

    }


    .services-header {

        margin-bottom: 15px;

    }


    .service-row {

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

        grid-template-rows:
            auto
            auto
            auto;

        column-gap: 10px;

        padding:
            25px
            0;

        min-height: auto;

    }


    /* ----------------------------------------------
       NUMBER
    ---------------------------------------------- */

    .service-number {

        grid-column: 1;

        grid-row: 1;

        align-self: start;

        font-size: 18px;

    }


    /* ----------------------------------------------
       NAME
    ---------------------------------------------- */

    .service-name {

        grid-column: 2;

        grid-row: 1;

        font-size:
            clamp(
                42px,
                14vw,
                75px
            );

        line-height: 0.9;

    }


    /* ----------------------------------------------
       PLUS
    ---------------------------------------------- */

    .service-plus {

        grid-column: 3;

        grid-row: 1;

        align-self: start;

        font-size: 27px;

    }


    /* ----------------------------------------------
       DESCRIPTION
    ---------------------------------------------- */

    .service-description {

        grid-column: 2 / 4;

        grid-row: 2;

        max-width: 280px;

        margin-top: 18px;

        font-size: 10px;

    }


    /* ----------------------------------------------
       IMAGE
    ---------------------------------------------- */

    .service-image {

        grid-column: 2 / 4;

        grid-row: 3;

        width: 100%;

        height: 150px;

        margin-top: 20px;

    }

}


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

@media (max-width: 400px) {

    .service-name {

        font-size: 40px;

    }


    .service-image {

        height: 130px;

    }

}