/**
 * @file
 * Styles for the courses listing page (view-courses).
 * Override LMS course_card component styles.
 */

/* Course listing grid */
.view-courses .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Override LMS course card styling */
.view-courses .lms-course-card {
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 280px !important;
}

.view-courses .lms-course-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Remove overlay */
.view-courses .lms-course-card__overlay {
  display: none !important;
}

/* Content styling */
.view-courses .lms-course-card__content {
  padding: 1.5rem !important;
  background: transparent !important;
}

/* Title */
.view-courses .lms-course-card__title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #333 !important;
  text-shadow: none !important;
  margin-bottom: 0.5rem !important;
}

.view-courses .lms-course-card__link {
  color: transparent !important;
}

/* Description */
.view-courses .lms-course-card__description {
  color: #666 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
  flex-grow: 1 !important;
}

/* Action buttons - override green to theme blue */
.view-courses .lms-start-link a,
.view-courses .lms-start-link a.start-link--start,
.view-courses .lms-start-link a.start-link--continue {
  display: block !important;
  width: 100% !important;
  padding: 0.75rem 1.5rem !important;
  background-color: #0d75a3 !important;
  color: #ffffff !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
  box-shadow: none !important;
}

.view-courses .lms-start-link a:hover,
.view-courses .lms-start-link a:focus,
.view-courses .lms-start-link a.start-link--start:hover,
.view-courses .lms-start-link a.start-link--continue:hover {
  background-color: #095a7e !important;
  transform: translateY(-2px) !important;
  filter: none !important;
}

/* Footer */
.view-courses .lms-course-card__footer {
  margin-top: 1rem !important;
  padding: 0 !important;
}

/* Meta info styling if present */
.view-courses .lms-course-card__meta-label {
  color: #666 !important;
  text-shadow: none !important;
  font-family: 'Poppins', sans-serif !important;
}

.view-courses .lms-course-card__meta-content {
  color: #333 !important;
  text-shadow: none !important;
}

/* Reset LMS course status styling */
.view-courses .lms-course-status,
.view-courses .lms-course-status--in-progress,
.view-courses .lms-course-status--completed,
.view-courses .lms-course-status--not-started {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
  display: inline !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .view-courses .view-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .view-courses .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .view-courses .view-content {
    grid-template-columns: repeat(3, 1fr);
  }
}