/* Sekcja: text_video - pełny CSS sekcji (zapis zagnieżdżony). */

.text-video {
    background-color: transparent;

    &.reverse {
        .wrapper {
            flex-direction: row-reverse;

            .text {
                justify-content: flex-end;
            }
        }
    }

    .wrapper {
        display: flex;
        justify-content: space-between;
        background-color: transparent;

        .buttons {
            .btn-primary {
                color: var(--element1-btn1-text);
                background-color: var(--element1-btn1-bg);
                border-color: var(--element1-btn1-border);

                &:hover {
                    color: var(--element1-btn1-text-hover) !important;
                    background-color: var(--element1-btn1-bg-hover) !important;
                    border-color: var(--element1-btn1-border-hover) !important;
                }
            }

            .btn-secondary {
                color: var(--element1-btn2-text);
                background-color: var(--element1-btn2-bg);
                border-color: var(--element1-btn2-border);

                &:hover {
                    color: var(--element1-btn2-text-hover) !important;
                    background-color: var(--element1-btn2-bg-hover) !important;
                    border-color: var(--element1-btn2-border-hover) !important;
                }
            }
        }

        .text {
            width: 50%;
            display: flex;
            justify-content: flex-start;

            .title {
                h3 {
                    color: var(--element1-title);

                    span {
                        color: var(--element1-highlighted-title);
                    }
                }
            }

            p {
                color: var(--element1-text);
            }

            p > a {
                color: var(--element1-link);

                &:hover {
                    color: var(--element1-link-hover);
                }
            }
        }

        .video {
            width: 50%;
            position: relative;
            overflow: hidden;

            iframe {
                width: 100%;
                height: 100%;
            }

            video {
                height: 100%;
                width: 100%;
                border-radius: var(--image-border-radius);
            }
        }
    }
}

@media (max-width: 575.5px) {
    .text-video {
        &.reverse {
            .wrapper {
                flex-direction: column-reverse;
            }
        }

        .wrapper {
            flex-direction: column-reverse;

            .text {
                width: 100%;
            }

            .video {
                width: 100%;

                video,
                iframe {
                    min-height: 65vw;
                }
            }
        }
    }
}

@media (min-width: 576px) and (max-width: 767.5px) {
    .text-video {
        &.reverse {
            .wrapper {
                flex-direction: column-reverse;
            }
        }

        .wrapper {
            flex-direction: column-reverse;

            .text {
                width: 100%;
            }

            .video {
                width: 100%;

                video,
                iframe {
                    min-height: 55vw;
                }
            }
        }
    }
}

@media (min-width: 768px) and (max-width: 991.5px) {
    .text-video {
        &.reverse {
            .wrapper {
                flex-direction: column-reverse;
            }
        }

        .wrapper {
            flex-direction: column-reverse;

            .text {
                width: 100%;
            }

            .video {
                width: 100%;

                video,
                iframe {
                    min-height: 45vw;
                }
            }
        }
    }
}