/* ==========================================================================
   Course page  —  /academics/courses/<slug>/
   Loaded only by pages/course_detail.html, on top of department.css, which
   supplies the intro band (.dept-intro) and the tab panel (.dept-tabs) that
   this page shares with the department page.
   ========================================================================== */

/* ------------------------------------------------------------- intro ---- */
/* Facts under the description: programme, duration, intake, department. */
.course-facts {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 22px;
}
.course-facts li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0 0;
  border-top: 2px solid var(--line);
}
.course-facts .k {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.course-facts .v { font-size: .9rem; font-weight: 600; color: var(--ink); }
.course-facts .v a { color: var(--accent); }
.course-facts .v a:hover { text-decoration: underline; }

/* ----------------------------------------------- tab download button ---- */
/* Download Syllabus, under the eligibility list. On a line of its own with
   air above it rather than tucked against the last point: it is the one
   thing on that tab a visitor is meant to click. */
.tab-pane__action { margin: 24px 0 0; }
.tab-pane__action .btn svg { fill: currentColor; flex: none; }

/* --------------------------------------------- tab panel + enquiry ------ */
/* This band stays white between the two tinted ones either side of it, so
   the tabs read as the middle of the page rather than another stripe. */
.course-panel__row {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(22px, 2.6vw, 40px);
  align-items: start;
}
.course-panel__main { min-width: 0; }
.course-panel__main .dept-tabs { margin-top: 0; }

/* The form follows the tabs down instead of scrolling away, which is the
   point of putting it beside them rather than at the foot of the page.

   The offset clears the navigation bar, which turns sticky at top:0 once the
   page scrolls (.nav.is-stuck in main.css). That bar is about 44px tall -
   13px padding either side of an uppercase .78rem line plus its 3px active
   border - so 60px leaves it clear with a small gap. It is written here once
   rather than repeated down the file. */
.course-panel__aside {
  --sticky-top: 60px;
  position: sticky;
  top: var(--sticky-top);
  min-width: 0;
}

/* A viewport too short to hold the form would strand its lower fields off
   screen with no way to reach them, so below that height it stops sticking. */
@media (max-height: 720px) {
  .course-panel__aside { position: static; }
}

/* ------------------------------------------------- FAQ + recruiters ----- */
.course-extras__row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
/* With no questions yet the recruiters take the full width instead of
   sitting in a half-empty row. */
.course-extras__row--single { grid-template-columns: 1fr; }

/* auto-fit for the same reason as the course cards: auto-fill would hold
   open empty tracks on a row that does not fill. */
.recruiter-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
}
.recruiter-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.recruiter-grid__item:hover { box-shadow: var(--shadow-sm); border-color: #cfcfcf; }
.recruiter-grid__item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
}

/* --------------------------------------------------- board of studies --- */
/* One slide of the looping slider: portrait on the left, name and the two
   lines under it on the right. Full height so a row of cards squares off
   whatever the affiliation wraps to. */
.board-card {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 18px;
  background: var(--paper);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
}
.board-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

/* Fixed square, so a missing photograph leaves the same shape as a real one
   and the text beside it starts on the same line across every card. */
.board-card__photo {
  flex: none;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--page);
}
.board-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.board-card__photo svg { width: 38px; height: 38px; fill: #b9b9b9; }

/* min-width:0 or a long affiliation would push the card wider than its slide
   instead of wrapping inside it. */
.board-card__body { min-width: 0; }
.board-card__name {
  margin: 0;
  font-size: .96rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
.board-card__role { margin: 5px 0 0; font-size: .82rem; color: var(--accent); font-weight: 600; }
.board-card__org  { margin: 3px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.5; }

/* Two slides across from the tablet up, three on a wide screen. The carousel
   works its step out by measuring the rendered cards, so these widths are the
   only place the count is set. */
.course-board .carousel__item { flex: 0 0 100%; }
@media (min-width: 768px) {
  .course-board .carousel__item { flex-basis: calc((100% - 18px) / 2); }
}
@media (min-width: 1200px) {
  .course-board .carousel__item { flex-basis: calc((100% - 36px) / 3); }
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 991.98px) {
  /* The form drops under the tabs rather than being squeezed into a column
     too narrow for its fields, and stops sticking once there is nothing
     beside it to stick against. */
  .course-panel__row,
  .course-extras__row { grid-template-columns: 1fr; }
  .course-panel__aside { position: static; }
  /* Full width would stretch a 12-field form across the page; this keeps it
     the width it was designed at and centred under the tabs. */
  .course-panel__aside .panel { max-width: 520px; margin-inline: auto; }
}

@media (max-width: 575.98px) {
  .recruiter-grid { grid-template-columns: repeat(2, 1fr); }
  .course-facts { grid-template-columns: 1fr; }
}


/* --------------------------------------------------- career slider ------ */
/* Small cards riding past inside the Career Opportunities tab: picture on
   top, the role underneath. */
.career-slider { margin-top: 6px; }

.career-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  height: 100%;
  margin: 0;
  padding: 18px 12px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: box-shadow var(--transition), transform var(--transition),
              border-color var(--transition);
}
.career-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--gold);
  transform: translateY(-3px);
}

/* Fixed circle so a role with a photograph and one with the fallback icon
   line up in the same row. */
.career-card__media {
  flex: none;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--page-alt);
}
.career-card__media img { width: 100%; height: 100%; object-fit: cover; }
.career-card__media svg { width: 34px; height: 34px; fill: var(--accent); }

.career-card__name {
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

/* Narrow cards, so several roles are on screen at once - the point of the row
   is that it keeps moving. The carousel measures the rendered cards to work
   out its step, so these widths are the only place the count is set. */
.career-slider .carousel__item { flex: 0 0 calc((100% - 18px) / 2); }
@media (min-width: 480px) {
  .career-slider .carousel__item { flex-basis: calc((100% - 36px) / 3); }
}
@media (min-width: 768px) {
  .career-slider .carousel__item { flex-basis: calc((100% - 54px) / 4); }
}
@media (min-width: 1200px) {
  .career-slider .carousel__item { flex-basis: calc((100% - 72px) / 5); }
}