/* ============================================================
   courses.css — Courses & Lectures page styles
   ============================================================ */

/* ── HERO ──────────────────────────────────────────────────── */
.courses-hero {
  background:
    radial-gradient(ellipse 45% 55% at 90% 10%, color-mix(in oklab, var(--color-primary) 7%, transparent), transparent),
    radial-gradient(ellipse 30% 40% at 5% 85%,  color-mix(in oklab, var(--color-gold) 5%, transparent), transparent),
    var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.courses-hero-inner {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: var(--space-12);
  align-items: center;
}
.courses-hero-text { display: grid; gap: var(--space-5); }
.courses-hero-quotes {
  border: 1px solid color-mix(in oklab, var(--color-text) 11%, transparent);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--color-surface) 96%, transparent);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.courses-hero-quotes h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
}
.course-quote {
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: color-mix(in oklab, var(--color-surface-2) 80%, transparent);
  display: grid;
  gap: var(--space-2);
}
.course-quote p {
  max-width: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.course-quote footer {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Stats bar */
.courses-hero-stats {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0;
  padding: var(--space-4) var(--space-6);
  background: color-mix(in oklab, var(--color-surface) 90%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  border-radius: var(--radius-xl);
  width: fit-content;
}
.c-stat { display: flex; flex-direction: column; gap: 2px; padding-inline: var(--space-5); text-align: center; }
.c-stat strong { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); }
.c-stat span { font-size: var(--text-xs); color: var(--color-text-muted); }
.c-stat-div { width: 1px; height: 36px; background: var(--color-divider); flex-shrink: 0; }

/* ── CODE PREVIEW WIDGET ───────────────────────────────────── */
.hero-course-preview { display: grid; gap: var(--space-4); }
.preview-window {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--color-text) 12%, transparent);
  box-shadow: var(--shadow-lg);
  background: color-mix(in oklab, var(--color-surface) 96%, transparent);
}
.preview-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--color-surface-offset) 80%, transparent);
  border-bottom: 1px solid var(--color-divider);
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot.red    { background: #FF5F57; }
.dot.amber  { background: #FEBC2E; }
.dot.green  { background: #28C840; }
.preview-label { font-size: var(--text-xs); color: var(--color-text-faint); margin-left: var(--space-2); }
.preview-code {
  padding: var(--space-5) var(--space-5);
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  min-height: 220px;
}
.code-line  { white-space: pre; }
.tok-kw     { color: var(--color-primary); font-weight: 600; }
.tok-str    { color: var(--color-gold); }
.tok-com    { color: var(--color-text-faint); font-style: italic; }
.tok-num    { color: #c678dd; }
.code-cursor { display: inline-block; color: var(--color-primary); animation: blink 1.1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
.preview-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── TABS ──────────────────────────────────────────────────── */
.courses-tabs-wrap {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: color-mix(in oklab, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--color-divider);
}
.tabs-inner {
  display: flex; align-items: center; gap: 0;
  padding-block: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.tabs-inner::-webkit-scrollbar { display: none; }
.tab-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
  position: relative;
}
.tab-btn:hover { color: var(--color-text); background: color-mix(in oklab, var(--color-text) 5%, transparent); }
.tab-btn.active { color: var(--color-primary); }
.tab-btn.active::after {
  content: '';
  position: absolute; bottom: -9px; left: 0; right: 0; height: 2px;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
}
.tab-count {
  font-size: var(--text-xs); font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-text) 10%, transparent);
  color: var(--color-text-faint);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tab-btn.active .tab-count { background: color-mix(in oklab, var(--color-primary) 14%, transparent); color: var(--color-primary); }

/* ── TAB PANELS ────────────────────────────────────────────── */
.tab-panel { background: var(--color-bg); }
.tab-panel[hidden] { display: none; }

/* ── UNIVERSITY COURSE CARDS ───────────────────────────────── */
.course-card {
  margin-bottom: var(--space-8);
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--color-surface) 96%, transparent);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-interactive);
}
.course-card:last-child { margin-bottom: 0; }
.course-card:hover { box-shadow: var(--shadow-md); }

.course-card-header {
  padding: var(--space-8);
  display: grid; gap: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.course-meta-top { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.course-title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.course-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; }
.course-subtitle { font-size: var(--text-base); color: var(--color-text-muted); margin-top: var(--space-1); }
.course-quick-stats {
  display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0;
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.course-quick-stats strong { color: var(--color-text); font-weight: 700; font-size: var(--text-base); }
.course-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; max-width: none; }
.course-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── ACCORDION ──────────────────────────────────────────────── */
.course-accordion { border-top: 1px solid var(--color-divider); }
.acc-group { border-bottom: 1px solid var(--color-divider); }
.acc-group:last-child { border-bottom: none; }

.acc-trigger {
  width: 100%;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-8);
  background: color-mix(in oklab, var(--color-surface-2) 80%, transparent);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.acc-trigger:hover { background: color-mix(in oklab, var(--color-surface-offset) 70%, transparent); }
.acc-group.open .acc-trigger { background: color-mix(in oklab, var(--color-primary) 5%, var(--color-surface)); }

.acc-group-label { font-size: var(--text-sm); font-weight: 700; flex: 1; }
.acc-group-weeks { font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; }
.acc-arrow { color: var(--color-text-faint); flex-shrink: 0; transition: transform var(--transition-interactive); }
.acc-group.open .acc-arrow { transform: rotate(180deg); }

.acc-body { padding: var(--space-6) var(--space-8); background: color-mix(in oklab, var(--color-surface) 98%, transparent); }

.week-list { display: grid; gap: 0; }
.week-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  align-items: start;
}
.week-row:last-child { border-bottom: none; }
.week-num {
  font-size: var(--text-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-primary); padding-top: 0.2rem;
}
.week-content { display: grid; gap: var(--space-2); }
.week-content strong { font-size: var(--text-sm); font-weight: 700; }
.week-content p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: none; }
.week-pills { display: flex; flex-direction: row; gap: var(--space-1); align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.course-card-footer {
  padding: var(--space-6) var(--space-8);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  background: color-mix(in oklab, var(--color-surface-2) 70%, transparent);
}

/* ── SELF-PACED GRID ───────────────────────────────────────── */
.sp-intro {
  margin-bottom: var(--space-10); display: grid; gap: var(--space-3); max-width: 56ch;
}
.sp-intro h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; }
.sp-intro p  { color: var(--color-text-muted); }

.sp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.sp-card {
  padding: var(--space-6);
  background: color-mix(in oklab, var(--color-surface) 96%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  display: grid; gap: var(--space-4);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
}
.sp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sp-card--featured {
  border-color: color-mix(in oklab, var(--color-primary) 28%, transparent);
  background: color-mix(in oklab, var(--color-primary) 4%, var(--color-surface));
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklab, var(--color-primary) 10%, transparent);
}
.sp-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.sp-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
}
.sp-icon--teal   { background: color-mix(in oklab, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.sp-icon--gold   { background: color-mix(in oklab, var(--color-gold) 12%, transparent); color: var(--color-gold); }
.sp-icon--purple { background: color-mix(in oklab, #9B59B6 12%, transparent); color: #9B59B6; }
.sp-badges { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.sp-duration { font-size: var(--text-xs); color: var(--color-text-faint); font-weight: 600; }
.sp-card h3 { font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.sp-card p  { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; max-width: none; }
.sp-lessons {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--color-text-faint); font-weight: 600;
}
.lesson-count { color: var(--color-text-muted); }
.lesson-dot   { color: var(--color-divider); }
.sp-popular   { color: var(--color-gold); }

/* ── THESES SUPERVISION SECTION ───────────────────────────── */
.theses-section {
  background: color-mix(in oklab, var(--color-surface) 78%, transparent);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.theses-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.theses-header-copy {
  display: grid;
  gap: var(--space-2);
  max-width: 68ch;
}

.theses-header-copy h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
}

.theses-header-copy .section-lead {
  color: var(--color-text-muted);
}

.theses-year-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.theses-container {
  display: grid;
  gap: var(--space-5);
}

.thesis-year-group {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--space-5);
}

.thesis-year-label {
  position: sticky;
  top: calc(var(--header-h) + var(--space-3));
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
  padding: 0.3rem 0.7rem;
  width: fit-content;
}

.thesis-rows {
  display: grid;
  gap: var(--space-4);
}

.thesis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  background: color-mix(in oklab, var(--color-surface) 96%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.thesis-main {
  display: grid;
  gap: var(--space-2);
}

.thesis-topic {
  width: fit-content;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  border: 1px solid color-mix(in oklab, var(--color-text) 16%, transparent);
  border-radius: var(--radius-full);
  padding: 0.22rem 0.58rem;
}

.thesis-title {
  font-size: var(--text-lg);
  line-height: 1.35;
  font-weight: 700;
}

.thesis-defendant {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

.thesis-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.thesis-link:hover {
  background: color-mix(in oklab, var(--color-primary) 14%, transparent);
}

.thesis-link-muted {
  border-color: color-mix(in oklab, var(--color-text) 14%, transparent);
  background: color-mix(in oklab, var(--color-text) 5%, transparent);
  color: var(--color-text-faint);
}

.theses-empty {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── GALLERY ────────────────────────────────────────────────── */
.gallery-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap;
  margin-bottom: var(--space-10);
}
.gallery-header-text { display: grid; gap: var(--space-3); }
.gallery-header-text h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; }
.gallery-header-text p  { color: var(--color-text-muted); max-width: 44ch; }
.gallery-filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-8); }

/* CSS Masonry grid */
.gallery-masonry {
  columns: 4;
  column-gap: var(--space-4);
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), opacity var(--transition-interactive);
  cursor: default;
}
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.gallery-item.hidden { display: none; }

/* Span variants */
.gallery-item--wide { /* no column-span in masonry; handled via placeholder height */ }
.gallery-item--tall .gallery-placeholder { height: 240px; }

/* Placeholder (replace with <img> when you have photos) */
.gallery-placeholder {
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.35;
}
.gallery-item--wide .gallery-placeholder { height: 200px; }
.gp-teal   { background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 20%, var(--color-surface)), color-mix(in oklab, var(--color-primary) 8%, var(--color-surface))); color: var(--color-primary); }
.gp-gold   { background: linear-gradient(135deg, color-mix(in oklab, var(--color-gold) 20%, var(--color-surface)), color-mix(in oklab, var(--color-gold) 8%, var(--color-surface))); color: var(--color-gold); }
.gp-purple { background: linear-gradient(135deg, color-mix(in oklab, #9B59B6 20%, var(--color-surface)), color-mix(in oklab, #9B59B6 8%, var(--color-surface))); color: #9B59B6; }

.gallery-caption {
  padding: var(--space-4);
  background: color-mix(in oklab, var(--color-surface) 97%, transparent);
  display: grid; gap: 2px;
}
.gallery-caption strong { font-size: var(--text-sm); font-weight: 700; }
.gallery-caption span   { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ── CTA SECTION ────────────────────────────────────────────── */
.courses-cta { background: var(--color-surface); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .sp-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-masonry { columns: 3; }
}
@media (max-width: 1000px) {
  .courses-hero-inner { grid-template-columns: 1fr; }
  .hero-course-preview { max-width: 480px; }
}
@media (max-width: 860px) {
  .courses-tabs-wrap {
    position: static;
    top: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in oklab, var(--color-surface) 96%, transparent);
  }
  .tabs-inner {
    padding-inline: var(--space-4);
  }
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry { columns: 2; }
  .course-title-row { flex-direction: column; }
  .course-quick-stats { flex-wrap: wrap; }
  .acc-trigger { padding-inline: var(--space-5); }
  .acc-body    { padding-inline: var(--space-5); }
  .week-row    { grid-template-columns: 2.5rem 1fr; }
  .week-pills  { grid-column: 2; flex-direction: row; align-items: flex-start; }
  .course-card-footer { padding-inline: var(--space-5); }
  .course-card-header { padding-inline: var(--space-5); }
  .thesis-year-group {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .thesis-year-label {
    position: static;
  }
  .thesis-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .thesis-actions {
    width: 100%;
  }
  .thesis-link {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .sp-grid { grid-template-columns: 1fr; }
  .gallery-masonry { columns: 1; }
  .gallery-header { flex-direction: column; }
  .gallery-filter-row { padding-top: 0; }
  .courses-hero-stats { flex-wrap: wrap; width: auto; }
  .c-stat { flex: 1 1 120px; padding-inline: var(--space-3); }
  .c-stat-div { display: none; }
  .tabs-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    overflow: visible;
    padding-inline: var(--space-3);
  }
  .tab-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    min-height: 2.7rem;
    padding: var(--space-2) var(--space-2);
  }
  .tab-btn.active::after {
    bottom: -5px;
    left: 10%;
    right: 10%;
  }
  .acc-trigger {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: var(--space-1);
    align-items: start;
  }
  .acc-group-label {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
  .acc-group-weeks {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }
  .acc-arrow {
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
  }
  .week-row {
    gap: var(--space-3);
    padding-block: var(--space-4);
  }
}

@media (max-width: 380px) {
  .tabs-inner {
    padding-inline: var(--space-2);
  }
  .tab-btn {
    font-size: var(--text-xs);
    gap: var(--space-1);
    padding: var(--space-2) 0.35rem;
  }
  .tab-btn .tab-count {
    font-size: 0.68rem;
  }
  .acc-trigger {
    padding: var(--space-3) var(--space-4);
    column-gap: var(--space-2);
  }
  .acc-group-weeks {
    font-size: 0.7rem;
  }
}