/* Страницы каталога голосов: /golosa и /golosa/<голос>.
   Поверх doc.css — та же типографика документа, плюс сетка карточек и плеер.
   Обе страницы работают без единой строки скриптов: это контент для поиска,
   и он обязан читаться в первом же ответе сервера. */

/* Хлебные крошки. Дублируют BreadcrumbList из микроразметки —
   поисковику нужна разметка, человеку видимая строка. */
.crumbs {
  margin: 0 0 var(--space-3);
  color: var(--text-faint);
  font-size: 13.5px;
}
.crumbs a { color: var(--accent-600); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 4px; color: var(--line); }

/* ---- каталог ---- */

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.catalog-card { margin: 0; }
.catalog-card a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  height: 100%;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--sh-xs);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.catalog-card a:hover {
  border-color: var(--accent-300);
  box-shadow: var(--sh-sm);
  transform: translateY(-1px);
}
.catalog-card img,
.voice-card-blank {
  width: 150px; height: 150px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  object-fit: cover;
}
/* У голоса может не быть превьюшки: пустой белый квадрат выглядел бы браком,
   поэтому вместо него — монограмма на фирменной заливке. */
.voice-card-blank {
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-tint);
  color: var(--accent-400);
  font-size: 44px; font-weight: 600;
}
.catalog-name { color: var(--ink); font-size: 15px; font-weight: 600; }
.catalog-summary { color: var(--text-faint); font-size: 13.5px; line-height: 1.45; }

/* ---- страница голоса ---- */

.voice-hero {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  background: var(--grad-tint);
  border: 1px solid var(--accent-200);
  border-radius: var(--radius);
}
.voice-portrait {
  flex: none;
  width: 150px; height: 150px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.voice-hero-body { min-width: 0; flex: 1; }
.voice-sample-label { margin: 0 0 var(--space-2); color: var(--slate); font-size: 14px; font-weight: 500; }
/* Нативный плеер: во всю ширину блока, высота у браузеров своя — не трогаем */
.voice-player { width: 100%; max-width: 420px; }
.voice-sample-text {
  margin: var(--space-3) 0 var(--space-4);
  color: var(--text-muted);
  font-size: 14.5px; font-style: italic; line-height: 1.55;
}
/* doc.css красит акцентным цветом любую ссылку внутри .doc, и «.doc a» перебивает
   «.btn-primary» по специфичности — белая надпись на фиолетовой заливке пропадала. */
.doc a.btn { text-decoration: none; }
.doc a.btn-primary { color: var(--white); }

.voice-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}
.voice-facts div {
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.voice-facts dt { margin-bottom: 3px; color: var(--text-faint); font-size: 12.5px; }
.voice-facts dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 500; }

.voice-others {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.voice-others li { margin: 0; }
.voice-others a {
  display: inline-block;
  padding: 7px 13px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--accent-600);
  font-size: 14px; text-decoration: none;
}
.voice-others a:hover { border-color: var(--accent-300); background: var(--accent-50); }

@media (max-width: 620px) {
  .voice-hero { flex-direction: column; }
  .voice-portrait { width: 120px; height: 120px; }
  .catalog { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .catalog-card img,
  .voice-card-blank { width: 100%; height: auto; aspect-ratio: 1; }
}