/* ==========================================================
   ebmnt1-countries.css
   الأسواق العربية: كروت الدول
   بنفس هوية الموقع (خلفية halftone + كروت بيضا بحواف 15px + دايرة أيقونة)
   ========================================================== */

:root {
    /* ---------- ألوان ---------- */
    --ebmnt1-countries-background-image: url("../images/halftone-texture.jpg");
    --ebmnt1-countries-card-background-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-countries-card-border-color: var(--ebmnt1-color-helper-border-gray);
    --ebmnt1-countries-card-hover-border-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-countries-card-shadow-color: var(--ebmnt1-color-helper-shadow);
    --ebmnt1-countries-icon-background-color: var(--ebmnt1-color-primary-blue);
    --ebmnt1-countries-icon-color: var(--ebmnt1-color-helper-white);
    --ebmnt1-countries-icon-hover-background-color: var(--ebmnt1-color-secondary-yellow);
    --ebmnt1-countries-icon-hover-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-countries-name-text-color: var(--ebmnt1-color-helper-heading-dark);
    --ebmnt1-countries-meta-text-color: var(--ebmnt1-color-helper-body-gray);

    /* ---------- مقاسات ---------- */
    --ebmnt1-countries-grid-gap: 0.5rem;
    --ebmnt1-countries-columns: 3;
    --ebmnt1-countries-card-radius: 15px;
    --ebmnt1-countries-card-gap: 0.5em;
    --ebmnt1-countries-card-padding-block: 0.9em;
    --ebmnt1-countries-card-padding-inline: 0.3em;
    --ebmnt1-countries-icon-size: 2.4rem;
    --ebmnt1-countries-icon-font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.2rem);
    --ebmnt1-countries-heading-max-width: 100%;
}

@media (min-width: 768px) {
    :root {
        --ebmnt1-countries-columns: 4;
        --ebmnt1-countries-grid-gap: 1rem;
        --ebmnt1-countries-card-padding-block: 1.1em;
        --ebmnt1-countries-icon-size: 3rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --ebmnt1-countries-columns: 5;
        --ebmnt1-countries-grid-gap: 1.25rem;
        --ebmnt1-countries-heading-max-width: 58%;
    }
}

.ebmnt1-countries {
    background-image: var(--ebmnt1-countries-background-image);
    background-position: 0 0;
}

.ebmnt1-countries__heading {
    max-width: var(--ebmnt1-countries-heading-max-width);
}

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

.ebmnt1-countries__card {
    flex: 0 0 calc((100% - (var(--ebmnt1-countries-columns) - 1) * var(--ebmnt1-countries-grid-gap)) / var(--ebmnt1-countries-columns));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ebmnt1-countries-card-gap);
    padding: var(--ebmnt1-countries-card-padding-block) var(--ebmnt1-countries-card-padding-inline);
    border: 1px solid var(--ebmnt1-countries-card-border-color);
    border-radius: var(--ebmnt1-countries-card-radius);
    background-color: var(--ebmnt1-countries-card-background-color);
    text-align: center;
    transition: transform var(--ebmnt1-transition-base), box-shadow var(--ebmnt1-transition-base), border-color var(--ebmnt1-transition-base);
}

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

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

.ebmnt1-countries__card:hover .ebmnt1-countries__icon {
    background-color: var(--ebmnt1-countries-icon-hover-background-color);
    color: var(--ebmnt1-countries-icon-hover-color);
}

.ebmnt1-countries__name {
    font-size: var(--ebmnt1-font-size-small-title);
    font-weight: var(--ebmnt1-font-weight-semibold);
    color: var(--ebmnt1-countries-name-text-color);
}

.ebmnt1-countries__meta {
    display: none;
    font-size: var(--ebmnt1-font-size-caption);
    color: var(--ebmnt1-countries-meta-text-color);
}

@media (min-width: 768px) {
    .ebmnt1-countries__meta {
        display: block;
    }
}