@import "instance";

.highlight_product {
    @include bc($c0, $c2);
    @include wh(100vw);
    @include position;
    aspect-ratio: calc(2880 / 1620);
    padding-block: 36px 0 15px;
    margin-inline: auto;
    z-index: 1;

    @include brp($b1, min) {
        max-height: 1080px;
    }

    @include brp($b6) {
        aspect-ratio: initial;
    }

    @include brp($b7) {
        padding-block-end: 15px
    }

    &::before {
        @include bg_two_section((
            yaxis: top,
            gradient: $gra7_j
        ));
    }

    &::after {
        @include bg_two_section((
            gradient: $gra9_j,
            z: 1
        ));
    }

    .bg_highlight_product {
        @include bg_away((
            no-country: true,
            no-aside: true
        ));
    }

    .f2 {
        @include position(relative, 30px);
        display: block;

        @include brp($b6) {
            @include position(initial, initial, initial);
            @include align-items(center);
            @include flex;
            flex-direction: column;
        }

        .indicators {
            @include position(absolute, 8.5%, 50%, bottom);
            @include transform(translate(-50%, 0));
            z-index: 30;

            @include brp($b6) {
                @include position(absolute, 2%, initial, bottom);
                @include transform(initial);
            }

            ul {
                @include flex;

                li {
                    @include border-radius(50%);
                    @include whs(10px);
                    @include ht;
                    @include bc(rgba($c1, 0.3), $c0);
                    padding: 0;
                    cursor: pointer;
                    margin-right: 10px;

                    &:last-child { margin-right: 0; }
                    &.active { @include bc($c1, $c0); }
                }
            }
        }

        .controls {
            @include transform(translateX(-50%));
            @include position(absolute, 8%, 50%, bottom);
            @include justify-content(space-between);
            @include wh(min(36.46vw, 700px));
            @include flex-direction(row-reverse);
            @include flex;
            z-index: 3;

            @include brp($b6) {
                @include transform(initial);
                @include wh(300px);
                @include position(
                    relative,
                    initial,
                    initial,
                    bottom
                );
            }

            @include brp($b7) {
                top: initial;
            }

            .next_highlight_product {
                @include btn_controls;
                border: $bd1_j;
            }

            .prev_highlight_product {
                @include btn_controls;
                border: $bd1_j;
            }
        }
    } // f2

    .wrapper {
        @include wh(min(100vw, 1920px));
        @include position;
        margin-inline: auto;
        z-index: 2;
    }

    .container_highlight_product {
        @include position(absolute);
        @include transition((opacity $t5, scale $t5));
        @include whs(100%);
        max-height: 800px;
        scale: 0.7;
        opacity: 0;
        z-index: 1;

        @include brp($b6) {
            max-height: initial;
        }

        &.active {
            @include transition((opacity $t5, scale $t5));
            @include grid;
            @include position;
            scale: 1;
            opacity: 1;
            z-index: 2;
        }

        .info_column {
            @include flex;
            @include gap(min(1.66vw, 32px));
            padding-inline-start: min(3.91vw, 75px);
            flex-direction: column;

            @include brp($b6) {
                @include align-items(center);
                flex-direction: row-reverse;
            }

            @include brp($b7) {
                @include align-items(initial);
                @include gap(15px);
            }

            .text_block {
                @include position;
                @include gap(5px);
                @include flex;
                flex-direction: column;

                @include brp($b6) {
                    @include align-self(center);
                    width: 100%;
                }

                .title {
                    @include bc($c0, $c1);
                    @include t1(
                        (
                            size: clamp(szrem(22), 1.66vw, szrem(32)),
                            font: $f1,
                            align: left,
                            weight: 600,
                        )
                    );

                    @include brp($b6) {
                        font-size: clamp(szrem(22), 3.27vw, szrem(32));
                    }
                }

                .text {
                    @include bc($c0, $c1);
                    @include t1(
                        (
                            size: clamp(szrem(16), 1.15vw, szrem(22)),
                            font: $f1,
                            align: left,
                            weight: 400,
                        )
                    );
                    text-wrap-style: balance;

                    @include brp($b6) {
                        font-size: clamp(szrem(16), 2.24vw, szrem(22));
                    }
                }
            }

            .media_preview {
                @include wh(min(23.44vw, 450px));
                aspect-ratio: calc(450 / 200);
                display: block;

                @include brp($b6) {
                    width: 63%;
                }

                @include brp($b7) {
                    width: 25%;
                    aspect-ratio: calc(246 / 330);
                }

                .img {
                    @include whs(100%);
                    object-fit: contain;
                }
            }
        }
    } // container_highlight_product

    .product_column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;

        @include brp($b6) {
            @include gap(0);
        }

        .container_product_image {
            @include whs(min(39.06vw, 750px));
            @include filter(drop-shadow($sha1_d));

            @include brp($b6) {
                @include whs(min(97.22vw, 542px));
            }

            .tshirt_country_image {
                @include whs(100%);
                object-fit: contain;
            }
        }

        .product_label {
            .country_title {
                @include brp($b6) {
                    display: none;
                }
                @include bc($c0, $c1);
                @include t1(
                    (
                        size: szrem(28),
                        font: $f1,
                        align: center,
                        transform: uppercase,
                        weight: 700
                    )
                );
            }
        }
    } // product_column

    .cta_column {
        @include gap(24px);
        display: flex;
        flex-direction: column;
        align-items: center;

        .logo_originals {
            @include normalize-svg((
                width: nth($l1x_d, 1),
                height: nth($l1y_d, 1),
            ));

            @include brp($b7) {
                @include wh(
                    nth($l1x_d, 2),
                    nth($l1y_d, 2)
                );
            }
        }

        .cta_title {
            max-width: 420px;
            .text_cta {
                @include bc($c0, $c1);
                @include t1(
                    (
                        size: min(1.82vw, szrem(35)),
                        font: $f1,
                        align: center,
                        weight: 600,
                    )
                );

                @include brp($b6) {
                    font-size: clamp(szrem(20), 3.57vw, szrem(35));
                }
            }
            .second_title {
                @include bc($c0, $c1);
                @include t1(
                    (
                        size: min(1.46vw, szrem(28)),
                        font: $f1,
                        align: center,
                        weight: 600,
                    )
                );

                @include brp($b6) {
                    font-size: clamp(szrem(16), 2.85vw, szrem(28));
                }
            }
        }

        .country_title_mobile {
            margin-top: 20px;
            display: none;
            @include bc($c0, $c1);
            @include t1(
                (
                    size: szrem(28),
                    font: $f1,
                    align: center,
                    transform: uppercase,
                    weight: 700,
                )
            );

            @include brp($b6) {
                display: block;
            }

            @include brp($b7) {
                font-size: clamp(szrem(22), 3.64vw, szrem(28));
                margin-top: 5px;
            }
        }
    } // cta_column
}