/* process */
.single-capabilities-process{
    padding: 100px 24px;
    >h2{
        text-align: center;
        margin-bottom: 24px;
    }
    >p{
        text-align: center;
        white-space: pre-line;
        margin-bottom: 60px;
    }
    >.process{
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}
.single-capabilities-process-item{
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    gap: 0;
    >.img{
        aspect-ratio: 3 / 2;
        margin-bottom: 24px;
        >img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    >.title{
        position: relative;
        padding-left: 50px;
        margin-bottom: 12px;
        >.en-h2{
            position: absolute;
            top: 0;
            left: 0;
            color: var(--color-primary-1);
        }
        >h4{
            padding-bottom: 12px;
            border-bottom: 2px solid var(--color-primary-1);
            height: 100%;
        }
    }
    >p{
        padding-left: 50px;
        white-space: pre-line;
    }
}
@media screen and (width < 768px) {
    .single-capabilities-process-item{
        >.title{
            padding-left: 36px;
            margin-bottom: 8px;
            >h4{
                padding-bottom: 8px;
            }
        }
        >p{
            padding-left: 36px;
        }
    }
}
@media screen and (width < 576px) {
    .single-capabilities-process{
        padding: 60px 24px;
        >p{
            margin-bottom: 40px;
        }
        >.process{
            gap: 40px;
        }
    }
}
/* collapse */
.single-capabilities-collapse{
    padding: 100px 24px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    >.content>p{
        white-space: pre-line;
        margin-top: 24px;
    }
    >.form{
        padding-left: 36px;
        grid-column: span 2;
        display: grid;
        grid-template-columns: min-content 1fr min-content;
        gap: 8px;
        >h4{
            writing-mode: vertical-rl;
            text-align: center;
            padding: 16px 20px;
            background-color: var(--color-secondary-1);
            border-radius: 5px;
            color: white;
        }
    }
    .form-collapse{
        padding: 16px 20px;
        border-radius: 5px;
        background-color: color-mix(in srgb, var(--color-primary-1) 5%, transparent);
        transition: background-color .5s;
        cursor: pointer;
        margin-bottom: 8px;
        >div{
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .5s;
            >div{
                overflow: hidden;
                >p{
                    white-space: pre-line;
                    padding-top: 16px;
                }
            }
        }
        &:last-child{
            margin-bottom: 0;
        }
        &.active{
            background-color: var(--color-primary-1);
            >div{
                grid-template-rows: 1fr;
            }
        }
    }
}
@media screen and (width < 1024px) {
    .single-capabilities-collapse{
        >.form{
            padding-left: 0;
        }
    }
}
@media screen and (width < 768px) {
    .single-capabilities-collapse{
        grid-template-columns: 100%;
        gap: 40px;
        >.form{
            grid-column: initial;
        }
    }
}
@media screen and (width < 576px) {
    .single-capabilities-collapse{
        padding: 60px 24px;
        >.form{
            grid-template-columns: 100%;
            >h4{
                writing-mode: initial;
                padding: 10px 16px;
            }
        }
        .form-collapse{
            padding: 10px 16px;
            >div>div>p{
                padding-top: 10px;
            }
        }
    }
}

/* imgs */
.single-capabilities-imgs{
    padding: 100px 24px;
    >h2{
        text-align: center;
        margin-bottom: 24px;
    }
    >p{
        text-align: center;
        white-space: pre-line;
        margin-bottom: 60px;
    }
    >.imgs{
        display: grid;
        gap: 60px 24px;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

}
.single-capabilities-img{
    >.img{
        position: relative;
        aspect-ratio: 3 / 2;
        margin-bottom: 24px;
        background-color: var(--color-gray-6);
        >img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        >.cover{
            position: absolute;
            inset: 0;
            background-color: color-mix(in srgb, var(--color-primary-1) 80%, transparent);
            backdrop-filter: blur(5px);
            display: grid;
            place-content: center;
            opacity: 0;
            transition: opacity .3s;
        }
    }
    >h4{
        text-align: center;
    }

    &:hover >.img > .cover{
        opacity: 1;
    }
}
.single-capabilities-imgs-modal{
    position: fixed;
    z-index: 5;
    inset: 0;
    background-color: rgba(0,0,0,0.8);

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

    >.cancel{
        position: absolute;
        top: 40px;
        right: 40px;
        width: 60px;
        height: 60px;
        >svg{
            width: 100%;
            height: 100%;
        }
        rect{
            transition: fill .3s, fill-opacity .3s;
        }

        &:hover rect{
            fill: var(--color-primary-1);
            fill-opacity: 1;
        }
    }
    >div{
        width: 100%;
        max-width: 972px;
        >h3{
            text-align: center;
            color: white;
            margin-bottom: 60px;
        }
    }

    &.hidden{
        display: none;
    }
}
.single-capabilities-swiper{
    padding: 0 90px;
    position: relative;
    .swiper-slide{
        aspect-ratio: 3 / 2;
        > img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    >.prev,
    >.next{
        position: absolute;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: var(--color-gray-4);
        transition: color .3s;
        >svg{
            color: inherit;
        }
        &:hover{
            color: var(--color-primary-1);
        }
    }
    >.prev{
        left: 0;
    }
    >.next{
        right: 0;
    }
}
.single-capabilities-pagination{
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 60px;
    >.bullet{
        width: 11px;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 1px solid var(--color-primary-1);
        background-color: transparent;
        transition: background-color 1s;
        &.active{
            background-color: var(--color-primary-1);
        }
    }
}
@media screen and (width < 768px) {
    .single-capabilities-imgs{
        >p{
            margin-bottom: 40px;
        }
    }
    .single-capabilities-imgs-modal{
        >div > h3{
            margin-bottom: 24px;
        }
    }
    .single-capabilities-swiper{
        padding: 0 60px;
    }
    .single-capabilities-pagination{
        margin-top: 24px;
    }
}
@media screen and (width < 576px) {
    .single-capabilities-imgs{
        padding: 60px 24px;
        >.imgs{
            gap: 40px 24px;
        }
    }
    .single-capabilities-img > .img{
        margin-bottom: 12px;
    }
    .single-capabilities-imgs-modal{
        >.cancel{
            width: 40px;
            height: 40px;
            top: 24px;
            right: 24px;
        }
    }
    .single-capabilities-swiper{
        padding: 0 30px;
    }
}