/* ==========================================================================
   STUDENT ART SOCIETY — the artists index
   Path: MITD/v5/sites/sas-home/assets/sas/css/artists.css

   Only what this page adds. The cards themselves are .acard in sas.css and are
   not touched here: they are the same cards the homepage rail draws, and a
   second set of rules for them is the thing the shared partial exists to
   prevent.

   One note on how that works. .acard carries `flex: 0 0 clamp(168px, 17vw,
   218px)`, which sizes it inside the homepage's flex rail. A grid item is not
   a flex item, so that declaration is simply ignored here and the track sizes
   the card instead -- no override needed, and none written, because an
   override would then be fighting the rail's rule in the file that owns it.
   ========================================================================== */

.band--roster {
  padding-top: clamp(30px, 4.4vw, 64px);
  padding-bottom: clamp(30px, 4.4vw, 64px);
}

.roster__head { display: grid; gap: 8px; margin-bottom: clamp(18px, 2.4vw, 32px); }

.roster__title {
  margin: 0;
  font-size: clamp(24px, 3.1vw, 42px); font-weight: 800; font-stretch: 110%;
  line-height: 1.02; letter-spacing: -.015em;
  overflow-wrap: break-word;
}
/* NO margin between the words. The band writes each span on its own line, so
   the markup already carries a space between them -- adding a margin as well
   renders "Every  artist" with a visible double gap. Every other headline on
   this site relies on that same newline, which is why none of them has a rule
   like the one that used to be here. */
.roster__title .is-accent { color: var(--cyan); }

.roster__lede { margin: 0; color: var(--ash); font-size: clamp(13.5px, 1.1vw, 15.5px); line-height: 1.6; }

.roster__count {
  margin: 0;
  color: var(--ash-dim); font-size: 12px; font-weight: 600;
  letter-spacing: .04em;
}

.roster__none {
  margin: 0; padding: clamp(18px, 2.6vw, 32px);
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  background: var(--panel); color: var(--ash);
}

/* THE GRID.

   auto-fill rather than auto-fit. They differ only when there are fewer cards
   than columns, and that difference matters on exactly this page: auto-fit
   collapses the empty tracks and stretches three artists across a 1900px
   screen into three enormous cards, while auto-fill keeps the track size and
   leaves the row short. A society with four members should look like a society
   with four members. */
.roster__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
}

@media (max-width: 520px) {
  /* Two across on a phone rather than one. These cards are portraits with a
     name under them; one per row makes each one enormous and the list four
     screens long. */
  .roster__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}