/* ==========================================================================
   مجمع الفارس التجاري — elx-* PRIMITIVE KIT  (Deliverable 1)
   Loaded AFTER elfares.css. A cohesive, premium, RTL-first component system
   for every section BELOW the locked hero. Relies only on the brand vars
   already defined in elfares.css :root (--theme-color, --theme-color2,
   --title-color, --title-dark, --body-color, --gray-color, --smoke-color).
   Do NOT restyle the header/hero/.elfares-* / .elf-* classes here.
   All classes are namespaced `elx-`.
   ========================================================================== */

/* ---------- 0. Kit-local design tokens (namespaced, additive) ---------- */
:root {
    /* spacing scale (8px base) */
    --elx-1: 4px;   --elx-2: 8px;   --elx-3: 12px;  --elx-4: 16px;
    --elx-5: 24px;  --elx-6: 32px;  --elx-7: 40px;  --elx-8: 56px;
    --elx-9: 72px;  --elx-10: 96px;

    --elx-radius:      14px;   /* cards / media */
    --elx-radius-sm:    8px;   /* chips / small tiles */
    --elx-radius-btn:   4px;   /* buttons (matches hero language) */
    --elx-radius-pill: 999px;

    /* soft, navy-tinted elevation — depth via shadow, not outline */
    --elx-shadow:    0 10px 30px rgba(16, 38, 63, .07);
    --elx-shadow-md: 0 18px 44px rgba(16, 38, 63, .12);
    --elx-shadow-lg: 0 30px 64px rgba(46, 96, 158, .18);

    --elx-ease: cubic-bezier(.2, .7, .2, 1);

    /* light-on-dark text ramp (used on --dark / --brand bands) */
    --elx-on-dark:      #ffffff;
    --elx-on-dark-soft: #cfe0f0;
    --elx-on-dark-dim:  #a9bdd1;
    --elx-hairline-dark: rgba(255, 255, 255, .14);
}

/* ==========================================================================
   1. SECTION — vertical rhythm + background bands
   ========================================================================== */
.elx-section {
    position: relative;
    overflow: hidden;
    padding-block: clamp(56px, 8vw, 112px);
}
.elx-section--light { background: #fff; }
.elx-section--tint  { background: var(--gray-color); }

.elx-section--dark {
    background: var(--title-dark);
    color: var(--elx-on-dark-soft);
}
.elx-section--brand {
    background: linear-gradient(125deg, var(--title-dark) 0%, var(--theme-color) 55%, var(--theme-color2) 130%);
    color: var(--elx-on-dark-soft);
}
/* text colour normalisation on dark/brand bands */
.elx-section--dark  .elx-title,
.elx-section--brand .elx-title { color: var(--elx-on-dark); }
.elx-section--dark  .elx-lead,
.elx-section--brand .elx-lead  { color: var(--elx-on-dark-soft); }

/* optional hairline separators between stacked same-family bands */
.elx-section--divide-top    { border-top: 1px solid var(--smoke-color); }
.elx-section--divide-bottom { border-bottom: 1px solid var(--smoke-color); }

/* thin container helper (kit stays framework-agnostic; Bootstrap .container
   still works — this is only for standalone use) */
.elx-container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
}

/* ==========================================================================
   2. SECTION HEAD — eyebrow · title · lead
   ========================================================================== */
.elx-head {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(36px, 5vw, 60px);
    text-align: center;
}
.elx-head--start {
    text-align: start;
    margin-inline: 0 auto;   /* pin the block to the RIGHT edge in RTL */
}

/* Quiet-label eyebrow — cyan, weight700, NO letter-spacing (Arabic is cursive).
   Distinction comes from colour + weight + the dash mark. */
.elx-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--elx-3);
    color: var(--theme-color2);
    font-family: var(--title-font);
    font-weight: 700;
    font-size: clamp(.9rem, 1.4vw, 1.02rem);
    line-height: 1;
    margin-bottom: var(--elx-4);
}
.elx-head:not(.elx-head--start) .elx-eyebrow { justify-content: center; }
.elx-eyebrow__mark {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: var(--theme-color2);
    flex: none;
}
/* numbered eyebrow variant (01 / 02 …) — the reference "signature move" */
.elx-eyebrow--index {
    font-variant-numeric: tabular-nums;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
}
/* navy eyebrow for use on very light bands where cyan needs grounding */
.elx-eyebrow--navy { color: var(--theme-color); }
.elx-eyebrow--navy .elx-eyebrow__mark { background: var(--theme-color); }

.elx-title {
    margin: 0;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.22;
    color: var(--title-color);
    letter-spacing: normal;   /* never track Arabic */
}
.elx-title__accent { color: var(--theme-color2); }

.elx-lead {
    margin: var(--elx-4) 0 0;
    max-width: 60ch;
    color: var(--body-color);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.9;
}
.elx-head:not(.elx-head--start) .elx-lead { margin-inline: auto; }

/* ==========================================================================
   3. CARD — white, crisp border, soft shadow, lift on hover
   ========================================================================== */
.elx-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--smoke-color);
    border-radius: var(--elx-radius);
    box-shadow: var(--elx-shadow);
    overflow: hidden;
    transition: transform .4s var(--elx-ease),
                box-shadow .4s var(--elx-ease),
                border-color .4s var(--elx-ease);
}
.elx-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--elx-shadow-lg);
    border-color: transparent;
}

/* fixed-ratio media with zoom-on-hover */
.elx-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--gray-color);
}
.elx-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--elx-ease);
}
.elx-card:hover .elx-card__media img { transform: scale(1.07); }
.elx-card__media--square    { aspect-ratio: 1 / 1; }
.elx-card__media--portrait  { aspect-ratio: 3 / 4; }
.elx-card__media--wide      { aspect-ratio: 16 / 9; }

.elx-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--elx-3);
    padding: clamp(20px, 2.4vw, 30px);
    flex: 1;
}
.elx-card__title {
    margin: 0;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--title-color);
}
.elx-card__text {
    margin: 0;
    color: var(--body-color);
    line-height: 1.8;
    font-size: .98rem;
}

/* cyan "+" reveal overlay for gallery / portfolio tiles */
.elx-card__plus {
    position: absolute;
    inset-block-start: var(--elx-4);
    inset-inline-end: var(--elx-4);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--theme-color2);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .35s var(--elx-ease), transform .35s var(--elx-ease);
}
.elx-card:hover .elx-card__plus { opacity: 1; transform: scale(1); }

/* ==========================================================================
   4. BUTTONS — 56px, 4px radius, no uppercase, forward arrow nudge
   ========================================================================== */
.elx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--elx-2);
    height: 56px;
    padding-inline: 30px;
    border: 1.5px solid transparent;
    border-radius: var(--elx-radius-btn);
    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .28s var(--elx-ease),
                color .28s var(--elx-ease),
                border-color .28s var(--elx-ease),
                transform .28s var(--elx-ease),
                box-shadow .28s var(--elx-ease);
}
.elx-btn i { font-size: .88em; transition: transform .28s var(--elx-ease); }
/* fa-arrow-left is the forward arrow in RTL — nudge it forward on hover */
.elx-btn:hover i { transform: translateX(-4px); }
.elx-btn--lg { height: 60px; padding-inline: 36px; }
.elx-btn--block { width: 100%; }

.elx-btn--solid { background: var(--theme-color2); color: #fff; }
.elx-btn--solid:hover {
    background: var(--theme-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(46, 96, 158, .28);
}
.elx-btn--navy { background: var(--theme-color); color: #fff; }
.elx-btn--navy:hover {
    background: var(--title-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(16, 38, 63, .28);
}
.elx-btn--ghost {
    background: transparent;
    color: var(--theme-color);
    border-color: var(--smoke-color);
}
.elx-btn--ghost:hover {
    background: var(--theme-color);
    color: #fff;
    border-color: var(--theme-color);
    transform: translateY(-2px);
}
/* ghost on dark/brand bands */
.elx-section--dark  .elx-btn--ghost,
.elx-section--brand .elx-btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}
.elx-section--dark  .elx-btn--ghost:hover,
.elx-section--brand .elx-btn--ghost:hover {
    background: #fff;
    color: var(--title-dark);
    border-color: #fff;
}
.elx-btn--wa { background: #25d366; color: #fff; }
.elx-btn--wa:hover { background: #1eb257; color: #fff; transform: translateY(-2px); }

/* quiet text link with a leading forward arrow */
.elx-link {
    display: inline-flex;
    align-items: center;
    gap: var(--elx-2);
    color: var(--theme-color);
    font-weight: 600;
    line-height: 1;
}
.elx-link i { font-size: .85em; transition: transform .25s var(--elx-ease); }
.elx-link:hover { color: var(--theme-color2); }
.elx-link:hover i { transform: translateX(-4px); }
.elx-section--dark  .elx-link,
.elx-section--brand .elx-link { color: var(--theme-color2); }

/* ==========================================================================
   5. ICON TILE / BADGE / CHIP / DIVIDER
   ========================================================================== */
.elx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    font-size: 26px;
    color: #fff;
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
    box-shadow: 0 12px 26px rgba(46, 96, 158, .22);
    flex: none;
}
.elx-icon--sm { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; }
.elx-icon--lg { width: 76px; height: 76px; border-radius: 20px; font-size: 32px; }
/* soft tinted variant (icon on a pale wash instead of gradient) */
.elx-icon--soft {
    background: var(--gray-color);
    color: var(--theme-color);
    box-shadow: none;
}

.elx-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--elx-2);
    padding: 6px 14px;
    border-radius: var(--elx-radius-pill);
    background: rgba(0, 165, 229, .1);
    color: var(--theme-color2);
    font-family: var(--title-font);
    font-weight: 700;
    font-size: .82rem;
    line-height: 1;
}
.elx-badge--navy { background: rgba(46, 96, 158, .1); color: var(--theme-color); }

.elx-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--elx-2);
    padding: 9px 20px;
    border: 1px solid var(--smoke-color);
    border-radius: var(--elx-radius-pill);
    background: #fff;
    color: var(--title-color);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: background .28s var(--elx-ease),
                color .28s var(--elx-ease),
                border-color .28s var(--elx-ease);
}
.elx-chip:hover { border-color: var(--theme-color2); color: var(--theme-color2); }
.elx-chip.is-active,
.elx-chip[aria-selected="true"] {
    background: var(--theme-color2);
    border-color: var(--theme-color2);
    color: #fff;
}
/* chips on dark bands */
.elx-section--dark  .elx-chip,
.elx-section--brand .elx-chip {
    background: rgba(255, 255, 255, .05);
    border-color: var(--elx-hairline-dark);
    color: var(--elx-on-dark-soft);
}
.elx-section--dark  .elx-chip:hover,
.elx-section--brand .elx-chip:hover { color: #fff; border-color: var(--theme-color2); }
.elx-section--dark  .elx-chip.is-active,
.elx-section--brand .elx-chip.is-active { background: var(--theme-color2); border-color: var(--theme-color2); color: #fff; }

.elx-divider {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--smoke-color);
}
.elx-divider--dark { background: var(--elx-hairline-dark); }
/* short centred accent rule */
.elx-divider--accent {
    width: 60px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--theme-color), var(--theme-color2));
}

/* ==========================================================================
   6. LAYOUT HELPERS — responsive grid + stat cluster
   ========================================================================== */
.elx-grid {
    display: grid;
    gap: clamp(16px, 2vw, 28px);
    grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 576px) { .elx-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
    .elx-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .elx-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .elx-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* stat: oversized navy numeral + cyan suffix + small label */
.elx-stat { text-align: center; }
.elx-stat__num {
    margin: 0;
    font-family: var(--title-font);
    font-weight: 700;
    line-height: 1;
    color: var(--title-color);
    font-size: clamp(2.1rem, 4vw, 3rem);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    justify-content: center;
}
.elx-stat__num small {
    font-size: .46em;
    font-weight: 700;
    color: var(--theme-color2);
}
.elx-stat__label {
    margin: var(--elx-3) 0 0;
    color: var(--body-color);
    font-size: .98rem;
    font-weight: 500;
}
.elx-section--dark  .elx-stat__num,
.elx-section--brand .elx-stat__num { color: #fff; }
.elx-section--dark  .elx-stat__label,
.elx-section--brand .elx-stat__label { color: var(--elx-on-dark-soft); }

/* ==========================================================================
   7. SCROLL REVEAL PRIMITIVE  (observer lives in elfares-pro.js)
   ========================================================================== */
.elx-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--elx-ease), transform .7s var(--elx-ease);
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
}
.elx-reveal.is-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .elx-reveal { opacity: 1; transform: none; transition: none; }
    .elx-card, .elx-card__media img, .elx-btn, .elx-link i, .elx-card__plus { transition: none; }
}

/* ==========================================================================
   8. RESPONSIVE FALLBACKS
   ========================================================================== */
@media (max-width: 575px) {
    .elx-btn { height: 54px; padding-inline: 24px; font-size: .95rem; }
    .elx-btn--lg { height: 56px; }
    .elx-head { margin-bottom: 32px; }
}