/* Layout for the course site. Every colour and font comes from the WANG-AXIS lab stylesheet
   (wang-axis.github.io/css/main.css, Bootswatch Lumen); the only values used here are the lab's own:
   link #158CBA, text #555, headings #333, rules #e7e7e7 / #ddd, wells #fafafa, muted #999. */

html { scroll-padding-top: 76px; }

/* Container — 1140px, balanced gutters; the navbar lines up with it. */
.page, .navbar > .container-fluid { max-width: 1140px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) { .page, .navbar > .container-fluid { padding-left: 32px; padding-right: 32px; } }
main.page > section { margin-top: 48px; }
main.page h2 { margin: 0 0 20px; }

/* Header */
.intro { padding-top: 12px; }
.intro .eyebrow { margin: 0; color: #999; font-size: 14px; }
.intro h1 { margin: 6px 0 14px; }
.intro p:last-child { max-width: 860px; }

/* Shared card surface (the lab's well colours) */
.panel-box { background: #fafafa; border: 1px solid #e7e7e7; border-radius: 4px; }

/* Courses — two equal-height cards */
.course-grid { display: grid; gap: 32px; }
@media (min-width: 992px) { .course-grid { grid-template-columns: 1fr 1fr; } }
.course-card { display: flex; flex-direction: column; padding: 24px; }
.course-card header .label { font-size: 12px; letter-spacing: 0.02em; }
.course-card h3 { margin: 12px 0 4px; }
.course-card .meta { color: #999; margin: 0; }
.card-body { flex: 1; margin-top: 16px; }
.card-body > p { margin-bottom: 16px; }
.kv { margin: 0; border-top: 1px solid #e7e7e7; }
.kv > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid #e7e7e7; }
.kv dt { color: #333; font-weight: 400; }
.kv dd { margin: 0; }
.course-card footer { margin-top: 20px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row .btn { min-width: 130px; margin: 0; }
.access, .access-note { color: #999; font-size: 14px; margin: 10px 0 0; }

/* ALIVE spotlight + Quick Links */
.banner { display: grid; gap: 32px; }
@media (min-width: 992px) { .banner { grid-template-columns: 2fr 1fr; } }
.spotlight, .quick { padding: 24px; }
.spotlight .lede { max-width: 640px; }
.spotlight-body { display: grid; gap: 24px; margin-top: 8px; }
@media (min-width: 768px) { .spotlight-body { grid-template-columns: 1fr 1fr; } }
.stats { margin: 0; display: grid; gap: 8px; }
.stats > div { background: #fff; border: 1px solid #e7e7e7; border-radius: 4px; padding: 8px 12px; }
.stats dt { color: #333; font-size: 20px; font-weight: 700; }
.stats dd { margin: 0; font-size: 14px; }
.credit { font-size: 14px; margin: 12px 0 4px; }
.spotlight .access { margin: 0 0 14px; }
.podcast .small { color: #999; margin-top: 6px; }
.quick ul { list-style: none; margin: 0; padding: 0; }
.quick li { padding: 8px 0; border-bottom: 1px solid #e7e7e7; }
.quick li:last-child { border-bottom: 0; }

/* Lectures */
.toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle .btn { margin: 0; }
.access-note { margin: 14px 0 12px; }
.table-wrap { border: 1px solid #e7e7e7; border-radius: 4px; }
.lectures { width: 100%; table-layout: fixed; border-collapse: collapse; }
.lectures th { color: #333; font-weight: 700; font-size: 14px; text-align: left; padding: 10px 12px; background: #fafafa; border-bottom: 1px solid #e7e7e7; }
.lectures td { padding: 10px 12px; border-bottom: 1px solid #e7e7e7; vertical-align: middle; }
.lectures tbody tr:last-child td { border-bottom: 0; }
.lectures tbody tr:hover, .lectures tbody tr:target { background: #fafafa; }
.lectures th:first-child, .lectures .num { text-align: center; }
.lectures .num { color: #999; }
.lectures .title { color: #333; font-weight: 700; line-height: 1.35; }
.lectures th:last-child, .lectures .go { text-align: right; }
.lectures .go .btn { margin: 0; white-space: nowrap; }
.topic { display: inline-block; font-size: 13px; line-height: 1.3; padding: 3px 10px; border-radius: 999px; background: #fafafa; border: 1px solid #e7e7e7; }
.mat-grid { display: grid; grid-template-columns: 96px 84px 64px 84px; gap: 6px; }
.mat-grid .pill { margin: 0; text-align: center; }
.mats .pill { display: inline-block; margin: 2px 6px 2px 0; font-size: 13px; line-height: 1.3; padding: 3px 10px; border: 1px solid #ddd; border-radius: 999px; background: #fff; text-decoration: none; white-space: nowrap; }
.mats .pill:hover, .mats .pill:focus { border-color: #158CBA; }
.mats .muted { color: #999; font-size: 14px; }

@media (max-width: 767px) {
  .lectures colgroup, .lectures thead { display: none; }
  .lectures, .lectures tbody, .lectures tr, .lectures td { display: block; width: 100%; }
  .lectures tr { padding: 12px 14px; border-bottom: 1px solid #e7e7e7; }
  .lectures td { padding: 3px 0; border: 0; text-align: left !important; }
  .lectures .num { display: inline; color: #999; }
  .lectures .num::after { content: "."; }
  .lectures .title { display: inline; margin-left: 4px; }
  .lectures .go .btn { display: block; margin-top: 6px; }
  .mat-grid { grid-template-columns: repeat(auto-fill, minmax(84px, max-content)); }
  .mat-grid > span:empty { display: none; }
}

/* Teaching innovation — nothing added: the lab stylesheet styles .carousel exactly as on its home page. */
#carousel .carousel-indicators li { cursor: pointer; }
/* Same size as the lab home page carousel: 575 x 326, centred. */
#carousel { max-width: 575px; margin: 20px auto 36px; }
/* Dots just under the image, so they never cover the caption printed in it. */
#carousel .carousel-indicators { bottom: -30px; margin-bottom: 0; }
#carousel .item img { width: 100%; height: 326px; object-fit: contain; margin: 0; }

/* Footer — copyright | contact */
#footer { margin: 56px 0 0; border-radius: 0; }
.foot-grid { display: grid; gap: 12px; }
@media (min-width: 768px) { .foot-grid { grid-template-columns: 1fr auto; } }
.foot-grid p, .foot-grid address { margin: 0; }

:focus-visible { outline: 2px solid #158CBA; outline-offset: 2px; }
.lec-panel[hidden] { display: none; }