/**
 * Feature Sections Styles
 * Alternating image left/right via CSS nth-child
 */

/* ── Section base ────────────────────────────────────────────────────────── */
.feature {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

/* ── Inner grid ──────────────────────────────────────────────────────────── */
.feature__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
    align-items: center;
}

/* Even-numbered features: image left, text right */
.feature:nth-child(even) .feature__inner {
    direction: rtl;
}

.feature:nth-child(even) .feature__inner > * {
    direction: ltr;
}

/* ── Text content ────────────────────────────────────────────────────────── */
.feature__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.feature__number {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
}

.feature__title {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}

.feature__desc {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    max-width: 480px;
}

/* ── Media side ──────────────────────────────────────────────────────────── */
.feature__media {
    position: relative;
}

.feature__img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.feature__img.rk-placeholder-img {
    aspect-ratio: 4 / 3;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .feature__inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    /* Reset RTL trick on mobile */
    .feature:nth-child(even) .feature__inner {
        direction: ltr;
    }

    .feature__media {
        order: -1;
    }

    .feature__desc {
        max-width: 100%;
    }

    .feature {
        padding-top: var(--section-padding-mobile);
        padding-bottom: var(--section-padding-mobile);
    }
}