/* ==========================================================
   ebmnt1-how-we-work.css
   خطوات العمل: 3 كروت، كل كارد فيه مربع رقم أصفر داخل tab أبيض بحواف مقطوعة
   الكارد الأول والتالت أزرق، والتاني فاتح بخلفية halftone
   ========================================================== */

:root {
    /* ---------- ألوان ---------- */
    --ebmnt1-how-we-work-card-blue-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-how-we-work-card-light-background-color: var(--ebmnt1-color-helper-surface);
    --ebmnt1-how-we-work-card-light-background-image: url("../images/halftone-texture.jpg");
    --ebmnt1-how-we-work-card-blue-title-text-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-how-we-work-card-blue-description-text-color: var(--ebmnt1-color-helper-surface);
    --ebmnt1-how-we-work-card-light-title-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-how-we-work-card-light-description-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-how-we-work-tab-background-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-how-we-work-number-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-how-we-work-number-hover-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-how-we-work-number-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-how-we-work-number-hover-text-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-how-we-work-footer-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-how-we-work-footer-link-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-how-we-work-footer-link-hover-color: var(--ebmnt1-color-primary-blue);

    /* ---------- مقاسات ---------- */
    --ebmnt1-how-we-work-cards-gap: 2em;
    --ebmnt1-how-we-work-card-radius: 15px;
    --ebmnt1-how-we-work-number-size: 3.75rem;
    --ebmnt1-how-we-work-tab-border-size: 10px;
    --ebmnt1-how-we-work-tab-radius: 25px;
    --ebmnt1-how-we-work-fillet-size: 15px;
    --ebmnt1-how-we-work-content-gap: 0.9em;
    --ebmnt1-how-we-work-content-padding-block-start: 1.9em;
    --ebmnt1-how-we-work-content-padding-block-end: 1.25em;
    --ebmnt1-how-we-work-content-padding-inline: 1.25em;
    --ebmnt1-how-we-work-heading-max-width: 58%;
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-how-we-work-number-size: 5rem;
    }
}

.ebmnt1-how-we-work__heading {
    max-width: 100%;
}

.ebmnt1-how-we-work__cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ebmnt1-how-we-work-cards-gap);
}

.ebmnt1-how-we-work__card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--ebmnt1-how-we-work-card-radius);
    text-align: center;
}

.ebmnt1-how-we-work__card--blue {
    background-color: var(--ebmnt1-how-we-work-card-blue-background-color);
}

.ebmnt1-how-we-work__card--light {
    background-color: var(--ebmnt1-how-we-work-card-light-background-color);
    background-image: var(--ebmnt1-how-we-work-card-light-background-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* الـ tab اللي فوق: مربع الرقم + حواف مقطوعة على الجنبين */
.ebmnt1-how-we-work__tab {
    position: relative;
    display: flex;
    justify-content: center;
    padding-block-end: var(--ebmnt1-how-we-work-tab-border-size);
    padding-inline: var(--ebmnt1-how-we-work-tab-border-size);
    border-radius: 0 0 var(--ebmnt1-how-we-work-tab-radius) var(--ebmnt1-how-we-work-tab-radius);
    background-color: var(--ebmnt1-how-we-work-tab-background-color);
}

.ebmnt1-how-we-work__tab::before,
.ebmnt1-how-we-work__tab::after {
    content: "";
    position: absolute;
    top: 0;
    width: var(--ebmnt1-how-we-work-fillet-size);
    height: var(--ebmnt1-how-we-work-fillet-size);
    background-color: var(--ebmnt1-how-we-work-tab-background-color);
    pointer-events: none;
}

.ebmnt1-how-we-work__tab::before {
    right: 100%;
    -webkit-mask: radial-gradient(circle at 0 100%, transparent calc(var(--ebmnt1-how-we-work-fillet-size) - 0.5px), #000 var(--ebmnt1-how-we-work-fillet-size));
    mask: radial-gradient(circle at 0 100%, transparent calc(var(--ebmnt1-how-we-work-fillet-size) - 0.5px), #000 var(--ebmnt1-how-we-work-fillet-size));
}

.ebmnt1-how-we-work__tab::after {
    left: 100%;
    -webkit-mask: radial-gradient(circle at 100% 100%, transparent calc(var(--ebmnt1-how-we-work-fillet-size) - 0.5px), #000 var(--ebmnt1-how-we-work-fillet-size));
    mask: radial-gradient(circle at 100% 100%, transparent calc(var(--ebmnt1-how-we-work-fillet-size) - 0.5px), #000 var(--ebmnt1-how-we-work-fillet-size));
}

.ebmnt1-how-we-work__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ebmnt1-how-we-work-number-size);
    height: var(--ebmnt1-how-we-work-number-size);
    border-radius: var(--ebmnt1-radius-card);
    background-color: var(--ebmnt1-how-we-work-number-background-color);
    font-size: var(--ebmnt1-font-size-large-title);
    font-weight: var(--ebmnt1-font-weight-bold);
    line-height: 1;
    color: var(--ebmnt1-how-we-work-number-text-color);
    transition: background-color var(--ebmnt1-transition-base), color var(--ebmnt1-transition-base);
}

.ebmnt1-how-we-work__card:hover .ebmnt1-how-we-work__number {
    background-color: var(--ebmnt1-how-we-work-number-hover-background-color);
    color: var(--ebmnt1-how-we-work-number-hover-text-color);
}

.ebmnt1-how-we-work__content {
    display: flex;
    flex-direction: column;
    gap: var(--ebmnt1-how-we-work-content-gap);
    padding: var(--ebmnt1-how-we-work-content-padding-block-start) var(--ebmnt1-how-we-work-content-padding-inline) var(--ebmnt1-how-we-work-content-padding-block-end);
}

.ebmnt1-how-we-work__title {
    font-size: var(--ebmnt1-font-size-small-title);
    font-weight: var(--ebmnt1-font-weight-semibold);
}

.ebmnt1-how-we-work__card--blue .ebmnt1-how-we-work__title {
    color: var(--ebmnt1-how-we-work-card-blue-title-text-color);
}

.ebmnt1-how-we-work__card--blue .ebmnt1-how-we-work__text {
    color: var(--ebmnt1-how-we-work-card-blue-description-text-color);
}

.ebmnt1-how-we-work__card--light .ebmnt1-how-we-work__title {
    color: var(--ebmnt1-how-we-work-card-light-title-text-color);
}

.ebmnt1-how-we-work__card--light .ebmnt1-how-we-work__text {
    color: var(--ebmnt1-how-we-work-card-light-description-text-color);
}

.ebmnt1-how-we-work__footer {
    font-size: var(--ebmnt1-font-size-label);
    font-weight: var(--ebmnt1-font-weight-medium);
    color: var(--ebmnt1-how-we-work-footer-text-color);
}

.ebmnt1-how-we-work__footer-link {
    font-weight: var(--ebmnt1-font-weight-semibold);
    color: var(--ebmnt1-how-we-work-footer-link-color);
    transition: color var(--ebmnt1-transition-base);
}

.ebmnt1-how-we-work__footer-link:hover {
    color: var(--ebmnt1-how-we-work-footer-link-hover-color);
}

/* ---------- لابتوب: 3 كروت جنب بعض ---------- */
@media (min-width: 1024px) {
    .ebmnt1-how-we-work__heading {
        max-width: var(--ebmnt1-how-we-work-heading-max-width);
    }

    .ebmnt1-how-we-work__cards {
        flex-direction: row;
    }
}