/* =========================
   COURSE PAGES CSS (course.css)
   Scope everything to .course-page
   ========================= */

.course-page .schedule-grid-section{ margin-top: 14px; }

/* =========================
   Course Instructor / TA block
   ========================= */

.course-page .course-people{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-bottom:18px;
}

/* Cards */
.course-page .person-card{
  grid-column: span 6;
  border:1px solid var(--border);
  border-radius:16px;
  background: var(--panel);
  overflow:hidden;
}

.course-page .person-head{
  padding:12px 14px;
  background: var(--panel-2);
  border-bottom:1px solid var(--border-2);
}

.course-page .person-title{
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1rem;
}

/* Body */
.course-page .person-body{
  padding:14px;
}

.course-page .person-name{
  font-weight:900;
  font-size:1.05rem;
  margin-bottom:2px;
}

.course-page .person-role{
  font-size:.9rem;
  opacity:.8;
  margin-bottom:10px;
}

.course-page .person-info{
  list-style:none;
  padding:0;
  margin:0;
}

.course-page .person-info li{
  display:flex;
  align-items:flex-start;
  gap:5px;
  padding:3px 0;
  border-bottom:1px solid var(--border-2);
  font-size:.9rem;
}

.course-page .person-info li:last-child{
  border-bottom:none;
}

.course-page .person-info i{
  margin-top:2px;
  opacity:.8;
}

.course-page .ta-note{
  font-size:.9rem;
  opacity:.85;
  margin-bottom:10px;
}

/* Mobile */
@media (max-width: 700px){
  .course-page .person-card{
    grid-column: span 12;
  }
}


.course-page .schedule-grid-title{
  margin:0;
  font-size:1.2rem;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
}

.course-page .schedule-grid-subtitle{
  margin:6px 0 14px;
  opacity:.75;
  font-size:.92rem;
}

/* Week container: clearly separated */
.course-page .week-block{
  border:1px solid var(--border);
  border-radius:16px;
  background: var(--panel);
  margin:14px 0;
  overflow:hidden;
}

/* Week header */
.course-page .week-header{
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background: var(--panel-2);
}

.course-page .week-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.course-page .week-badge{
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--chip-border);
  background: var(--chip-bg);
}

.course-page .week-dates{
  font-size:.9rem;
  opacity:.75;
}

/* Grid of meeting cards */
.course-page .meeting-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:10px;
  padding:12px 14px 14px;
}

/* Default: 3 per row (desktop) */
.course-page .meeting-card{
  grid-column: span 4;
  border:1px solid var(--border-2);
  border-radius:14px;
  background: rgba(0,0,0,.02);
  padding:12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
html[data-theme="dark"] .course-page .meeting-card{
  background: rgba(255,255,255,.04);
}

.course-page .meeting-main{ min-width:0; }

.course-page .meeting-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.course-page .meeting-date{ font-weight:900; opacity:.92; }
.course-page .meeting-module{ font-size:.85rem; opacity:.75; }

.course-page .meeting-topic{
  font-weight:900;
  line-height:1.25;
  margin-bottom:6px;
}

.course-page .meeting-meta{
  font-size:.88rem;
  opacity:.75;
}

/* Notes button with icon */
.course-page .meeting-actions{ flex-shrink:0; }

.course-page .notes-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--chip-border);
  background: var(--chip-bg);
  text-decoration:none;
  color:inherit;
  font-weight:900;
  font-size:.88rem;
  white-space:nowrap;
}

.course-page .notes-btn:hover{ filter: brightness(1.05); }

/* Disabled button */
.course-page .notes-btn.disabled{
  opacity:.6;
  cursor:not-allowed;
  user-select:none;
  pointer-events:none;
}

/* =========================
   Exam button — red neon glow
   ========================= */
.course-page .notes-btn.exam{
  border-color: rgba(220, 38, 38, 0.75);
  background: rgba(220, 38, 38, 0.12);
  color: rgb(185, 28, 28);
  font-weight: 900;

  box-shadow:
    0 0 0 rgba(220, 38, 38, 0),
    0 0 12px rgba(220, 38, 38, 0.45),
    inset 0 0 8px rgba(220, 38, 38, 0.18);

  transition: box-shadow .25s ease, transform .15s ease;
}

/* Hover pulse */
.course-page .notes-btn.exam:hover{
  box-shadow:
    0 0 0 rgba(220, 38, 38, 0),
    0 0 18px rgba(220, 38, 38, 0.75),
    inset 0 0 10px rgba(220, 38, 38, 0.25);
  transform: translateY(-1px);
}

/* Dark mode tuning */
html[data-theme="dark"] .course-page .notes-btn.exam{
  background: rgba(220, 38, 38, 0.20);
  color: rgb(252, 165, 165);

  box-shadow:
    0 0 0 rgba(220, 38, 38, 0),
    0 0 16px rgba(220, 38, 38, 0.75),
    inset 0 0 10px rgba(220, 38, 38, 0.30);
}


/* Special states */
.course-page .meeting-card.holiday{ opacity:.85; }

.course-page .meeting-card.exam{
  background: rgba(198,146,20,.12);
  border-color: rgba(198,146,20,.25);
}
html[data-theme="dark"] .course-page .meeting-card.exam{
  background: rgba(198,146,20,.18);
  border-color: rgba(198,146,20,.35);
}

.course-page .meeting-card.review{
  background: rgba(60,72,88,.08);
  border-color: rgba(60,72,88,.16);
}
html[data-theme="dark"] .course-page .meeting-card.review{
  background: rgba(140,160,180,.12);
  border-color: rgba(140,160,180,.20);
}

/* Responsive breakpoints */
@media (max-width: 980px){
  .course-page .meeting-card{ grid-column: span 6; } /* 2 per row */
}

@media (max-width: 600px){
  .course-page .meeting-card{ grid-column: span 12; } /* 1 per row */
  .course-page .meeting-actions{ width:100%; }
  .course-page .notes-btn{ width:100%; justify-content:center; }
}

/* ===== Desktop fluid adjustment (minimal overrides) ===== */

/* Let the page breathe on wide desktops (still capped) */
.page{
  max-width: 1400px;   /* was 1120px */
  width: 100%;
}

/* Make the sidebar column adapt a bit instead of being rigid */
.layout{
  grid-template-columns: clamp(280px, 26vw, 320px) minmax(0, 1fr);
}

/* Allow nav links to wrap on desktop before the mobile breakpoint */
@media (max-width: 980px){
  .top-nav{ flex-wrap: wrap; }
  .top-nav-links{ flex-wrap: wrap; }
}

/* Prevent grid children from forcing horizontal overflow */
.main{ min-width: 0; }