/*
 * Page-scoped CSS for /preview/community.
 *
 * Reuses existing v5.2 classes where they already cover the shape:
 *   .page-hero, .section-head, .wrap, .community-grid, .community-card,
 *   .community-link, .vote-rings, .vote-rings-row, .eyebrow, .eyebrow.prompt
 *
 * Only the additions specific to this page live here:
 *   - .vote-rings--feature   larger, centered version of the footer rings
 *   - .channel-list          definition-style listing of in-game channels
 *   - .channel-desc          inline description after each <code>
 *   - .channel-footnote      muted paragraph under the channel list
 *   - .presence-note         tonal section spacing for the "evenings" note
 *   - .community-closer      final CTA row with primary + ghost button
 *
 * Token references (--accent, --ink-deep, --text, etc.) match v5.2.
 */

/* ---------- vote rings: feature variant ---------- */
.vote-section {
  padding-block: 4rem;
}

.vote-rings.vote-rings--feature {
  margin-top: 2rem;
}

.vote-rings--feature .vote-rings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
}

.vote-rings--feature .vote-rings-row a {
  display: inline-block;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.vote-rings--feature .vote-rings-row a:hover,
.vote-rings--feature .vote-rings-row a:focus-visible {
  transform: translateY(-2px);
  opacity: 0.92;
}

.vote-rings--feature .vote-rings-row img {
  display: block;
  max-height: 60px;
  width: auto;
}

/* ---------- in-game channel list ---------- */

/* ---------- presence note ---------- */
.presence-note {
  padding-block: 3rem;
}

/* ---------- closer ---------- */
.community-closer {
  padding-block: 4rem 5rem;
}

.community-closer .btn-primary,
.community-closer .btn-ghost {
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
}


/* Channels section prose (replaces the old definition-list of channels).
   Just gives the paragraph stack consistent vertical rhythm. */
.channels-prose {
  max-width: 56ch;
}
.channels-prose p {
  margin: 0 0 1rem 0;
  color: var(--text, #ebe9e4);
  line-height: 1.65;
}
.channels-prose p:last-child { margin-bottom: 0; }
.channels-prose code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.875em;
  background: color-mix(in oklab, var(--ink-deep, #11151a) 70%, transparent);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}