/* ==========================================================================
   مجمع الفارس التجاري — «cta» section  (Deliverable 2)
   Section «ابدأ نشاطك الآن» — the single conversion moment (brand band).
   Loads AFTER elfares.css AND elfares-ui.css. Section-specific rules only,
   namespaced `cta-` (no elx-* primitives duplicated). Self-contained: it must
   look great even when dropped onto a standalone section page — every visual
   is produced here or by the brand gradient, never by an external dependency.
   RTL-first — logical properties only; Arabic is never letter-spaced.
   ========================================================================== */

/* ---------- Band ---------- */
.cta-section {
    isolation: isolate;                    /* contain the blend/mix layers */
    padding-block: clamp(72px, 9vw, 132px);
    text-align: center;
}

/* ==========================================================================
   Decorative motif layers — all aria-hidden, pointer-events:none, z-index 0.
   Stack (bottom→top): aerial texture · blueprint grid · cyan glow.
   ========================================================================== */

/* Aerial photo → a faint architectural texture blended into the gradient.
   A centre-clearing radial mask keeps the copy area clean and legible, so the
   photo only whispers at the edges. If the asset is missing the layer simply
   renders nothing and the gradient stands on its own. */
.cta-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    opacity: .2;
    mix-blend-mode: soft-light;
    -webkit-mask-image: radial-gradient(115% 100% at 50% 50%, transparent 26%, #000 100%);
            mask-image: radial-gradient(115% 100% at 50% 50%, transparent 26%, #000 100%);
}

/* Blueprint grid — a quiet nod to master-planning, strongest behind the copy
   and dissolving toward the frame. Hairline white lines at very low opacity. */
.cta-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right,  rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(120% 120% at 50% 46%, #000 0%, transparent 72%);
            mask-image: radial-gradient(120% 120% at 50% 46%, #000 0%, transparent 72%);
}

/* Soft cyan glow pooling above the headline — the warmth of the peak moment.
   A slow, subtle breathe (disabled under reduced-motion). */
.cta-glow {
    position: absolute;
    inset-block-start: -8%;
    inset-inline: 0;
    margin-inline: auto;
    z-index: 0;
    width: min(820px, 88%);
    height: 420px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(0, 165, 229, .34) 0%, rgba(0, 165, 229, 0) 68%);
    filter: blur(14px);
    opacity: .7;
    animation: ctaGlow 7s ease-in-out infinite;
}
@keyframes ctaGlow {
    0%, 100% { opacity: .55; transform: scale(1); }
    50%      { opacity: .82; transform: scale(1.04); }
}

/* ==========================================================================
   Content column
   ========================================================================== */
.cta-inner {
    position: relative;
    z-index: 1;
}
.cta-copy {
    max-width: 900px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* the primitive eyebrow only auto-centres inside .elx-head — centre it here */
.cta-copy .elx-eyebrow { justify-content: center; }

/* Headline — a touch larger & tighter than the base title for the peak. */
.cta-title {
    max-width: 22ch;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.25;
    text-wrap: balance;
}

.cta-lead {
    margin-inline: auto;
    max-width: 58ch;
}

/* ==========================================================================
   Actions — WhatsApp (solid green) + call (ghost), balanced side by side
   ========================================================================== */
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 18px;
    margin-top: clamp(30px, 4vw, 46px);
}
.cta-btn { min-width: 232px; }

/* ---------- Responsive ---------- */
@media (max-width: 575px) {
    .cta-actions { gap: 12px; }
    .cta-btn { width: 100%; min-width: 0; }
    .cta-grid { background-size: 48px 48px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .cta-glow { animation: none; }
}