/* ============================================
   SERVICE CARDS — KudrovoCity
   Карточки услуг/разделов на главной и других страницах.
   Использует переменные темы из theme.css.
   ============================================ */

/* Обёртка-ссылка карточки. Сбрасываем наследуемые стили <a>,
   но сохраняем focus-индикатор через :focus-visible. */
.service-card-link {
    all: unset;
    cursor: pointer;
    display: block;
    height: 100%;
}

.service-card-link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Базовая карточка */
.service-card-wrapper {
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Декоративный градиент-подсветка при hover */
.service-card-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(17, 139, 138, 0.06) 0%,
        rgba(252, 108, 101, 0.06) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Hover: лёгкий подъём + плавное усиление тени.
   Убрана избыточная анимация иконки (scale + rotate). */
.service-card-link:hover .service-card-wrapper {
    box-shadow: 0 12px 24px rgba(17, 139, 138, 0.15);
    transform: translateY(-4px);
}

.service-card-link:hover .service-card-wrapper::before {
    opacity: 1;
}

/* Иконка сервиса — базовый размер и цвет */
.service-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--accent-primary);
    transition: background-color 0.3s ease;
}

.service-icon i {
    font-size: 1.5rem;
    color: #fff;
}

/* Акцентная иконка (IsAccent = true) — коралл */
.service-icon--accent {
    background-color: var(--accent-secondary);
}

/* Dark theme корректировки */
[data-theme="dark"] .service-card-link:hover .service-card-wrapper {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}