/* ===== Agents: Responsive Image Grid (No Slider) ===== */
:root{
  --navy:#05103A;
  --ink:#0d1b2a;
  --paper:#ffffff;
  --line:#e6e9f0;
  --accent:#ffb367;
  --shadow-sm:0 6px 18px rgba(0,0,0,.06);
  --shadow-lg:0 14px 26px rgba(0,0,0,.09);
}

/* Section */
.agents-section{
  background: var(--paper);
  padding: clamp(48px, 6vw, 84px) 0;
  color: var(--ink);
}
.ag-container{
  width:min(1200px,92%);
  margin-inline:auto;
}
.ag-title{
  text-align:center;
  color:var(--navy);
  font-weight:900;
  font-size:clamp(22px,3vw,36px);
  margin:0 0 clamp(18px,3vw,26px);
  letter-spacing:.02em;
}

/* ========= GRID ========= */
.ag-grid{
  display:grid;
  gap: clamp(16px, 2.2vw, 24px);           /* المسافة بين العناصر */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-items: stretch;
}

/* ========= ITEM ========= */
.ag-item{
  /* صندوق الصورة */
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow-sm);
  overflow:hidden;                          /* يمنع بروز الصور فوق الشبكة */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(12px, 1.6vw, 16px);
  height: clamp(110px, 14vw, 140px);        /* ارتفاع موحد لكل الكروت */
  position: relative;
  z-index: 0;                               /* يمنع تراكب غير مقصود */
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ag-item img{
  display:block;                            /* يمنع فجوة تحت الصورة */
  max-width:100%;
  max-height:100%;
  object-fit:contain;                        /* احتواء دون قص */
  filter: grayscale(20%) contrast(105%);
  transition: filter .2s ease, transform .2s ease;
}

/* Hover focus */
.ag-item:hover,
.ag-item:focus-within{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
  z-index: 1;                               /* فوق الجيران فقط أثناء الهوفر */
}
.ag-item:hover img,
.ag-item:focus-within img{
  filter:none;
  transform: scale(1.02);
}

/* Empty state */
.ag-empty{
  text-align:center;
  color:#52606d;
  background:#f7f8fb;
  border:1px dashed var(--line);
  border-radius:12px;
  padding:16px;
  margin-top:12px;
}

/* ====== Responsive tweaks ====== */
@media (max-width: 920px){
  .ag-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ag-item{ height: clamp(100px, 18vw, 130px); }
}
@media (max-width: 620px){
  .ag-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ag-item{ height: clamp(90px, 22vw, 120px); }
}

/* RTL (لا يؤثر كثيراً هنا لكن للاتساق) */
[dir="rtl"] .ag-grid{ direction: rtl; }