/* ====================================================================
   Diagnostics – изолированные стили страницы 
   ==================================================================== */

.diagnostics-hero,
.diagnostics-section {
    padding: 5rem 0;
}

.diagnostics .container {
    padding-left: 2rem;
    padding-right: 2rem;
}

.diagnostics-hero h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
}

.diagnostics-hero p {
    font-size: 1.125rem;
}

.diagnostics-divider {
    width: 140px;
    height: 3px;
    margin: 3rem auto;
    border-radius: 2px;
    background: var(--accent-color);
}

.diagnostics-card {
    background: var(--surface-color);
    border-radius: 1rem;
    padding: 1rem 0.35rem;
    transition: box-shadow .25s, transform .25s;
    height: 100%;
}

    .diagnostics-card:hover {
        box-shadow: 0 12px 24px rgb(0 0 0 / .12);
        transform: translateY(-4px);
    }

    .diagnostics-card .icon {
        width: 128px;
        height: 128px;
        margin-right: 1.5rem;
        background: var(--accent-color);
        color: var(--contrast-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
    }

.diagnostics-types img,
.diagnostics-advantages img {
    max-width: 100%;
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgb(0 0 0 / .12);
}

@media (max-width: 767.98px) {
    .diagnostics-types img,
    .diagnostics-advantages img {
        margin-bottom: 1.5rem;
    }
}

/* ==============================================================
   PATCH-DIAG · 03-08-2025
   · Иконка компактнее
   · На телефоне иконка слева, текст справа
   · Читаемые переносы, защита от «вылезания»
   ============================================================== */

/* --- 1. Универсальный размер иконки на десктопе --- */
.diagnostics-card .icon {
    width: 66px;
    height: 66px;
    margin-right: 1rem; /* чуть меньше отступ */
    font-size: 40px; /* пропорционально меньше */
}

/* --- 2. Мобильная компоновка ≤ 575.98px --- */
@media (max-width: 575.98px) {

    /* иконка снова сбоку текста, карточка в строку */
    .diagnostics .diagnostics-card {
        flex-direction: row !important; /* перекрываем column, если был */
        align-items: flex-start;
        text-align: left;
        padding: 1.25rem 1rem;
    }

        /* сама иконка ещё компактнее */
        .diagnostics .diagnostics-card .icon {
            width: 66px;
            height: 66px;
            flex: 0 0 66px;
            margin: 0 0.75rem 0 0;
            font-size: 28px;
        }

    /* заголовок hero чуть меньше, чтобы не давал горизонт-скролл */
    .diagnostics-hero h1 {
        font-size: clamp(1.375rem, 6vw, 2.25rem);
    }
}

/* --- 3. Читаемые переносы и защита от overflow --- */
.diagnostics-card {
    overflow: hidden;
}
    /* тень-hover не даёт скролл */

    .diagnostics-card .title,
    .diagnostics-card .description,
    .diagnostics-hero h1 {
        text-wrap: pretty; /* переносим строку по пробелу */
        overflow-wrap: break-word; /* в крайнем случае ломаем длинный URL */
        word-break: normal;
        hyphens: auto; /* русская / англ. гипенизация */
    }

    /* сами пиктограммы */
    .diagnostics-card .icon .bi-tools,
    .diagnostics-card .icon .bi-binoculars,
    .diagnostics-card .icon .bi-cpu,
    .diagnostics-card .icon .bi-stopwatch {
        font-size: 32px;
        line-height: 1;
    }

    /* уменьшаем круг-подложку этих иконок */
    .diagnostics-card .icon:has(.bi-tools),
    .diagnostics-card .icon:has(.bi-binoculars),
    .diagnostics-card .icon:has(.bi-cpu),
    .diagnostics-card .icon:has(.bi-stopwatch) {
        width: 66px;
        height: 66px;
        flex: 0 0 66px;
        margin-right: .75rem;
    }