/* ==========================================================
   works.css — أعمالنا السابقة (سلايدر بإطلالة على الكاردات المجاورة)
   ========================================================== */
:root {
    --ebmnt1-works-bg: var(--ebmnt1-color-surface-light);
    --ebmnt1-works-card-bg: var(--ebmnt1-color-white);
    --ebmnt1-works-card-border: var(--ebmnt1-color-line-light);
    --ebmnt1-works-card-shadow: var(--ebmnt1-color-shadow);
    --ebmnt1-works-overlay: rgba(115, 75, 223, 0.55);
    --ebmnt1-works-overlay-icon-bg: var(--ebmnt1-color-helper);
    --ebmnt1-works-overlay-icon-color: var(--ebmnt1-color-helper-text);
    --ebmnt1-works-tag-bg: var(--ebmnt1-color-primary-soft);
    --ebmnt1-works-tag-color: var(--ebmnt1-color-primary);
    --ebmnt1-works-title-color: var(--ebmnt1-color-secondary);
    --ebmnt1-works-title-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    --ebmnt1-works-image-radius: 1rem;
}

.ebmnt1-works {
    background-color: var(--ebmnt1-works-bg);
}

.ebmnt1-works__card {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 0.625rem 0.625rem 1.25rem;
    background-color: var(--ebmnt1-works-card-bg);
    border: 1px solid var(--ebmnt1-works-card-border);
    border-radius: var(--ebmnt1-layout-radius-card);
    transition: transform var(--ebmnt1-layout-transition), box-shadow var(--ebmnt1-layout-transition);
}

.ebmnt1-works__card:hover {
    transform: translateY(-0.375rem);
    box-shadow: 0 1rem 2rem var(--ebmnt1-works-card-shadow);
}

.ebmnt1-works__media {
    position: relative;
    aspect-ratio: 4 / 4.6;
    overflow: hidden;
    border-radius: var(--ebmnt1-works-image-radius);
}

.ebmnt1-works__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    -webkit-user-drag: none;
}

.ebmnt1-works__card:hover .ebmnt1-works__media img {
    transform: scale(1.08);
}

.ebmnt1-works__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ebmnt1-works-overlay);
    opacity: 0;
    transition: opacity var(--ebmnt1-layout-transition);
}

.ebmnt1-works__card:hover .ebmnt1-works__overlay {
    opacity: 1;
}

.ebmnt1-works__overlay-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--ebmnt1-works-overlay-icon-color);
    background-color: var(--ebmnt1-works-overlay-icon-bg);
    border-radius: 50%;
}

.ebmnt1-works__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    padding-inline: 0.75rem;
}

.ebmnt1-works__tag {
    padding: 0.25em 0.9em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ebmnt1-works-tag-color);
    background-color: var(--ebmnt1-works-tag-bg);
    border-radius: var(--ebmnt1-layout-radius-pill);
}

.ebmnt1-works__title {
    font-size: var(--ebmnt1-works-title-size);
    font-weight: 700;
    color: var(--ebmnt1-works-title-color);
}