/* Drup-AID Academy course page. No inline styles; all classes. */

/* ---- Description header (blue area) ---- */
.academy-hero {
  background: linear-gradient(135deg, #0678be, #045a8f);
  color: #fff;
  border-radius: 14px;
  padding: 1.75rem 2rem;
  margin: 1rem 0 2rem;
}
.academy-hero__title { margin: 0 0 .6rem; font-size: 1.9rem; line-height: 1.2; color: #fff; }
.academy-hero__desc { margin: 0 0 .8rem; max-width: 70ch; font-size: 1.08rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
.academy-hero__meta { margin: 0; font-size: 0.9rem; letter-spacing: 0.02em; color: #bfe6ff; }

/* ---- Two-column layout ---- */
.academy-layout { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; }

/* ---- Sidebar: course content ---- */
.academy-toc { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; }
.academy-toc__heading { margin: 0 0 .75rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: #0678be; }
.academy-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.academy-toc__item { padding: .55rem 0; border-bottom: 1px solid #e5e9f0; }
.academy-toc__link { display: block; text-decoration: none; font-weight: 600; color: #1f2733; line-height: 1.3; }
.academy-toc__link:hover { color: #0678be; }
.academy-toc__num { color: #0678be; font-weight: 700; }
.academy-toc__title { color: inherit; }
.academy-toc__blurb { display: block; margin-top: .2rem; font-size: 0.85rem; line-height: 1.4; color: #6b7280; }

/* ---- Main column: chapters ---- */
.academy-main { min-width: 0; }
.academy-chapter { margin: 0 0 2.5rem; scroll-margin-top: 1rem; }
.academy-chapter__title { margin: 0 0 .35rem; font-size: 1.2rem; line-height: 1.3; color: #111827; }
.academy-chapter__desc { margin: 0 0 .75rem; max-width: 70ch; color: #4b5563; }
.academy-chapter__video { width: 100%; border-radius: 10px; background: #000; display: block; }

/* ---- Responsive: stack on narrow screens ---- */
@media (max-width: 860px) {
  .academy-layout { grid-template-columns: 1fr; }
  .academy-toc { position: static; max-height: none; overflow: visible; }
}