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

.two-text {
    &.reverse {
        .wrapper {
            .text1 { order: 2; }
            .text2 { order: 1; }
        }
    }

    /* 1. Neutralizujemy 15px paddingu z Bootstrapa */
    .container, .container-fluid {
        max-width: 1360px; /* Zgodnie z oryginałem Nocturne */
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
    }   
    
    .container-block {
        max-width: 100%;
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .text-inner {
        height: 100%;
        border-radius: 20px;
    }

    .text {
        padding: 0; /* Upewniamy się, że tu też nie ma ukrytych odstępów */
    }
    
    .text1 {
        .left {
            padding: 0;
            margin-left: 0;
        }
    }
    
    .text2 {
        .right {
            padding-left: 0;
            padding-top: 8px;
            .text-inner {
                p {
                    margin: 0px;
                    font-size: 15.5px;
                    line-height: 1.65;
                    color: #595d6c !important;
                    text-transform: uppercase;
                    text-align: justify;
                    word-spacing: 0.55em;
                    transition: word-spacing 0.2s linear;
                    font-family: 'Chivo Mono', monospace;
                    font-weight: 400;
                }
                display: grid;
                gap: 18px;
            }
        }
    }

    /* 2. Nasz główny Grid (z klasą .row) */
    .wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        
        /* Neutralizujemy ujemne marginesy (-15px), które Bootstrap dodaje do .row */
        margin-left: 0;
        margin-right: 0;

        /* Nasze docelowe odstępy z Nocturne */
        gap: clamp(32px, 6vw, 96px);
        padding: clamp(64px, 9vw, 112px) clamp(20px, 5vw, 72px) clamp(48px, 7vw, 84px);
        
        .icon {
            figure {
                img {
                    border-radius: var(--image-border-radius);
                }
            }
        }

        .left {
            .title {
                h3 {
                    font-size: 12px;
                    letter-spacing: 0.1em;
                    text-transform: uppercase;
                    color: #9397ab;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    margin-top: 0;
                    margin-bottom: 18px;
                    line-height: 1.55;
                    font-weight: 400;
                    font-family: 'Chivo Mono', monospace;
                    &::before {
                        content: "";
                        display: block;
                        width: 28px;
                        height: 2px;
                        background-color: #b2b6ca;
                    }
                }
            }
            .text-inner {
                h2 {
                    font-family: 'Chivo Mono', monospace;
                    font-weight: 500;
                    font-size: clamp(32px, 4.4vw, 56px);
                    line-height: 1.12;
                    letter-spacing: 0.116em;
                    margin: 0px 0px 0px -0.06em;
                    max-width: 14ch;
                    will-change: letter-spacing;
                    text-transform: uppercase;
                    color: #292b31;
                }
            }
        }

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

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

        .text-inner {
            p,
            li,
            ul,
            ol {
                color: var(--element1-text);
            }

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

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

        .buttons {
            a,
            button {
                border-width: var(--button-border-width);
                border-radius: var(--button-border-radius);
            }

            .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;
                }
            }
        }
    }

    .right {
        h3 {
            color: var(--element2-title);

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

        .text-inner {
            p,
            li,
            ul,
            ol {
                color: var(--element2-text);
            }

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

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

        .buttons {
            a,
            button {
                border-width: var(--button-border-width);
                border-radius: var(--button-border-radius);
            }

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

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

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

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

    /* RWD dla Grida na urządzenia mobilne */
    @media (max-width: 575.5px) {
        &.reverse {
            .wrapper {
                .text1 { order: 1; }
                .text2 { order: 2; }
            }
        }

        .wrapper {
            grid-template-columns: 1fr; /* Na mobilce jedna kolumna */
        }

        .text {

            .text-inner {
            }

            &.text2 {
                margin-bottom: 0;
            }
        }
    }

    @media (min-width: 576px) and (max-width: 767.5px) {
        &.reverse {
            .wrapper {
                .text1 { order: 1; }
                .text2 { order: 2; }
            }
        }

        .wrapper {
            grid-template-columns: 1fr;
        }

        .text {

            &.text2 {
                margin-bottom: 0;
            }
        }
    }

    @media (min-width: 768px) and (max-width: 991.5px) {
        &.reverse {
            .wrapper {
                .text1 { order: 1; }
                .text2 { order: 2; }
            }
        }

        .wrapper {
            grid-template-columns: 1fr;
        }

        .text {

            &.text2 {
                margin-bottom: 0;
            }
        }
    }
}