/* Learning path rows: hover effects (loaded after the page's own styles) */

.path-course-item {
  position: relative !important;
}
.path-course-item > * { position: relative; z-index: 1; }

/* Cyan wash behind the row */
.path-course-item::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(90deg, rgba(0,212,255,.12), rgba(0,212,255,.04) 45%, transparent 85%);
}

/* Glowing bar on the left edge */
.path-course-item::before {
  display: block !important;
  content: '';
  position: absolute; left: 0; top: 16%; bottom: 16%; width: 3px;
  border-radius: 0 3px 3px 0;
  background: #00d4ff;
  box-shadow: 0 0 14px rgba(0,212,255,.8);
  opacity: 0; transform: scaleY(0); transform-origin: center;
  transition: transform .3s ease, opacity .3s ease;
}

.path-course-thumb {
  border-radius: 10px !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.path-course-thumb img { transition: transform .45s ease; }
.path-course-info { transition: transform .3s ease; }
.path-course-name { transition: color .3s ease; }
.path-course-item .course-progress-fill {
  transition: filter .3s ease, box-shadow .3s ease;
}

/* Only for devices with a real mouse */
@media (hover: hover) and (pointer: fine) {
  .path-course-item:is(:hover, :focus-visible) {
    background: transparent !important;
    border-bottom-color: rgba(0,212,255,.3) !important;
    outline: none;
  }
  .path-course-item:is(:hover, :focus-visible)::after { opacity: 1; }
  .path-course-item:is(:hover, :focus-visible)::before { opacity: 1; transform: scaleY(1); }

  .path-course-item:is(:hover, :focus-visible) .path-course-thumb {
    transform: scale(1.07);
    border-color: rgba(0,212,255,.55);
    box-shadow: 0 0 0 3px rgba(0,212,255,.1), 0 8px 22px rgba(0,0,0,.5), 0 0 22px rgba(0,212,255,.25);
  }
  .path-course-item:is(:hover, :focus-visible) .path-course-thumb img { transform: scale(1.12); }

  .path-course-item:is(:hover, :focus-visible) .path-course-info { transform: translateX(6px); }
  .path-course-item:is(:hover, :focus-visible) .path-course-name { color: #00d4ff; }

  .path-course-item:is(:hover, :focus-visible) .course-progress-fill {
    filter: brightness(1.25) saturate(1.15);
    box-shadow: 0 0 10px rgba(255,255,255,.28);
  }

  /* "Open" arrow badge, shown only here so touch screens lose no space */
  .path-course-arrow {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
    font-size: 1rem; line-height: 1; color: #00d4ff;
    background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.3);
    opacity: 0; transform: translateX(-10px);
    transition: opacity .3s ease, transform .3s ease, background .3s ease;
  }
  .path-course-item:is(:hover, :focus-visible) .path-course-arrow {
    opacity: 1; transform: none; background: rgba(0,212,255,.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .path-course-item *, .path-course-item::before, .path-course-item::after {
    transition: none !important; transform: none !important;
  }
}

/* ═══ PATH HERO COMPACT ═══ */
.path-hero-inner { padding-top: 5.25rem !important; padding-bottom: 1.5rem !important; }
.path-hero-eyebrow { margin-bottom: .35rem !important; font-size: .7rem !important; }
.path-hero-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.01em !important;
  margin-bottom: .5rem !important;
}
.path-hero-desc {
  font-size: .92rem !important; line-height: 1.55 !important;
  max-width: 680px !important; margin-bottom: 1rem !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.path-stat-row { gap: .5rem !important; margin-bottom: 1rem !important; }
.path-stat {
  display: inline-flex !important; align-items: center !important; gap: .55rem !important;
  min-width: 0 !important; padding: .4rem .9rem !important; border-radius: 999px !important;
}
.path-stat-label { margin: 0 !important; font-size: .8rem !important; color: #8b98ab !important; }
.path-stat-label::after { content: ':'; }
.path-stat-value { font-size: .95rem !important; gap: .4rem !important; }
.path-stat-value svg { width: 15px !important; height: 15px !important; color: #00d4ff; }
.path-cta-row { gap: .9rem !important; }
.path-progress-ring { width: 44px !important; height: 44px !important; }
.path-progress-ring span { width: 36px !important; height: 36px !important; font-size: .68rem !important; }
.path-start-btn { padding: .65rem 1.4rem !important; font-size: .85rem !important; }

@media (max-width: 600px) {
  .path-hero-inner { padding-top: 4.75rem !important; padding-bottom: 1.25rem !important; }
  .path-hero-title { font-size: 1.5rem !important; }
  .path-hero-desc { font-size: .88rem !important; margin-bottom: .85rem !important; }
  .path-stat { min-width: 0 !important; padding: .35rem .75rem !important; }
}