/* ==========================================================
   ebmnt1-cta-banner.css
   بانر الـ CTA قبل التواصل: صورة + طبقة زرقاء بحد قطري + عنوان + زرار
   (متعكس عشان الـ RTL)
   ========================================================== */

:root {
    /* ---------- ألوان ---------- */
    --ebmnt1-cta-banner-background-image: url("../images/warehouse-staff.jpg");
    --ebmnt1-cta-banner-overlay-blue-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-cta-banner-overlay-transparent-color: var(--ebmnt1-color-helper-transparent);
    --ebmnt1-cta-banner-title-text-color: var(--ebmnt1-color-helper-white);

    /* ---------- مقاسات ---------- */
    --ebmnt1-cta-banner-radius: 15px;
    --ebmnt1-cta-banner-padding: 1.25em;
    --ebmnt1-cta-banner-gap: 1.25em;
    --ebmnt1-cta-banner-overlay-angle: 230deg;
    --ebmnt1-cta-banner-overlay-stop: 65%;
    --ebmnt1-cta-banner-title-max-width: 100%;
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-cta-banner-padding: 1.875em;
        --ebmnt1-cta-banner-gap: 1.875em;
    }
}

@media (min-width: 1024px) {
    :root {
        --ebmnt1-cta-banner-padding: 3.125em;
        --ebmnt1-cta-banner-gap: 3.125em;
        --ebmnt1-cta-banner-title-max-width: 70%;
    }
}

.ebmnt1-cta-banner__card {
    position: relative;
    isolation: isolate;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ebmnt1-cta-banner-gap);
    padding: var(--ebmnt1-cta-banner-padding);
    overflow: hidden;
    border-radius: var(--ebmnt1-cta-banner-radius);
    background-image: var(--ebmnt1-cta-banner-background-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: start;
}

.ebmnt1-cta-banner__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(var(--ebmnt1-cta-banner-overlay-angle), var(--ebmnt1-cta-banner-overlay-blue-color) var(--ebmnt1-cta-banner-overlay-stop), var(--ebmnt1-cta-banner-overlay-transparent-color) var(--ebmnt1-cta-banner-overlay-stop));
}

.ebmnt1-cta-banner__title {
    max-width: var(--ebmnt1-cta-banner-title-max-width);
    font-size: var(--ebmnt1-font-size-large-title);
    font-weight: var(--ebmnt1-font-weight-bold);
    color: var(--ebmnt1-cta-banner-title-text-color);
}

@media (min-width: 1024px) {
    .ebmnt1-cta-banner__card {
        flex-direction: row;
        align-items: center;
        background-attachment: fixed;
    }
}