/* ==========================================================================
   Classes (classes.php) — page-specific styles
   Reuses shared components from style.css (.hero banner, .cards, .pillars,
   .prose, .course-banner).
   ========================================================================== */

/* "مشاهده جزئیات" و "ثبت‌نام دوره" — رنگ مشترک این کلاس‌ها الان کم‌رنگه
   (--c-blue-deep روشن شده)؛ اینجا فقط برای همین صفحه تیره‌تر شده. */
body[data-page="classes"] .btn-soft {
  color: #075A7A;
}
body[data-page="classes"] .btn-primary {
  background: #075A7A;
}

/* "۱۰ جلسه" / زمان‌بندی / قیمت — همون دلیل، یه‌کم تیره‌تر شد. */
body[data-page="classes"] .course-facts .fact strong {
  color: #075A7A;
}
body[data-page="classes"] .course-facts .fact span {
  color: #075A7A;
}
body[data-page="classes"] .price-tag {
  color: #075A7A;
}

/* Line-art pose icons replacing the plain diamond mark above each pillar. */
body[data-page="classes"] .pillar-icon {
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 auto 18px;
  background: none;
  object-fit: contain;
}

/* Pillars and "درباره این سیستم تمرینی" are two adjacent .section-alt
   blocks; their default padding stacked into ~120px of dead space
   between the icons and the About heading. Tighten just this pair. */
body[data-page="classes"] #balanceflex {
  padding-bottom: 20px;
}
body[data-page="classes"] #balanceflex + section {
  padding-top: 20px;
}

/* Mobile: force the 2-column pillar grid explicitly for this page so
   تعادل and کنترل بدن (items 3 & 4) always land on the same row. */
@media (max-width: 820px) {
  body[data-page="classes"] .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}