/* Services section */

.services {
    background: var(--bg-color);
}


.services .heading {
    margin-bottom: var(--space-xl);
}


.services-container {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 28rem),
                1fr
            )
        );

    gap: var(--space-lg);

    width:
        min(
            100%,
            var(--container-width)
        );

    margin-inline: auto;
}


.services-box {
    position: relative;

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

    min-height: 36rem;

    padding:
        var(--space-xl)
        var(--space-md);

    overflow: hidden;

    background:
        var(--second-bg-color);

    border:
        0.2rem solid
        var(--second-bg-color);

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

    text-align: center;

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


.services-box:hover {
    border-color:
        var(--main-color);

    transform:
        translateY(-0.5rem);
}


.services-box i {
    font-size:
        clamp(5rem, 6vw, 7rem);

    color:
        var(--main-color);
}


.services-box h3 {
    margin-top:
        var(--space-md);

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

    line-height: 1.2;
}


.services-box p {
    margin:
        var(--space-sm)
        0
        var(--space-lg);

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

    line-height: 1.7;
}


.services-box .btn {
    display: inline-flex;

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

    min-width: 14rem;
    min-height: 4.8rem;

    margin-top: auto;

    padding:
        1rem
        2rem;

    border:
        0.2rem solid
        var(--main-color);

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

    background:
        var(--main-color);

    color:
        var(--bg-color);

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

    font-weight: 600;

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


.services-box .btn:hover {
    background: transparent;

    color:
        var(--main-color);
}



/* Service modal */

.modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

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

    width: 100%;

    min-height: 100dvh;

    padding:
        var(--space-md);

    overflow-y: auto;

    background:
        rgba(0, 0, 0, 0.75);
}


.modal.active {
    display: flex;
}


.modal-content {
    position: relative;

    width:
        min(
            100%,
            90rem
        );

    max-height:
        calc(
            100dvh
            - (var(--space-md) * 2)
        );

    padding:
        var(--space-lg);

    overflow-y: auto;

    background:
        var(--second-bg-color);

    border:
        0.2rem solid
        var(--main-color);

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

    color:
        var(--text-color);

    box-shadow:
        0 1rem 3rem
        rgba(0, 0, 0, 0.35);

    transform:
        translateY(-2rem);

    opacity: 0;

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


.modal.active .modal-content {
    transform:
        translateY(0);

    opacity: 1;
}


.modal-close {
    position: absolute;

    top:
        var(--space-sm);

    right:
        var(--space-sm);

    z-index: 2;

    display: inline-flex;

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

    width: 4rem;
    height: 4rem;

    color:
        var(--main-color);

    font-size: 3rem;
    font-weight: 700;

    line-height: 1;

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


.modal-close:hover,
.modal-close:focus-visible {
    color:
        var(--text-color);
}


.modal h2 {
    margin-bottom:
        var(--space-md);

    padding-inline: 5rem;

    color:
        var(--main-color);

    font-size:
        clamp(
            2.6rem,
            4vw,
            3.5rem
        );

    line-height: 1.2;

    text-align: center;
}



/* Service carousel */

.service-carousel-container {
    position: relative;

    overflow: hidden;

    padding-bottom:
        calc(
            var(--space-lg)
            + 4rem
        );
}


.service-detail-carousel {
    display: flex;

    transition:
        transform
        0.5s
        ease-in-out;
}


.service-details[hidden] {
    display: none;
}


.service-item {
    display: flex;

    flex:
        0 0 100%;

    flex-direction: column;

    align-items: center;

    min-width: 100%;

    padding-inline:
        var(--space-sm);

    text-align: center;
}


.service-item h3 {
    margin-bottom:
        var(--space-sm);

    font-size:
        clamp(
            2.2rem,
            3vw,
            2.8rem
        );

    line-height: 1.2;
}


.service-item p {
    width:
        min(
            100%,
            70rem
        );

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

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

    line-height: 1.7;
}


.service-item-img {
    width:
        min(
            100%,
            50rem
        );

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

    overflow: hidden;

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

    box-shadow:
        0 0 1.5rem
        rgba(0, 0, 0, 0.5);
}


.service-item-img img {
    width: 100%;

    aspect-ratio:
        16 / 9;

    object-fit: cover;
}



/* Optional links inside service details */

.live-github {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap:
        var(--space-sm);

    margin-top: auto;
}


.live-github a {
    display: inline-flex;

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

    min-height: 4.5rem;

    padding-inline:
        var(--space-md);

    background:
        var(--main-color);

    border:
        0.2rem solid
        var(--main-color);

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

    color:
        var(--second-bg-color);

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

    font-weight: 600;

    letter-spacing: 0.1rem;

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


.live-github a:hover {
    background: transparent;

    color:
        var(--main-color);
}


.live-github a i {
    margin-right:
        var(--space-xs);
}



/* Carousel navigation */

.service-navigation {
    position: absolute;

    bottom: 0;
    left: 0;

    display: flex;

    justify-content: center;

    gap:
        var(--space-sm);

    width: 100%;
}


.service-navigation button {
    display: inline-flex;

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

    width: 4rem;
    height: 4rem;

    background:
        var(--main-color);

    border:
        0.2rem solid
        var(--main-color);

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

    color:
        var(--second-bg-color);

    font-size: 2rem;

    transition:
        background var(--transition-normal),
        color var(--transition-normal),
        opacity var(--transition-normal);
}


.service-navigation button:hover:not(.disabled) {
    background: transparent;

    color:
        var(--main-color);
}


.service-navigation button.disabled {
    opacity: 0.35;

    cursor: not-allowed;
}



/* Tablet */

@media (max-width: 768px) {

    .services-container {
        gap:
            var(--space-md);
    }


    .services-box {
        min-height: auto;

        padding:
            var(--space-lg)
            var(--space-md);
    }


    .modal {
        padding:
            var(--space-sm);
    }


    .modal-content {
        max-height:
            calc(
                100dvh
                - (var(--space-sm) * 2)
            );

        padding:
            var(--space-md);
    }


    .service-item {
        padding-inline: 0;
    }
}



/* Mobile */

@media (max-width: 520px) {

    .services .heading {
        margin-bottom:
            var(--space-lg);
    }


    .services-box p,
    .service-item p {
        font-size:
            var(--font-size-small);
    }


    .modal-content {
        padding:
            var(--space-md)
            var(--space-sm);
    }


    .modal h2 {
        padding-inline: 4rem;
    }


    .modal-close {
        top:
            var(--space-xs);

        right:
            var(--space-xs);

        width: 3.6rem;
        height: 3.6rem;

        font-size: 2.6rem;
    }


    .service-navigation button {
        width: 3.6rem;
        height: 3.6rem;

        font-size: 1.8rem;
    }
}