/* ================================================================
   homepage_engine.css — ستايل المحرك الديناميكي للصفحة الرئيسية
   مجلة المعرفة
   ================================================================ */

/* --- البطاقة الأساسية --- */
.hp-card {
  border: none;
  border-radius: 14px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}
.hp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.13) !important;
}
.hp-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 14px 14px 0 0;
}
.hp-card-img-placeholder {
  border-radius: 14px 14px 0 0;
}

/* --- قسم HP --- */
.hp-section {
  border-top: 1px solid rgba(0,0,0,0.06);
}
.hp-section-icon {
  transition: transform 0.2s;
}
.hp-section:hover .hp-section-icon {
  transform: rotate(8deg) scale(1.1);
}

/* --- أزرار المشاركة --- */
.card-share-bar {
  border-top: 1px solid rgba(0,0,0,0.07);
  padding-top: 10px;
}
.share-icons {
  gap: 6px !important;
}
.share-btn {
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}
.share-btn:hover {
  opacity: 0.88;
}

/* --- أزرار الموضوع --- */
.topic-action-buttons .btn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
}
.topic-btn-copy:hover { background-color: #6c757d; color: #fff; }
.topic-btn-tts:hover  { background-color: #0d6efd; color: #fff; }
.topic-btn-fav:hover  { background-color: #ffc107; border-color: #ffc107; color: #000; }

/* --- بلوكات داخل القسم --- */
.hp-block {
  padding: 0 0 4px 0;
}
.hp-block-title {
  font-size: 0.95rem;
  color: #444;
  border-color: #dee2e6 !important;
}

/* --- وضع الشاشات الصغيرة --- */
@media (max-width: 576px) {
  .hp-card-img { height: 130px; }
  .share-btn   { width: 26px !important; height: 26px !important; font-size: 10px !important; }
  .topic-action-buttons .btn { font-size: 10px; padding: 2px 6px; }
}

/* --- لون بنفسجي (text-purple) غير موجود في Bootstrap افتراضياً --- */
.text-purple  { color: #6f42c1 !important; }
.text-pink    { color: #d63384 !important; }
.text-orange  { color: #fd7e14 !important; }