/* ==========================================================================
   notes-university.css — /notes/<university>/ and /notes/university-sample/
   ==========================================================================
   Layered on top of notes-picker.css, which already provides .pkChip,
   .pkSearch, .pkHead, .pkTour and .pkReplay. Reusing them is deliberate: the
   picker and the university hub are consecutive steps in one journey and
   should not look like two different products.

   Everything scales with the data. A university with one year gets one wide
   year card, not one card and three gaps.
   ========================================================================== */

.page-uni {
  --pk-line: rgb(255 255 255 / .1);
  --pk-card: rgb(255 255 255 / .04);
  --pk-pane: rgb(18 18 22 / .96);
  --pk-veil: rgb(6 6 8 / .74);
}
.theme-light .page-uni {
  --pk-line: rgb(15 18 26 / .13);
  --pk-card: rgb(15 18 26 / .03);
  --pk-pane: rgb(255 255 255 / .97);
  --pk-veil: rgb(20 22 30 / .55);
}
.page-uni .section, .uniHero, .uniStep { position: relative; z-index: 1; }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.uniHero {
  position: relative; overflow: hidden;
  padding-block: clamp(var(--s-10), 6vw, var(--s-16)) clamp(var(--s-8), 4vw, var(--s-12));
}
.uniHero__bg { position: absolute; inset: -12% 0 -12% 0; z-index: 0; }
.uniHero__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Parallax is applied as a translate from JS; the blur and desaturation stop
     a building competing with the headline sitting on top of it. */
  filter: blur(2px) saturate(.7);
  transform: translate3d(0, var(--py, 0px), 0) scale(1.08);
  will-change: transform;
}
.uniHero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgb(8 8 10 / .96) 30%, rgb(8 8 10 / .72) 65%, rgb(8 8 10 / .55)),
    linear-gradient(to top, rgb(8 8 10 / .95), transparent 55%);
}
.theme-light .uniHero__veil {
  background:
    linear-gradient(to right, rgb(255 255 255 / .96) 30%, rgb(255 255 255 / .78) 65%, rgb(255 255 255 / .6)),
    linear-gradient(to top, rgb(255 255 255 / .95), transparent 55%);
}
.uniHero__in { position: relative; z-index: 2; }

.uniHero__id { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-4) 0 var(--s-4); }
.uniHero__logo {
  flex: none; display: grid; place-items: center;
  width: 4.25rem; height: 4.25rem; border-radius: 16px; padding: .5rem;
  background: rgb(255 255 255 / .96);
  box-shadow: 0 14px 34px -12px rgb(0 0 0 / .8);
  /* Sits slightly forward of the plate, so the hero reads as layered. */
  transform: translateZ(0) rotate(-2deg);
}
.uniHero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.uniHero__h1 {
  margin: 0; font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem);
  line-height: 1.05; letter-spacing: -.03em;
}
.uniHero__sub { color: var(--text-mid); font-size: var(--fs-lg); max-width: 54ch; }
.uniHero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }

/* ── STEPPER ────────────────────────────────────────────────────────────── */
.uniStep {
  border-block: 1px solid var(--pk-line);
  background: rgb(13 13 15 / .6); backdrop-filter: blur(10px);
}
.theme-light .uniStep { background: rgb(255 255 255 / .7); }
.uniStep__list {
  display: flex; align-items: center; gap: clamp(var(--s-3), 2vw, var(--s-6));
  list-style: none; margin: 0; padding: var(--s-3) 0; overflow-x: auto;
}
.uniStep__list li {
  display: flex; align-items: center; gap: .6ch; white-space: nowrap;
  font-size: var(--fs-sm); color: var(--text-lo);
}
.uniStep__list li span {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--pk-line); font-family: var(--font-mono); font-size: .68rem;
}
.uniStep__list li b { color: var(--text-mid); font-weight: 500; }
.uniStep__list li.is-done { color: var(--text-mid); }
.uniStep__list li.is-done span { background: rgb(120 220 160 / .16); border-color: rgb(120 220 160 / .4); color: rgb(150 235 190); }
.uniStep__list li.is-now { color: var(--text-hi); }
.uniStep__list li.is-now span {
  background: var(--y-yellow); border-color: var(--y-yellow); color: #0d0d0f;
  box-shadow: 0 0 0 4px rgb(240 198 74 / .14);
}
.uniStep__list li.is-now b { color: var(--y-yellow); }
/* Connector between steps, so it reads as a route and not a list. */
.uniStep__list li:not(:last-child)::after {
  content: ''; width: clamp(1rem, 3vw, 3rem); height: 1px;
  background: var(--pk-line); margin-left: .4ch;
}

/* ── SECTIONS ───────────────────────────────────────────────────────────── */
.page-uni .uniSection { padding-block: clamp(var(--s-10), 6vw, var(--s-16)); }
.page-uni .uniSection + .uniSection:not(.section--alt) { border-top: 1px solid var(--pk-line); }

/* ── YEAR CARDS ─────────────────────────────────────────────────────────── */
.uniYears {
  display: grid; gap: clamp(var(--s-3), 1.6vw, var(--s-5));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  perspective: 1400px;
}
/* One year should be a single confident card, not a lonely quarter-width tile
   next to three empty columns — MAHE has exactly this shape. */
.uniYears.is-single { grid-template-columns: minmax(0, 22rem); }

.uniYear {
  position: relative; display: grid; gap: var(--s-2);
  padding: var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid var(--pk-line);
  background: linear-gradient(160deg, rgb(255 255 255 / .07), rgb(255 255 255 / .015) 62%), var(--surface-1);
  color: inherit; text-decoration: none; overflow: hidden;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .4s;
  animation: pkRise .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.theme-light .uniYear { background: linear-gradient(160deg, #fff, #f7f7f9 62%); }
.uniYear:hover {
  border-color: rgb(240 198 74 / .5);
  box-shadow: 0 0 0 1px rgb(240 198 74 / .28), 0 26px 60px -24px rgb(0 0 0 / .8);
}
.uniYear.is-on { border-color: rgb(240 198 74 / .65); box-shadow: 0 0 0 1px rgb(240 198 74 / .4); }
/* A faint ring that sweeps on hover — cheap depth cue, one composited layer. */
.uniYear__ring {
  position: absolute; right: -30%; top: -60%;
  width: 120%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(240 198 74 / .16), transparent 62%);
  opacity: 0; transition: opacity .4s, transform .6s;
}
.uniYear:hover .uniYear__ring { opacity: 1; transform: translate3d(-6%, 6%, 0); }
.uniYear__n {
  font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1; color: var(--y-yellow); font-variant-numeric: tabular-nums;
}
.uniYear__l { color: var(--text-hi); font-size: var(--fs-base); }
.uniYear__bar { display: block; height: 4px; border-radius: 999px; background: rgb(255 255 255 / .09); overflow: hidden; }
.uniYear__bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--y-yellow), rgb(255 226 140));
  animation: pkFill .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms + .25s);
}
.uniYear__facts { font-size: var(--fs-xs); color: var(--text-lo); }
.uniYear__facts b { color: var(--text-hi); font-variant-numeric: tabular-nums; }

.uniFilterState { margin-top: var(--s-6); color: var(--text-mid); font-size: var(--fs-sm); }

/* ── TOOLS ROW ──────────────────────────────────────────────────────────── */
.uniTools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.uniTools .pkSearch { flex: 1; min-width: min(100%, 18rem); max-width: 32rem; }
.uniLucky {
  display: inline-flex; align-items: center; gap: .6ch;
  padding: .62rem 1.1rem; border-radius: 999px;
  border: 1px dashed rgb(240 198 74 / .45); background: rgb(240 198 74 / .07);
  color: var(--y-yellow); font-size: var(--fs-sm); text-decoration: none;
  transition: transform .25s, background .25s, border-style .25s;
}
.uniLucky:hover { transform: translateY(-2px) rotate(-1deg); background: rgb(240 198 74 / .14); border-style: solid; }
.uniLucky span { font-size: 1rem; }

/* ── SUBJECT GROUPS + CARDS ─────────────────────────────────────────────── */
.uniGroup { margin-top: clamp(var(--s-7), 3.5vw, var(--s-10)); }
.uniGroup[hidden] { display: none; }
.uniGroup__h {
  margin: 0 0 var(--s-4); font-size: var(--fs-lg); color: var(--text-mid);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--pk-line);
}
.uniGrid {
  display: grid; gap: clamp(var(--s-3), 1.6vw, var(--s-4));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  perspective: 1200px;
}
.uniCard {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid var(--pk-line);
  background: linear-gradient(165deg, rgb(255 255 255 / .05), rgb(255 255 255 / .012) 62%), var(--surface-1);
  overflow: hidden;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .35s;
  animation: pkRise .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.theme-light .uniCard { background: linear-gradient(165deg, #fff, #f8f8fa 62%); }
.uniCard[hidden] { display: none; }
.uniCard:hover { border-color: rgb(240 198 74 / .45); box-shadow: 0 0 0 1px rgb(240 198 74 / .25), 0 20px 48px -20px rgb(0 0 0 / .75); }
.uniCard:focus-within { outline: 2px solid var(--y-yellow); outline-offset: 3px; }
/* Subjects with nothing behind them recede rather than being hidden — a
   student searching for one should still find it and see it is queued. */
.uniCard.is-thin { opacity: .58; }
.uniCard.is-thin:hover { opacity: 1; }
.uniCard__hit { position: absolute; inset: 0; z-index: 3; }
.uniCard__sheen {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgb(255 255 255 / .09), transparent 62%);
  transition: opacity .3s;
}
.uniCard:hover .uniCard__sheen { opacity: 1; }

.uniCard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.uniCard__yr {
  font-family: var(--font-mono); font-size: .58rem; color: var(--text-lo);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.uniCard__count {
  font-size: .62rem; color: var(--y-yellow);
  padding: .12rem .5rem; border-radius: 999px; border: 1px solid rgb(240 198 74 / .3);
}
.uniCard__count b { font-variant-numeric: tabular-nums; }
.uniCard__count--none { color: var(--text-lo); border-color: var(--pk-line); }
.uniCard__t {
  margin: 0; font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--text-hi);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.uniCard__code { margin: 0; font-family: var(--font-mono); font-size: .62rem; color: var(--text-lo); }
/* The shelf breakdown — the reason to build this card at all. It answers
   "does this subject have past papers?" before the click. */
.uniCard__kinds { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.uniCard__kinds li {
  font-size: .58rem; padding: .12rem .42rem; border-radius: 5px;
  border: 1px solid var(--pk-line); color: var(--text-lo);
}
.uniCard__kinds b { color: var(--text-hi); font-variant-numeric: tabular-nums; }
.uniCard__kinds .is-pyq { border-color: rgb(255 146 69 / .35); color: rgb(255 186 130); }
.uniCard__kinds .is-lab { border-color: rgb(120 200 255 / .3); color: rgb(150 210 255); }
.uniCard__go { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-mid); }
.uniCard:hover .uniCard__go { color: var(--y-yellow); }

/* ── OTHER UNIVERSITIES ─────────────────────────────────────────────────── */
.uniOthers { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.uniOther {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--radius);
  border: 1px solid var(--pk-line); background: var(--pk-card);
  color: inherit; text-decoration: none;
  transition: transform .25s, border-color .25s;
}
.uniOther:hover { transform: translateY(-2px); border-color: rgb(240 198 74 / .45); }
.uniOther img { width: 2.2rem; height: 2.2rem; object-fit: contain; background: #fff; border-radius: 7px; padding: 3px; flex: none; }
.uniOther span { display: grid; min-width: 0; }
.uniOther b { color: var(--text-hi); font-size: var(--fs-sm); }
.uniOther i { font-style: normal; font-size: .64rem; color: var(--text-lo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── SAMPLE FLAG SWITCHER ───────────────────────────────────────────────── */
.page-uni .sample-flag a { margin-inline: .18rem; }
.page-uni .sample-flag a[aria-current] { color: var(--text-hi); text-decoration: underline; }

@media (max-width: 48rem) {
  .uniHero__logo { width: 3.2rem; height: 3.2rem; }
  .uniStep__list { font-size: var(--fs-xs); }
  .uniStep__list li:not(:last-child)::after { width: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .uniYear, .uniCard { animation: none; transition: none; }
  .uniYear__bar i { animation: none; width: var(--w, 0%); }
  .uniHero__bg img { transform: none; }
  .uniYear__ring { transition: none; }
}