/* ==========================================================
   ebmnt1-hero.css
   الهيرو: خلفية halftone + نص + صورة الشاحنة اللي بتنزل على سكشن "ليه تختارنا"
   (تم حذف مجموعة صور العملاء وزرار "Get a Free Quotes" زي ما طلبتي)
   استثناء من الهيكل: صورة الشاحنة full-width فبتتحط جنب الـ inner مش جواه
   ========================================================== */

:root {
    /* ---------- خلفية ---------- */
    --ebmnt1-hero-background-image: url("../images/halftone-texture.jpg");
    --ebmnt1-hero-background-overlay-start-color: var(--ebmnt1-color-helper-surface);
    --ebmnt1-hero-background-overlay-end-color: var(--ebmnt1-color-helper-transparent);

    /* ---------- نصوص ---------- */
    --ebmnt1-hero-pill-border-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-hero-pill-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-hero-title-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-hero-paragraph-text-color: var(--ebmnt1-color-helper-body-gray);

    /* ---------- زرار الواتساب ---------- */
    --ebmnt1-hero-whatsapp-button-background-color: var(--ebmnt1-color-helper-whatsapp-green);
    --ebmnt1-hero-whatsapp-button-border-color: var(--ebmnt1-color-helper-whatsapp-green);
    --ebmnt1-hero-whatsapp-button-text-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-hero-whatsapp-button-hover-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-hero-whatsapp-button-hover-border-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-hero-whatsapp-button-hover-text-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-hero-actions-gap: 0.75em;

    /* ---------- مقاسات ---------- */
    --ebmnt1-hero-edge-gap: 1.25em;
    --ebmnt1-hero-content-gap: 1em;
    --ebmnt1-hero-column-gap: 1em;
    --ebmnt1-hero-text-column-width: 58%;
    --ebmnt1-hero-side-column-width: 38%;

    /* ---------- صورة الشاحنة ----------
       الصورة 1024x519 ، والجزء اللي بيظهر جوه الهيرو 65% من ارتفاعها
       والـ 35% الباقيين بينزلوا على سكشن "ليه تختارنا" (راجع ebmnt1-why-us.css) */
    --ebmnt1-hero-image-width: 100vw;
    --ebmnt1-hero-image-visible-ratio: 1024 / 337.35;
    --ebmnt1-hero-image-overlap-ratio: 0.1774;
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-hero-edge-gap: 2em;
    }
}

@media (min-width: 1024px) {
    :root {
        --ebmnt1-hero-edge-gap: 2.5em;
        --ebmnt1-hero-image-width: 90vw;
    }
}

.ebmnt1-hero {
    position: relative;
    z-index: 2;
    gap: var(--ebmnt1-hero-edge-gap);
    background-image:
        radial-gradient(at bottom right, var(--ebmnt1-hero-background-overlay-start-color) 0%, var(--ebmnt1-hero-background-overlay-end-color) 100%),
        var(--ebmnt1-hero-background-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ebmnt1-hero__inner {
    align-items: stretch;
    gap: var(--ebmnt1-hero-content-gap);
    text-align: center;
}

/* ---------- الصف: العنوان + الوصف ---------- */
.ebmnt1-hero__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ebmnt1-hero-content-gap);
}

.ebmnt1-hero__text-column,
.ebmnt1-hero__side-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ebmnt1-hero-column-gap);
}

.ebmnt1-hero__pill {
    padding: 5px 10px;
    border: 1px solid var(--ebmnt1-hero-pill-border-color);
    border-radius: var(--ebmnt1-radius-pill);
    font-size: var(--ebmnt1-font-size-label);
    font-weight: var(--ebmnt1-font-weight-medium);
    line-height: 1.2;
    color: var(--ebmnt1-hero-pill-text-color);
}

.ebmnt1-hero__title {
    font-size: var(--ebmnt1-font-size-hero-title);
    font-weight: var(--ebmnt1-font-weight-bold);
    line-height: 1.25;
    color: var(--ebmnt1-hero-title-text-color);
}

.ebmnt1-hero__text {
    color: var(--ebmnt1-hero-paragraph-text-color);
}

.ebmnt1-hero__actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--ebmnt1-hero-actions-gap);
}

/* زرار الواتساب (أخضر) جنب زرار الاتصال (أصفر) */
.ebmnt1-hero__whatsapp-button {
    border-color: var(--ebmnt1-hero-whatsapp-button-border-color);
    background-color: var(--ebmnt1-hero-whatsapp-button-background-color);
    color: var(--ebmnt1-hero-whatsapp-button-text-color);
}

.ebmnt1-hero__whatsapp-button:hover,
.ebmnt1-hero__whatsapp-button:focus-visible {
    border-color: var(--ebmnt1-hero-whatsapp-button-hover-border-color);
    background-color: var(--ebmnt1-hero-whatsapp-button-hover-background-color);
    color: var(--ebmnt1-hero-whatsapp-button-hover-text-color);
}

/* ---------- صورة الشاحنة ---------- */
.ebmnt1-hero__media {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.ebmnt1-hero__image-frame {
    width: var(--ebmnt1-hero-image-width);
    min-height: 0;
    aspect-ratio: var(--ebmnt1-hero-image-visible-ratio);
}

.ebmnt1-hero__image {
    width: 100%;
    height: auto;
    max-width: none;
}

/* على الموبايل الزرار بعرض كامل زي الديمو */
.ebmnt1-hero__actions .ebmnt1-button {
    width: 100%;
}

/* ==========================================================
   موبايل كبير
   ========================================================== */
@media (min-width: 425px) {
    .ebmnt1-hero__actions {
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ebmnt1-hero__actions .ebmnt1-button {
        width: auto;
    }
}

/* ==========================================================
   تابلت: المحتوى بيتحط start
   ========================================================== */
@media (min-width: 768px) {
    .ebmnt1-hero__inner {
        text-align: start;
    }

    .ebmnt1-hero__text-column,
    .ebmnt1-hero__side-column {
        align-items: flex-start;
    }

    .ebmnt1-hero__actions {
        justify-content: flex-start;
    }
}

/* ==========================================================
   لابتوب: العنوان جنب الوصف
   ========================================================== */
@media (min-width: 1024px) {
    .ebmnt1-hero__content {
        flex-direction: row;
        align-items: flex-start;
        gap: 3.125em;
    }

    .ebmnt1-hero__text-column {
        width: var(--ebmnt1-hero-text-column-width);
    }

    .ebmnt1-hero__side-column {
        align-self: center;
        width: var(--ebmnt1-hero-side-column-width);
    }

    .ebmnt1-hero__media {
        justify-content: flex-end;
    }

    .ebmnt1-hero {
        background-attachment: scroll, fixed;
    }
}