/* ==========================================================================
   /semester-pass, every Semester Pass on offer (pages/semester-passes.php)

   ⭐⭐ REBUILT 2026-09-14 on the owner's ask to give this page the My Purchases
   design "for all". The cards are includes/semester-card.php with
   assets/css/semester-card.css, the same card My Purchases draws; this sheet lays
   out the page around them: the hero, the course picker, the grid, What you get.

   ⭐ The passes' own tokens (--sbx-*, from .mn-sbx in semester-bundle.css) and
   their navy hero band, so this page and the pass it opens read as one product.

   ⛔ No border-left rule beside a block of text (owner, 2026-09-11).
   ⛔⛔ No `+` or `~` sibling selectors (auto ads inject into flex and grid).
   ========================================================================== */

/* ⭐ The navbar's column: 1280px less its two 32px gutters, the measure the pass
   pages use (76rem). The page has had the site navbar and the white crumb strip
   since 2026-09-14, and at 72rem its H1 started 32px inboard of the wordmark and
   the crumb above it on every screen wider than 1216px. */
.mn-sbx.mn-spi .mn-spi-wrap {
  max-width: 76rem;
  margin: 0 auto;
}

/* ---------- The hero ---------- */

.mn-sbx.mn-spi .mn-spi-hero {
  padding: 2.4rem 2rem 2.75rem;
}

.mn-sbx.mn-spi .mn-spi-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 29rem;
  gap: 3rem;
  align-items: center;
}

.mn-sbx.mn-spi .mn-spi-hero-copy { min-width: 0; }

/* ⛔ Not an alert box with a coloured rule down its left: a quiet amber line with
   a clock, because this is a "not yet", not a failure. */
.mn-sbx.mn-spi .mn-spi-notice {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 1.2rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(255, 216, 107, 0.45);
  border-radius: 10px;
  background: rgba(255, 216, 107, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
  line-height: 1.45;
}

.mn-sbx.mn-spi .mn-spi-notice svg { flex: 0 0 auto; margin-top: 0.12rem; color: var(--sbx-amber); }
.mn-sbx.mn-spi .mn-spi-notice time { font-weight: 600; color: var(--sbx-amber); white-space: nowrap; }

.mn-sbx.mn-spi .mn-spi-kicker {
  margin: 0 0 1.1rem;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.mn-sbx.mn-spi .mn-spi-ticks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.75rem;
  max-width: 34rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

.mn-sbx.mn-spi .mn-spi-ticks li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.mn-sbx.mn-spi .mn-spi-ticks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--sbx-amber);
}

/* The one button in the hero, in the amber of the navbar's own Semester Pass
   button, so the way in looks like the thing that brought the reader here. */
.mn-sbx.mn-spi .mn-spi-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 46px;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  background: var(--sbx-amber);
  color: var(--sbx-navy);
  font-size: 0.96rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.mn-sbx.mn-spi .mn-spi-hero-cta:hover,
.mn-sbx.mn-spi .mn-spi-hero-cta:focus-visible { background: #ffe38f; color: var(--sbx-navy); }

/* The picture: the page's own first two cards, covers only, laid on each other. */
.mn-sbx.mn-spi .mn-spi-hero-art {
  position: relative;
  height: 23rem;
  pointer-events: none;
}

.mn-sbx.mn-spi .mn-spi-hero-card {
  position: absolute;
  width: 25rem;
  filter: drop-shadow(0 18px 30px rgba(3, 10, 30, 0.35));
}

.mn-sbx.mn-spi .mn-spi-hero-card .mn-semcard { box-shadow: none; border-color: rgba(255, 255, 255, 0.16); }
.mn-sbx.mn-spi .mn-spi-hero-card .mn-semcard-body { display: none; }
/* ⚠️ Offset far enough that the notes card's own title, "Notes", stays in view
   above the solutions card laid over it. */
.mn-sbx.mn-spi .mn-spi-hero-card--notes { top: 0; left: 0; transform: rotate(-4deg); }
.mn-sbx.mn-spi .mn-spi-hero-card--papers { right: 0; bottom: 0; transform: rotate(3deg); }
.mn-sbx.mn-spi .mn-spi-hero-art.is-single .mn-spi-hero-card { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-3deg); }

/* ---------- The body ---------- */

.mn-sbx.mn-spi .mn-spi-body { background: #ffffff; }

.mn-sbx.mn-spi .mn-spi-sec { padding: 3rem 2rem 3.25rem; }

.mn-sbx.mn-spi .mn-spi-sec--gets {
  background: #f7f9ff;
  border-top: 1px solid var(--sbx-rule-2);
}

.mn-sbx.mn-spi .mn-spi-h2 {
  margin: 0 0 1.25rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--sbx-ink);
}

/* ---------- Step one: the course ---------- */

.mn-sbx.mn-spi .mn-spi-picker { margin: 0 0 2rem; }

.mn-sbx.mn-spi .mn-spi-step {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sbx-ink-3);
}

.mn-sbx.mn-spi .mn-spi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mn-sbx.mn-spi .mn-spi-chips--groups {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--sbx-rule);
}

.mn-sbx.mn-spi .mn-spi-chips--groups .mn-spi-step { flex-basis: 100%; margin-bottom: 0.1rem; }
.mn-sbx.mn-spi .mn-spi-chips[hidden] { display: none; }

.mn-sbx.mn-spi .mn-spi-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--sbx-rule);
  border-radius: 999px;
  background: #ffffff;
  color: var(--sbx-navy);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mn-sbx.mn-spi .mn-spi-chip:hover { border-color: var(--sbx-navy); }

.mn-sbx.mn-spi .mn-spi-chip.is-on {
  background: var(--sbx-navy);
  border-color: var(--sbx-navy);
  color: #ffffff;
}

.mn-sbx.mn-spi .mn-spi-chip--group { min-height: 40px; font-size: 0.88rem; }

.mn-sbx.mn-spi .mn-spi-chip--group.is-on {
  background: var(--sbx-blue-t);
  border-color: var(--sbx-blue);
  color: var(--sbx-navy);
}

/* ---------- Step two: the semester ---------- */

.mn-sbx.mn-spi .mn-spi-course { margin: 0 0 3rem; }
.mn-sbx.mn-spi .mn-spi-course[hidden] { display: none; }
.mn-sbx.mn-spi.is-picking .mn-spi-course { margin-bottom: 0; }

.mn-sbx.mn-spi .mn-spi-course-head { margin: 0 0 1.25rem; }

.mn-sbx.mn-spi .mn-spi-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sbx-blue);
}

.mn-sbx.mn-spi .mn-spi-course-title {
  margin: 0 0 0.3rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--sbx-ink);
}

.mn-sbx.mn-spi .mn-spi-course-meta {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--sbx-ink-3);
}

/* ⚠️ Two to a row at most, so a semester's notes and solutions sit side by side;
   a third column would split every pair across two rows. */
.mn-sbx.mn-spi .mn-spi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.mn-sbx.mn-spi .mn-spi-note {
  margin: 1.75rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--sbx-ink-3);
}

.mn-sbx.mn-spi .mn-spi-note a { color: var(--sbx-blue); text-decoration: underline; text-underline-offset: 0.2em; }

/* The way back up to the picker from the foot of a long course. */
.mn-sbx.mn-spi .mn-spi-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 1.25rem 0 0;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sbx-blue);
  text-decoration: none;
}

.mn-sbx.mn-spi .mn-spi-back:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- What you get ---------- */

/* ⭐ Flex, not grid, so five promises in rows of three centre the last two
   instead of leaving a hole at the end. */
.mn-sbx.mn-spi .mn-spi-gets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mn-sbx.mn-spi .mn-spi-gets li {
  flex: 0 1 calc((100% - 2rem) / 3);
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid var(--sbx-rule);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(13, 21, 38, 0.04);
}

.mn-sbx.mn-spi .mn-spi-gets-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.15rem;
  border-radius: 11px;
  background: var(--sbx-blue-t);
  color: var(--sbx-navy-2);
}

.mn-sbx.mn-spi .mn-spi-gets strong {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sbx-ink);
}

.mn-sbx.mn-spi .mn-spi-gets li > span:last-child {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--sbx-ink-2);
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1040px) {
  .mn-sbx.mn-spi .mn-spi-hero-in { grid-template-columns: minmax(0, 1fr); }
  .mn-sbx.mn-spi .mn-spi-hero-art { display: none; }
  .mn-sbx.mn-spi .mn-spi-gets li { flex-basis: calc((100% - 1rem) / 2); }
}

/* ⚠️ Two cards side by side need about 820px for a card's title to stay clear of
   its art. */
@media (max-width: 899.98px) {
  .mn-sbx.mn-spi .mn-spi-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* 1rem at the sides, the navbar's phone gutter, so the words sit under the crumb. */
  .mn-sbx.mn-spi .mn-spi-hero { padding: 1.6rem 1rem 2.1rem; }
  .mn-sbx.mn-spi .mn-spi-sec { padding: 2.25rem 1rem 2.5rem; }
  .mn-sbx.mn-spi .mn-spi-ticks { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .mn-sbx.mn-spi .mn-spi-hero-cta { width: 100%; justify-content: center; }
  .mn-sbx.mn-spi .mn-spi-gets li { flex-basis: 100%; }
  .mn-sbx.mn-spi .mn-spi-h2 { font-size: 1.4rem; }

  /* The chips as a tidy two-column grid instead of a ragged wrap. */
  .mn-sbx.mn-spi .mn-spi-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-sbx.mn-spi .mn-spi-chips--groups .mn-spi-step { grid-column: 1 / -1; }
  .mn-sbx.mn-spi .mn-spi-chip { border-radius: 12px; padding: 0.5rem 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-sbx.mn-spi .mn-spi-chip,
  .mn-sbx.mn-spi .mn-spi-hero-cta { transition: none; }
}