/**
 * The course catalogue and the course detail page.
 *
 * Small on purpose. The facts strip, the chips, the hairline grid, the bands
 * and the inset all come from components.css and layout.css; what is here is
 * the list row and the one two-column row the detail page adds.
 *
 * The row rules below mirror .sbs-event-row in events.css closely enough to be
 * uncomfortable. See the note at the top of template-parts/courses/row.php:
 * merging them means rewriting CSS that is already live, and that belongs in
 * its own change.
 */

/* ---------------------------------------------------------------
 * List view
 * ------------------------------------------------------------- */

/*
 * Year groups. The catalogue is ordered "Year 1, Year 2, ..., Electives".
 *
 * Set in the display face at heading size and in ink, NOT as a gold mono
 * eyebrow. The eyebrow treatment made the divider quieter than the course
 * titles beneath it, so a reader scanning the list read straight past the year
 * they were looking for — the one piece of structure on the page has to be the
 * most prominent thing on it.
 */
.sbs-course-group + .sbs-course-group {
  margin-top: 72px;
}

.sbs-course-group__heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 4px;
  font-family: var(--sbs-font-display);
  /*
   * Larger than a course title, which is now 34px. The year heading is the
   * only structure on the page and has to stay the most prominent thing on
   * it; the clamp this replaced sat at its 26px floor on an ordinary laptop,
   * which put every course name above the heading that grouped them.
   */
  font-size: 46px;
  font-weight: var(--sbs-w-medium);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sbs-ink);
  /*
   * The year owns its own rule, in gold. The line under the heading used to
   * be the first row's grey border-top, which made the divider between two
   * years look exactly like the divider between two courses — the heading
   * was announcing a new section with the same hairline that separates the
   * rows inside it.
   */
  padding-bottom: 16px;
  border-bottom: 2px solid var(--sbs-gold);
}

/* Removed, or the gold rule would be shadowed by a grey one 1px below it. */
.sbs-course-group .sbs-course-row:first-child {
  border-top: 0;
}

/* Air between the rule and the first course, so the group reads as a group
 * rather than as a heading that happens to sit above some rows. */
.sbs-course-group__heading + .sbs-course-list {
  margin-top: 28px;
}


.sbs-course-list {
  margin-bottom: 64px;
}

.sbs-course-group:last-child .sbs-course-list {
  margin-bottom: 0;
}

.sbs-course-row {
  border-top: 1px solid var(--sbs-grey-200);
}

.sbs-course-row:last-child {
  border-bottom: 1px solid var(--sbs-grey-200);
}

/*
 * The row header carries the grid, because the header IS a button and the
 * whole of it toggles the description. Everything below undoes the browser's
 * button styling — a button is the right control for a disclosure, and none of
 * its default appearance is wanted.
 */
.sbs-course-row__head {
  display: grid;
  /* Title, then the tag and chevron. The credits and years columns that used
   * to open and close this row are gone; see template-parts/courses/row.php. */
  grid-template-columns: 1fr auto;
  gap: 0 32px;
  align-items: center;
  width: 100%;
  padding: 30px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sbs-course-row__head:focus-visible {
  outline: 2px solid var(--sbs-gold);
  outline-offset: -4px;
}

.sbs-course-row__credits {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
}

.sbs-course-row__number {
  font-family: var(--sbs-font-display);
  font-size: 22px;
  font-weight: var(--sbs-w-medium);
  line-height: 1;
}

.sbs-course-row__unit {
  font-family: var(--sbs-font-mono);
  font-size: var(--sbs-meta);
  letter-spacing: var(--sbs-ls-meta);
  text-transform: uppercase;
  color: var(--sbs-gold);
}

/*
 * Indented, both here and in the panel below. The year heading is flush with
 * the band, the courses under it are not, so the hierarchy is visible before
 * anything is read.
 */
.sbs-course-row__main,
.sbs-course-row__panel-inner {
  padding-left: 30px;
}

.sbs-course-row__title {
  display: block;
  margin: 0;
  font-family: var(--sbs-font-display);
  /* 34px, the size the credits figure used to have — the course name is what
   * a reader scans this list for, so it is the largest thing in the row.
   * Fixed rather than a clamp: a clamp with a 26px floor spent most desktop
   * widths at the floor and never actually reached the size it promised. */
  font-size: 34px;
  font-weight: var(--sbs-w-medium);
  line-height: 1.15;
  letter-spacing: -0.01em;
  transition: color var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-course-row__head:hover .sbs-course-row__title {
  color: var(--sbs-gold);
}

.sbs-course-row__teacher {
  display: block;
  margin: 6px 0 0;
  font-size: var(--sbs-body-xs);
  color: var(--sbs-grey-600);
}

.sbs-course-row__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

/* ---------------------------------------------------------------
 * The expandable description
 * ------------------------------------------------------------- */

/*
 * The chevron is the only affordance left in the row's end cell, and it is
 * decoration rather than a control of its own — the button around it is the
 * control. It keeps the circle so the row still announces itself as something
 * that opens, next to a subject tag that is also a rounded shape.
 */
.sbs-course-row__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--sbs-grey-200);
  border-radius: 50%;
  color: var(--sbs-ink);
  transition:
    border-color var(--sbs-dur-fast) var(--sbs-ease),
    background-color var(--sbs-dur-fast) var(--sbs-ease),
    color var(--sbs-dur-fast) var(--sbs-ease);
}

/* Drawn rather than a glyph, so the rotation has a real centre to turn about
 * and the two states are the same mark at two angles. */
.sbs-course-row__chevron::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-course-row__head:hover .sbs-course-row__chevron {
  border-color: var(--sbs-gold);
  color: var(--sbs-gold);
}

.sbs-course-row__head[aria-expanded='true'] .sbs-course-row__chevron {
  border-color: var(--sbs-gold);
  background: var(--sbs-gold);
  color: var(--sbs-white, #fff);
}

.sbs-course-row__head[aria-expanded='true'] .sbs-course-row__chevron::before {
  transform: translateY(1px) rotate(225deg);
}

/*
 * Collapsed only once the script has claimed the list. Without JavaScript the
 * region never gets [data-course-list-ready] and every description stays
 * visible, which is the correct no-JS rendering of a summary.
 *
 * max-height, measured and set by course-list.js, NOT the usual
 * `grid-template-rows: 0fr -> 1fr` trick. That trick needs the collapsing
 * wrapper to size itself from its content, and this one cannot: it is a grid
 * ITEM spanning the row above it, the row is `align-items: center`, and the
 * inner element's `overflow: hidden` drops its automatic minimum size to zero.
 * The 1fr track then resolves against an indefinite height with a zero
 * minimum, so the panel stayed 0px tall with .is-open applied and every
 * description silently failed to open.
 */
[data-course-list-ready] .sbs-course-row__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--sbs-dur-fast) var(--sbs-ease);
}

[data-course-list-ready] .sbs-course-row__panel-inner {
  /* visibility, not just zero height: a collapsed panel must be out of the tab
   * order, and clipping alone still lets the link inside take focus. */
  visibility: hidden;
  transition: visibility 0s linear var(--sbs-dur-fast);
}

[data-course-list-ready] .sbs-course-row__panel.is-open .sbs-course-row__panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

.sbs-course-row__summary {
  max-width: 68ch;
  margin: 0 0 14px;
  font-size: var(--sbs-body-s, var(--sbs-body-xs));
  line-height: 1.6;
  color: var(--sbs-grey-600);
}

.sbs-course-row__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* The header above owns the row's top padding; this closes the bottom. */
  margin-bottom: 30px;
  font-family: var(--sbs-font-mono);
  font-size: var(--sbs-meta);
  letter-spacing: var(--sbs-ls-meta);
  text-transform: uppercase;
  color: var(--sbs-gold);
  text-decoration: none;
}

.sbs-course-row__more:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  [data-course-list-ready] .sbs-course-row__panel,
  .sbs-course-row__chevron {
    transition: none;
  }
}

/* An open panel is released to `none` once the transition has finished, so a
 * summary that reflows — a narrower window, a larger font — is never clipped
 * by a height measured before the reflow. */
[data-course-list-ready] .sbs-course-row__panel.is-settled {
  max-height: none;
}

/* A second chip row, for the course type. Quieter than the subject chips
 * above it, because it is a secondary cut of the same list. */
.sbs-chips--sub {
  margin-top: 12px;
}

.sbs-chips--sub .sbs-chip {
  font-size: var(--sbs-body-xs);
}

/* ---------------------------------------------------------------
 * Detail
 * ------------------------------------------------------------- */
.sbs-course__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.sbs-course__row-heading {
  margin-bottom: 24px;
  font-size: var(--sbs-h3);
  font-weight: var(--sbs-w-medium);
}

/* ---------------------------------------------------------------
 * Narrow
 * ------------------------------------------------------------- */
@media (max-width: 782px) {
  .sbs-course-row__head {
    /* One column: the tag and chevron drop under the title rather than
     * squeezing it into half a phone's width. */
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
  }

  .sbs-course-row__end {
    grid-column: 1;
    justify-content: flex-start;
    margin-top: 12px;
  }

  /* The step the credits figure took at this width, for the same reason. */
  .sbs-course-row__title {
    font-size: 26px;
  }

  .sbs-course-group__heading {
    font-size: 34px;
    padding-bottom: 12px;
  }

  .sbs-course-row__main,
  .sbs-course-row__panel-inner {
    padding-left: 16px;
  }

  .sbs-course__row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}