/* ==========================================================================
   مجمع الفارس التجاري — SECTION «why» (لماذا الاستثمار؟)
   Section-specific rules only. Loads AFTER elfares.css AND elfares-ui.css.
   Reuses the .elx-* kit; everything new is namespaced `why-`.
   RTL-first: logical properties throughout; media pins to the RTL start (right).
   ========================================================================== */

/* ---------- band + subtle brand decor ---------- */
.why-section { position: relative; }
.why-bg {
    position: absolute;
    inset-block-start: -12%;
    inset-inline-start: -6%;              /* RTL start = right edge */
    width: min(48vw, 640px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 165, 229, .07), transparent 68%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- two-column layout (media right / content left) ---------- */
.why-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
}
@media (min-width: 992px) {
    /* In RTL the first grid track is on the RIGHT — media is first in the DOM,
       so it lands at the right; content follows on the left. */
    .why-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: clamp(48px, 5.5vw, 80px);
    }
}

/* ==========================================================================
   MEDIA
   ========================================================================== */
.why-media {
    position: relative;
    isolation: isolate;
}

/* white mat + soft elevation + gradient hairline frame */
.why-media__frame {
    position: relative;
    padding: 10px;
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--elx-shadow-md);
    z-index: 1;
}
.why-media__frame::before {                /* crisp navy→cyan hairline inside the mat */
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 18px;
    padding: 1.5px;
    background: linear-gradient(140deg, var(--theme-color), var(--theme-color2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}
/* soft brand glow offset behind the frame */
.why-media::after {
    content: "";
    position: absolute;
    inset-block: 34px -20px;
    inset-inline: 40px -20px;              /* peeks toward the outer/bottom edge */
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(46, 96, 158, .16), rgba(0, 165, 229, .12));
    filter: blur(2px);
    z-index: 0;
    pointer-events: none;                  /* decorative — must never intercept the card's hover */
}

/* intro-video card sits ABOVE the glow so the whole card (not just its edges)
   receives hover, and the glow stays behind it */
.why-video { position: relative; z-index: 1; }

.why-media__img {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    aspect-ratio: 4 / 3;
    background: var(--gray-color);
    z-index: 2;
}
.why-media__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--elx-ease);
}
.why-media__frame:hover .why-media__img img { transform: scale(1.05); }

/* ---------- play button (opens intro video) ---------- */
.why-play {
    position: absolute;
    left: 50%;                             /* centring is direction-agnostic */
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: clamp(66px, 7vw, 90px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--theme-color);
    background: #fff;
    border: 2px solid var(--theme-color);
    box-shadow: 0 10px 26px rgba(16, 38, 63, .18);
    transition: transform .3s var(--elx-ease), box-shadow .3s var(--elx-ease),
                background .3s var(--elx-ease), color .3s var(--elx-ease), border-color .3s var(--elx-ease);
}
.why-play i {
    font-size: clamp(20px, 2.4vw, 28px);
    margin-inline-start: 4px;              /* optical-centre the triangle */
    position: relative;
    z-index: 2;
}
.why-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: linear-gradient(135deg, var(--theme-color2), var(--theme-color));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 165, 229, .55);
}
.why-play__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--theme-color2);
    animation: why-pulse 2.6s var(--elx-ease) infinite;
}
.why-play__ring--2 { animation-delay: 1.3s; }
@keyframes why-pulse {
    0%   { transform: scale(1);   opacity: .65; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- small aerial inset (desktop only) ---------- */
.why-inset {
    display: none;
    position: absolute;
    inset-block-start: 22px;
    inset-inline-start: 22px;              /* RTL start = top-right corner of the image */
    z-index: 4;
    width: 104px;
    height: 78px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 12px 26px rgba(16, 38, 63, .22);
}
.why-inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 992px) { .why-inset { display: block; } }

/* ---------- floating gradient stat badge ---------- */
.why-badge {
    position: absolute;
    z-index: 6;
    inset-block-start: 22px;               /* sit on the image, top-left corner */
    inset-inline-end: 22px;                /* RTL end = left */
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 18px;
    background: #fff;
    color: var(--title-color);
    border: 1px solid var(--smoke-color);
    box-shadow: var(--elx-shadow-lg);
    transition: background .3s var(--elx-ease), color .3s var(--elx-ease), border-color .3s var(--elx-ease);
}
/* fill on hover — same "outlined → filled" idea as the credential badges */
.why-badge:hover {
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
    border-color: transparent;
    color: #fff;
}
.why-badge__icon {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 20px;
    background: #fff;
    border: 2px solid var(--theme-color);
    color: var(--theme-color);
    transition: background .3s var(--elx-ease), border-color .3s var(--elx-ease), color .3s var(--elx-ease);
}
.why-badge:hover .why-badge__icon {
    background: rgba(255, 255, 255, .18);
    border-color: transparent;
    color: #fff;
}
.why-badge__meta { display: flex; flex-direction: column; line-height: 1; }
.why-badge__num {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}
.why-badge__num small { font-size: .5em; font-weight: 600; color: var(--theme-color2); transition: color .3s var(--elx-ease); }
.why-badge:hover .why-badge__num small { color: #fff; }
.why-badge__label {
    margin-block-start: 7px;
    font-size: .86rem;
    font-weight: 500;
    color: var(--body-color);
    transition: color .3s var(--elx-ease);
}
.why-badge:hover .why-badge__label { color: rgba(255, 255, 255, .9); }

/* ==========================================================================
   CONTENT
   ========================================================================== */
.why-content .elx-head--start { margin-bottom: 0; }   /* tighten; list controls the gap */

.why-list {
    list-style: none;
    margin: clamp(26px, 3.2vw, 34px) 0 0;
    padding: 0;
    display: grid;
    gap: 15px;
}
.why-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--title-color);
    font-weight: 600;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.55;
}
.why-check {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--theme-color2);
    background: rgba(0, 165, 229, .12);
    box-shadow: inset 0 0 0 1px rgba(0, 165, 229, .22);
    transition: background .3s var(--elx-ease), color .3s var(--elx-ease), box-shadow .3s var(--elx-ease);
}
.why-list__item:hover .why-check {
    color: #fff;
    background: linear-gradient(135deg, var(--theme-color2), var(--theme-color));
    box-shadow: 0 8px 18px rgba(0, 165, 229, .3);
}

/* ---------- actions row: primary button + inline call card ---------- */
.why-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(20px, 2.6vw, 30px);
    margin-block-start: clamp(30px, 3.6vw, 40px);
    padding-block-start: clamp(26px, 3vw, 34px);
    border-block-start: 1px solid var(--smoke-color);
}

.why-call {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.why-call__icon {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--theme-color);
    background: #fff;
    border: 2px solid var(--theme-color);
    box-shadow: none;
    transition: transform .3s var(--elx-ease), box-shadow .3s var(--elx-ease),
                background .3s var(--elx-ease), color .3s var(--elx-ease), border-color .3s var(--elx-ease);
}
.why-call:hover .why-call__icon {
    transform: translateY(-3px);
    background: linear-gradient(135deg, var(--theme-color), var(--theme-color2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 16px 30px rgba(46, 96, 158, .3);
}
.why-call__meta { display: flex; flex-direction: column; gap: 3px; }
.why-call__title { font-size: .88rem; font-weight: 500; color: var(--body-color); }
.why-call__num {
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 1.32rem;
    color: var(--title-color);
    direction: ltr;
    text-align: start;
    transition: color .3s var(--elx-ease);
}
.why-call:hover .why-call__num { color: var(--theme-color); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .why-badge {
        inset-inline-end: 14px;
        inset-block-start: 14px;
        padding: 13px 16px;
    }
    .why-badge__icon { width: 40px; height: 40px; font-size: 17px; }
}
@media (max-width: 575.98px) {
    .why-media__frame { padding: 7px; border-radius: 20px; }
    .why-badge { gap: 11px; padding: 11px 14px; border-radius: 14px; }
    .why-badge__num { font-size: 1.35rem; }
    .why-badge__label { font-size: .78rem; }
    .why-actions__btn { width: 100%; }
}

/* respect reduced-motion for the section's own animations */
@media (prefers-reduced-motion: reduce) {
    .why-play__ring { animation: none; opacity: 0; }
    .why-media__img img,
    .why-play,
    .why-check,
    .why-call__icon { transition: none; }
}