/* -------------------------------------------------------------------------
 * Service Card
 * ------------------------------------------------------------------------- */

.ket-service-card {
    height: 100%;

    padding: clamp(24px, 3vw, 36px);

    display: flex;
    flex-direction: column;
    gap: var(--km-space-lg);

    background: var(--km-surface);

    border: 1px solid var(--km-border);
    border-radius: var(--km-radius-lg);

    box-shadow: var(--km-shadow-sm);

    transition:
        transform var(--km-transition),
        box-shadow var(--km-transition),
        border-color var(--km-transition);

    min-width: 0;
}

.ket-service-card:hover {
    transform: translateY(-4px);

    border-color: var(--km-primary);

    box-shadow: var(--km-shadow);
}

/* -------------------------------------------------------------------------
 * Icon
 * ------------------------------------------------------------------------- */

.ket-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: var(--km-space-sm);

    border-radius: var(--km-radius);

    background: color-mix(
        in srgb,
        var(--km-primary) 10%,
        transparent
    );

    color: var(--km-primary);

    font-size: 2rem;

    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------- */

.ket-service-card h3 {
    margin: 0;

    color: var(--km-text-light);

    font-size: clamp(1.5rem, 2vw, 1.85rem);
    font-weight: 700;

    line-height: 1.1;
    letter-spacing: -0.03em;

    overflow-wrap: break-word;
}

.ket-service-card__subtitle {
    margin: calc(var(--km-space-xs) * -1) 0 0;

    color: var(--km-primary);

    font-size: 1rem;
    font-weight: 600;

    line-height: 1.55;
}

.ket-service-card__intro {
    margin: 0;

    color: var(--km-text-light);

    font-size: 1rem;
    font-weight: 500;

    line-height: 1.7;
}

.ket-service-card__text {
    margin: 0;

    color: var(--km-muted);

    font-size: 0.975rem;
    line-height: 1.75;
}


/* -------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {

    .ket-service-card {
        padding: 28px;
    }

    .ket-service-card h3 {
        font-size: 1.5rem;
    }

    .ket-service-icon {
        width: 64px;
        height: 64px;

        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {

    .ket-service-card {
        padding: 24px;

        gap: var(--km-space-md);
    }

    .ket-service-card__section li {
        font-size: 0.93rem;
    }
}