/* الشبكة */
.genre-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr)); /* Desktop = 5 */
  gap:18px;
  max-width:1200px;
  margin:150px auto 0;     /* إنزال 150px للأسفل */
  padding:0 16px;
  align-items:stretch;      /* خلي كل العناصر تاخد نفس الارتفاع */
}

/* بطاقة الوصف (تمتد بعرض الشبكة كله) */
.description-card{
  grid-column:1 / -1;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  padding:18px 22px;
  font: normal 14px/1.5 'ShareTech', sans-serif;
  color:#707070;
  text-align:center;
}

/* البطاقة */
.genre-card{
  display:flex;
  align-items:center;
  gap:12px;                 /* مسافة بين الأيقونة والنص */
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  min-height:72px;          /* نفس الارتفاع لكل البطاقات */
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}

/* أيقونة */
.genre-card img{
  flex:0 0 40px;            /* عرض ثابت للأيقونة */
  width:40px; height:40px;
  aspect-ratio:1/1;         /* يمنع الـCLS */
  object-fit:contain;
}

/* اسم القسم */
.genre-card .genre-label{
  flex:1 1 auto;
  font-weight:400;
  font-size:clamp(14px,1.6vw,18px);
  color:#004ea1;
  white-space:nowrap;       /* يمنع كسر السطر */
  overflow:hidden;
  text-overflow:ellipsis;
  margin-left: 10px;
}

/* تأثير عند المرور */
.genre-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* تأثير عند المرور */
.genre-card:hover img{
  animation: shake-icon 0.6s ease-in-out;
}



/* أيقونة الاهتزاز */
@keyframes shake-icon {
  0% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-10deg) scale(1.2); }
  40% { transform: rotate(10deg) scale(1.2); }
  60% { transform: rotate(-8deg) scale(1.1); }
  80% { transform: rotate(8deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}


/* تابلت: 3 أعمدة وأحجام أنسب */
@media (max-width:1024px){
  .genre-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .genre-card{ min-height:66px; padding:12px 14px; }
  .genre-card img{ width:36px; height:36px; flex-basis:36px; }
}

/* موبايل: عمودان */
@media (max-width:600px){
  .genre-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .genre-card{ min-height:60px; padding:12px; }
  .genre-card img{ width:32px; height:32px; flex-basis:32px; }
}