/**
 * EBA Feature Grid widget
 * Defaults match reference vercel.app cards:
 *  - Card: bg #F8F6F1 ivory, 1px solid #E0DAD0 border, 12px radius, p-5/p-6 padding
 *  - Hover: border gold/30, soft shadow
 *  - Icon: 24x24 svg inside 48x48 tinted gold box, 12px radius
 *  - Title: Cormorant Garamond 16px/18px font-semibold 600 #0F1729
 *  - Description: Inter 12px/14px regular #525E7A
 * No !important — Elementor Style-tab controls win cleanly.
 */

.eba-wrapper.eba-feat { padding: clamp(3rem, 6vw, 5rem) 0; }

.eba-feat__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.eba-feat__title {
    font-family: var(--eba-font-heading);
    font-size: clamp(1.875rem, 3vw + 0.5rem, 2.75rem);
    color: var(--eba-charcoal);
    margin-bottom: var(--eba-space-3);
    font-weight: 700;
    line-height: 1.15;
}

.eba-feat__subtitle {
    color: var(--eba-text-muted);
    font-size: var(--eba-text-lg);
    line-height: 1.6;
    margin: 0;
}

.eba-feat__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) { .eba-feat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .eba-feat__grid { grid-template-columns: 1fr; } }

.eba-feat__item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    background: #f8f6f1;
    border: 1px solid #e0dad0;
}
@media (min-width: 768px) {
    .eba-feat__item { padding: 24px; }
}

.eba-feat--cards .eba-feat__item:hover,
a.eba-feat__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 18px -4px rgba(15, 23, 42, 0.06);
    border-color: rgba(212, 162, 76, 0.3);
}

.eba-feat--icon-top .eba-feat__item {
    text-align: center;
    align-items: center;
}

/* Icon — 48x48 tinted gold box with 24x24 svg inside (matches reference) */
.eba-feat__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(212, 162, 76, 0.18);
    color: #b58834;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.eba-feat__icon svg {
    width: 24px;
    height: 24px;
    color: currentColor;
    stroke: currentColor;
}

/* Solid-fill icons (no fill="none") use fill, outline icons keep stroke */
.eba-feat__icon svg:not([fill="none"]),
.eba-feat__icon svg:not([fill="none"]) path,
.eba-feat__icon svg:not([fill="none"]) g,
.eba-feat__icon svg:not([fill="none"]) circle,
.eba-feat__icon svg:not([fill="none"]) rect,
.eba-feat__icon svg:not([fill="none"]) polygon,
.eba-feat__icon svg:not([fill="none"]) polyline,
.eba-feat__icon svg:not([fill="none"]) line,
.eba-feat__icon svg:not([fill="none"]) ellipse {
    fill: currentColor;
}
.eba-feat__icon svg[fill="none"] {
    fill: none;
    stroke: currentColor;
}

.eba-feat__icon i,
.eba-feat__icon i::before {
    color: currentColor;
    font-size: 24px;
}

/* Title — Cormorant Garamond 18px (16px mobile) semibold #0F1729 */
.eba-feat__item-title {
    font-family: var(--eba-font-heading);
    font-size: 1rem;            /* 16px mobile */
    color: #0f1729;
    margin: 0 0 8px;
    font-weight: 600;
    line-height: 1.3;
}
@media (min-width: 768px) {
    .eba-feat__item-title { font-size: 1.125rem; }   /* 18px desktop */
}

/* Description — Inter 14px (12px mobile) regular #525E7A */
.eba-feat__item-desc {
    font-family: var(--eba-font-body), 'Inter', sans-serif;
    color: #525e7a;
    font-size: 0.75rem;         /* 12px mobile */
    line-height: 1.55;
    margin: 0;
    font-weight: 400;
}
@media (min-width: 768px) {
    .eba-feat__item-desc { font-size: 0.875rem; }    /* 14px desktop */
}