/* ==========================================================
   services — كروت الخدمات (4 كروت) + خلفية نعناعية مخططة
   ========================================================== */

:root {
    --ebmnt1-services-background: var(--ebmnt1-color-helper-mint);
    --ebmnt1-services-stripe-color: rgba(255, 255, 255, 0.45);
    --ebmnt1-services-cloud-edge-color: var(--ebmnt1-color-page-background);
    --ebmnt1-services-card-background: var(--ebmnt1-color-white);
    --ebmnt1-services-card-border-color: var(--ebmnt1-color-helper-lavender);
    --ebmnt1-services-card-shadow-color: var(--ebmnt1-color-shadow);
    --ebmnt1-services-media-border-color: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-services-title-color: var(--ebmnt1-color-helper-purple);
    --ebmnt1-services-text-color: var(--ebmnt1-color-text);
    --ebmnt1-services-count-color: var(--ebmnt1-color-helper-mint-strong);
    --ebmnt1-services-count-icon-color: var(--ebmnt1-color-secondary);
    --ebmnt1-services-badge-background: var(--ebmnt1-color-helper-magenta);
    --ebmnt1-services-badge-text-color: var(--ebmnt1-color-white);
    --ebmnt1-services-grid-gap: 1.2rem;
    --ebmnt1-services-grid-columns: 1;
    --ebmnt1-services-font-size-title: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
    --ebmnt1-services-font-size-text: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
    --ebmnt1-services-font-size-badge: clamp(0.62rem, 0.58rem + 0.25vw, 0.78rem);
}

.ebmnt1-services {
    background-color: var(--ebmnt1-services-background);
    background-image:
        radial-gradient(circle at 50% 0, var(--ebmnt1-services-cloud-edge-color) 0 1.15rem, transparent 1.2rem),
        repeating-linear-gradient(90deg, var(--ebmnt1-services-stripe-color) 0 2px, transparent 2px 7px);
    background-size: 2.6rem 1.3rem, auto;
    background-repeat: repeat-x, repeat;
    background-position: center top, 0 0;
}

.ebmnt1-services__inner {
    gap: 2.4em;
}

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

.ebmnt1-service-card {
    position: relative;
    flex: 0 0 calc((100% - var(--ebmnt1-services-grid-gap) * (var(--ebmnt1-services-grid-columns) - 1)) / var(--ebmnt1-services-grid-columns));
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    text-align: start;
    transition: transform 0.35s ease;
}

.ebmnt1-service-card:hover {
    transform: translateY(-0.4rem);
}

.ebmnt1-service-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 0.95;
    overflow: hidden;
    margin: 0.45rem;
    border: 2px dashed var(--ebmnt1-services-card-border-color);
    background-color: var(--ebmnt1-services-card-background);
    background-clip: padding-box;
    box-shadow: 0 0 0 0.45rem var(--ebmnt1-services-card-background), 0 0.9rem 1.4rem -0.9rem var(--ebmnt1-services-card-shadow-color);
}

.ebmnt1-service-card__image {
    position: absolute;
    inset: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    object-fit: cover;
    transition: opacity 0.5s ease, transform 0.6s ease;
}

.ebmnt1-service-card__image--hover {
    opacity: 0;
}

.ebmnt1-service-card:hover .ebmnt1-service-card__image--hover {
    opacity: 1;
    transform: scale(1.05);
}

.ebmnt1-service-card:hover .ebmnt1-service-card__image--main {
    opacity: 0;
}

/* شارة الزاوية: تأجير وبيع */
.ebmnt1-service-card__badge-wrap {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 6.5rem;
    height: 6.5rem;
    overflow: hidden;
    pointer-events: none;
}

.ebmnt1-service-card__badge {
    position: absolute;
    top: 1.35rem;
    right: -2.1rem;
    width: 8.5rem;
    padding: 0.2em 0;
    background-color: var(--ebmnt1-services-badge-background);
    color: var(--ebmnt1-services-badge-text-color);
    font-size: var(--ebmnt1-services-font-size-badge);
    font-weight: 700;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.25);
}

.ebmnt1-service-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.ebmnt1-service-card__title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--ebmnt1-services-font-size-title);
    color: var(--ebmnt1-services-title-color);
}

.ebmnt1-service-card__title i {
    color: var(--ebmnt1-services-count-icon-color);
}

.ebmnt1-service-card__text {
    font-size: var(--ebmnt1-services-font-size-text);
    color: var(--ebmnt1-services-text-color);
}

.ebmnt1-service-card__count {
    font-size: var(--ebmnt1-services-font-size-text);
    font-weight: 700;
    color: var(--ebmnt1-services-count-color);
}

.ebmnt1-service-card__action {
    margin-top: auto;
}

@media (min-width: 425px) {
    :root {
        --ebmnt1-services-grid-columns: 1;
    }
}

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

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