/* ==========================================================
   Секция «Ремонт гидроагрегатов» — тёмная панель с неоновыми рамками
   Фишка: свет по рамке идёт за курсором, как луч фонарика по металлу.
   Цвета те же, что у кнопки .btn-glow.
   ========================================================== */

@property --sweep {
    syntax: "<angle>";
    inherits: false;
    initial-value: 180deg;
}

@property --spot {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.soft.repair {
    --r-bg: var(--ink, #0d2026);        /* фон секции = --ink сайта */
    --r-fill: #112a31;                  /* заливка плитки (см. @supports внизу) */
    --r-core: #091a1f;                  /* центр манометра */
    --r-radius: 14px;                   /* у кнопки .btn-glow — 4px */
    --r-text: #eef6f7;
    --r-muted: rgba(238, 246, 247, 0.62);
    --r-track: rgba(255, 255, 255, 0.14);
    --r-g1: var(--lime, #d6f23d);   /* --lime сайта */
    --r-g2: #39e07a;
    --r-g3: #00d4ff;

    background: var(--r-bg);
    color: var(--r-text);
}

/* ---------- Заголовок ---------- */

.repair .title {
    max-width: 680px;
    margin: 0 0 52px;
    text-align: left;
}

.repair .title h2 {
    margin: 0 0 14px;
    font-size: clamp(28px, 4.4vw, 46px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: #fff;
}

.repair .title p {
    max-width: 56ch;
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--r-muted);
}

/* ---------- Сетка: 4 → 3 → 2 → 1 колонки ---------- */

/* сбрасываем серую подложку и рамки, которые тема даёт блоку .simple */
.soft.repair .simple {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 1180px) {
    .soft.repair .simple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .soft.repair .simple { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media (max-width: 520px) {
    .soft.repair .simple { grid-template-columns: 1fr; }
}

/* ---------- Плитка: манометр сверху, название снизу ---------- */

.repair .simple-item {
    --mx: 50%;
    --my: 50%;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    min-height: 170px;
    padding: 22px;
    color: var(--r-text);
    text-decoration: none;
    border-radius: var(--r-radius);

    /* заливка + мягкая подсветка внутри у курсора */
    background:
            radial-gradient(
                    300px circle at var(--mx) var(--my),
                    rgba(57, 224, 122, calc(var(--spot) * 0.22)),
                    transparent 70%
            ),
            var(--r-fill);

    /* слабое «дежурное» свечение, как у кнопки */
    box-shadow:
            -4px 0 14px -4px rgba(214, 242, 61, 0.22),
            4px 0 14px -4px rgba(0, 212, 255, 0.26);

    transition: --spot 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

/* два кольца по краю: ::before — тусклая рамка, ::after — луч */
.repair .simple-item::before,
.repair .simple-item::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;

    -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
            linear-gradient(#000 0 0) content-box exclude,
            linear-gradient(#000 0 0);
}

.repair .simple-item::before {
    background: linear-gradient(
            90deg,
            rgba(214, 242, 61, 0.55),
            rgba(57, 224, 122, 0.45),
            rgba(0, 212, 255, 0.6)
    );
}

.repair .simple-item::after {
    background: radial-gradient(
            240px circle at var(--mx) var(--my),
            #fff 0,
            var(--r-g1) 14%,
            var(--r-g2) 42%,
            var(--r-g3) 68%,
            transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.repair .simple-item__title {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: manual;
}

/* ---------- Манометр ---------- */

.repair .simple-item__gauge {
    --sweep: 180deg;

    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    color: #fff;

    background:
            conic-gradient(
                    from 225deg,
                    var(--r-g1) 0deg,
                    var(--r-g2) calc(var(--sweep) / 2),
                    var(--r-g3) var(--sweep),
                    transparent var(--sweep)
            ),
            conic-gradient(from 225deg, var(--r-track) 270deg, transparent 0);

    transition: --sweep 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.repair .simple-item__gauge::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--r-core);
}

/* схема ремонта внутри манометра (градиент задаёт сама иконка) */
.repair .simple-item__gauge svg {
    position: relative;
    width: 54px;
    height: 54px;
    overflow: visible;
    stroke-width: 2;
}

/* градиент линий как у рамки кнопки: лайм, зелёный, голубой */
.repair .sg-stop-a { stop-color: var(--r-g1); }
.repair .sg-stop-b { stop-color: var(--r-g2); }
.repair .sg-stop-c { stop-color: var(--r-g3); }
.repair .sg-stop-a,
.repair .sg-stop-b,
.repair .sg-stop-c {
    transition: stop-color 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}

/* подвижные части схем */
.repair .sg-piston,
.repair .sg-spool {
    transition: transform 0.8s cubic-bezier(0.32, 0.72, 0, 1);
}
.repair .sg-spin,
.repair .sg-gear {
    transform-box: fill-box;
    transform-origin: center;
}
.repair .sg-flow {
    stroke-dasharray: 3 3;
}

/* ---------- Наведение и фокус ---------- */

.repair .simple-item:hover,
.repair .simple-item:focus-visible {
    --spot: 1;
    box-shadow:
            -6px 0 24px -4px rgba(214, 242, 61, 0.42),
            0 0 20px -6px rgba(57, 224, 122, 0.4),
            6px 0 24px -4px rgba(0, 212, 255, 0.5);
}

.repair .simple-item:hover::after,
.repair .simple-item:focus-visible::after {
    opacity: 1;
}

.repair .simple-item:hover .simple-item__gauge,
.repair .simple-item:focus-visible .simple-item__gauge {
    --sweep: 270deg;
}

.repair .simple-item:hover .sg-stop-a,
.repair .simple-item:focus-visible .sg-stop-a { stop-color: var(--r-g3); }
.repair .simple-item:hover .sg-stop-c,
.repair .simple-item:focus-visible .sg-stop-c { stop-color: var(--r-g1); }

.repair .simple-item:hover .sg-piston,
.repair .simple-item:focus-visible .sg-piston { transform: translateX(7px); }
.repair .simple-item:hover .sg-spool,
.repair .simple-item:focus-visible .sg-spool { transform: translateX(-14px); }
.repair .simple-item:hover .sg-spin,
.repair .simple-item:focus-visible .sg-spin { animation: r-rot 6s linear infinite; }
.repair .simple-item:hover .sg-gear-a,
.repair .simple-item:focus-visible .sg-gear-a { animation: r-rot 5s linear infinite; }
.repair .simple-item:hover .sg-gear-b,
.repair .simple-item:focus-visible .sg-gear-b { animation: r-rot 3.6s linear infinite reverse; }
.repair .simple-item:hover .sg-flow,
.repair .simple-item:focus-visible .sg-flow { animation: r-flow 0.9s linear infinite; }

@keyframes r-rot  { to { transform: rotate(360deg); } }
@keyframes r-flow { to { stroke-dashoffset: -6; } }

.repair .simple-item:focus-visible {
    outline: 2px solid var(--r-g3);
    outline-offset: 4px;
}

.repair .simple-item:active {
    transform: scale(0.985);
}

/* ---------- Пустой список ---------- */

.repair__empty {
    margin: 0;
    color: var(--r-muted);
}

/* ---------- Планшеты и телефоны ---------- */

@media (max-width: 860px) {
    .repair .title { margin-bottom: 36px; }
    .repair .title p { font-size: 16px; }
    .repair .simple-item { min-height: 150px; padding: 18px; gap: 22px; }
    .repair .simple-item__title { font-size: 16px; }
    .repair .simple-item__gauge { width: 72px; height: 72px; }
    .repair .simple-item__gauge svg { width: 46px; height: 46px; }
}

/* одна колонка: плитка в строку, манометр слева */
@media (max-width: 520px) {
    .repair .simple-item {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        min-height: 80px;
        padding: 14px 16px;
    }
    .repair .simple-item__gauge { width: 60px; height: 60px; }
    .repair .simple-item__gauge::before { inset: 5px; }
    .repair .simple-item__gauge svg { width: 38px; height: 38px; }
}

/* ---------- Без анимации ---------- */

@media (prefers-reduced-motion: reduce) {
    .repair .simple-item,
    .repair .simple-item::after,
    .repair .simple-item__gauge,
    .repair .sg-piston,
    .repair .sg-spool,
    .repair .sg-stop-a,
    .repair .sg-stop-b,
    .repair .sg-stop-c {
        transition: none;
    }
    .repair .simple-item .sg-spin,
    .repair .simple-item .sg-gear,
    .repair .simple-item .sg-flow {
        animation: none !important;
    }
}

@supports (color: color-mix(in srgb, #000, #fff)) {
    .soft.repair {
        --r-fill: color-mix(in srgb, var(--ink, #0d2026) 92%, #fff);
        --r-core: color-mix(in srgb, var(--ink, #0d2026) 65%, #000);
    }
}