/* Community page styles (lean, uses base variables) */
.hero {
  padding-block: var(--space-64);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.1)),
    url('../images/codex-artifact.webp') center/cover no-repeat;
  box-shadow: var(--shadow-lg);
}
.hero__inner { display: grid; gap: var(--space-24); align-items: center; grid-template-columns: 1.2fr 1fr; }
.hero__content p { color: var(--color-text-muted); }
.hero__actions { margin-top: var(--space-16); display: inline-flex; gap: var(--space-12); flex-wrap: wrap; }
.hero__search { background: var(--color-elevated); border: 1px solid var(--divider-color); padding: var(--space-24); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }

.cards .card { display: flex; flex-direction: column; gap: var(--space-12); }
.card__media { overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 16/9; background: var(--color-surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.card__media img:hover { transform: scale(1.03); }

.faq summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.faq[open] summary { color: var(--color-accent); }

/* Utility refinements */
#events-list .btn + .btn { margin-left: 6px; }
.rule { margin-block: var(--space-32); }

/* Search highlighting (applied via JS) */
.mark { background: color-mix(in oklab, var(--color-accent) 25%, black); padding: 0 2px; border-radius: 2px; }