:root {
    --black-color: rgba(18, 18, 18, 1);
    --white-color: rgb(255, 255, 255);
    --gray-color: rgba(217, 217, 217, 0.39);
}

html {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--black-color);
    color: var(--white-color);
    min-height: 100%;
}

.main-content-wrapper {
    height: 100%;
    width: 80%;
    margin: auto;
    box-sizing: border-box;

    h2 {
        font-weight: 500;
        font-size: 64px;
        margin: 60px 0;
    }

    .reviews-list-wrapper {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        gap: 30px;

        .list-item-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            grid-template-areas: "content video";
            padding: 48px;
            border: 1px solid var(--gray-color);
            border-radius: 20px;

            .review-content-wrapper {
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                border: 1px solid var(--gray-color);
                padding: 8% 5%;
                border-radius: 20px;
                gap: 50px;
                grid-area: content;
            }

            .review-header {
                display: grid;
                grid-template-columns: 3fr 2fr;
                justify-content: space-between;
                align-items: center;
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    top: 7px;
                    bottom: 7px;
                    left: 60%;
                    width: 1px;
                    background-color: var(--gray-color);
                }

                .review-header-wrapper {
                    display: flex;
                    flex-direction: row;
                    gap: 15px;
                    box-sizing: border-box;
                    align-items: center;
                    justify-content: flex-start;
                    height: 100%;

                    .img-avatar-wrapper {
                        display: flex;
                        border-radius: 100%;
                        background-color: darkgray;
                        height: 100%;
                        aspect-ratio: 1;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 50%;
                            height: 50%;
                        }
                    }

                    .review-client-name-block {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: flex-start;
                        flex-wrap: nowrap;
                        gap: 5px;

                        h3 {
                            font-weight: 400;
                            font-size: 1.5em;
                        }

                        p {
                            color: var(--gray-color);
                            font-size: 0.8em;
                        }
                    }
                }

                .five-stars-img-wrapper{
                    display: flex;
                    align-items: center;
                    padding-left: 15px;
                    height: 100%;
                    width: 100%;

                    img{
                        display: flex;
                        height: 50%;
                        width: 100%;
                    }
                }

            }

            .review-content{
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: unset;
                overflow: hidden;

                width: 100%;
                line-height: 1.6;
                letter-spacing: 2px;
            }

            .video{
                border-radius: 20px;
            }

            .review-video-wrapper{
                grid-area: video;
            }
        }

        .revert-block{
            display: grid;
            grid-template-areas: "video content";
        }
    }
}

h2, h3 {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}/* =========  ADAPTIVE (TABLET & MOBILE)  ========= */

/* крупные ноутбуки / маленькие десктопы */
@media (max-width: 1200px) {
    .main-content-wrapper {
        width: 88%;

        h2 { font-size: 52px; margin: 48px 0; }

        .reviews-list-wrapper {
            gap: 24px;

            .list-item-section {
                gap: 36px;
                padding: 40px;
                border-radius: 18px;

                .review-content-wrapper {
                    padding: 7% 6%;
                    gap: 36px;
                    border-radius: 16px;
                }

                .review-header {
                    grid-template-columns: 3fr 2fr;

                    .review-header-wrapper .review-client-name-block {
                        h3 { font-size: 1.3em; }
                    }

                    .five-stars-img-wrapper img {
                        width: 100%;
                        height: auto;
                        max-height: 40px;
                        object-fit: contain;
                    }
                }

                .video { border-radius: 18px; }
            }
        }
    }
}

/* планшеты (портрет/альбомная) */
@media (max-width: 992px) {
    .main-content-wrapper {
        width: 92%;

        h2 { font-size: 40px; margin: 40px 0; }

        .reviews-list-wrapper {
            .list-item-section {
                /* переходим в одноколоночную сетку */
                grid-template-columns: 1fr;
                grid-template-areas:
          "content"
          "video";
                gap: 28px;
                padding: 32px;

                /* инвертированный блок сохраняет "видео сверху" */
                &.revert-block {
                    grid-template-areas:
            "video"
            "content";
                }

                .review-content-wrapper {
                    padding: 28px 24px;
                    gap: 28px;
                }

                .review-header {
                    /* заголовок становится вертикальным, делитель убираем */
                    grid-template-columns: 1fr;
                    align-items: flex-start;
                    row-gap: 18px;
                    &::after { display: none; }

                    .review-header-wrapper {
                        gap: 12px;

                        .img-avatar-wrapper {
                            max-height: 64px;
                            max-width: 64px;
                            aspect-ratio: 1 / 1;

                            img { width: 50%; height: 50%; }
                        }

                        .review-client-name-block {
                            h3 { font-size: 1.2em; }
                            p { font-size: 0.85em; }
                        }
                    }

                    .five-stars-img-wrapper {
                        padding-left: 0;
                        width: 100%;
                        img {
                            width: 160px; /* фиксированная ширина, не "прыгает" */
                            height: auto;
                        }
                    }
                }

                .review-content {
                    line-height: 1.6;
                    letter-spacing: 1.2px;
                    -webkit-line-clamp: 6; /* чуть больше текста на планшете */
                }

                .video { border-radius: 16px; }
            }
        }
    }
}

/* большие мобильные (Landscape/большие смартфоны) */
@media (max-width: 768px) {
    .main-content-wrapper {
        width: 94%;

        h2 { font-size: 32px; margin: 28px 0; }

        .reviews-list-wrapper {
            gap: 20px;

            .list-item-section {
                padding: 24px;
                gap: 22px;
                border-radius: 14px;

                .review-content-wrapper {
                    padding: 22px 18px;
                    gap: 20px;
                    border-radius: 12px;
                }

                .review-header {
                    row-gap: 14px;

                    .review-header-wrapper {
                        .img-avatar-wrapper {
                            max-height: 56px;
                            max-width: 56px;
                        }

                        .review-client-name-block {
                            h3 { font-size: 1.1em; }
                            p { font-size: 0.8em; }
                        }
                    }

                    .five-stars-img-wrapper img { width: 140px; }
                }

                .review-content {
                    -webkit-line-clamp: 8; /* читаемость на мобиле */
                    letter-spacing: 0.8px;
                }

                .video { border-radius: 12px; }
            }
        }
    }
}

/* компактные мобильные (iPhone SE и т.п.) */
@media (max-width: 480px) {
    :root {
        /* слегка смягчим серый для тонких границ на ретина-экранах */
        --gray-color: rgba(217, 217, 217, 0.28);
    }

    body { font-size: 15px; }

    .main-content-wrapper {
        width: 96%;

        h2 { font-size: 26px; margin: 22px 0; }

        .reviews-list-wrapper {
            .list-item-section {
                padding: 18px;
                gap: 18px;

                .review-content-wrapper {
                    padding: 18px 14px;
                    gap: 16px;
                }

                .review-header {
                    .review-header-wrapper {
                        .img-avatar-wrapper {
                            max-height: 48px;
                            max-width: 48px;
                        }
                        .review-client-name-block {
                            h3 { font-size: 1.05em; }
                            p { font-size: 0.78em; }
                        }
                    }

                    .five-stars-img-wrapper img { width: 120px; }
                }

                .review-content {
                    -webkit-line-clamp: 7;
                    letter-spacing: 0.6px;
                }
            }
        }
    }
}

/* мелкие UX-штрихи */
@media (hover: none) and (pointer: coarse) {
    /* увеличим кликабельность всего блока отзыва на сенсорах */
    .reviews-list-wrapper .list-item-section { transition: border-color .2s ease; }
    .reviews-list-wrapper .list-item-section:active { border-color: rgba(217,217,217,.6); }
}

/* тёмные/яркие экраны — легкое осветление границ, чтобы не "рялились" */
@media (prefers-contrast: more) {
    :root { --gray-color: rgba(217, 217, 217, 0.5); }
}