/* Effect pages from scripts/seo_gen/effect_pages.py and the effect index on
   /templates. Kept out of page.css on purpose: page.css is linked by every
   spoke page with a content-hash ?v= tag, so editing it re-stamps all of them
   and the sitemap would claim they all changed. */

/* The built-in prompt a Vidu effect sends. It is long, structured text, so it
   keeps its line breaks and wraps inside the column instead of scrolling. */
.effect-prompt {
  margin: 28px 0 0;
  padding: 18px 20px;
  max-width: 52em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgb(var(--c-fg));
  background: rgb(var(--c-fg) / 0.04);
  border: 1px solid rgb(var(--c-line) / 0.14);
  border-radius: var(--r-frame);
}

/* The hub's list of every effect page, grouped by category. Plain links, so
   every page is reachable without JavaScript. */
.effect-index .sub { color: rgb(var(--c-muted)); max-width: 46em; }
.effect-index-groups {
  display: grid;
  gap: 32px 40px;
  margin-top: 36px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .effect-index-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .effect-index-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.effect-index-group { scroll-margin-top: 96px; }
.effect-index-group h3 { margin: 0 0 12px; }
.effect-index-group h3 .count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgb(var(--c-muted));
  margin-left: 6px;
}
.effect-index-group ul { list-style: none; margin: 0; padding: 0; }
.effect-index-group li {
  padding: 10px 0;
  border-top: 1px solid rgb(var(--c-line) / 0.1);
  line-height: 1.45;
}
.effect-index-group li a { font-weight: 600; display: inline-block; min-height: 24px; }
.effect-index-group li span { display: block; color: rgb(var(--c-muted)); font-size: 0.875rem; }