/* ===========================================================================
   Students Listing element (fame/students-list) — the CARD and the one layout
   change the design asks of the shared bar.

   Everything structural (the bar, the search field, the empty state, Load More)
   is fame-list-shell.css, shared with the ebooks and classes listings; the
   wrapper carries both classes and the shell's stylesheet is linked FIRST,
   since the --feb-* variables come from it.

   The design stacks the bar — search on top, exam pills centred underneath —
   where the other listings put the pills left and the search right. That is a
   layout change only, done here, so the shared partial stays one partial.
   =========================================================================== */
.fame-students-list {
  --fst-banner: #dde7fb;
  --fst-chip: #122144;
  /* The banner tints, cycled across the cards (see the :nth-child rules at the
     foot of this file). Soft versions of the accents the rest of FAME uses —
     edit them here and nowhere else. */
  --fst-banner-1: #dde7fb;   /* blue   */
  --fst-banner-2: #d9f1e8;   /* mint   */
  --fst-banner-3: #fdeadb;   /* peach  */
  --fst-banner-4: #e7e2fb;   /* lilac  */
  --fst-banner-5: #fbe1e6;   /* rose   */
  --fst-banner-6: #fbf3d7;   /* sand   */
}

/* ---- the shared bar, stacked and centred for this listing ---- */
.fame-students-list .feb-quickbar {
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 26px;
}
.fame-students-list .feb-search {
  order: -1;                 /* the search box comes first in the design */
  margin-left: 0;
  width: 100%;
  max-width: 760px;
}
.fame-students-list .feb-quickbar-pills { justify-content: center; }
.fame-students-list .feb-quick { border-radius: 999px; padding: 12px 22px; }

/* ---- the grid ---- */
.fame-students-list .feb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* ---- the card ---- */
/* A column, so the three numbers sit on the same line across a row however
   long a college name runs. */
.fst-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  padding: 10px 10px 0;
  box-shadow: 0 2px 10px rgba(15, 31, 61, .06);
  text-align: center;
  overflow: hidden;
}
.fst-card[hidden] { display: none; }

/* Banner + the avatar that straddles it. */
.fst-head {
  display: block;
  position: relative;
  padding-bottom: 60px;      /* room for the half of the avatar that hangs out */
  text-decoration: none;
}
.fst-banner {
  display: block;
  height: 104px;
  border-radius: 12px;
  background: var(--fst-banner);
}
.fst-avatar {
  position: absolute;
  left: 50%;
  top: 52px;
  transform: translateX(-50%);
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 6px solid #fff;
  background: #fff;
  object-fit: cover;
  box-sizing: border-box;
}
.fst-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--feb-primary);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .02em;
}

.fst-name { margin: 0 0 4px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.fst-name a { color: var(--feb-ink); text-decoration: none; }
.fst-name a:hover { color: var(--feb-primary); }

.fst-college {
  margin: 0 auto 10px;
  max-width: 92%;
  color: var(--feb-muted);
  font-size: 13px;
  line-height: 1.5;
}

.fst-exam { margin: 0 0 14px; }
.fst-chip {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--fst-chip);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}

/* ---- the three numbers ---- */
.fst-stats {
  margin: auto 0 0;          /* pushed to the foot of the card (see .fst-card) */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--feb-line);
  padding: 16px 0 18px;
}
.fst-stat { min-width: 0; }
.fst-stat-value { margin: 0; font-size: 21px; font-weight: 700; color: var(--feb-ink); line-height: 1.2; }
.fst-stat--best .fst-stat-value { color: var(--feb-primary); }
.fst-stat-label { margin: 4px 0 0; font-size: 12px; color: var(--feb-muted); font-weight: 400; }

/* ---- the banner colour cycle ----
   Six tints repeating down the grid. nth-child counts every card in the grid,
   so a batch appended by "Load More Students" simply carries the cycle on, and
   a filter that replaces the grid restarts it — no colour is ever stored with a
   student, and nothing needs an inline style. */
.fst-card:nth-child(6n + 1) .fst-banner { background: var(--fst-banner-1); }
.fst-card:nth-child(6n + 2) .fst-banner { background: var(--fst-banner-2); }
.fst-card:nth-child(6n + 3) .fst-banner { background: var(--fst-banner-3); }
.fst-card:nth-child(6n + 4) .fst-banner { background: var(--fst-banner-4); }
.fst-card:nth-child(6n + 5) .fst-banner { background: var(--fst-banner-5); }
.fst-card:nth-child(6n) .fst-banner { background: var(--fst-banner-6); }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .fame-students-list .feb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .fame-students-list .feb-grid { grid-template-columns: 1fr; }
  /* A scrolling row must start at the start: with justify-content:center the
     overflow is clipped on BOTH sides and the first pill ("All") can never be
     scrolled back to. */
  .fame-students-list .feb-quickbar-pills {
    overflow-x: auto; flex-wrap: nowrap; max-width: 100%; justify-content: flex-start;
    width: 100%; padding-bottom: 4px;
  }
  .fame-students-list .feb-quick { white-space: nowrap; }
}