/* ==========================================================================
   The semester product card (includes/semester-card.php)

   ⭐⭐ ONE CARD, TWO PAGES: My Purchases (a buyer's own) and /semester-pass
   (everybody's). Lifted out of assets/css/my-purchases.css on 2026-09-14 with the
   My Purchases cards compared pixel for pixel before and after, so a change here
   is a change on both pages, which is the point.

   ⭐ Its own tokens, the site's (homepage-ui-system.css), so it looks the same on
   whichever page draws it. ⚠️ Line height and letter spacing are inherited from
   the page body; both pages carry the same body, and the card was measured on it.

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

.mn-semcard {
  --sc-navy:     #0b1d4e;
  --sc-navy-2:   #123178;
  --sc-blue:     #1d50ca;
  --sc-blue-50:  #f0f5ff;
  --sc-blue-100: #e8f0fe;
  --sc-ink:      #0d1526;
  --sc-ink-2:    #2c3e5c;
  --sc-ink-3:    #5a718c;
  --sc-ink-4:    #8da3bc;
  --sc-line:     #dce6f5;
  --sc-line-2:   #edf2fb;
  --sc-bg:       #f7f9ff;
  --sc-card:     #ffffff;
  --sc-green:    #15803d;
  --sc-green-50: #ecfdf3;
  --sc-radius:   16px;
  --sc-radius-sm: 10px;
  --sc-shadow:   0 1px 2px rgba(13, 21, 38, 0.05), 0 6px 20px rgba(13, 21, 38, 0.05);
  --sc-shadow-hover: 0 2px 4px rgba(13, 21, 38, 0.06), 0 16px 36px rgba(13, 21, 38, 0.10);

  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sc-card);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  overflow: hidden;
  font-family: 'Lora', Georgia, Cambria, serif;
  color: var(--sc-ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mn-semcard,
.mn-semcard *,
.mn-semcard *::before,
.mn-semcard *::after { box-sizing: border-box; }

.mn-semcard:hover { box-shadow: var(--sc-shadow-hover); transform: translateY(-2px); }

/* ⚠️ A card with nothing to list keeps its own height. Stretched to its neighbour
   it was one sentence over a white void, which read as a card that failed to load. */
.mn-semcard.is-empty { align-self: start; }

/* ---------- The cover ---------- */

/* Drawn in the book covers' own language: navy, an inset frame, the course in
   spaced small capitals and the semester in the serif. */
.mn-semcard .mn-semcard-cover {
  position: relative;
  display: block;
  height: 168px;
  padding: 12px;
  overflow: hidden;
  text-decoration: none;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(29, 80, 202, 0.45) 0%, rgba(29, 80, 202, 0) 60%),
    linear-gradient(155deg, #13306f 0%, var(--sc-navy) 50%, #081536 100%);
}

/* ⚠️ The right padding keeps the title clear of the art (the fanned covers or
   the answer sheets), which is absolutely placed over the same box. The longer
   title, "Previous Year Question Paper Solutions", wraps instead of running
   under it. */
.mn-semcard .mn-semcard-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0 calc(150px + 1.25rem) 0 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
}

.mn-semcard .mn-semcard-flag {
  align-self: flex-start;
  margin: 0 0 0.35rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: #d9f5e3;
  color: #0f5132;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mn-semcard .mn-semcard-course {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.mn-semcard .mn-semcard-sem {
  margin: 0.2rem 0 0.25rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.05;
  color: #ffffff;
  white-space: nowrap;
}

/* What the card holds, straight under the semester, so the two read as one
   title: "Semester 1" / "Notes". */
.mn-semcard .mn-semcard-kind {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
}

/* The semester's real covers, fanned at the right of the notes card. */
.mn-semcard .mn-semcard-stack {
  position: absolute;
  z-index: 2;
  right: 18px;
  top: 50%;
  width: 150px;
  height: 110px;
  transform: translateY(-50%);
  pointer-events: none;
}

.mn-semcard .mn-semcard-stack img {
  position: absolute;
  right: 0;
  top: 50%;
  width: 132px;
  max-width: none;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  transform-origin: 80% 100%;
  transition: transform 0.3s ease;
}

.mn-semcard .mn-semcard-stack img:nth-child(1) { transform: translate(-14px, -62%) rotate(-9deg); }
.mn-semcard .mn-semcard-stack img:nth-child(2) { transform: translate(-6px, -50%) rotate(-3deg); }
.mn-semcard .mn-semcard-stack img:nth-child(3) { transform: translate(0, -38%) rotate(4deg); }
.mn-semcard .mn-semcard-stack--1 img:nth-child(1) { transform: translate(0, -50%) rotate(-3deg); }
.mn-semcard .mn-semcard-stack--2 img:nth-child(1) { transform: translate(-10px, -58%) rotate(-7deg); }
.mn-semcard .mn-semcard-stack--2 img:nth-child(2) { transform: translate(0, -42%) rotate(3deg); }

.mn-semcard:hover .mn-semcard-stack img:nth-child(1) { transform: translate(-22px, -66%) rotate(-12deg); }
.mn-semcard:hover .mn-semcard-stack img:nth-child(3) { transform: translate(4px, -34%) rotate(7deg); }

/* White answer sheets, fanned at the right of the solutions card: the one thing
   on the card that says "papers" before a word is read. Drawn, not an image. */
.mn-semcard .mn-semcard-leaves {
  position: absolute;
  z-index: 2;
  right: 30px;
  top: 50%;
  width: 124px;
  height: 136px;
  transform: translateY(-50%);
  pointer-events: none;
}

.mn-semcard .mn-semcard-leaf {
  position: absolute;
  right: 0;
  top: 50%;
  width: 88px;
  height: 116px;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  transform-origin: 70% 100%;
  transition: transform 0.3s ease;
}

.mn-semcard .mn-semcard-leaf:nth-child(1) { background: #dfe6f2; transform: translate(-36px, -56%) rotate(-11deg); }
.mn-semcard .mn-semcard-leaf:nth-child(2) { background: #eef2f8; transform: translate(-17px, -51%) rotate(-4deg); }
.mn-semcard .mn-semcard-leaf:nth-child(3) {
  display: flex;
  flex-direction: column;
  padding: 10px 9px 8px;
  transform: translate(0, -46%) rotate(4deg);
}

.mn-semcard:hover .mn-semcard-leaf:nth-child(1) { transform: translate(-46px, -58%) rotate(-14deg); }
.mn-semcard:hover .mn-semcard-leaf:nth-child(3) { transform: translate(4px, -44%) rotate(7deg); }

.mn-semcard .mn-semcard-leaf-q,
.mn-semcard .mn-semcard-leaf-marks {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1;
}

/* The solved volume's own accent (qp-solution-page.css --accent). */
.mn-semcard .mn-semcard-leaf-q { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; color: #6b1d1d; }

.mn-semcard .mn-semcard-leaf-lines {
  flex: 1 1 auto;
  margin: 7px 0 6px;
  background: repeating-linear-gradient(to bottom, #d3dae5 0, #d3dae5 1.5px, transparent 1.5px, transparent 8px);
}

.mn-semcard .mn-semcard-leaf-marks { align-self: flex-end; font-size: 8px; color: #7c8798; }

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

.mn-semcard .mn-semcard-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1 1 auto;
  padding: 1.1rem 1.2rem 1.2rem;
}

.mn-semcard .mn-semcard-prog { display: flex; flex-direction: column; gap: 0.45rem; }

.mn-semcard .mn-semcard-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--sc-blue-100);
  overflow: hidden;
}

.mn-semcard .mn-semcard-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sc-blue);
}

.mn-semcard .mn-semcard-fig {
  margin: 0;
  font-size: 0.86rem;
  color: var(--sc-ink-3);
  font-variant-numeric: tabular-nums;
}

.mn-semcard .mn-semcard-fig strong { color: var(--sc-ink); font-weight: 700; }

.mn-semcard .mn-semcard-lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sc-ink-2);
}

/* The years a solved paper exists for, written out. */
.mn-semcard .mn-semcard-years {
  margin: -0.3rem 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--sc-ink-2);
  font-variant-numeric: tabular-nums;
}

.mn-semcard .mn-semcard-years span {
  margin-right: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-ink-4);
}

.mn-semcard .mn-semcard-subjects {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  border-top: 1px solid var(--sc-line-2);
  border-bottom: 1px solid var(--sc-line-2);
}

.mn-semcard .mn-semcard-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.35rem;
  border-radius: 8px;
  color: var(--sc-ink-2);
  text-decoration: none;
}

.mn-semcard a.mn-semcard-row:hover { background: var(--sc-bg); color: var(--sc-ink); }

.mn-semcard .mn-semcard-row img,
.mn-semcard .mn-semcard-thumb-blank,
.mn-semcard .mn-semcard-paper-thumb {
  display: block;
  width: 46px;
  max-width: none;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
}

.mn-semcard .mn-semcard-thumb-blank { background: var(--sc-navy); }

/* ⚠️ The same 46 x 24 box as a notes thumb, so the two cards' rows line up. */
.mn-semcard .mn-semcard-paper-thumb {
  display: grid;
  place-items: center;
  background: var(--sc-blue-50);
  color: var(--sc-navy-2);
}

.mn-semcard .mn-semcard-subject-name {
  font-size: 0.87rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ⭐ On a page a student is choosing from, a subject name is read in full. */
.mn-semcard.is-wrap .mn-semcard-subject-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.mn-semcard .mn-semcard-subject-fig {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sc-ink-4);
}

.mn-semcard .mn-semcard-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--sc-ink-3);
}

.mn-semcard .mn-semcard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: auto;
}

.mn-semcard .mn-semcard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border-radius: var(--sc-radius-sm);
  border: 1px solid var(--sc-navy);
  background: var(--sc-navy);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mn-semcard .mn-semcard-btn:hover,
.mn-semcard .mn-semcard-btn:focus-visible { background: var(--sc-navy-2); border-color: var(--sc-navy-2); color: #ffffff; }

/* ⭐ The half a student can still add, in the pass page's gold (owner, 2026-09-24:
   "make that golden colour button"), so "Add the solved papers" looks the same on
   My Purchases as on the semester page. Same gradient as .mn-sbx-cta-gold. */
.mn-semcard .mn-semcard-btn--gold {
  background: linear-gradient(180deg, #ffd45c 0%, #f2b21b 100%);
  border-color: #d99a06;
  color: #3d2800;
  font-weight: 700;
}

.mn-semcard .mn-semcard-btn--gold:hover,
.mn-semcard .mn-semcard-btn--gold:focus-visible {
  background: linear-gradient(180deg, #ffcc3d 0%, #e6a500 100%);
  border-color: #c98c00;
  color: #2e1e00;
}

/* A half they do not own yet: a gold rim ties the card to its gold button, and it
   does not lift on hover the way a card they can open does. */
.mn-semcard.is-offer { border-color: #f0cf73; }
.mn-semcard.is-offer:hover { transform: none; }

/* ---------- The dates ---------- */

.mn-semcard .mn-semcard-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin: 0;
  padding: 0.7rem 1.2rem;
  border-top: 1px solid var(--sc-line-2);
  background: var(--sc-bg);
  font-size: 0.78rem;
  color: var(--sc-ink-3);
}

/* ---------- Phones ---------- */

@media (max-width: 420px) {
  /* ⚠️ A minimum, not a height: on the narrowest phones the solutions title takes
     three lines and a fixed cover clipped the last of them. */
  .mn-semcard .mn-semcard-cover { height: auto; min-height: 150px; }
  .mn-semcard .mn-semcard-frame { height: auto; min-height: 126px; padding: 0.6rem calc(112px + 0.75rem) 0.6rem 1.1rem; }
  .mn-semcard .mn-semcard-sem { font-size: 1.6rem; }
  .mn-semcard .mn-semcard-kind { font-size: 0.95rem; }
  .mn-semcard .mn-semcard-stack { right: 8px; width: 120px; }
  .mn-semcard .mn-semcard-stack img { width: 104px; }
  .mn-semcard .mn-semcard-leaves { right: 16px; transform: translateY(-50%) scale(0.85); transform-origin: 100% 50%; }
  .mn-semcard .mn-semcard-actions .mn-semcard-btn { flex: 1 1 auto; }
}

/* The smallest phones: "Semester 5" broke after the word at 320px. */
@media (max-width: 360px) {
  /* ⚠️ Room for the tilt of the art as well as its box: a long course name
     ("LL.M. Environment and Legal Order") touched the fanned covers at 360px. */
  .mn-semcard .mn-semcard-frame { padding-right: calc(100px + 0.9rem); }
  .mn-semcard .mn-semcard-sem { font-size: 1.45rem; }
  .mn-semcard .mn-semcard-stack { width: 100px; }
  .mn-semcard .mn-semcard-stack img { width: 86px; }
  .mn-semcard .mn-semcard-leaves { right: 10px; transform: translateY(-50%) scale(0.68); }
}

@media (prefers-reduced-motion: reduce) {
  .mn-semcard,
  .mn-semcard .mn-semcard-stack img,
  .mn-semcard .mn-semcard-leaf { transition: none; }
  .mn-semcard:hover { transform: none; }
}