/* ==========================================================================
   Layout: closing CTA  (partials/site/cta-band.blade.php)
   --------------------------------------------------------------------------
   The section is split white-over-footer colour, so the pill "window"
   (brand aqua, the logo's م loop) sits exactly on the seam between the page
   and the footer. Three concentric outline rings wrap it and open outwards
   when it scrolls into view (.is-visible from js/modules/reveal.js). A round
   photo fills the pill's start cap (the و ring).
   ≥ 992px: one row — photo · copy · actions.  < 992px: a rounded card.
   ========================================================================== */

.cta {
    position: relative;
    z-index: 1;
    overflow: hidden;                       /* rings never widen the page */
    padding-bottom: 1px;
    padding-top: clamp(3rem, 2rem + 3vw, 5rem);
    background: linear-gradient(to bottom, transparent 0 55%, var(--footer-bg) 55% 100%);
}

.cta__window {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    padding: 18px 18px 18px clamp(1.5rem, 1rem + 2vw, 3.5rem);   /* RTL: photo cap on the right, tight */
    border-radius: var(--r-pill);
    background: var(--aqua);
    color: var(--ink-deep);
}

/* ── Rings around the pill ───────────────────────────────────────────────── */
.cta__rings { position: absolute; inset: 0; pointer-events: none; }   /* out of the grid flow */
.cta__rings i {
    --k: 1;
    position: absolute;
    inset: calc(var(--k) * -14px);
    border: 1.5px solid color-mix(in srgb, var(--aqua) calc(95% - var(--k) * 18%), transparent);
    border-radius: var(--r-pill);
    pointer-events: none;
    transition: inset 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.2s var(--ease-out);
    transition-delay: calc(var(--k) * 90ms);
}
.cta__rings i:nth-child(2) { --k: 2; }
.cta__rings i:nth-child(3) { --k: 3; }

@media (prefers-reduced-motion: no-preference) {
    .js .cta__window:not(.is-visible) .cta__rings i { inset: 0; opacity: 0; }
}

/* ── Photo in the start cap ──────────────────────────────────────────────── */
.cta__photo {
    margin: 0;
    width: clamp(120px, 11vw, 168px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 6px rgb(255 255 255 / 0.45);
}
.cta__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: scale 1.2s var(--ease-out); }
.cta__window:hover .cta__photo img { scale: 1.05; }

/* ── Copy ────────────────────────────────────────────────────────────────── */
.cta__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }

.cta__title {
    margin-top: var(--space-2);
    color: var(--ink-deep);
    font-weight: 200;
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
    line-height: 1.2;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.cta__actions { display: flex; align-items: center; gap: var(--space-5); padding-inline-end: var(--space-2); }

.cta__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ink-deep);
    font-size: var(--fs-lg);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.cta__phone .icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 14px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.55);
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.cta__phone:hover { color: var(--ink-deep); }
.cta__phone:hover .icon { background: #fff; transform: rotate(-12deg); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .cta__phone .num { display: none; }                   /* keep the round call button only */
}

@media (max-width: 991.98px) {
    .cta { background: linear-gradient(to bottom, transparent 0 40%, var(--footer-bg) 40% 100%); }
    .cta__window {
        grid-template-columns: 1fr;
        justify-items: start;
        gap: var(--space-5);
        padding: var(--space-8) var(--space-6) var(--space-6);
        border-radius: 32px;
    }
    .cta__rings i { border-radius: calc(32px + var(--k) * 8px); inset: calc(var(--k) * -6px); }
    .cta__photo { width: 96px; }
    .cta__actions { width: 100%; padding: 0; }
    .cta__actions .btn { flex: 1; }
    .cta__phone .num { display: none; }
}