/* The Community page (templates/community.html, static/js/community-page.js),
   on the experiments' design system (experiment-showcase.css: --ink, --accent, Fraunces / Inter). */

.cmg-page [hidden] { display: none !important; }

.cmg-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; }
.cmg-search {
  flex: 1 1 280px;
  max-width: 420px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
}
.cmg-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmg-count { margin: 0; font-size: 0.85rem; color: var(--muted); }

.cmg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  padding: 8px 0 24px;
}
.cmg-empty { grid-column: 1 / -1; margin: 24px 0; color: var(--muted); text-align: center; }

.cmg-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cmg-card:hover, .cmg-card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.cmg-card__thumb { position: relative; aspect-ratio: 16 / 10; background: #ffffff; border-bottom: 1px solid var(--line); }
/* Out of the flow: a picture of any shape fits the box without changing its height. */
.cmg-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cmg-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; min-width: 0; }
.cmg-card__title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-style: italic; font-weight: 400; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.cmg-card__by { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.cmg-card__meta { margin: 0; font-size: 0.8rem; color: var(--muted); }
.cmg-badge { align-self: flex-start; margin-top: 4px; padding: 1px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.72rem; font-weight: 600; }

.cmg-more-row { display: flex; justify-content: center; padding-bottom: 12px; }

.cmg-how { max-width: 68ch; }
.cmg-steps { padding-left: 1.3em; }
.cmg-steps li { margin: 8px 0; }
.cmg-note { font-size: 0.9rem; color: var(--ink-soft); }