/* Course detail v3 — state-aware learning / purchase experience. */
.course-experience {
  --course-glow: rgba(36, 87, 166, .28);
  background: var(--pf-white);
}
.course-experience--owned { --course-glow: rgba(23, 165, 103, .3); }

.course-experience .course-detail-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 34px 0 clamp(64px, 7vw, 96px);
  background:
    radial-gradient(circle at 77% 18%, var(--course-glow), transparent 30%),
    linear-gradient(135deg, #10233f 0%, #0d2848 54%, #10233f 100%);
}
.course-orbit {
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
  animation: course-float 9s ease-in-out infinite;
}
.course-orbit::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pf-green);
  box-shadow: 0 0 0 7px rgba(23,165,103,.12);
}
.course-orbit--one { top: -190px; right: 7%; }
.course-orbit--two { bottom: -280px; left: 12%; width: 450px; height: 450px; animation-delay: -4s; }
.course-state-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.course-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(88, 231, 170, .28);
  border-radius: 999px;
  background: rgba(23,165,103,.15);
  color: #dff9ed;
  font-size: .72rem;
  font-weight: 700;
}
.course-state-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pf-green);
  box-shadow: 0 0 0 0 rgba(23,165,103,.55);
  animation: course-pulse 2.4s ease-out infinite;
}
.instructor-line--link {
  max-width: 410px;
  padding: 9px 12px 9px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.instructor-line--link:hover { transform: translateY(-3px); border-color: rgba(88,231,170,.35); background: rgba(255,255,255,.07); color: #fff; }
.instructor-line--link > span { overflow: hidden; }
.instructor-line--link > span img { width: 100%; height: 100%; object-fit: cover; }
.instructor-line--link p { flex: 1; }
.instructor-line--link em { display: block; color: #9eb8c4; font-size: .65rem; font-style: normal; }
.instructor-line--link > .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.instructor-line--link:hover > .icon { transform: translateX(4px); }
.course-experience .course-detail-hero h1 {
  max-width: 720px;
  margin-block: 20px 16px;
  letter-spacing: -.055em;
  line-height: .98;
}
.course-experience .course-detail-hero__grid { gap: clamp(44px, 6vw, 78px); }
.course-experience .course-detail-hero__media {
  transform-style: preserve-3d;
  border-radius: 20px;
  box-shadow: 0 34px 80px -30px rgba(0,0,0,.65);
  transition: transform .18s ease-out, box-shadow .55s var(--ease);
  will-change: transform;
}
.course-experience .course-detail-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 25%, rgba(255,255,255,.18) 47%, transparent 65%);
  transform: translateX(-125%);
  animation: course-sheen 7s 1.2s var(--ease) infinite;
  pointer-events: none;
}
.course-experience .course-detail-hero__media img {
  aspect-ratio: 1.38;
  transition: transform .8s var(--ease);
}
.course-experience .course-detail-hero__media:hover img { transform: scale(1.025); }
.course-experience .course-detail-hero__media > span {
  right: 14px;
  bottom: 14px;
  background: rgba(16,35,63,.88);
  backdrop-filter: blur(12px);
}
.course-experience--owned .course-detail-hero__media > span { background: rgba(13,118,73,.9); }

.course-hero-continue {
  display: grid;
  max-width: 500px;
  margin-top: 24px;
  padding: 12px 14px;
  grid-template-columns: 44px 1fr 22px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(88,231,170,.24);
  border-radius: 14px;
  background: rgba(23,165,103,.13);
  color: #fff;
  text-decoration: none;
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.course-hero-continue:hover { transform: translateY(-3px); border-color: rgba(88,231,170,.55); background: rgba(23,165,103,.23); color: #fff; }
.course-hero-continue__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--pf-green); }
.course-hero-continue small, .course-hero-continue strong { display: block; }
.course-hero-continue small { color: #b9d4cb; font-size: .65rem; }
.course-hero-continue strong { margin-top: 1px; font-size: .9rem; }
.course-hero-continue__arrow { transition: transform .3s var(--ease); }
.course-hero-continue:hover .course-hero-continue__arrow { transform: translateX(4px); }

.course-experience .course-promise { background: var(--pf-blue-soft); border-bottom: 1px solid var(--pf-line); }
.course-experience--owned .course-promise { background: var(--pf-green-soft); }
.course-experience .course-promise .container > span { transition: background .3s var(--ease), transform .3s var(--ease); }
.course-experience .course-promise .container > span:hover { transform: translateY(-3px); background: rgba(255,255,255,.5); }

.course-experience .course-detail { background: linear-gradient(180deg, var(--pf-paper) 0, #fff 230px); }
.course-experience .course-detail__grid { gap: clamp(46px, 6vw, 78px); }
.course-experience .prose-section,
.course-experience .outcomes,
.course-experience .course-context,
.course-experience .syllabus { scroll-margin-top: 120px; }
.course-experience .outcomes article { transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.course-experience .outcomes article:hover { transform: translateY(-4px); border-color: var(--pf-green); box-shadow: var(--shadow-small); }
.course-experience .syllabus details { transition: background .3s var(--ease); }
.course-experience .syllabus details[open] { background: var(--pf-paper); }
.course-experience--owned .syllabus details[open] { background: var(--pf-green-wash); }
.course-experience .syllabus summary { padding-inline: 14px; }
.course-experience .syllabus li { transition: transform .25s var(--ease), background .25s var(--ease); }
.course-experience .syllabus li:hover { position: relative; z-index: 1; transform: translateX(4px); background: var(--pf-blue-soft); }
.course-experience--owned .syllabus li:hover { background: var(--pf-green-soft); }

.course-experience .enrol-card {
  top: 108px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--pf-line-strong);
  border-radius: 20px;
  box-shadow: 0 24px 60px -38px rgba(16,35,63,.5);
}
.course-experience .enrol-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pf-blue), var(--pf-amber));
}
.course-experience .enrol-card--owned::before { background: linear-gradient(90deg, var(--pf-blue), var(--pf-green)); }
.course-experience .enrol-card__price { margin-top: 8px; color: var(--pf-ink); letter-spacing: -.04em; }
.enrol-card__buy { position: relative; overflow: hidden; margin-top: 20px; }
.enrol-card__buy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45), transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.enrol-card__buy:hover::after { transform: translateX(120%); }
.enrol-card__micro { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 12px 0 0 !important; color: var(--pf-green-dark) !important; font-size: .68rem !important; }
.owned-card__status { display: flex; align-items: center; gap: 13px; }
.owned-card__status > span { display: grid; width: 44px; height: 44px; place-items: center; flex: none; border-radius: 13px; background: var(--pf-green-soft); color: var(--pf-green-dark); }
.owned-card__status > span .icon { width: 22px; height: 22px; }
.owned-card__status small, .owned-card__status strong { display: block; }
.owned-card__status small { color: var(--pf-green-dark); font-size: .64rem; font-weight: 750; letter-spacing: .08em; }
.owned-card__status strong { margin-top: 2px; color: var(--pf-ink); font-size: 1rem; }
.owned-card__progress { margin: 26px 0 22px; }
.owned-card__progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; color: var(--pf-muted); font-size: .75rem; }
.owned-card__progress > div:first-child strong { color: var(--pf-ink); font-size: 1.4rem; }
.owned-card__track { height: 9px; margin: 9px 0 8px; overflow: hidden; border-radius: 999px; background: var(--pf-green-soft); }
.owned-card__track i { display: block; width: var(--course-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pf-blue), var(--pf-green)); transform-origin: left; animation: course-progress 1.1s .25s var(--ease) both; }
.owned-card__progress > small { color: var(--pf-muted); font-size: .69rem; }
.owned-card__cta { display: grid !important; grid-template-columns: 18px 1fr 18px; gap: 9px; }
.course-experience .enrol-card__trust .icon { flex: none; }
.mobile-enrol--owned { border-top-color: rgba(23,165,103,.25); background: rgba(232,247,240,.96); }
.course-card__tags .badge .icon { width: 13px; height: 13px; }
.course-card__price--owned { color: var(--pf-green-dark); font-size: .78rem; font-weight: 700; }

@keyframes course-pulse { 70% { box-shadow: 0 0 0 9px rgba(23,165,103,0); } 100% { box-shadow: 0 0 0 0 rgba(23,165,103,0); } }
@keyframes course-float { 0%, 100% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(0,14px,0) rotate(4deg); } }
@keyframes course-sheen { 0%, 65% { transform: translateX(-125%); } 85%, 100% { transform: translateX(125%); } }
@keyframes course-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 900px) {
  .course-experience .course-detail-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .course-experience .course-detail-hero__media { max-width: 680px; }
  .course-experience .course-detail__grid { grid-template-columns: 1fr; }
  .course-experience .enrol-card { position: relative; top: auto; order: -1; }
}
@media (max-width: 620px) {
  .course-experience .course-detail-hero { padding-top: 22px; }
  .course-experience .breadcrumb { margin-bottom: 26px; overflow: hidden; white-space: nowrap; }
  .course-experience .course-detail-hero h1 { font-size: clamp(2.5rem, 13vw, 3.7rem); }
  .course-hero-continue { max-width: none; }
  .course-experience .course-detail-hero__media { border-radius: 16px; }
  .course-experience .enrol-card { padding: 24px; }
  .course-experience .syllabus li { align-items: flex-start; }
}
@media (hover: none) {
  .course-experience .course-detail-hero__media { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .course-orbit, .course-state-pill i, .course-experience .course-detail-hero__media::after, .owned-card__track i { animation: none !important; }
  .course-experience .course-detail-hero__media { transform: none !important; }
}