/* ===================================
   Bento Grid System للصفحة الرئيسية
   =================================== */

.bento-grid {
  display: grid;
  gap: var(--space-xl);
  width: 100%;
  grid-auto-flow: dense;
  margin-top: var(--space-4xl);
}

/* ===================================
   كروت الأدوات
   =================================== */
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-2xl);
  min-height: 320px;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-out;
  /* انميشن سريع جداً */
  cursor: pointer;
  text-align: center;
  /* توسيط النص في الكرت بالكامل */
}

.tool-card:hover {
  transform: translateY(-5px);
  /* حركة بسيطة جداً للأعلى */
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15);
}

/* محتوى الكرت */
.tool-card-icon {
  width: 100%;
  max-width: 160px;
  /* حجم أصغر قليلاً وأكثر تناسقاً */
  margin: 0 auto var(--space-xl);
  flex-shrink: 0;
  transition: transform 0.2s ease-out;
}

.tool-card-icon svg,
.tool-card-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.tool-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* توسيط عمودي */
  align-items: center;
  /* توسيط أفقي */
}

.tool-card-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  width: 100%;
}

.tool-card-description {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-md);
  width: 100%;
}

.tool-card-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  margin-top: var(--space-sm);
}

/* إيقاف حركات الأيقونات المزعجة بناءً على طلب المستخدم */
.tool-card:hover .tool-card-icon {
  transform: none;
}

.tool-card:active {
  transform: translateY(-2px) scale(0.99);
}

/* ===================================
   كرت "قريباً" (Coming Soon)
   =================================== */
.tool-card.coming-soon {
  opacity: 0.7;
  cursor: default;
  filter: grayscale(0.8);
}

.tool-card.coming-soon:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===================================
   Responsive Bento Grid
   =================================== */

/* Mobile - كرت واحد في الصف */
@media (max-width: 767px) {
  .bento-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: 0 var(--space-md);
    max-width: 100%;
    margin-top: var(--space-2xl);
  }

  .tool-card {
    padding: var(--space-xl);
    min-height: 260px;
  }

  .tool-card-icon {
    max-width: 120px;
  }

  .tool-card-title {
    font-size: var(--text-xl);
  }
}

/* Tablet & Desktop - كرتين في الصف */
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    max-width: 900px;
    /* تصغير عرض الحاوية لتكون الكروت متقاربة أكثر في المنتصف */
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--space-xl);
  }
}

/* Wide screens */
@media (min-width: 1440px) {
  .bento-grid {
    max-width: 1000px;
  }
}