/* ==========================================================================
   /students/community-sample/ — the community band and the detail below it
   --------------------------------------------------------------------------
   Scoped to .page-stu, which the page sets. Uses the students page's own
   design language rather than the newer sample-page one: two visual systems on
   one page reads as a bug, not a redesign.

   Only tokens that exist in tokens.css.
   ========================================================================== */

/* ══ THE CONCISE BAND ══════════════════════════════════════════════════════
   Directly under the hero. Two sentences total, because its only job is to
   make somebody scroll. ═══════════════════════════════════════════════════ */
.scBand {
  position: relative; z-index: 1;
  padding: clamp(var(--s-8), 5vh, var(--s-16)) var(--gutter);
  border-block: 1px solid var(--surface-line);
  background:
    radial-gradient(70% 100% at 20% 0%, rgb(240 198 74 / .06), transparent 60%),
    radial-gradient(60% 100% at 85% 100%, rgb(120 160 255 / .05), transparent 60%);
}
.scBand__in { width: min(72rem, 100%); margin-inline: auto; }

.scBand__k {
  display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-5);
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-lo);
}
.scBand__pulse {
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--y-green);
  box-shadow: 0 0 0 0 rgb(74 222 128 / .55);
  animation: scPulse 2.4s var(--ease-out) infinite;
}
/* box-shadow, not scale — a scaling dot inside a flex row nudges its
   neighbours every cycle. */
@keyframes scPulse {
  0%   { box-shadow: 0 0 0 0 rgb(74 222 128 / .5); }
  70%  { box-shadow: 0 0 0 .5rem rgb(74 222 128 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0); }
}

.scBand__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4);
}

.scCard {
  display: flex; align-items: flex-start; gap: var(--s-4); min-width: 0;
  padding: var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid var(--surface-line); background: var(--surface-1);
  text-decoration: none;
  /* Colour and the arrow move on hover, never the card itself — a card that
     moves under its own hover oscillates. */
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.scCard:hover { background: var(--surface-2); }
.scCard--rooms:hover  { border-color: rgb(240 198 74 / .45); }
.scCard--people:hover { border-color: rgb(120 160 255 / .45); }

.scCard__ico {
  flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border-radius: var(--radius); border: 1px solid var(--surface-line);
  background: rgb(240 198 74 / .07); color: var(--y-yellow);
}
.scCard--people .scCard__ico { background: rgb(120 160 255 / .09); color: #9db4ff; }
.scCard__ico svg { width: 1.2rem; height: 1.2rem; }

.scCard__body { display: grid; gap: .3rem; min-width: 0; flex: 1; }
.scCard__body b {
  font-family: var(--font-display); font-size: var(--fs-h3);
  letter-spacing: -.02em; color: var(--text-hi);
}
.scCard__body i {
  font-style: normal; font-size: var(--fs-sm);
  line-height: var(--lh-body); color: var(--text-lo);
}
.scCard__go { flex: none; color: var(--text-lo); font-size: 1.1rem; transition: translate var(--dur) var(--ease-out); }
.scCard:hover .scCard__go { translate: 4px 0; color: var(--text-hi); }

.scBand__more { margin: var(--s-5) 0 0; font-size: var(--fs-sm); }
.scBand__more a { color: var(--accent-ink); text-decoration: none; }
.scBand__more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ══ THE DETAIL ════════════════════════════════════════════════════════════ */
.scDeep {
  position: relative; z-index: 1;
  padding: clamp(var(--s-20), 12vh, var(--s-32)) var(--gutter);
  background: linear-gradient(180deg, transparent, rgb(240 198 74 / .03) 45%, transparent);
}
.scDeep__in { width: min(72rem, 100%); margin-inline: auto; }

.scDeep__head { max-width: 46rem; margin-bottom: clamp(var(--s-12), 8vh, var(--s-20)); }
.scDeep__head h2 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.03em; color: var(--text-hi);
}
.scDeep__sub { margin: 0; font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-mid); }

.scFeat {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-8), 5vw, var(--s-16));
  align-items: center;
  margin-bottom: clamp(var(--s-16), 10vh, var(--s-24));
}
/* The second feature mirrors the first so the page alternates rather than
   marching down one side. */
.scFeat--flip .scFeat__copy { order: 2; }

.scFeat__n {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em;
  color: var(--accent-ink);
}
.scFeat__copy h3 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -.02em; color: var(--text-hi);
}
.scFeat__copy > p {
  margin: 0 0 var(--s-5); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--text-mid);
}

.scList { display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.scList li {
  position: relative; padding-left: var(--s-6);
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-lo);
}
.scList li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: .55rem; height: .55rem; border-radius: 50%;
  border: 1px solid var(--y-yellow); background: rgb(240 198 74 / .2);
}
.scList b { color: var(--text-hi); font-weight: 600; }

/* ── the illustrations ────────────────────────────────────────────────────
   Stills, not live widgets. A fake "live" panel that never updates is worse
   than an honest picture of one, and this must render with the database down. */
.scFeat__demo { min-width: 0; }
.scChat, .scFind {
  display: grid; gap: var(--s-3); padding: var(--s-5);
  border-radius: var(--radius-lg); border: 1px solid var(--surface-line);
  background: var(--surface-1);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .8);
}

.scChat__top {
  display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--surface-line);
  font-family: var(--font-mono); font-size: .62rem; color: var(--text-lo);
}
.scChat__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--y-green); }

.scChat__msg {
  padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  background: var(--surface-2); font-size: var(--fs-sm);
  line-height: var(--lh-body); color: var(--text-mid);
  max-width: 92%;
}
.scChat__msg--them { justify-self: end; background: rgb(240 198 74 / .1); }
.scChat__msg--acc {
  background: rgb(74 222 128 / .09); border: 1px solid rgb(74 222 128 / .3);
  color: var(--text-hi);
}
.scChat__who {
  display: block; margin-bottom: .25rem;
  font-family: var(--font-mono); font-size: .58rem; color: var(--text-lo);
}
.scChat__badge {
  display: inline-block; margin-bottom: .35rem; padding: .1rem .45rem;
  border-radius: var(--radius-pill); background: rgb(74 222 128 / .18);
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--y-green);
}

.scFind__q {
  margin: 0 0 var(--s-2); padding: var(--s-3) var(--s-4);
  border-radius: var(--radius); background: var(--surface-2);
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-mid);
}
.scFind__row {
  display: flex; align-items: center; gap: var(--s-3); min-width: 0;
  padding: var(--s-3); border-radius: var(--radius);
  border: 1px solid var(--surface-line);
}
.scFind__av {
  flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%; background: rgb(120 160 255 / .15); color: #9db4ff;
  font-size: var(--fs-sm); font-weight: 600;
}
.scFind__t { display: grid; gap: .05rem; min-width: 0; flex: 1; }
.scFind__t b { font-size: var(--fs-sm); color: var(--text-hi); }
.scFind__t i { font-style: normal; font-size: var(--fs-xs); color: var(--text-lo); }
.scFind__tag {
  flex: none; padding: .15rem .5rem; border-radius: var(--radius-pill);
  background: var(--surface-2); font-size: .62rem; color: var(--text-lo);
  white-space: nowrap;
}

.scDeep__foot {
  margin: 0; padding-top: var(--s-8); border-top: 1px solid var(--surface-line);
  font-size: var(--fs-sm); color: var(--text-lo);
}
.scDeep__foot a { color: var(--accent-ink); }

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */
@media (max-width: 62rem) {
  .scBand__grid { grid-template-columns: minmax(0, 1fr); }
  .scFeat { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  /* The mirror only makes sense in two columns; in one it would put the
     picture above the words it illustrates. */
  .scFeat--flip .scFeat__copy { order: 0; }
}

@media (max-width: 46rem) {
  .scCard { flex-direction: column; gap: var(--s-3); }
  .scCard__go { display: none; }
  .scFind__tag { display: none; }
  .scChat__msg { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .scBand__pulse { animation: none; }
  .scCard, .scCard__go { transition: none; }
}

/* ── the two extra gateway tiles ────────────────────────────────────────────
   They inherit .stuTile--sm entirely; this only supplies the two glyphs, since
   .stuArt variants are enumerated in students.css and these are not among
   them. Drawn with borders rather than shipping two more SVGs for 20px icons. */
.scArt { position: relative; display: block; width: 1.05rem; height: 1.05rem; }

/* a speech bubble */
.scArt--rooms {
  border: 1.5px solid currentColor; border-radius: 4px 4px 4px 1px;
  height: .85rem; margin-top: .1rem;
}
.scArt--rooms::after {
  content: ''; position: absolute; left: .1rem; bottom: -.28rem;
  border-left: .28rem solid currentColor;
  border-bottom: .28rem solid transparent;
}

/* two linked nodes */
.scArt--net::before, .scArt--net::after {
  content: ''; position: absolute; width: .45rem; height: .45rem;
  border: 1.5px solid currentColor; border-radius: 50%;
}
.scArt--net::before { left: 0; top: .08rem; }
.scArt--net::after  { right: 0; bottom: .08rem; }
.scArt--net {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: .5rem 1.5px; background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* The community tiles carry their own hue via the inline --h, so they read as
   a pair distinct from Quizzes/Flashcards/Hackathons without a new token. */
.scTile { border-color: hsl(var(--h) 70% 60% / .3); }
.scTile:hover { border-color: hsl(var(--h) 70% 60% / .6); }