/* =========================================================================
 * Attorna — 3-Column Features Section (RTL)
 * Design tokens inherited from variables.css
 * Sits directly below the cream (#fbf8f2) hero slider on a clean white ground
 * ========================================================================= */

.features-section {
    --fs-ink:        #1c1c1c;   /* title: dark luxury tone          */
    --fs-desc:       #666666;   /* description                      */
    --fs-gold:       #a38753;   /* CTA accent                       */
    --fs-gold-dark:  #8a7143;   /* CTA hover                        */
    --fs-bg:         #ffffff;
    --fs-line:       rgba(30, 28, 24, 0.10);
    --fs-shadow:     0 24px 48px -28px rgba(23, 20, 14, 0.30);

    background: var(--fs-bg);
    color: var(--fs-ink);
    direction: rtl;
    text-align: right;
    padding: 60px 0;
    font-family: var(--font-family-base, 'IRANSans', Tahoma, sans-serif);
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
}

.features-container {
    max-width: var(--container-max-width, 1170px);
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* ---------- Card ---------- */
.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 12px;
    border-radius: var(--border-radius-md, 4px);
    transition: background-color .3s ease;
}

/* Hover lift on the whole card + underline the icon ring */
.feature-card:hover {
    background: rgba(163, 135, 83, 0.04);
}

/* ---------- Icon ---------- */
.feature-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, rgba(163, 135, 83, 0.10), rgba(163, 135, 83, 0.02) 70%);
    border: 1px solid var(--fs-line);
    transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .35s ease;
    will-change: transform;
}

.feature-card__icon {
    width: 48px;
    height: 48px;
    max-width: 52px;
    max-height: 52px;
    object-fit: contain;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.feature-card__icon--placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(163,135,83,.22), rgba(41,59,109,.10));
}

.feature-card:hover .feature-card__icon-wrap {
    transform: translateY(-6px);
    border-color: rgba(163, 135, 83, 0.45);
    box-shadow: 0 18px 30px -18px rgba(163, 135, 83, 0.55);
}

.feature-card:hover .feature-card__icon {
    transform: translateY(-4px) scale(1.06);
}

/* ---------- Title ---------- */
.feature-card__title {
    margin: 0 0 14px;
    font-family: var(--font-family-heading, 'IRANSans', Tahoma, sans-serif);
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.2px;
    line-height: 1.7;
    color: var(--fs-ink);
    text-transform: none;            /* Persian: no uppercase; kept semantic */
}

/* ---------- Description ---------- */
.feature-card__desc {
    margin: 0 0 22px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--fs-desc);
    max-width: 18em;
}

/* ---------- CTA Link ---------- */
.feature-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--fs-gold);
    font-size: 0.98rem;
    font-weight: var(--font-weight-medium, 500);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: right bottom;
    transition: color .25s ease, background-size .3s ease;
}

.feature-card__cta:hover {
    color: var(--fs-gold-dark);
    text-decoration: none;
    background-size: 100% 1.5px;
}

/* =========================================================================
 * Responsive breakpoints
 * ========================================================================= */

/* Tablet: 768px – 991px → balanced 2-column grid, last card spans centered */
@media (max-width: 991px) {
    .features-section { padding: 56px 0; }

    .features-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px;
    }

    .feature-card {
        align-items: flex-start;
        text-align: right;
        padding: 6px 4px;
    }

    .feature-card__icon-wrap { margin-bottom: 18px; }
    .feature-card__title    { margin-bottom: 12px; }
    .feature-card__desc     { max-width: none; margin-bottom: 20px; }

    /* Center the final (odd) card so the 2-column layout stays balanced */
    .feature-card:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 440px;
    }
    .feature-card:last-child .feature-card__desc { max-width: 18em; }
}

/* Mobile: < 768px → single column, centered icons + text */
@media (max-width: 767px) {
    .features-section { padding: 48px 0; }

    .features-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .feature-card,
    .feature-card:last-child {
        align-items: center;
        text-align: center;
        max-width: none;
        padding: 4px 0;
    }

    .feature-card__icon-wrap { margin-bottom: 18px; }
    .feature-card__title    { margin-bottom: 10px; font-size: 1.1rem; }
    .feature-card__desc     { max-width: 20em; margin: 0 auto 22px; }
}

/* Respect reduced-motion: disable the hover micro-animations */
@media (prefers-reduced-motion: reduce) {
    .feature-card,
    .feature-card__icon-wrap,
    .feature-card__icon,
    .feature-card__cta {
        transition: none;
    }
    .feature-card:hover .feature-card__icon-wrap,
    .feature-card:hover .feature-card__icon {
        transform: none;
    }
}