/* ==========================================================================
   KE Feature List Widget
   ========================================================================== */

.ke-feature-list {
    display: flex;
    flex-direction: column;
}

.ke-feature-list--list {
    flex-direction: column;
}

.ke-feature-list--inline {
    flex-direction: row;
    flex-wrap: wrap;
}

.ke-feature-list--grid {
    display: grid;
}

.ke-feature {
    position: relative;
    display: flex;
    transition: var(--ke-transition);
}

.ke-feature--icon-left {
    flex-direction: row;
    align-items: flex-start;
}

.ke-feature--icon-right {
    flex-direction: row-reverse;
    text-align: right;
}

.ke-feature--icon-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ke-feature__icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--ke-transition);
}

.ke-feature--shape-circle .ke-feature__icon-wrapper {
    border-radius: 50%;
}

.ke-feature--shape-square .ke-feature__icon-wrapper {
    border-radius: 0;
}

.ke-feature--shape-rounded .ke-feature__icon-wrapper {
    border-radius: var(--ke-radius-lg);
}

.ke-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ke-feature__icon svg {
    fill: currentColor;
}

.ke-feature__number {
    font-weight: 700;
}

.ke-feature__content {
    flex: 1;
}

.ke-feature__title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit; /* Theme-h3-Farbe nicht erben, damit Widget-Style-Control greift */
}

.ke-feature__description {
    margin: 0;
    color: var(--ke-text-light);
    line-height: 1.6;
}

.ke-feature__link {
    display: flex;
    color: inherit;
    text-decoration: none;
}

.ke-feature__link:hover .ke-feature__title {
    color: var(--ke-primary);
}

/* Connector Line */
.ke-feature--has-connector::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 30px;
    width: 2px;
    height: calc(100% + 20px);
    background: var(--ke-border);
}

.ke-feature--connector-dashed::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--ke-border) 0,
        var(--ke-border) 5px,
        transparent 5px,
        transparent 10px
    );
}

.ke-feature--connector-dotted::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--ke-border) 0,
        var(--ke-border) 3px,
        transparent 3px,
        transparent 8px
    );
}

@media (max-width: 767px) {
    .ke-feature-list--inline {
        flex-direction: column;
    }

    .ke-feature-list--grid {
        grid-template-columns: 1fr !important;
    }
}