@import "instance";

.trionda_pro_ball {
    @include user-select;
    @include position;
    @include wh(100vw);
    background-image: $gra1;
    padding-block: clamp(50px, 5.21vw, 100px);
    z-index: 1;

    .container_pro_ball {
        @include center-flex-column;
        @include wh(min(100vw, 1920px));
        margin-inline: auto;
        z-index: 1;

        .container_title_pro_ball {
            margin-block-end: 50px;

            .title_trionda_pro_ball {
                @include t1((
                    font: $f1,
                    size: clamp(szrem(50), 3.75vw, szrem(72)),
                    weight: 700,
                    transform: uppercase,
                    align: center
                ));
                @include bc($c0, $c4);
            }

            .title_fwc {
                @include t1((
                    font: $f1,
                    size: clamp(szrem(24), 1.98vw, szrem(38)),
                    weight: 700,
                    transform: uppercase,
                    align: center
                ));
                @include bc($c0, $c4);
            }
        }

        .instruction {
            @include t1((
                font: $f1,
                size: clamp(szrem(14), 1.25vw, szrem(24)),
                weight: 400,
                transform: uppercase,
                align: center
            ));
            @include bc($c0, $c2);
            margin-block-start: 30px;
            max-width: 90vw;
        }

        .swiper {
            overflow: visible;

            .swiper-wrapper {
                @include justify-content(center);
                @include wh(min(85vw, 1920px));
                grid-template-rows: 100px 1fr 2px 80px;

                @include brp($b7) {
                    @include justify-content(initial);
                    @include gap(10px);
                }

                .card {
                    @include user_select;
                    @include wh(340px);
                    @include position;
                    aspect-ratio: calc(340 / 563);
                    max-height: 563px;
                    padding-block-start: 50px;
                    padding-block-end: 30px;
                    padding-inline: 5px;

                    &.active {
                        .front { @include transform(perspective(600px) rotateY(-180deg)); }
                        .back { @include transform(perspective(600px) rotateY(0)); }
                    }

                    .item_card {
                        @include transition(all 0.6s linear);
                        @include position(absolute);
                        @include border-radius(10px);
                        @include bc(rgba($c1, 0.1), $c1);
                        @include whs(100%);
                        backface-visibility: hidden;
                        overflow: hidden;
                        border: $bd2;
                    }

                    .front {
                        @include transform(perspective(600px) rotateY(0));
                        @include center-flex-column;

                        .btn_flip_card {
                            all: initial;
                            @include position(absolute);
                            @include whs(100%);
                            z-index: 2;
                        }

                        .icon_info {
                            @include normalize-svg((
                                width: nth($l17, 1),
                                height: nth($l17, 1),
                                position: absolute,
                                xaxis: right,
                                x: 18px,
                                y: 18px,
                                z: 1
                            ));
                            cursor: pointer;

                        }

                        .information {
                            @include position(absolute, 9px, 9px, top, right);
                            @include flex-direction(row-reverse);
                            @include align-items(center);
                            @include border-radius(33px);
                            @include gap(5px);
                            @include flex;
                            @include bc($c4, $c1);
                            padding: 4px 12px;

                            .icon_info {
                                @include whs(nth($l17, 2));
                                @include position(relative);

                                &::after {
                                    @include whs(nth($l17, 2));
                                }
                            }

                            .content_link {
                                @include bc($c0, $c1);
                                @include t1((
                                    font: $f1,
                                    size: szrem(24),
                                    weight: 400,
                                    align: center
                                ));
                            }
                        }

                        .img_product {
                            @include wh(80%);
                            aspect-ratio: 1;
                            margin-block-end: 25px;
                            margin-block-start: 10px;
                            display: block;
                            object-fit: contain;
                            max-width: 325px;

                            &.img_1 { scale: 1.2; }
                        }

                        .name_product {
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(24), 1.45vw, szrem(28)),
                                weight: 700,
                                transform: uppercase,
                                align: center
                            ));
                            min-height: 75px;
                            @include bc($c0, $c4);
                            padding-inline: 20px;
                            text-wrap-style: balance;
                        }

                        .price_product {
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(18), 1.25vw, szrem(24)),
                                weight: 400,
                                transform: uppercase,
                                align: center
                            ));
                            @include bc($c0, $c4);
                            margin-block-end: 30px;
                        }

                        .btn_buy {
                            @include btn_2(( bg: $c1, color: $c2 ));
                            @include border-radius(33px);
                            @include position;
                            z-index: 3;

                            &:hover {
                                .content_link {
                                    &::after { filter: invert(1); }
                                }
                            }
                        }
                    } // front

                    .back {
                        @include transform(perspective(600px) rotateY(180deg));
                        @include center-flex-column;
                        @include bc(rgba($c5, 0.8), $c1);
                        padding-inline: 20px;

                        .name_product_2 {
                            @include wh(95%);
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(24), 1.45vw, szrem(28)),
                                weight: 700,
                                transform: uppercase,
                                align: center
                            ));
                            @include bc($c0, $c1);
                            padding-block-start: 35px;
                        }

                        .price_product_2 {
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(18), 1.25vw, szrem(24)),
                                weight: 400,
                                transform: uppercase,
                                align: center
                            ));
                            @include bc($c0, $c1);
                            margin-block-end: 30px;
                        }

                        .specification {
                            @include wh(90%);
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(16), 1.15vw, szrem(22)),
                                weight: 400,
                                align: center
                            ));
                            @include bc($c0, $c1);
                            margin-block-end: 15px;
                        }

                        .characteristics {
                            margin-block-end: 15px;

                            .char {
                                @include t1((
                                    font: $f1,
                                    size: clamp(szrem(16), 1.15vw, szrem(22)),
                                    weight: 400,
                                    align: center
                                ));
                                @include bc($c0, $c1);
                            }
                        }

                        .description_material {
                            @include t1((
                                font: $f1,
                                size: clamp(szrem(16), 1.15vw, szrem(22)),
                                weight: 400,
                                align: center
                            ));
                            @include bc($c0, $c1);
                            margin-block-end: 15px;
                        }

                        .btn_close_flip_card {
                            all: initial;
                            @include normalize-svg((
                                width: nth($l18, 1),
                                height: nth($l18, 1),
                                position: absolute,
                                xaxis: right,
                                x: 8px,
                                y: 8px,
                                z: 1
                            ));
                            cursor: pointer;
                        }

                        .container_images_specification {
                            @include center-flex-row;
                            @include flex;
                            @include gap(2%);

                            .img_spe {
                                @include border-radius(7px);
                                @include wh(30%);
                                aspect-ratio: calc(100 / 200);
                                object-fit: cover;
                            }
                        }
                    } // back
                } // card
            } // swiper-wrapper
        } // swiper

        .swiper-scrollbar {
            @include position;
            @include wh(100%, 1px);
            @include bc($c4, $c0);
            cursor: pointer;
            margin: 50px auto 10px;

            .swiper-scrollbar-drag {
                @include border-radius(0);
                @include wh(auto, 9px);
                @include bc($c4, $c0);
                top: -4px;
            }
        }
    } // container_pro_ball
}