/* ==========================================================================
   Відгуки («Що говорять наші учні») — спільний блок, template-parts/reviews.php
   Фон — SVG із сірими еліпсами й сіткою (frame-629618.svg), на всю секцію.
   Заголовок і підзаголовок ліворуч, нижче віджет плагіна відгуків (Trustindex,
   шорткод із «Налаштування сайту → Відгуки»).
   Картки віджета: фон #EDF7EF (рамка плагіна лишається як є).
   ========================================================================== */
.reviews {
    position: relative;
    isolation: isolate;
    padding-block: 80px 100px;
    overflow: clip;
    background: var(--color-bg-soft);
    color: var(--color-dark);
}

.reviews__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.reviews__head {
    max-width: 768px;
}

.reviews__title {
    margin: 0;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--tracking-heading);
}

.reviews__subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.reviews__star {
    flex: none;
    width: 20px;
    height: 20px;
    color: #F59E0B;
}

.reviews__widget {
    margin-top: 120px;
    min-height: 235px;
}

/* Фон карток відгуків Trustindex (обводку не чіпаємо).
   !important потрібен: плагін сам ставить білий фон з !important. */
.reviews__widget .ti-widget.ti-goog .ti-review-item > .ti-inner {
    background-color: #EDF7EF !important;
}

/* Підказка для редактора, поки шорткод не вказано */
.reviews__widget--empty {
    display: grid;
    place-items: center;
    padding: 24px;
    border: 1px dashed rgba(24, 29, 31, .3);
    border-radius: 16px;
    color: rgba(24, 29, 31, .6);
    font-size: 14px;
    text-align: center;
}

.reviews__widget--empty p {
    margin: 0;
}

@media (max-width: 991px) {
    .reviews {
        padding-block: 64px 80px;
    }

    .reviews__widget {
        margin-top: 72px;
    }
}

@media (max-width: 767px) {
    .reviews {
        padding-block: 48px 56px;
    }

    .reviews__subtitle {
        font-size: 14px;
    }

    .reviews__widget {
        margin-top: 36px;
        min-height: 0;
    }
}