/* Course cards for teaching.qmd.
   Modeled on css/projects.css so the two pages read as one system (same
   hover-glow blue, border, and shadow language). Colors are hard-coded
   here (plain CSS can't see theme.scss variables).

   NOTE ON SOURCE ORDER: the ### heading must be the FIRST block inside
   .course-card. Pandoc only pulls a heading into the TOC if the div it
   sits in begins with that heading, so putting the logo div ahead of it
   silently drops the course from the "Courses" sidebar. The logo
   therefore comes after the heading in the .qmd and is placed back into
   the left column here with grid-column / grid-row. */

.course-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 1.5rem;
  /* Transparent rather than a fixed white, so the card shows whatever
     page background is currently selected (default/white/dark - see the
     background theme switcher) instead of always being a white
     rectangle. The border and shadow below still outline the card. */
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.course-card:hover {
  border-color: #5480a7;
  box-shadow: 0 0 16px 1px rgba(84, 128, 167, 0.22),
    0 6px 16px rgba(84, 128, 167, 0.16);
}

/* Everything except the logo lives in the right-hand column */
.course-card > * {
  grid-column: 2;
  min-width: 0;
}

.course-logo {
  grid-column: 1;
  grid-row: 1 / span 99;
}

/* Pandoc wraps the image in a <p>; zero both that and the global
   img { margin-bottom: 1rem } from theme.scss */
.course-logo p,
.course-logo img {
  margin-bottom: 0;
}

.course-logo img {
  width: 100%;
}

/* Align the heading with the top of the hex logo */
.course-card > h2 {
  margin-top: 0;
  margin-bottom: 0.15rem;
}

.course-meta {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: #6b7c8c;
  margin-bottom: 0.75rem;
}

.course-meta p {
  margin-bottom: 0;
}

.course-card p {
  margin-bottom: 0.85rem;
}

/* Reuse .icon-link from theme.scss, but with padding suited to a card CTA
   (the theme's 1px 4px is tuned for the small icon buttons on research) */
.course-card .icon-link {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.85rem;
  text-decoration: none;
  margin-right: 0.35rem;
}

/* Collapsible semester archive.
   theme.scss sets details > summary color to $body-bg (near-invisible on
   white) in a monospace font, so both are overridden here. Colors here
   match $primary-color (#0645B1, the "View" button's blue) and
   $secondary-color (#8B0000, the site's current accent red) from
   theme.scss - hardcoded because this is plain CSS, which can't see
   those Sass variables. */
.course-card details.semesters {
  margin-top: 0.9rem;
}

.course-card details.semesters > summary {
  color: #0645B1;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: transparent;
  border-radius: 0;
  padding-left: 0;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.course-card details.semesters > summary:hover {
  color: #8B0000;
}

.semester-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.semester-pills a,
.semester-pills span {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.75rem;
  color: #555;
  background-color: #f7f7f7;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease,
    background-color 0.15s ease;
}

.semester-pills a:hover {
  border-color: #0645B1;
  color: #0645B1;
  background-color: #ececec;
}

/* Unlinked semesters (no archived site) read as muted */
.semester-pills span {
  color: #999;
}

@media (max-width: 575px) {
  .course-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .course-card > *,
  .course-logo {
    grid-column: 1;
  }

  /* drop the row span and hoist the logo above the heading */
  .course-logo {
    grid-row: auto;
    order: -1;
    width: 120px;
  }

  .semester-pills {
    justify-content: center;
  }
}