/* ==========================================================================
   Eduviaa — course detail page
   Loaded only by course-detail.php, on top of main.css.

   Everything here is scoped to classes that appear on this page alone, so
   nothing can leak back into the homepage. Tokens come from main.css; no
   new colours or radii are invented here.
   ========================================================================== */

/* 1. NOT FOUND =========================================================== */

.notfound {
  max-width: 60ch;
  text-align: center;
  margin-inline: auto;
}
.notfound h1 { margin: var(--s-3) 0 var(--s-4); }
.notfound .cluster { justify-content: center; }

/* 2. BREADCRUMB ========================================================== */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  font-size: var(--t-small);
  color: var(--c-muted);
}
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-forest); text-decoration: underline; }
.crumbs [aria-current='page'] { color: var(--c-text); font-weight: 600; }

/* 3. COURSE HERO ========================================================= */

.course-hero__inner {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .course-hero__inner { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); }
}

.course-hero__copy h1 {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s-4);
}
.course-hero__copy .lead { max-width: 56ch; }
.course-hero__tags { margin-bottom: var(--s-5); }
.course-hero .rating-line { margin-top: var(--s-5); }

/* Four short facts read faster as a row of figures than as prose. The
   dividers are borders rather than middle dots so they disappear cleanly
   when the row wraps on a phone. */
.course-facts {
  list-style: none;
  margin: var(--s-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-6);
  max-width: 34rem;
}
@media (min-width: 620px) {
  .course-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.course-facts li {
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-line);
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  color: var(--c-muted);
}
.course-facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-forest);
  line-height: 1.1;
}
[data-theme='dark'] .course-facts strong { color: #6ee7a5; }

/* 4. ENROLMENT CARD ====================================================== */

.enrol-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-panel);
  padding: clamp(var(--s-5), 2.5vw, var(--s-8));
  box-shadow: var(--sh-raised);
}
@media (min-width: 940px) {
  /* No sticky here: the hero is the containing block, so pinning would
     only last the height of one section. The enquiry card lower down is
     the one worth keeping in view. */
  .enrol-card { align-self: start; }
}
.enrol-card .btn + .btn { margin-top: var(--s-3); }
.enrol-card .form-note { margin-top: var(--s-4); text-align: center; }

.enrol-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line-soft);
}
.enrol-card__price strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
}
.enrol-card__price s { color: var(--c-faint); font-size: var(--t-small); }

.enrol-card__label {
  margin: 0 0 var(--s-3);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--c-muted);
}

.batch-list {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.batch {
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-input);
  background: var(--c-mint);
}
.batch__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--t-small);
}
.batch__meta {
  font-size: var(--t-micro);
  color: var(--c-muted);
}

/* 5. BODY LAYOUT ========================================================= */

.course-body {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4rem);
  align-items: start;
}
@media (min-width: 940px) {
  .course-body { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); }
}

/* min-width: 0 so a long unbroken string in a module title cannot force
   the grid column wider than its track. */
.course-main { min-width: 0; }

/* .prose lives in main.css — more than one page needs it. */

/* 6. CURRICULUM ========================================================== */

.modules {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  max-width: var(--measure);
}

.module {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.module > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  list-style: none;              /* Firefox */
  font-weight: 600;
}
.module > summary::-webkit-details-marker { display: none; }
.module > summary:focus-visible { box-shadow: var(--focus); border-radius: var(--r-card); }
.module[open] > summary { border-bottom: 1px solid var(--c-line-soft); }

.module__no {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--c-forest);
  background: var(--c-mint);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3);
  white-space: nowrap;
}
[data-theme='dark'] .module__no { color: #9ae6c0; }
.module__title { flex: 1 1 14rem; min-width: 0; }
.module__hours {
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--c-muted);
  white-space: nowrap;
}

/* The caret is drawn here rather than dropped in as a glyph, so it can
   rotate on open without any JavaScript. */
.module > summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-muted);
  border-bottom: 2px solid var(--c-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.module[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.module__body { padding: var(--s-5); }
.module__body p { margin: 0 0 var(--s-4); color: var(--c-muted); font-size: var(--t-small); }
.module__body .ticks { gap: var(--s-3); font-size: var(--t-small); }

/* 7. TRAINERS ============================================================ */

.trainers {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 700px) {
  .trainers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.trainer {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.trainer__avatar {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--c-mint);
  color: var(--c-forest);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-small);
}
[data-theme='dark'] .trainer__avatar { background: rgba(22, 163, 74, 0.2); color: #9ae6c0; }
.trainer h3 { margin: 0 0 var(--s-1); font-size: var(--t-h3); }
.trainer p { margin: 0; font-size: var(--t-small); color: var(--c-muted); line-height: var(--lh-snug); }
.trainer__creds { font-weight: 600; color: var(--c-forest) !important; }
[data-theme='dark'] .trainer__creds { color: #6ee7a5 !important; }
.trainer__headline { margin-top: var(--s-2) !important; }
.trainer__years { margin-top: var(--s-2) !important; font-size: var(--t-micro) !important; color: var(--c-faint) !important; }

/* 8. ENQUIRY ============================================================= */

.course-aside {
  /* The masthead is sticky, so an in-page jump would otherwise land with
     the heading hidden behind it. */
  scroll-margin-top: calc(72px + var(--s-6));
}
@media (min-width: 940px) {
  .course-aside { position: sticky; top: calc(72px + var(--s-4)); }
}
.enquire-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-panel);
  padding: clamp(var(--s-5), 2.5vw, var(--s-8));
  box-shadow: var(--sh-raised);
}
.enquire-card__title { margin: 0 0 var(--s-2); font-size: var(--t-h3); }
.enquire-card > p {
  margin: 0 0 var(--s-6);
  font-size: var(--t-small);
  color: var(--c-muted);
}