/* =========================================================
   countries.css — الدول / الأسواق العربية: كروت بأعلام
   ========================================================= */

:root {
  --ebmnt1-countries-inner-bg-color: #ebf2f4;
  --ebmnt1-countries-grid-gap: 1em;

  --ebmnt1-countries-card-bg-color: #ffffff;
  --ebmnt1-countries-card-border-color: transparent;
  --ebmnt1-countries-card-hover-border-color: #ffc107;
  --ebmnt1-countries-card-hover-shadow-color: rgba(0, 66, 80, 0.18);
  --ebmnt1-countries-card-radius: 1.5rem;
  --ebmnt1-countries-flag-border-color: #ffc107;
  --ebmnt1-countries-name-font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  --ebmnt1-countries-name-text-color: #004250;
  --ebmnt1-countries-meta-font-size: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem);
  --ebmnt1-countries-meta-text-color: #666666;
  --ebmnt1-countries-meta-icon-color: #ffc107;
  --ebmnt1-countries-intro-font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --ebmnt1-countries-intro-text-color: #555555;
}

.ebmnt1-countries__inner {
  background-color: var(--ebmnt1-countries-inner-bg-color);
}

.ebmnt1-countries__intro {
  max-width: 40rem;
  font-size: var(--ebmnt1-countries-intro-font-size);
  color: var(--ebmnt1-countries-intro-text-color);
}

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

.ebmnt1-countries__item {
  flex: 1 1 calc((100% - var(--ebmnt1-countries-grid-gap)) / 2);
  max-width: calc((100% - var(--ebmnt1-countries-grid-gap)) / 2);
  display: flex;
}

.ebmnt1-country-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  padding: 1.3em 0.8em;
  text-align: center;
  background-color: var(--ebmnt1-countries-card-bg-color);
  border: 2px solid var(--ebmnt1-countries-card-border-color);
  border-radius: var(--ebmnt1-countries-card-radius);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.ebmnt1-country-card:hover {
  transform: translateY(-0.5em);
  border-color: var(--ebmnt1-countries-card-hover-border-color);
  box-shadow: 0 1em 2em var(--ebmnt1-countries-card-hover-shadow-color);
}

.ebmnt1-country-card__flag {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border: 3px solid var(--ebmnt1-countries-flag-border-color);
  border-radius: 50%;
  transition: transform 0.5s ease;
}

.ebmnt1-country-card:hover .ebmnt1-country-card__flag {
  transform: rotate(-8deg) scale(1.08);
}

.ebmnt1-country-card__name {
  font-size: var(--ebmnt1-countries-name-font-size);
  font-weight: 800;
  color: var(--ebmnt1-countries-name-text-color);
}

.ebmnt1-country-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--ebmnt1-countries-meta-font-size);
  color: var(--ebmnt1-countries-meta-text-color);
}

.ebmnt1-country-card__meta i {
  color: var(--ebmnt1-countries-meta-icon-color);
}

@media (min-width: 768px) {
  .ebmnt1-countries__item {
    flex: 1 1 calc((100% - 2 * var(--ebmnt1-countries-grid-gap)) / 3);
    max-width: calc((100% - 2 * var(--ebmnt1-countries-grid-gap)) / 3);
  }
}

@media (min-width: 1200px) {
  .ebmnt1-countries__item {
    flex: 1 1 calc((100% - 3 * var(--ebmnt1-countries-grid-gap)) / 4);
    max-width: calc((100% - 3 * var(--ebmnt1-countries-grid-gap)) / 4);
  }
}