/* ==========================================================
   ebmnt1-services.css
   الخدمات: flex container (من غير سلايدر) - 4 كروت في الصف على الشاشات الكبيرة
   كل كارد = صورة الخدمة + اسم + نص تعبيري سريع + زرار "اقرأ المزيد"
   تصميم الكارد مبني على هوية الموقع:
   حواف 15px / ركن مقطوع (notch) بمربع أيقونة أصفر / زرار كبسولة أصفر بيتحول أزرق
   السلايدر: أزرار قبل/بعد + mouse grab + touch + جزء ظاهر من الكارد السابق والتالي
   ========================================================== */

:root {
    /* ---------- ألوان ---------- */
    --ebmnt1-services-card-background-color: var(--ebmnt1-color-helper-surface);
    --ebmnt1-services-card-border-color: var(--ebmnt1-color-helper-border-gray);
    --ebmnt1-services-card-hover-border-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-services-card-shadow-color: var(--ebmnt1-color-helper-shadow);
    --ebmnt1-services-icon-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-services-icon-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-services-icon-hover-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-services-icon-hover-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-services-title-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-services-title-hover-text-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-services-description-text-color: var(--ebmnt1-color-helper-body-gray);

    /* ---------- مقاسات ---------- */
    --ebmnt1-services-columns: 1;
    --ebmnt1-services-grid-gap: 1.25rem;
    --ebmnt1-services-card-radius: 15px;
    --ebmnt1-services-image-ratio: 4 / 3;
    --ebmnt1-services-icon-size: 3.5rem;
    --ebmnt1-services-icon-radius: 15px;
    --ebmnt1-services-icon-font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
    --ebmnt1-services-body-gap: 1em;
    --ebmnt1-services-body-padding: 1.25em;
    --ebmnt1-services-text-gap: 0.6em;
    --ebmnt1-services-button-padding-block: 12px;
    --ebmnt1-services-button-padding-inline: 24px;
    --ebmnt1-services-heading-max-width: 100%;
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-services-columns: 2;
    }
}

@media (min-width: 1024px) {
    :root {
        --ebmnt1-services-columns: 3;
        --ebmnt1-services-grid-gap: 1.5rem;
        --ebmnt1-services-heading-max-width: 58%;
        --ebmnt1-services-body-padding: 1.5em;
    }
}

@media (min-width: 1280px) {
    :root {
        --ebmnt1-services-columns: 4;
    }
}

.ebmnt1-services__heading {
    max-width: var(--ebmnt1-services-heading-max-width);
}

.ebmnt1-services__grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--ebmnt1-services-grid-gap);
    text-align: start;
}

.ebmnt1-services__item {
    flex: 0 0 calc((100% - (var(--ebmnt1-services-columns) - 1) * var(--ebmnt1-services-grid-gap)) / var(--ebmnt1-services-columns));
    display: flex;
}

.ebmnt1-services__item > * {
    width: 100%;
}

/* ---------- الكارد ---------- */
.ebmnt1-services__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ebmnt1-services-card-border-color);
    border-radius: var(--ebmnt1-services-card-radius);
    background-color: var(--ebmnt1-services-card-background-color);
    transition: transform var(--ebmnt1-transition-base), box-shadow var(--ebmnt1-transition-base), border-color var(--ebmnt1-transition-base);
}

.ebmnt1-services__card:hover {
    transform: translateY(-6px);
    border-color: var(--ebmnt1-services-card-hover-border-color);
    box-shadow: 0 14px 30px var(--ebmnt1-services-card-shadow-color);
}

.ebmnt1-services__media {
    overflow: hidden;
    aspect-ratio: var(--ebmnt1-services-image-ratio);
}

.ebmnt1-services__media .ebmnt1-notch__media {
    border-radius: 0;
    transition: transform 0.5s ease;
}

.ebmnt1-services__card:hover .ebmnt1-notch__media {
    transform: scale(1.06);
}

.ebmnt1-services__icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ebmnt1-services-icon-size);
    height: var(--ebmnt1-services-icon-size);
    border-radius: var(--ebmnt1-services-icon-radius);
    background-color: var(--ebmnt1-services-icon-background-color);
    font-size: var(--ebmnt1-services-icon-font-size);
    color: var(--ebmnt1-services-icon-color);
    transition: background-color var(--ebmnt1-transition-base), color var(--ebmnt1-transition-base);
}

.ebmnt1-services__card:hover .ebmnt1-services__icon-box {
    background-color: var(--ebmnt1-services-icon-hover-background-color);
    color: var(--ebmnt1-services-icon-hover-color);
}

.ebmnt1-services__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ebmnt1-services-body-gap);
    padding: var(--ebmnt1-services-body-padding);
}

.ebmnt1-services__text-group {
    display: flex;
    flex-direction: column;
    gap: var(--ebmnt1-services-text-gap);
}

.ebmnt1-services__title {
    font-size: var(--ebmnt1-font-size-small-title);
    font-weight: var(--ebmnt1-font-weight-bold);
    color: var(--ebmnt1-services-title-text-color);
    transition: color var(--ebmnt1-transition-base);
}

.ebmnt1-services__card:hover .ebmnt1-services__title {
    color: var(--ebmnt1-services-title-hover-text-color);
}

.ebmnt1-services__text {
    color: var(--ebmnt1-services-description-text-color);
}

.ebmnt1-services__button {
    padding: var(--ebmnt1-services-button-padding-block) var(--ebmnt1-services-button-padding-inline);
}