/* ============================================================
   community-polish.css — premium presentation pass for community.html
   Additive, CSS-only. Loaded AFTER styles.css + community.css.
   Every rule scoped to body.page-community so nothing leaks.
   Reuses existing design tokens only.
   ============================================================ */

/* ---------------- Page rhythm: content width + vertical cadence ---- */
body.page-community main.wrap { max-width: 1180px; padding-top: 30px; padding-bottom: 76px; }

/* ---------------- HERO: refined eyebrow + heavier title ------------ */
body.page-community .cm-hero { margin-bottom: 34px; }
body.page-community .cm-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--gold-light);
}
body.page-community .cm-hero .page-header h1 {
  font-weight: 840;
  letter-spacing: -0.035em;
}
body.page-community .cm-hero .page-header p {
  color: var(--ink-soft);
  max-width: 540px;
}
body.page-community .cm-hero-cta {
  font-weight: 680;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-glow-red), inset 0 1px 0 rgba(255,255,255,0.32);
}

/* ---------------- Section headings: tighter + lit gold tick -------- */
body.page-community .cm-head { margin: 46px 0 18px; }
body.page-community .cm-hero + #cmCollectors .cm-head { margin-top: 10px; }
body.page-community .cm-head h3 {
  font-weight: 800;
  letter-spacing: -0.018em;
}
body.page-community .cm-head .ico {
  color: var(--gold-light);
  filter: drop-shadow(0 0 10px rgba(232,203,106,0.28));
}

/* ---------------- Collector strip: balanced snap + fade edge ------- */
body.page-community .collector-strip {
  padding: 4px 2px 12px;
  scroll-padding-left: 2px;
  scrollbar-width: thin;
}
body.page-community .collector-strip::-webkit-scrollbar { height: 8px; }
body.page-community .collector-strip::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1); border-radius: 8px;
}
body.page-community #cmCollectors .collector-strip { margin-bottom: 8px; }

/* Collector cards — layered depth, lit top edge, premium hover ------ */
body.page-community .collector-card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(255,255,255,0.05), transparent 58%),
    linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  transition: transform .28s var(--ease-out), border-color .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
body.page-community .collector-card::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
  opacity: 0; transition: opacity .28s var(--ease-out); pointer-events: none;
}
body.page-community .collector-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
}
body.page-community .collector-card:hover::before { opacity: 1; }
body.page-community .collector-card .collector-avatar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 12px rgba(0,0,0,0.35);
}

/* ---------------- Featured Builds filter row: refined rail --------- */
body.page-community .cm-filter-row {
  gap: 6px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
body.page-community .cm-filter-row .tab-btn {
  font-size: 13px;
  font-weight: 620;
  transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
body.page-community .cm-filter-row .tab-btn:hover {
  color: var(--ink);
  border-color: var(--border-hover);
}
body.page-community .cm-filter-row .tab-btn.active {
  color: #fff;
  border-color: rgba(201,162,39,0.4);
  box-shadow: var(--glass-shadow-dark), inset 0 -2px 0 rgba(201,162,39,0.55);
}

/* ---------------- Post feed: rhythm + calmer resting depth --------- */
body.page-community .post-feed { gap: 22px; }
body.page-community #communityFeed .post-card {
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
body.page-community #communityFeed .post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-hover);
}

/* ---------------- Trending carousel: heading + controls + cards --- */
body.page-community #cmTrending { margin-top: 8px; }
body.page-community .cm-carousel { padding: 4px 2px 14px; scroll-padding-left: 2px; }
body.page-community .cm-carousel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

body.page-community .cm-trend {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.045), transparent 60%),
    var(--glass-bg);
  transition: transform .28s var(--ease-out), border-color .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
body.page-community .cm-trend:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
}
body.page-community .cm-trend-cat {
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
body.page-community .cm-trend-title { letter-spacing: -0.01em; }
body.page-community .cm-trend-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.22));
  pointer-events: none;
}

/* ---------------- Reveal micro-interaction (respects existing) ----- */
body.page-community .collector-card,
body.page-community .cm-trend,
body.page-community #communityFeed .post-card {
  will-change: transform;
}

/* ---------------- Motion + overflow safety ------------------------- */
@media (max-width: 560px) {
  body.page-community main.wrap { padding-top: 22px; }
  body.page-community .cm-head { margin: 36px 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-community .collector-card,
  body.page-community .cm-trend,
  body.page-community #communityFeed .post-card,
  body.page-community .cm-filter-row .tab-btn {
    transition: none;
  }
  body.page-community .collector-card:hover,
  body.page-community .cm-trend:hover,
  body.page-community #communityFeed .post-card:hover {
    transform: none;
  }
}