/* Forum page specific styles */

.section { padding-block: var(--space-16); scroll-margin-top: 88px; }
.section--alt { background: var(--gray-50); }

/* Hero */
.hero-grid { display: grid; gap: var(--space-8); align-items: center; }
.hero-cta { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.hero-image, .rounded-image { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }

/* Topics */
.topic-tools { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; margin-bottom: var(--space-6); }
.topic-search { flex: 1 1 260px; min-width: 240px; }
.topic-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { padding: 8px 12px; border-radius: var(--radius-round); background: var(--gray-100); border: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; font-weight: 600; }
.chip:hover { filter: brightness(0.98); }
.chip[aria-pressed="true"], .chip--active { background: color-mix(in srgb, var(--color-primary) 12%, #fff); border-color: var(--color-primary); color: var(--color-text); }

.topics-grid { display: grid; gap: var(--space-6); }
@media (min-width: 700px) { .topics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .topics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topic-card h3 { margin-bottom: var(--space-2); }

/* Posts */
.post-list { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Members */
.members-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .members-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Moderators */
.moderator-grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .moderator-grid { grid-template-columns: 1.1fr 0.9fr; } }

/* Events */
.events-grid { display: grid; gap: var(--space-6); margin-top: var(--space-4); }
@media (min-width: 900px) { .events-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.events-media { margin-top: var(--space-8); }

/* Feedback */
.feedback-form { max-width: 720px; }
.form-row { margin-bottom: var(--space-5); }
.form-actions { margin-top: var(--space-4); }
#feedback-count { font-variant-numeric: tabular-nums; }
.counter--warn { color: var(--color-warning); }

/* Small helpers */
.rounded-image { max-width: 100%; height: auto; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section--alt { background: color-mix(in srgb, var(--gray-50) 6%, var(--color-surface)); }
  :root:not([data-theme="light"]) .chip { background: color-mix(in srgb, var(--gray-100) 10%, var(--color-surface)); }
}