/* ==========================================================
   «Что мы ремонтируем» — чертёжная сетка без скруглений
   В покое: тонкие линии, схемы тушью цвета --ink.
   При наведении: «масло» поднимается снизу плитки, схема
   загорается неоновым градиентом (лайм → зелёный → голубой,
   как рамка .btn-glow) и оживает: шток выдвигается, шестерни
   крутятся, золотник переключается.
   ВАЖНО: старые правила .service-grid > a, h3, i, small из темы удалить.
   ========================================================== */

.service-grid {
    --sg-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --sg-ink: var(--ink, #0d2026);
    --sg-line: var(--line, #dfe4e6);
    --sg-g1: var(--lime, #d6f23d);
    --sg-g2: #39e07a;
    --sg-g3: #00d4ff;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--sg-line);
    border-left: 1px solid var(--sg-line);
}

@media (max-width: 1180px) {
    .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .service-grid { grid-template-columns: 1fr; }
}

/* ---------- Плитка ---------- */

.service-grid .service-card {
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
    "icon  arrow"
    "title title";
    align-content: space-between;
    row-gap: 32px;
    min-height: 248px;
    padding: 28px;
    color: var(--sg-ink);
    text-decoration: none;
    background: none;
    border: 0;
    border-right: 1px solid var(--sg-line);
    border-bottom: 1px solid var(--sg-line);
    border-radius: 0;
    transform: none;
    transition: color 0.5s var(--sg-ease), box-shadow 0.5s var(--sg-ease);
}

/* «масло»: тёмная заливка поднимается снизу, по верхней кромке неоновая линия */
.service-grid .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
            linear-gradient(90deg, var(--sg-g1), var(--sg-g2), var(--sg-g3)) top / 100% 2px no-repeat,
            var(--sg-ink);
    transform: translateY(101%);
    transition: transform 0.6s var(--sg-ease);
}

/* ---------- Схема ---------- */

.service-grid .service-card__icon {
    grid-area: icon;
    align-self: start;
    width: 88px;
    height: 88px;
    transition: filter 0.6s var(--sg-ease);
}

.service-grid .service-card__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* линии схемы: в покое цвета --ink, при наведении неоновый градиент */
.sg-stop-a,
.sg-stop-b,
.sg-stop-c {
    stop-color: var(--sg-ink);
    transition: stop-color 0.6s var(--sg-ease);
}

.service-grid .service-card:hover .sg-stop-a,
.service-grid .service-card:focus-visible .sg-stop-a { stop-color: var(--sg-g1); }
.service-grid .service-card:hover .sg-stop-b,
.service-grid .service-card:focus-visible .sg-stop-b { stop-color: var(--sg-g2); }
.service-grid .service-card:hover .sg-stop-c,
.service-grid .service-card:focus-visible .sg-stop-c { stop-color: var(--sg-g3); }

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

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

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

/* ---------- Название ---------- */

.service-grid .service-card__title {
    grid-area: title;
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
    text-wrap: pretty;
    hyphens: manual;
    overflow-wrap: break-word;
}

/* ---------- Стрелка: квадрат с тонкой рамкой ---------- */

.service-grid .service-card__arrow {
    grid-area: arrow;
    align-self: start;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: inherit;
    border: 1px solid var(--sg-line);
    border-radius: 0;
    transition:
            background-color 0.4s var(--sg-ease),
            border-color 0.4s var(--sg-ease),
            color 0.4s var(--sg-ease);
}

.service-grid .service-card__arrow svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s var(--sg-ease);
}

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

.service-grid .service-card:hover,
.service-grid .service-card:focus-visible {
    z-index: 2;
    color: #fff;
    box-shadow:
            -5px 0 16px -4px rgba(214, 242, 61, 0.4),
            5px 0 16px -4px rgba(0, 212, 255, 0.45);
}

.service-grid .service-card:hover::before,
.service-grid .service-card:focus-visible::before {
    transform: translateY(0);
}

.service-grid .service-card:hover .service-card__icon,
.service-grid .service-card:focus-visible .service-card__icon {
    filter:
            drop-shadow(-3px 0 7px rgba(214, 242, 61, 0.45))
            drop-shadow(3px 0 7px rgba(0, 212, 255, 0.5));
}

.service-grid .service-card:hover .service-card__arrow,
.service-grid .service-card:focus-visible .service-card__arrow {
    color: var(--sg-ink);
    background: var(--sg-g1);
    border-color: var(--sg-g1);
}

.service-grid .service-card:hover .service-card__arrow svg,
.service-grid .service-card:focus-visible .service-card__arrow svg {
    transform: translate(2px, -2px);
}

.service-grid .service-card:focus-visible {
    outline: 2px solid var(--sg-g3);
    outline-offset: -4px;
}

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

.service-grid__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 28px;
}

/* ---------- Адаптив ---------- */

@media (max-width: 860px) {
    .service-grid .service-card { min-height: 204px; padding: 20px; row-gap: 24px; }
    .service-grid .service-card__icon { width: 72px; height: 72px; }
    .service-grid .service-card__title { font-size: 19px; }
    .service-grid .service-card__arrow { width: 36px; height: 36px; }
}

/* одна колонка: низкая плитка, без пустоты снизу */
@media (max-width: 520px) {
    .service-grid .service-card {
        min-height: auto;
        align-content: start;
        row-gap: 16px;
        padding: 18px 20px;
    }
    .service-grid .service-card__icon { width: 56px; height: 56px; }
    .service-grid .service-card__arrow { width: 36px; height: 36px; }
    .service-grid .service-card__title { font-size: 18px; }
}

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

@media (prefers-reduced-motion: reduce) {
    .service-grid .service-card,
    .service-grid .service-card::before,
    .service-grid .service-card__icon,
    .service-grid .service-card__arrow,
    .service-grid .service-card__arrow svg,
    .sg-piston,
    .sg-spool,
    .sg-stop-a,
    .sg-stop-b,
    .sg-stop-c {
        transition: none;
    }
    .service-grid .service-card .sg-spin,
    .service-grid .service-card .sg-gear,
    .service-grid .service-card .sg-flow {
        animation: none !important;
    }
}