/* =============================================
   MFin Pillars – Grid Cards with Modals
   ============================================= */

.mfin-pillars {
    padding: 60px 0;
}

.mfin-pillars__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 64px;
}

/* ── Grid ────────────────────────────────────── */

.mfin-pillars__grid {
    display: grid;
    gap: 24px;
}

.mfin-pillars__grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.mfin-pillars__grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

/* ── Card ────────────────────────────────────── */

.mfin-pillars__card {
    background: #f0f3f6;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
}

.mfin-pillars__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #0068a5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.mfin-pillars__icon i {
    color: #fff;
    font-size: 22px;
}

.mfin-pillars__title {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.3;
    margin: 0 0 12px;
}

.mfin-pillars__preview {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 20px;
    flex: 1;
}

/* ── Button ──────────────────────────────────── */

.mfin-pillars__btn {
    background: #0068a5 !important;
    background-color: #0068a5 !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 22px !important;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    border-radius: 3px;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease;
    text-decoration: none !important;
    line-height: 1.4;
    margin: 0;
    min-width: 0;
    min-height: 0;
}

.mfin-pillars__btn:hover,
.mfin-pillars__btn:focus,
.mfin-pillars__btn:active {
    background: #005a8c !important;
    background-color: #005a8c !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* ── Overlay / Modal ─────────────────────────── */

.mfin-pillars__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    transition: background 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}

.mfin-pillars__overlay.is-open {
    display: flex;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: mfin-overlay-in 0.35s ease forwards;
}

@keyframes mfin-overlay-in {
    from { background: rgba(0, 0, 0, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
    to   { background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}

.mfin-pillars__modal {
    background: #fff;
    border-radius: 8px;
    max-width: 640px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 40px;
    position: relative;
    animation: mfin-modal-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mfin-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.mfin-pillars__modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none !important;
    border: none !important;
    font-size: 28px;
    cursor: pointer;
    color: #888;
    line-height: 1;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.mfin-pillars__modal-close:hover {
    color: #333;
}

.mfin-pillars__modal-title {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 16px;
}

.mfin-pillars__modal-body p {
    color: #444;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 12px;
}

.mfin-pillars__modal-body p:last-child {
    margin-bottom: 0;
}

.mfin-pillars__modal-bullets {
    margin: 0 0 12px;
    padding: 0 0 0 20px;
    list-style: disc;
}

.mfin-pillars__modal-bullets li {
    color: #444;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 8px;
}

.mfin-pillars__modal-bullets li:last-child {
    margin-bottom: 0;
}

.mfin-pillars__modal-callout {
    color: #0068a5 !important;
    font-weight: 700;
}

/* ── Responsive ──────────────────────────────── */

@media (max-width: 1024px) {
    .mfin-pillars__inner {
        padding: 0 40px;
    }

    .mfin-pillars__grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mfin-pillars__inner {
        padding: 0 24px;
    }

    .mfin-pillars__grid--3col,
    .mfin-pillars__grid--2col {
        grid-template-columns: 1fr;
    }

    .mfin-pillars__modal {
        padding: 28px;
    }
}