/* ==========================================================================
   مجمع الفارس التجاري — «الفرص الاستثمارية والخدمات» section styles
   Loads AFTER elfares.css AND elfares-ui.css. Section-specific only:
   the head row + four category cards. Each card is an anchor that opens a
   swipeable lightbox gallery of its own photos (magnific-popup gallery).
   Namespaced `svc-`. RTL-first; Arabic never letter-spaced.
   ========================================================================== */

/* ---------- head row: title pinned right, CTA pinned opposite ---------- */
.svc-headrow {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
    margin-bottom: clamp(36px, 5vw, 60px);
}
.svc-headrow .elx-head {
    margin: 0;
    flex: 1 1 520px;
}
.svc-headrow__cta {
    flex: 0 0 auto;
    padding-bottom: 4px;
}

/* ---------- category card (the whole card is one gallery trigger) ------- */
.svc-cat-gallery { height: 100%; }

.svc-cat {
    height: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
/* hidden sibling links that join this card's gallery */
.svc-cat__more { display: none; }

/* media carries the cover, a photo-count badge, and a hover "view" overlay */
.svc-cat .elx-card__media { position: relative; }

.svc-cat__count {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;               /* right in RTL */
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--elx-radius-pill);
    background: rgba(16, 38, 63, .62);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    color: #fff;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: .82rem;
    line-height: 1;
}
.svc-cat__count i { font-size: .95em; opacity: .9; }

.svc-cat__view {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(180deg, rgba(46, 96, 158, .30), rgba(16, 38, 63, .62));
    color: #fff;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 1.02rem;
    opacity: 0;
    transition: opacity .35s var(--elx-ease);
}
.svc-cat:hover .svc-cat__view,
.svc-cat:focus-visible .svc-cat__view { opacity: 1; }

/* body: floating icon on the seam (outlined → fills on hover) */
.svc-cat .elx-card__body {
    position: relative;
    padding-top: 46px;
}
.svc-cat__icon {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: clamp(20px, 2.4vw, 30px);
    transform: translateY(-50%);
    z-index: 4;
}
.svc-cat__icon.elx-icon {
    background: #fff;
    border: 2px solid var(--theme-color);
    color: var(--theme-color);
    box-shadow: 0 8px 18px rgba(16, 38, 63, .12);
    transition: background .35s var(--elx-ease),
                border-color .35s var(--elx-ease),
                color .35s var(--elx-ease),
                box-shadow .35s var(--elx-ease);
}
.svc-cat:hover .svc-cat__icon.elx-icon {
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 24px rgba(46, 96, 158, .28);
}
.svc-cat .elx-card__title { font-size: 1.18rem; }

/* ---------- responsive ------------------------------------------------- */
@media (max-width: 575px) {
    .svc-headrow__cta { width: 100%; }
    .svc-headrow__cta .elx-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-cat__view,
    .svc-cat__icon.elx-icon { transition: none; }
}