/* ==========================================================================
   مجمع الفارس التجاري — SECTION 8: location «الموقع الجغرافي»
   Section-specific rules only. Namespaced `loc-`. Composes the .elx-* kit
   (.elx-section--light, .elx-head--start, .elx-icon--soft, .elx-btn--navy,
   .elx-reveal) and restyles the preserved legacy map wrapper (.elf-map-wrap /
   .elf-map / .elf-map__layers) — #elfMap and the layer data-hooks are untouched.
   Loads AFTER elfares.css AND elfares-ui.css. No @import; no primitive dupes.
   RTL-first: logical properties throughout, never letter-space Arabic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Band + soft brand atmospherics (self-contained, no shape image)
   -------------------------------------------------------------------------- */
.loc-section {
    isolation: isolate;
}
/* faint navy/cyan wash bleeding from behind the map (RTL end / left) and a
   quieter one behind the copy — depth without covering the live map. */
.loc-section::before,
.loc-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
}
.loc-section::before {
    inset-block-start: -140px;
    inset-inline-start: -160px;          /* RTL start = right → sits behind the copy */
    width: 440px;
    height: 440px;
    background: radial-gradient(circle at 50% 50%, rgba(0, 165, 229, .10), transparent 68%);
}
.loc-section::after {
    inset-block-end: -180px;
    inset-inline-end: -160px;            /* RTL end = left → sits behind the map */
    width: 520px;
    height: 520px;
    background: radial-gradient(circle at 50% 50%, rgba(46, 96, 158, .12), transparent 70%);
}
.loc-section > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Info column
   -------------------------------------------------------------------------- */
.loc-head { margin-bottom: clamp(24px, 3vw, 34px); }
/* the copy is pinned to the RTL start (right) and kept comfortably narrow */
.loc-head.elx-head--start { max-width: 46ch; }
.loc-head .elx-lead { margin-bottom: 0; }

/* Fact cards (address · coordinates) */
.loc-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--elx-4);
}
.loc-fact {
    display: flex;
    align-items: center;
    gap: var(--elx-4);
    padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
    background: #fff;
    border: 1px solid var(--smoke-color);
    border-radius: var(--elx-radius);
    box-shadow: var(--elx-shadow);
    transition: transform .35s var(--elx-ease),
                box-shadow .35s var(--elx-ease),
                border-color .35s var(--elx-ease);
}
.loc-fact:hover {
    transform: translateX(-6px);        /* nudge toward RTL forward (left) */
    box-shadow: var(--elx-shadow-md);
    border-color: transparent;
}

/* icon tile → outlined by default, fills with the brand gradient on hover */
.loc-fact__icon {
    background: #fff;
    border: 2px solid var(--theme-color);
    color: var(--theme-color);
    box-shadow: none;
    transition: background .35s var(--elx-ease),
                color .35s var(--elx-ease),
                border-color .35s var(--elx-ease),
                box-shadow .35s var(--elx-ease);
}
.loc-fact:hover .loc-fact__icon {
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 26px rgba(46, 96, 158, .22);
}

.loc-fact__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.loc-fact__label {
    color: var(--theme-color2);
    font-family: var(--title-font);
    font-weight: 700;
    font-size: .82rem;
    line-height: 1;
}
.loc-fact__value {
    margin: 0;
    color: var(--title-color);
    font-family: var(--title-font);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.55;
}
/* coordinates read as a monospaced-feel LTR code chip */
.loc-fact__value--code {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;              /* latin numerals only — safe, not Arabic */
    color: var(--theme-color);
}

/* CTA */
.loc-cta-wrap { margin-top: clamp(22px, 3vw, 32px); }
/* the leading map glyph must stay put — only the trailing forward arrow nudges */
.loc-cta:hover .loc-cta__lead { transform: none; }

/* --------------------------------------------------------------------------
   Map column — restyle the preserved .elf-map-wrap, keep #elfMap intact
   -------------------------------------------------------------------------- */
.loc-map {
    position: relative;
    z-index: 1;
}
/* offset accent panel peeking out at the bottom-end (bottom-left in RTL) so the
   framed map reads as a raised, deliberate object rather than a flat embed. */
.loc-map::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset-block: 26px -18px;
    inset-inline: 26px -18px;           /* start(right) inset 26 · end(left) out 18 */
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(46, 96, 158, .16), rgba(0, 165, 229, .12));
    pointer-events: none;
}
/* lift the real map wrapper above the accent panel + crisp brand hairline */
.loc-map .elf-map-wrap {
    position: relative;
    z-index: 1;
    border: 1px solid var(--smoke-color);
}
/* responsive, generous map height (keeps Leaflet's required explicit height) */
.loc-map .elf-map {
    height: clamp(380px, 46vw, 520px);
}

/* gentle polish on the preserved layer toggle (hooks/data-attrs unchanged) */
.loc-map .elf-map__layers { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.loc-map .elf-map__layers button:hover:not(.active) { color: var(--theme-color2); }

/* --------------------------------------------------------------------------
   Reveal — opposing directional stagger for the two columns.
   Overrides the kit's translateY only when motion is welcome; the .is-in reset
   below (higher specificity) still lands the elements flush. Guard against
   re-introducing transform under reduced-motion by scoping to no-preference.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .loc-col--info .elx-reveal { transform: translateY(22px) translateX(18px); }   /* in from the RTL start (right) */
    .loc-col--map  .elx-reveal { transform: translateY(22px) translateX(-24px); }  /* in from the RTL end (left) */
    .loc-col--info .elx-reveal.is-in,
    .loc-col--map  .elx-reveal.is-in { transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* stacked: copy first, then map — give the map breathing room + normal flow */
    .loc-map { margin-top: var(--elx-2); }
    .loc-head.elx-head--start { max-width: 60ch; }
}
@media (max-width: 575px) {
    .loc-fact { gap: var(--elx-3); }
    .loc-map::before { inset-inline: 16px -12px; inset-block: 18px -12px; }
}