.mff-about-tabs {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--mff-about-gap, 70px);
    padding-block: 20px;
    direction: rtl
}

.mff-about-tabs--image-left {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr)
}

.mff-about-tabs--image-left .mff-about-tabs__media {
    order: 2
}

.mff-about-tabs__media {
    min-width: 0
}

.mff-about-tabs__media img,
.mff-about-tabs__placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 28px;
    display: block
}

.mff-about-tabs__placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #dff2de, #eef7fa);
    border: 1px dashed rgba(26, 103, 136, .2);
    color: #1a6788;
    font-weight: 800
}

.mff-about-tabs__content {
    min-width: 0
}

.mff-about-tabs__eyebrow {
    display: inline-block;
    color: #389e87;
    font-weight: 800;
    margin-bottom: 8px
}

.mff-about-tabs__content h2 {
    margin: 0 0 12px;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.15;
    color: #1f1f1f
}

.mff-about-tabs__intro {
    margin: 0 0 24px;
    color: #617078;
    line-height: 1.9
}

.mff-tabs__nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(26, 103, 136, .12);
    padding-bottom: 6px
}

.mff-tabs__tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: #6b777d;
    padding: 11px 16px;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    cursor: pointer
}

.mff-tabs__tab.is-active {
    background: #389e87;
    color: #fff
}

.mff-tabs__panel {
    padding-top: 20px;
    color: #52616b;
    line-height: 2
}

.mff-tabs__panel p {
    margin: 0 0 12px
}

.mff-tabs__panel[hidden] {
    display: none
}

@media(max-width:850px) {

    .mff-about-tabs,
    .mff-about-tabs--image-left {
        grid-template-columns: 1fr;
        gap: var(--mff-about-mobile-gap, 30px)
    }

    .mff-about-tabs--image-left .mff-about-tabs__media {
        order: 0
    }

    .mff-about-tabs--mobile-image-first .mff-about-tabs__media {
        order: -1
    }

    .mff-about-tabs__content {
        padding-inline: var(--mff-about-mobile-padding, 22px)
    }

    .mff-about-tabs__media img,
    .mff-about-tabs__placeholder {
        border-radius: 22px
    }

    .mff-about-tabs__content h2 {
        font-size: clamp(30px, 8vw, 42px)
    }

    .mff-tabs__nav {
        overflow: auto;
        flex-wrap: nowrap;
        scrollbar-width: none
    }

    .mff-tabs__tab {
        white-space: nowrap;
        flex: none
    }

    .mff-tabs__panel {
        font-size: 15px;
        line-height: 1.9
    }
}

/* V5 independent element colors */
.mff-about-tabs__eyebrow {
    color: var(--mff-about-eyebrow, #389E87)
}

.mff-about-tabs__content h2 {
    color: var(--mff-about-title, #1f1f1f)
}

.mff-about-tabs__intro {
    color: var(--mff-about-body, #617078)
}

.mff-tabs__tab {
    background: var(--mff-tab-bg, #fff);
    color: var(--mff-tab-text, #6b777d)
}

.mff-tabs__tab:hover {
    background: var(--mff-tab-hover-bg, #DFF2DE) !important;
    color: var(--mff-tab-text, #6b777d) !important
}

.mff-tabs__tab.is-active {
    background: var(--mff-tab-active-bg, #389E87);
    color: var(--mff-tab-active-text, #fff)
}

.mff-tabs__panel {
    color: var(--mff-tab-panel, #52616b)
}

/* V9 deterministic color mapping */
.mff-about-tabs .mff-about-tabs__eyebrow {
    color: var(--mff-about-eyebrow) !important
}

.mff-about-tabs .mff-about-tabs__content h2 {
    color: var(--mff-about-title) !important
}

.mff-about-tabs .mff-about-tabs__intro {
    color: var(--mff-about-body) !important
}

.mff-about-tabs .mff-tabs__tab {
    background: var(--mff-tab-bg) !important;
    color: var(--mff-tab-text) !important
}

.mff-about-tabs .mff-tabs__tab:hover {
    background: var(--mff-tab-hover-bg) !important
}

.mff-about-tabs .mff-tabs__tab.is-active {
    background: var(--mff-tab-active-bg) !important;
    color: var(--mff-tab-active-text) !important
}

.mff-about-tabs .mff-tabs__panel {
    color: var(--mff-tab-panel) !important
}

/* قوائم داخل محتوى التبويب */
.mff-tabs__panel ul,
.mff-tabs__panel ol {
    margin: 0 0 14px;
    padding-inline-start: 24px;
    padding-inline-end: 0
}

.mff-tabs__panel ul {
    list-style: disc
}

.mff-tabs__panel ol {
    list-style: decimal
}

.mff-tabs__panel li {
    margin: 0 0 8px;
    line-height: 1.9
}

.mff-tabs__panel li::marker {
    color: var(--mff-tab-active-bg, #389E87);
    font-weight: 800
}

.mff-tabs__panel ul:last-child,
.mff-tabs__panel ol:last-child {
    margin-bottom: 0
}

/* ثبات الارتفاع: كل المحتويات في نفس الخلية، فيأخذ القسم ارتفاع أطول تبويب ولا تتحرك الصورة عند التنقل */
.mff-about-tabs .mff-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr)
}

.mff-about-tabs .mff-tabs__nav {
    grid-row: 1;
    grid-column: 1
}

.mff-about-tabs .mff-tabs__panel {
    grid-row: 2;
    grid-column: 1;
    opacity: 1;
    transition: opacity .25s ease
}

.mff-about-tabs .mff-tabs__panel[hidden] {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none
}

/* محاذاة أعلى الصورة مع أعلى المحتوى (كلمة المقدمة) */
.mff-about-tabs {
    align-items: start
}

.mff-about-tabs__media {
    align-self: start
}

.mff-about-tabs__eyebrow {
    line-height: 1.4;
    margin-top: 0
}