/* ==========================================================================
   مجمع الفارس التجاري — «numbers» section  (Deliverable 2)
   Section «مجمع الفارس بالأرقام». Loads AFTER elfares.css AND elfares-ui.css.
   Section-specific rules only, namespaced `nmb-` (no primitives duplicated).
   Dark punch band: the aerial photo behind a rich navy wash, with the stats
   sitting in a single frosted-glass panel of hairline-divided cells.
   RTL-first — logical properties only.
   ========================================================================== */

/* ---------- Band ---------- */
.nmb-section {
    --nmb-hair: rgba(255, 255, 255, .12);
    isolation: isolate;
    background-color: var(--title-dark);   /* fallback behind the aerial photo */
    background-size: cover;
    background-position: center;
    padding-block: clamp(64px, 8.5vw, 120px);
}

/* aerial photo readability — navy gradient wash + a soft cyan corner light */
.nmb-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 120% at 82% 6%, rgba(0, 165, 229, .22) 0%, rgba(0, 165, 229, 0) 44%),
        linear-gradient(122deg, rgba(16, 38, 63, .95) 0%, rgba(16, 38, 63, .88) 48%, rgba(46, 96, 158, .86) 100%);
}
/* faint cyan glow that anchors the head */
.nmb-glow {
    position: absolute;
    inset-block-start: -12%;
    inset-inline: 0;
    margin-inline: auto;
    z-index: 0;
    width: min(760px, 84%);
    height: 360px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 165, 229, .26) 0%, rgba(0, 165, 229, 0) 70%);
    filter: blur(10px);
    opacity: .7;
}
.nmb-inner {
    position: relative;
    z-index: 1;
}

/* ---------- Head accent rule (span variant of .elx-divider--accent) ---------- */
.nmb-head__rule {
    display: block;
    margin-inline: auto;
    margin-top: var(--elx-5);
}

/* ---------- Stats panel: one frosted glass board, hairline-split cells ---------- */
.nmb-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;                                  /* the 1px gaps read as hairlines */
    background: var(--nmb-hair);
    border: 1px solid var(--nmb-hair);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
@media (min-width: 768px)  { .nmb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .nmb-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Cell ---------- */
.nmb-cell {
    position: relative;
    background: rgba(16, 38, 63, .55);
    transition: background .4s var(--elx-ease);
}
.nmb-cell:hover { background: rgba(0, 165, 229, .15); }

/* cyan top accent rule wipes in on hover */
.nmb-cell::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--theme-color), var(--theme-color2));
    transform: scaleX(0);
    transition: transform .4s var(--elx-ease);
}
.nmb-cell:hover::after { transform: scaleX(1); }

.nmb-cell__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(26px, 3vw, 40px) clamp(12px, 1.6vw, 20px);
}

/* ---------- Icon ---------- */
.nmb-cell__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--elx-4);
    border-radius: 16px;
    font-size: 24px;
    color: var(--theme-color2);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--nmb-hair);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .4s var(--elx-ease), background .4s var(--elx-ease),
                color .4s var(--elx-ease), border-color .4s var(--elx-ease),
                box-shadow .4s var(--elx-ease);
}
.nmb-cell:hover .nmb-cell__icon {
    transform: translateY(-5px);
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(0, 165, 229, .32);
}

/* ---------- Number + suffixes (builds on .elx-stat__num) ---------- */
.nmb-cell__num {
    color: #fff;
    gap: 2px;
    font-size: clamp(1.8rem, 2.4vw, 2.5rem);
}
.nmb-cell__num .counter-number { font-variant-numeric: tabular-nums; }
.nmb-cell__suf,
.nmb-cell__unit {
    color: var(--theme-color2);
    font-weight: 700;
}
.nmb-cell__suf  { font-size: .5em; }
.nmb-cell__unit { font-size: .46em; }

/* ---------- Label ---------- */
.nmb-cell__label {
    margin-top: var(--elx-3);
    max-width: 18ch;
    color: var(--elx-on-dark-soft);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5;
}

/* ---------- Small screens ---------- */
@media (max-width: 575px) {
    .nmb-cell__inner { padding: 24px 10px; }
    .nmb-cell__icon  { width: 48px; height: 48px; font-size: 20px; margin-bottom: var(--elx-3); }
    .nmb-grid        { border-radius: 18px; }
}