/* Popular Courses slider — Hiring Training v3.
   Self-contained: every rule is scoped to #sec-courses, so it renders identically on
   any page and never affects other sections. Tokens are declared on the section itself.
   Mirrors design_handoff_popular_courses/section.html. */

#sec-courses {
  --frost:#EBF5EB; --lime:#96F782; --leaf:#00A75C; --emerald:#147054; --ocean:#03261F;
  --r-lg:28px; --r-pill:999px;
  padding:60px 0;
  background:var(--ocean);
  color:var(--frost);
  font-family:"TT Hoves Pro","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#sec-courses *,
#sec-courses *::before,
#sec-courses *::after { box-sizing:border-box; }
#sec-courses .shell { max-width:1440px; margin:0 auto; padding:0 40px; }

/* ---- header bar ---- */
#sec-courses .courses__bar { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:40px; }
#sec-courses .courses__intro { max-width:620px; }
#sec-courses .eyebrow {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
  padding:8px 14px 8px 12px; border-radius:var(--r-pill);
  border:1px solid rgba(150,247,130,0.28); background:transparent; color:var(--lime);
  font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
}
#sec-courses .eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--lime); flex:none; }
#sec-courses .section__title { margin:0; font-weight:500; font-size:clamp(34px,4vw,56px); line-height:1.0; letter-spacing:-0.025em; color:var(--frost); }
#sec-courses .section__title .em { color:var(--lime); font-style:normal; }
#sec-courses .courses__nav { display:flex; align-items:center; gap:12px; flex:none; padding-bottom:6px; }
#sec-courses .courses__arrow {
  width:52px; height:52px; border-radius:50%; padding:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(235,245,235,0.06); border:1px solid rgba(235,245,235,0.20); color:var(--frost);
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
}
#sec-courses .courses__arrow svg { width:20px; height:20px; }
#sec-courses .courses__arrow:hover { background:var(--lime); border-color:var(--lime); color:var(--ocean); transform:translateY(-1px); }
#sec-courses .courses__arrow:disabled { opacity:0.3; cursor:default; }
#sec-courses .courses__arrow:disabled:hover { background:rgba(235,245,235,0.06); border-color:rgba(235,245,235,0.20); color:var(--frost); transform:none; }

/* ---- viewport + track ---- */
#sec-courses .courses__viewport {
  overflow:hidden; margin:0 -40px; padding:6px 40px 8px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 90px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 90px), transparent 100%);
}
#sec-courses .courses__track {
  display:flex; gap:24px; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  overflow-x:auto; padding-bottom:4px; scrollbar-width:none;
}
#sec-courses .courses__track::-webkit-scrollbar { display:none; }

/* ---- card ---- */
#sec-courses .course-card {
  flex:0 0 clamp(280px,30%,360px); scroll-snap-align:start;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:rgba(235,245,235,0.04); border:1px solid rgba(235,245,235,0.10);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
#sec-courses .course-card:hover { transform:translateY(-4px); border-color:rgba(150,247,130,0.40); background:rgba(235,245,235,0.06); }
#sec-courses .course-card__thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(165deg, var(--emerald), var(--ocean)); }
#sec-courses .course-card__thumb img { width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
#sec-courses .course-card__tag {
  position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px 6px 10px; border-radius:var(--r-pill);
  background:rgba(3,38,31,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--frost); font-size:11.5px; font-weight:600; letter-spacing:0.04em;
}
#sec-courses .course-card__tag i { width:7px; height:7px; border-radius:50%; background:var(--lime); flex:none; }
#sec-courses .course-card__play {
  position:absolute; right:14px; bottom:14px; width:44px; height:44px; border-radius:50%;
  background:var(--lime); color:var(--ocean); display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(3,38,31,0.35); transition:transform .2s ease;
}
#sec-courses .course-card__play svg { width:16px; height:16px; margin-left:2px; }
#sec-courses .course-card:hover .course-card__play { transform:scale(1.08); }
#sec-courses .course-card__body { display:flex; flex-direction:column; gap:12px; padding:24px 24px 26px; flex:1; }
#sec-courses .course-card__meta { display:flex; align-items:center; gap:10px; font-size:12px; color:rgba(235,245,235,0.55); }
#sec-courses .course-card__meta .sep { width:3px; height:3px; border-radius:50%; background:rgba(235,245,235,0.4); flex:none; }
#sec-courses .course-card__title { margin:0; font-size:21px; font-weight:500; line-height:1.18; letter-spacing:-0.015em; color:var(--frost); text-wrap:balance; }
#sec-courses .course-card__desc {
  margin:0; font-size:14px; line-height:1.5; color:rgba(235,245,235,0.66);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
#sec-courses .course-card__by {
  margin-top:auto; padding-top:16px; border-top:1px solid rgba(235,245,235,0.10);
  display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(235,245,235,0.78);
}
#sec-courses .course-card__avatars { display:inline-flex; flex:none; }
#sec-courses .course-card__avatars .course-card__avatar { margin-left:-10px; box-shadow:0 0 0 2px var(--ocean); }
#sec-courses .course-card__avatars .course-card__avatar:first-child { margin-left:0; }
#sec-courses .course-card__avatar { width:30px; height:30px; border-radius:50%; overflow:hidden; background:linear-gradient(165deg, var(--emerald), var(--ocean)); flex:none; }
#sec-courses .course-card__avatar img { width:100%; height:100%; object-fit:cover; }
#sec-courses .course-card__by strong { color:var(--frost); font-weight:600; }

/* ---- footer CTA (self-contained .btn) ---- */
#sec-courses .courses__foot { display:flex; align-items:center; justify-content:center; margin-top:44px; }
#sec-courses .btn { display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 22px; border-radius:var(--r-pill); font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap; transition:transform .15s ease, background .15s ease; }
#sec-courses .btn--primary { background:var(--lime); color:var(--ocean); }
#sec-courses .btn--primary:hover { background:#b6ffa5; transform:translateY(-1px); }
#sec-courses .btn .arrow { display:inline-block; transition:transform .2s ease; }
#sec-courses .btn:hover .arrow { transform:translateX(3px); }

@media (max-width:720px) {
  #sec-courses .courses__bar { flex-direction:column; align-items:flex-start; gap:24px; }
  #sec-courses .shell { padding:0 20px; }
  #sec-courses .courses__viewport { margin:0 -20px; padding:6px 20px 8px; -webkit-mask-image:none; mask-image:none; }
}
@media (prefers-reduced-motion: reduce) {
  #sec-courses .courses__track { scroll-behavior:auto; }
  #sec-courses .course-card,
  #sec-courses .courses__arrow,
  #sec-courses .course-card__play { transition:none; }
}