.home-courses {
  isolation:isolate;
  max-width:1440px;
  margin:80px auto 0;
  padding:0 0 8px;
  text-align:center;
  background:radial-gradient(ellipse 40% 45% at 50% 45%,#2a1d12,transparent 100%);
}
.home-courses h2 {
  margin:0;
  font-size:clamp(37px,5vw,64px);
  line-height:1.05;
  letter-spacing:-.045em;
  font-weight:740;
}
.course-intro { margin:13px 0 0; color:var(--muted); font-size:17px; line-height:1.5 }
.course-stage {
  position:relative;
  max-width:1160px;
  height:clamp(410px,42vw,510px);
  margin:26px auto 0;
  --offset:clamp(176px,22.5vw,326px);
}
.course-feature {
  --move:0px;
  --scale:1;
  --softness:0px;
  --fade:1;
  position:absolute;
  top:14px;
  left:50%;
  width:min(52%,515px);
  padding:0;
  border:1px solid #ffce7a9e;
  border-radius:25px;
  overflow:hidden;
  background:#21170f;
  color:#fffaf4;
  text-align:left;
  transform:translateX(calc(-50% + var(--move))) scale(var(--scale));
  transform-origin:center;
  filter:blur(var(--softness));
  opacity:var(--fade);
  box-shadow:0 25px 55px #0008;
  transition:transform .52s cubic-bezier(.24,.75,.24,1),filter .42s,opacity .42s,border-color .42s;
}
.course-feature[data-position="active"] { z-index:2 }
.course-feature[data-position="left"], .course-feature[data-position="right"] {
  --scale:.86;
  --softness:1.1px;
  --fade:.67;
  z-index:1;
  border-color:#765037;
}
.course-feature[data-position="left"] { --move:calc(-1 * var(--offset)) }
.course-feature[data-position="right"] { --move:var(--offset) }
.course-feature[data-position="left"]:hover, .course-feature[data-position="right"]:hover { --fade:.85 }
.featured-cover {
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1.76;
  background:#3b2717 url("./course-cover.jpg") center/cover;
  color:#ffdf9b;
  overflow:hidden;
}
.featured-cover::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffcb6d13 1px,transparent 1px),linear-gradient(90deg,#ffcb6d13 1px,transparent 1px);
  background-size:27px 27px;
  mask-image:radial-gradient(ellipse,#000,transparent 76%);
}
.featured-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.featured-cover-label { position:absolute; top:15px; left:17px; border:1px solid #ffd9974a; border-radius:999px; padding:6px 10px; background:#23160eef; font-size:12px; font-weight:650 }
.course-content {
  display:block;
  padding:20px 22px 21px;
  border-top:1px solid #ffe8c42b;
  background:#191715;
  color:#fffaf4;
}
.course-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:clamp(21px,2.1vw,30px); line-height:1.1; letter-spacing:-.03em; font-weight:750 }
.course-copy { margin-top:8px; min-height:2.75em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#e7e0d8; font-size:14px; line-height:1.38; font-weight:540 }
.course-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.course-meta span { display:inline-flex; align-items:center; gap:5px; min-height:29px; padding:4px 9px; border:1px solid #ffe8c42b; border-radius:999px; background:#211d17; color:#ffc522; font-size:12px; font-weight:670 }
.course-meta .icon { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex:none }
@media (max-width:650px) {
  .home-courses { margin:56px -24px 0; padding:0 0 24px }
  .course-intro { max-width:320px; margin:11px auto 0; padding:0 10px; font-size:15px }
  .course-stage { height:clamp(370px,calc(50vw + 195px),455px); margin-top:20px; --offset:58vw }
  .course-feature { top:12px; width:min(76vw,390px); border-radius:19px }
  .course-feature[data-position="left"], .course-feature[data-position="right"] { --scale:.83 }
  .featured-cover { aspect-ratio:1.52 }
  .featured-cover-label { top:11px; left:12px; font-size:10px }
  .course-content { padding:14px }
  .course-copy { font-size:13px }
  .course-meta { gap:5px; margin-top:9px }
  .course-meta span { font-size:11px; padding-inline:6px }
  .course-meta .icon { width:14px; height:14px }
}
@media (max-width:600px) { .home-courses { margin-inline:-20px } }
@media (max-width:360px) { .course-stage { height:365px; --offset:56vw } }
@media (prefers-reduced-motion:reduce) { .course-feature { transition:none } }

.home-courses[hidden], .course-feature[hidden], .featured-cover [hidden], .course-copy[hidden] { display:none }
.home-courses .course-feature:focus-visible { outline:2px solid #ffe197; outline-offset:3px }
[data-theme="light"] .home-courses { background:radial-gradient(ellipse 55% 45% at 50% 45%,#f8ead6,transparent 100%) }
[data-theme="light"] .home-courses .course-feature {
  background:var(--base);
  border-color:var(--line);
  box-shadow:0 25px 55px #58361230;
}
[data-theme="light"] .home-courses .course-feature:focus-visible { outline-color:var(--accent) }
[data-theme="light"] .course-content {
  background:var(--base);
  border-color:var(--line);
  color:var(--text);
}
[data-theme="light"] .course-copy { color:var(--muted) }
[data-theme="light"] .course-meta span {
  background:var(--theme-hover);
  border-color:var(--line);
  color:var(--accent);
}