/* ==========================================================================
   Eduhubx Child — Course catalog / archive (Tutor LMS)
   CSS-first restyle of Tutor's course listing. Selectors target stable Tutor
   classes; verify against live markup if a rule doesn't land (see README).
   ========================================================================== */

/* Archive header band */
.ehx-scope .tutor-course-archive-filter-bar,
.ehx-scope .tutor-archive-course-header {
  background: var(--ehx-surface); border: 1px solid var(--ehx-border);
  border-radius: var(--ehx-r-card); padding: var(--ehx-s4) var(--ehx-s5);
  box-shadow: var(--ehx-shadow-sm); margin-bottom: var(--ehx-s6);
}

/* Listing grid */
.ehx-scope .tutor-courses,
.ehx-scope .tutor-course-listing-grid,
.ehx-scope [class*="tutor-courses"][class*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ehx-s5);
}

/* Tutor course card → match our card language */
.ehx-scope .tutor-course-card,
.ehx-scope .tutor-course-listing-item {
  background: var(--ehx-surface) !important;
  border: 1px solid var(--ehx-border) !important;
  border-radius: var(--ehx-r-card) !important;
  box-shadow: var(--ehx-shadow-sm);
  overflow: hidden;
  transition: transform var(--ehx-dur) var(--ehx-ease),
              box-shadow var(--ehx-dur) var(--ehx-ease),
              border-color var(--ehx-dur) var(--ehx-ease);
}
.ehx-scope .tutor-course-card:hover,
.ehx-scope .tutor-course-listing-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--ehx-shadow-lg);
  border-color: var(--ehx-border-strong) !important;
}
.ehx-scope .tutor-course-thumbnail,
.ehx-scope .tutor-course-card .tutor-card-image { aspect-ratio: 16/9; overflow: hidden; }
.ehx-scope .tutor-course-thumbnail img { width: 100%; height: 100%; object-fit: cover;
  transition: scale var(--ehx-dur) var(--ehx-ease); }
.ehx-scope .tutor-course-card:hover .tutor-course-thumbnail img { scale: 1.05; }

.ehx-scope .tutor-course-name,
.ehx-scope .tutor-course-card .tutor-course-name a {
  font-family: var(--ehx-font-head) !important;
  color: var(--ehx-ink) !important; line-height: 1.3;
}
.ehx-scope .tutor-course-name a:hover { color: var(--ehx-primary) !important; }

/* Price / enroll */
.ehx-scope .tutor-course-price,
.ehx-scope .price { font-family: var(--ehx-font-head); color: var(--ehx-primary); font-weight: 700; }
.ehx-scope .tutor-course-card .tutor-btn,
.ehx-scope .tutor-course-listing-item .tutor-btn {
  border-radius: var(--ehx-r-btn) !important;
}

/* Buttons site-wide within Tutor */
.ehx-scope .tutor-btn-primary,
.ehx-scope .tutor-btn.tutor-btn-primary {
  background: var(--ehx-primary) !important; border-color: var(--ehx-primary) !important;
  color: var(--ehx-on-primary) !important; border-radius: var(--ehx-r-btn) !important;
}
.ehx-scope .tutor-btn-primary:hover { background: var(--ehx-primary-dark) !important; }

/* Pagination */
.ehx-scope .tutor-pagination a,
.ehx-scope .tutor-pagination span {
  border-radius: var(--ehx-r-sm) !important; border-color: var(--ehx-border) !important;
}
.ehx-scope .tutor-pagination .current,
.ehx-scope .tutor-pagination a:hover {
  background: var(--ehx-primary) !important; color: #fff !important; border-color: var(--ehx-primary) !important;
}