/**
 * ============================================================================
 * MPP GROUP — MODERN COURSE CARD CUSTOM CSS (.student-course-item-card)
 * Premium Modern EdTech Card Design System
 * Path: front/assets/css/course-card.css
 * ============================================================================
 */

:root {
  --course-card-bg: #ffffff;
  --course-card-border: #e2e8f0;
  --course-card-border-hover: #38bdf8;
  --course-card-radius: 10px; /* 10px course card curve */
  --course-btn-radius: 10px;  /* Strict 10px button standard */
  --course-title-color: #0f172a;
  --course-sub-color: #64748b;
  --course-primary: #0284c7;
  --course-success: #10b981;
}

/* ==========================================================================
   1. MAIN CARD CONTAINER
   ========================================================================== */
.student-course-item-card {
  background: var(--course-card-bg) !important;
  border: 1px solid var(--course-card-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.06), 0 1px 3px -1px rgba(15, 23, 42, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  gap: 0 !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.28s ease !important;
  overflow: hidden !important;
}

.student-course-item-card:hover,
.student-course-item-card:focus-within {
  transform: translateY(-6px) !important;
  border-color: var(--course-card-border-hover) !important;
  box-shadow: 0 20px 30px -10px rgba(2, 132, 199, 0.16), 0 10px 15px -3px rgba(15, 23, 42, 0.06) !important;
  z-index: 10 !important;
}

/* ==========================================================================
   2. TOP BANNER / VECTOR THUMBNAIL
   ========================================================================== */
.student-course-banner-box {
  width: 100% !important;
  aspect-ratio: 200 / 125 !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  background: #0b1329 !important;
  border-radius: 10px 10px 0 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.student-course-banner-media {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: 10px 10px 0 0 !important;
}

.student-course-banner-box svg,
.student-course-banner-box img,
.student-course-banner-svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.student-course-item-card:hover .student-course-banner-media svg,
.student-course-item-card:hover .student-course-banner-media img {
  transform: scale(1.05) !important;
}

/* Subtle top shadow gradient so badges are hyper-readable */
.student-course-banner-box::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50px !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ==========================================================================
   3. STATUS PILL BADGE & ACTION DROPDOWN
   ========================================================================== */
.student-course-badge {
  position: absolute !important;
  top: 9px !important;
  right: 42px !important;
  z-index: 2 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 3.5px 10px !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.student-course-badge.is-active,
.student-course-badge.is-completed {
  background: rgba(220, 252, 231, 0.94) !important;
  color: #15803d !important;
  border: 1px solid rgba(134, 239, 172, 0.9) !important;
}

.student-course-badge.is-in-progress {
  background: rgba(224, 242, 254, 0.94) !important;
  color: #0369a1 !important;
  border: 1px solid rgba(186, 230, 253, 0.9) !important;
}

.student-course-more-btn {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  z-index: 2 !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
}

.student-course-more-btn:hover {
  background: rgba(15, 23, 42, 0.95) !important;
  transform: scale(1.08) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.student-course-banner-box .dropdown-menu {
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15) !important;
  min-width: 175px !important;
  overflow: hidden !important;
  padding: 4px 0 !important;
}

.student-course-banner-box .dropdown-item {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  padding: 8px 14px !important;
  transition: all 0.15s ease !important;
}

.student-course-banner-box .dropdown-item:hover {
  background: #f0f7ff !important;
  color: #0284c7 !important;
  padding-left: 17px !important;
}

/* ==========================================================================
   4. DETAILS CONTENT BOX
   ========================================================================== */
.student-course-details-box {
  min-width: 0 !important;
  padding: 13px 15px 15px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 7px !important;
  background: #ffffff !important;
  border-top: 0 !important;
}

/* Category Pill */
.student-course-category-pill {
  width: max-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 4px !important;
  padding: 2.5px 8px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #dbeafe !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
}

/* Course Name (Title) */
.student-course-name {
  font-family: var(--display, 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--course-title-color) !important;
  line-height: 1.35 !important;
  margin-bottom: 0 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.2s ease !important;
}

.student-course-name:hover {
  color: var(--course-primary) !important;
}

/* Course Code */
.student-course-code {
  color: var(--course-sub-color) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.3px !important;
}

/* ==========================================================================
   5. 4-STAT MODERN COLOR GRID
   ========================================================================== */
.student-course-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
  margin: 4px 0 !important;
}

.student-course-stat-grid span {
  min-width: 0 !important;
  border-radius: 5px !important;
  padding: 6.5px 3px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
  cursor: default !important;
}

.student-course-stat-grid span:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Column 1: Lessons (Sky Blue) */
.student-course-stat-grid span:nth-child(1) {
  background: #f0f9ff !important;
  border: 1px solid #e0f2fe !important;
  color: #0284c7 !important;
}

/* Column 2: Subjects (Emerald Green) */
.student-course-stat-grid span:nth-child(2) {
  background: #f0fdf4 !important;
  border: 1px solid #dcfce7 !important;
  color: #16a34a !important;
}

/* Column 3: Students (Purple / Indigo) */
.student-course-stat-grid span:nth-child(3) {
  background: #faf5ff !important;
  border: 1px solid #f3e8ff !important;
  color: #7e22ce !important;
}

/* Column 4: Tests (Rose / Pink) */
.student-course-stat-grid span:nth-child(4) {
  background: #fff1f2 !important;
  border: 1px solid #ffe4e6 !important;
  color: #e11d48 !important;
}

.student-course-stat-grid i {
  font-size: 13px !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}

.student-course-stat-grid strong {
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.student-course-stat-grid small {
  margin-top: 2px !important;
  color: #64748b !important;
  font-size: 8.5px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* ==========================================================================
   6. META ROW (Duration, Faculty, Price)
   ========================================================================== */
.student-course-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  font-size: 11.5px !important;
  color: #475569 !important;
  flex-wrap: wrap !important;
  padding: 5px 0 !important;
  border-top: 1px dashed #e2e8f0 !important;
}

.student-course-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  font-weight: 500 !important;
}

.student-course-meta-item i {
  font-size: 12px !important;
  color: #64748b !important;
}

/* Hint Row */
.student-course-hint-text {
  font-size: 11.5px !important;
  color: #64748b !important;
  line-height: 1.3 !important;
  margin-bottom: 2px !important;
}

/* ==========================================================================
   7. ACTION BUTTONS (Curriculum & View Details)
   Strictly 10px radius standard per platform rules
   ========================================================================== */
.student-course-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 0.35rem !important;
  flex-wrap: nowrap !important;
}

.student-course-btn-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-height: 35px !important;
  flex: 1 1 0 !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  border-radius: var(--course-btn-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25) !important;
  transition: all 0.22s ease !important;
}

.student-course-btn-primary:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.38) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.student-course-btn-outline {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  min-height: 35px !important;
  flex: 1 1 0 !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  border-radius: var(--course-btn-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
}

.student-course-btn-outline:hover {
  background: #f0f7ff !important;
  border-color: #3b82f6 !important;
  color: #0284c7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15) !important;
}

/* ==========================================================================
   8. MARQUEE CONTINUOUS STREAM SIZING
   ========================================================================== */
.courses-marquee-track .student-course-item-card {
  width: 295px !important;
  min-width: 295px !important;
  max-width: 295px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.course-moving-card {
  width: 295px !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: flex !important;
}