/* ============================================================
   Teaching section — course detail page.
   Built on the site's existing theme tokens (css/style.css) so
   light/dark and the brown accent stay consistent, with a
   Claude-style modern, minimal, quietly-technical feel:
   warm neutral shells, restrained accents, soft cards, and
   subtle micro-interactions (transform/opacity only).
   ============================================================ */

/* ------------------------------------------------------------
   Shared eyebrow label (hero + any teaching page titles)
   ------------------------------------------------------------ */
.teaching-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Optima Medium", "Helvetica Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.teaching-eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--link) 100%);
  opacity: 0.85;
}

/* ------------------------------------------------------------
   Course content prose blocks (description / objectives / etc.)
   ------------------------------------------------------------ */
.course-block {
  margin: 0 0 34px;
}

.course-block h2 {
  font-size: 24px;
  margin: 0 0 12px;
}

.course-block p,
.course-block li {
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

/* emphasis keywords are bold (not italic), for both the Latin-English
   and the Chinese prose — a stable sans weight that reads as a label. */
.lang-block .lang-content strong,
.course-block strong {
  font-weight: 700;
  color: var(--heading);
}

.course-block p {
  margin: 0 0 10px;
}

.course-block p:last-child {
  margin-bottom: 0;
}

.course-block ul,
.course-block ol {
  padding-left: 22px;
  margin: 0;
}

.course-block li {
  margin-bottom: 7px;
}

.course-block .lead-para {
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   Bilingual blocks — an EN | 中文 toggle swaps which version of
   the prose is shown, instead of stacking EN then 中文 paragraphs.
   ------------------------------------------------------------ */
.lang-block .block-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.lang-block .block-head h2 {
  margin: 0;
}

.lang-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 13px;
  border-radius: 999px;
  font-family: "Optima Medium", sans-serif;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease,
    box-shadow 0.16s ease;
}

.lang-btn:hover {
  color: var(--heading);
}

.lang-btn.active {
  background: var(--surface);
  color: var(--heading);
  box-shadow: 0 2px 8px var(--shadow);
}

/* only the active language is visible */
.lang-block .lang-content[data-lang],
.lang-block .objectives[data-lang] {
  display: none;
}

.lang-block .lang-content[data-lang="en"].is-active,
.lang-block .lang-content[data-lang="zh"].is-active,
.lang-block .objectives[data-lang="en"].is-active,
.lang-block .objectives[data-lang="zh"].is-active {
  display: block;
}

.lang-block .objectives.is-active {
  display: block;
  list-style: disc;
}

.lang-block .objectives.is-active > li {
  margin-bottom: 7px;
  text-wrap: pretty; /* reduce orphan / widow words at line ends */
}

/* avoid orphan lines in the prose blocks as well */
.lang-block .lang-content p,
.course-block p {
  text-wrap: pretty;
}

.lang-block .objectives li {
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   Course detail info cells (Text-info in the hero + any reused
   small label/value pair: Time / Venue / Credits / Language)
   ------------------------------------------------------------ */
.info-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.info-cell .k {
  font-family: "Optima Medium", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.info-cell .v {
  font-size: 15px;
  color: var(--heading);
  line-height: 1.4;
  font-family: "Optima", sans-serif;
}

.info-cell .v .ai,
.info-cell .v .fas,
.info-cell .v .fab {
  color: var(--accent);
}

/* ------------------------------------------------------------
   People (instructor + TAs) cards
   ------------------------------------------------------------ */
.people-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 6px 0 34px;
}

.person-card {
  flex: 1 1 220px;
  min-width: 220px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 3px 14px var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.person-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--shadow);
}

.person-avatar {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: 0 2px 10px var(--shadow);
  background: var(--surface-2);
}

.person-info {
  min-width: 0;
}

.person-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.person-name-en {
  font-family: "Optima Bold", sans-serif;
  font-size: 16px;
  color: var(--heading);
}

.person-name-zh {
  font-size: 13.5px;
  color: var(--text-muted);
}

.person-role {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 3px 0 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--chip-bg);
  color: var(--heading);
}

.person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.person-links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--link);
}

.person-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.person-links .sep {
  color: var(--border);
}

/* ------------------------------------------------------------
   Course schedule table (16 weeks) with per-lecture placeholders
   ------------------------------------------------------------ */
.lecture-table-wrap {
  margin: 10px 0 34px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}

.lecture-table-wrap::-webkit-scrollbar {
  height: 8px;
}

.lecture-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.lecture-table thead th {
  text-align: left;
  padding: 12px 14px;
  font-family: "Optima Medium", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.lecture-table td {
  padding: 12px 14px;
  /* Top-align so the Topic's English line and the Instructor's name
     (and the Materials buttons) all start on the same baseline —
     keeps every row's rule lined up across the table. */
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.4;
}

.lecture-table tbody tr:last-child td {
  border-bottom: none;
}

.lecture-table tbody tr:hover {
  background: var(--surface-2);
}

.week-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: "Optima Medium", sans-serif;
  font-size: 12.5px;
  color: var(--heading);
  white-space: nowrap;
}

.lect-topic-en {
  font-size: 14px;
  color: var(--text);
  font-family: "Optima", sans-serif;
}

.lect-topic-zh {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.lect-instructor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap; /* keep the name+avatar on one line */
  line-height: 1.2;
  font-size: 13px;
  color: var(--text-muted);
}

/* placeholder action buttons for PPT / Notes (user fills later) */
.lect-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.lect-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: "Optima Medium", sans-serif;
  font-size: 12.5px;
  color: var(--link);
  cursor: default;
  text-decoration: none;
}

.lect-btn.placeholder {
  color: var(--text-muted);
  border-style: dashed;
  cursor: not-allowed;
}

/* lecture schedule DATE column + compact week chip */
.lecture-table td.date-cell {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

.lecture-table td.date-cell .dow {
  color: var(--text-muted);
  font-size: 11px;
  margin-left: 5px;
}

/* guest lecturer rows: name (+guest link) and a round avatar, the
   avatar vertically centred so every rule lines up across the table */
.instructor-cell {
  vertical-align: top;
}

.instructor-avatar {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.instructor-link {
  color: var(--link);
  text-decoration: none;
}

.instructor-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   Assessment mini-table
   ------------------------------------------------------------ */
.assess-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.assess-table th,
.assess-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.assess-table th {
  font-family: "Optima Medium", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
}

.assess-table tr:last-child td {
  border-bottom: none;
}

/* ------------------------------------------------------------
   Term tabs — a row of semester chips at the top of the course
   page. Only the current (offered) term is clickable (.active,
   deep fill + accent border + shadow). Future terms are disabled
   and fade progressively left->right, signalling "the further out,
   the fuzzier" (the course's total run is unknown). The fade is
   applied per-chip via tf-N classes so it scales with how many
   terms we decide to render.
   ------------------------------------------------------------ */
.term-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 30px;
}

.term-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: "Optima Medium", sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

/* the small coloured dot before each label */
.term-tab .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transition: background 0.18s ease, opacity 0.18s ease;
}

/* Only the current term is interactive. */
.term-tab.active {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 4px 14px var(--shadow);
  color: var(--heading);
  font-weight: 600;
}

.term-tab.active:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.term-tab.active .dot {
  background: var(--accent);
}

/* Future terms are non-interactive and fade out as they go further
   into the future. tf-N lowers opacity / desaturates progressively.
   No hover feedback — these are disabled. */
.term-tab.disabled {
  cursor: default;
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  pointer-events: none;
}

.term-tab.disabled .dot {
  opacity: 0.5;
}

/* progressive fade for future chips (tf-1 .. tf-6) — one row of tags,
   the last (farthest) one fades almost out to signal the unknown future */
.term-tab.tf-1 { opacity: 0.85; }
.term-tab.tf-2 { opacity: 0.72; }
.term-tab.tf-3 { opacity: 0.58; }
.term-tab.tf-4 { opacity: 0.44; }
.term-tab.tf-5 { opacity: 0.3; }
.term-tab.tf-6 { opacity: 0.16; }

/* keep the chips comfortable on small screens */
@media screen and (max-width: 560px) {
  .term-tab {
    padding: 7px 13px;
    font-size: 12.5px;
  }
}

/* ------------------------------------------------------------
   Interactivity hero: the course text sits directly on a
   translucent paper-teaser wall (no white box). Hovering the
   panel fades the text out and swaps in a live, Home-style
   gallery (each figure kept whole, hover zooms, click through).
   ------------------------------------------------------------ */

/* The outer framed panel that holds the stage. Its height hugs the
   course text block (see the card sizing below), so the strip stays
   short rather than becoming a tall banner. */
.course-hero-panel {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 8px 30px var(--shadow);
  margin-bottom: 30px;
}

/* Inner stage holds both layers. Grid single-cell stacking: the panel's
   height = max(text height, gallery height), so the gallery never gets
   clipped and every row (incl. the last) is fully visible. The text card
   and the gallery sit on top of each other; the taller one drives the box. */
.course-hero-panel .hero-stage {
  position: relative;
  display: grid;
}
.course-hero-panel .hero-stage > * {
  grid-area: 1 / 1;
}

/* The translucent collage wall sitting behind the text. */
.course-hero-panel .gallery-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
  pointer-events: none;
  filter: saturate(0.85);
  transition: opacity 0.4s ease, transform 0.6s ease;
}

/* The text layer: no white card, no blur box — the caption is set
   directly on the wall. A soft gradient keeps it readable. In normal
   flow, so its padding drives the (short) panel height. */
.course-hero-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 54px 30px;
  background: linear-gradient(
    90deg,
    rgba(var(--surface-rgb), 0.72) 0%,
    rgba(var(--surface-rgb), 0.5) 42%,
    rgba(var(--surface-rgb), 0.12) 100%
  );
  transition: opacity 0.4s ease;
}

/* Hover: text layer fades out, the wall lifts into the live gallery. */
.course-hero-panel:hover .course-hero-card {
  opacity: 0;
  pointer-events: none;
}

.course-hero-panel:hover .gallery-bg {
  opacity: 0;
}

@media screen and (max-width: 560px) {
  .course-hero-card {
    padding: 22px 26px;
  }
}

/* ------------------------------------------------------------
   The hover gallery layer — reuses the home page's .paper-gallery
   container/row/item stack (justified rows, each figure kept whole,
   hover zooms, click opens the paper). We only override the sizing
   so the gallery fits the short hero strip. Revealed on hover.
   ------------------------------------------------------------ */
.course-hero-gallery {
  position: relative; /* in normal (grid) flow — drives panel height */
  z-index: 2;
  width: 100%;
  align-self: start;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none; /* only interactive while visible */
}

.course-hero-panel:hover .course-hero-gallery {
  opacity: 1;
  pointer-events: auto;
}

/* The wall: justified rows, each figure kept whole (object-fit: contain).
   The JS lays the rows out to the full width so there is no left/right
   gap; the container just wraps them. Height comes from the rows. */
.course-hero-gallery .paper-gallery {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.course-hero-gallery .paper-gallery-item img {
  object-fit: contain;
}

/* hide the wall until JS lays it out; prevent FOUC */
.course-hero-gallery:empty,
.course-hero-gallery .paper-gallery:empty {
  display: none;
}

.course-hero-card .eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.course-hero-card h1 {
  margin: 0 0 4px;
  font-size: 30px;
  line-height: 1.25;
}

.course-hero-card .course-title-zh-big {
  font-size: 16px;
  color: var(--accent);
  font-family: "Optima", serif;
  margin: 0 0 18px;
}

.course-hero-card .info-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-bottom: 20px;
}

.course-hero-card .info-cols .info-cell .k {
  font-family: "Optima Medium", sans-serif;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.course-hero-card .info-cols .info-cell .v {
  font-size: 14px;
  color: var(--heading);
}

/* ------------------------------------------------------------
   16-week progress rail. Layout: label + a tag gutter, then a
   row of 16 cells. Cells for completed weeks are "active"
   (accent fill); upcoming are muted. Each cell carries a tooltip
   "Wk n — date".
   ------------------------------------------------------------ */
.progress-rail {
  margin: 4px 0 30px;
}

.progress-rail-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.progress-rail-head .pr-title {
  font-family: "Optima Medium", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.progress-rail-head .pr-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-muted);
}

.pr-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
  gap: 7px;
}

.pr-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 7px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.pr-cell .pr-week {
  font-family: "Optima Medium", sans-serif;
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.pr-cell .pr-date {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
}

/* completed / current week — accent-filled, dark text */
.pr-cell.active {
  background: linear-gradient(140deg, var(--accent) 0%, #9c241f 100%);
  border-color: var(--accent);
  box-shadow: 0 4px 12px var(--shadow);
}

.pr-cell.active .pr-week,
.pr-cell.active .pr-date {
  color: #fff;
}

/* a tiny check for the current (most recent) completed week */
.pr-cell.today::after {
  content: "\2713";
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.9);
}

.pr-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px var(--shadow);
}

.pr-cell.upcoming:hover {
  border-color: var(--accent);
}

/* legend */
.pr-legend {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.pr-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pr-legend .sw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
}

.pr-legend .sw.done {
  background: var(--accent);
}

.pr-legend .sw.todo {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* the schedule + rail: rail on its own row at top (full width), then the
   syllabus table fills the whole width below. No side-by-side columns. */
@media screen and (max-width: 720px) {
  .lecture-table-wrap {
    overflow-x: auto;
  }
  .lecture-table td,
  .lecture-table th {
    white-space: normal;
  }
}