/* ============================================================
   SERVICES OVERVIEW
   ============================================================ */

.services-overview {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--spacing-lg);
}


/* ============================================================
   SERVICE FEATURE
   ============================================================ */

.service-feature {

    position: relative;

    display: grid;

    grid-template-columns: 72px 1fr;

    gap: var(--spacing-xl);

    min-height: 310px;

    padding:
        var(--spacing-2xl);

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


.service-feature:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--color-secondary-light);

    box-shadow:
        var(--shadow-md);
}


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

.service-feature__number {

    display: flex;

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

    width: 52px;
    height: 52px;

    border:
        1px solid
        var(--color-accent);

    border-radius:
        50%;

    color:
        var(--color-accent);

    font-size:
        var(--font-size-sm);

    font-weight:
        700;

    letter-spacing:
        0.04em;
}


/* ============================================================
   CONTENT
   ============================================================ */

.service-feature__content {

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.service-feature__category {

    display: inline-block;

    margin-bottom:
        var(--spacing-sm);

    color:
        var(--color-accent-dark);

    font-size:
        var(--font-size-xs);

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.service-feature__title {

    margin-bottom:
        var(--spacing-md);

    color:
        var(--color-primary);

    font-size:
        var(--font-size-2xl);

    line-height:
        1.25;
}


.service-feature__description {

    flex-grow: 1;

    margin-bottom:
        var(--spacing-xl);

    color:
        var(--color-text-light);

    line-height:
        1.7;
}


/* ============================================================
   LINK
   ============================================================ */

.service-feature__link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--spacing-xs);

    width:
        fit-content;

    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

    font-weight:
        700;

    transition:
        color var(--transition-normal);
}


.service-feature__link::after {

    content:
        "→";

    transition:
        transform var(--transition-normal);
}


.service-feature:hover
.service-feature__link {

    color:
        var(--color-accent-dark);
}


.service-feature:hover
.service-feature__link::after {

    transform:
        translateX(5px);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .services-overview {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 600px) {

    .service-feature {

        grid-template-columns:
            1fr;

        gap:
            var(--spacing-lg);

        min-height:
            auto;

        padding:
            var(--spacing-xl);
    }

}

/* ============================================================
   SERVICES — APPROCHE
   ============================================================ */

.services-approach {
    overflow: hidden;
}


.services-approach__grid {

    display: grid;

    grid-template-columns:
        minmax(320px, 0.9fr)
        minmax(0, 1.1fr);

    align-items: stretch;

    gap: var(--spacing-4xl);
}


/* ------------------------------------------------------------
   VISUAL
   ------------------------------------------------------------ */

.services-approach__visual {

    position: relative;

    min-height: 460px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            var(--color-primary-dark),
            var(--color-primary)
        );

    border-radius: var(--radius-lg);
}


.services-approach__visual::before {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 50%;
}


.services-approach__visual::after {

    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    border:
        1px solid
        rgba(182, 139, 64, 0.45);

    border-radius: 50%;
}


.services-approach__visual-inner {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    z-index: 1;
}


.services-approach__number {

    color: var(--color-accent-light);

    font-size: 2rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -0.04em;
}


.services-approach__line {

    width: 70px;

    height: 1px;

    margin:
        var(--spacing-lg)
        0;

    background:
        var(--color-accent);
}


.services-approach__label {

    color:
        rgba(255, 255, 255, 0.85);

    font-size:
        var(--font-size-sm);

    font-weight:
        600;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


/* ------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------ */

.services-approach__content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    max-width: 620px;
}


.services-approach__content .section__title {

    max-width: 560px;

    margin-bottom: var(--spacing-xl);

    font-size: var(--font-size-4xl);
}


.services-approach__content p {

    max-width: 580px;

    color: var(--color-text-light);

    font-size: var(--font-size-lg);

    line-height: 1.75;
}


.services-approach__content p + p {

    margin-top: var(--spacing-md);
}


.services-approach__content .btn {

    align-self: flex-start;

    margin-top: var(--spacing-lg);
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .services-approach__grid {

        grid-template-columns: 1fr;

        gap: var(--spacing-3xl);
    }


    .services-approach__visual {

        min-height: 360px;
    }


    .services-approach__content {

        max-width: 760px;
    }

}


@media (max-width: 600px) {

    .services-approach__visual {

        min-height: 300px;
    }


    .services-approach__visual::before {

        width: 250px;
        height: 250px;
    }


    .services-approach__visual::after {

        width: 160px;
        height: 160px;
    }


    .services-approach__number {

        font-size: 3rem;
    }


    .services-approach__content .section__title {

        font-size: var(--font-size-3xl);
    }

}