/* ============================================================
   ИИ-ПЕРСОНЫ YAZME | КАТАЛОГ: ПОИСК, ФИЛЬТРЫ, УКАЗАТЕЛЬ
   Файл: persona/assets/browse.css

   Ничего своего по цвету здесь нет: всё построено на токенах раздела
   (persona/assets/tokens.css), поэтому страница едет за темой сайта
   вместе с остальным — и в янтарной, и в светлой «Cloud Dancer»,
   и в «Полночи». Ни одного нового цвета.

   Шапка раздела (.pvh) живёт отдельно, в topbar.css: её подключают
   и эта страница, и витрина главной. Подключать topbar.css нужно
   ПЕРЕД этим файлом.
   ============================================================ */

/* ── СТРАНИЦА ─────────────────────────────────────────────────────── */
.pvb-body{ padding-bottom:var(--nav-gap); }
.pvb-shell{ max-width:var(--wide); margin:0 auto; padding:var(--sp5) var(--sp4) var(--sp8); }

.pvb-head{ display:flex; align-items:center; gap:var(--sp3); flex-wrap:wrap; margin-bottom:var(--sp4); }
.pvb-head h1{
  margin:0; font:700 var(--fs-hero)/1.1 var(--f-serif); letter-spacing:-.02em; color:var(--t1);
}
.pvb-n{ color:var(--t3); font:500 var(--fs-small)/1 var(--f-ui); }
.pvb-back{
  display:inline-flex; align-items:center; gap:7px; height:var(--ctl-vis); padding:0 14px;
  border-radius:var(--r-full); background:var(--s2); border:1px solid var(--hair);
  color:var(--t2); text-decoration:none; font:600 var(--fs-small)/1 var(--f-ui);
}
.pvb-back:hover{ color:var(--t1); background:var(--s3); }
.pvb-back svg{ width:16px; height:16px; }

/* ── ФАСЕТЫ ───────────────────────────────────────────────────────── */
.pvb-facets{
  display:flex; flex-wrap:wrap; gap:var(--sp2) var(--sp5); align-items:center;
  padding:var(--sp3) var(--sp4); margin-bottom:var(--sp5);
  background:var(--s1); border:1px solid var(--hair); border-radius:var(--r-md);
}
.pvb-facets .grp{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pvb-facets .lbl{
  color:var(--t3); font:600 var(--fs-over)/1 var(--f-ui);
  letter-spacing:var(--ls-over); text-transform:uppercase; margin-right:2px;
}
.fc{
  display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 13px;
  border-radius:var(--r-full); background:var(--s2); border:1px solid var(--hair);
  color:var(--t2); text-decoration:none; font:600 12.5px/1 var(--f-ui); white-space:nowrap;
  transition:background var(--d-micro) var(--e-out), color var(--d-micro) var(--e-out);
}
.fc:hover{ color:var(--t1); background:var(--s3); }
.fc.on{ background:var(--hero-lo); border-color:var(--hero-line); color:var(--t1); }
.fc i{ font-style:normal; font-size:11px; opacity:.65; }
.fc:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }

.pvb-sel select{
  height:34px; padding:0 30px 0 12px; border-radius:var(--r-full);
  background:var(--s2); border:1px solid var(--hair); color:var(--t1);
  font:600 12.5px/1 var(--f-ui); max-width:220px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9b4a7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:15px;
}
.pvb-reset{ margin-left:auto; color:var(--t3); font:600 12.5px/1 var(--f-ui); text-decoration:none; padding:9px; }
.pvb-reset:hover{ color:var(--hero); }

/* ── СЕТКА ────────────────────────────────────────────────────────── */
.pvb-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:var(--sp3);
}
@media (min-width:900px){
  .pvb-grid{ grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); }
}

/* Карточка — формат раздела: лицо 1:1, имя, реплика, «Написать →».
   Те же размеры и веса, что в club.css: две страницы одного каталога
   не должны выглядеть как два разных сайта. */
.pvb-card{
  display:block; text-decoration:none; color:inherit; overflow:hidden;
  background:var(--s1); border:1px solid var(--hair); border-radius:var(--r-md);
  transition:border-color var(--d-micro) var(--e-effect), transform var(--d-micro) var(--e-spring-soft);
}
.pvb-card:hover{ border-color:var(--hero); transform:translateY(-3px); }
.pvb-card:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }
.pvb-card .ph{ position:relative; display:block; width:100%; aspect-ratio:1/1; background:var(--s3); }
.pvb-card .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.pvb-card .ph.mono{
  display:grid; place-items:center;
  font:700 clamp(30px,12vw,52px)/1 var(--f-serif); color:var(--t3);
  background:linear-gradient(150deg, var(--s3), var(--s2));
}
.pvb-card .bd{ display:block; padding:var(--sp3) var(--sp3) calc(var(--sp3) + 2px); }
.pvb-card .nm{
  display:block; font:700 14.5px/1.25 var(--f-ui); color:var(--t1); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pvb-card .tg{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:4px; font-size:12.5px; line-height:1.35; color:var(--t2); min-height:34px;
}
.pvb-card .go{ display:block; margin-top:var(--sp2); font:650 12px/1 var(--f-ui); color:var(--hero); }

/* ── «ПОКАЗАТЬ ЕЩЁ» ───────────────────────────────────────────────── */
.pvb-more{ display:flex; flex-direction:column; align-items:center; gap:var(--sp2); margin-top:var(--sp6); }
.pvb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--ctl); padding:0 var(--sp6); border-radius:var(--r-full);
  background:var(--s2); border:1px solid var(--hair2); color:var(--t1);
  text-decoration:none; font:700 var(--fs-small)/1 var(--f-ui);
  transition:background var(--d-micro) var(--e-out), border-color var(--d-micro) var(--e-out);
}
.pvb-btn:hover{ background:var(--s3); border-color:var(--hero); }
.pvb-btn[aria-busy="true"]{ opacity:.6; pointer-events:none; }
.pvb-mini{ color:var(--t3); font-size:12px; }

/* ── ПУСТО ────────────────────────────────────────────────────────── */
.pvb-empty{ padding:var(--sp8) 0; text-align:center; color:var(--t2); }
.pvb-empty b{ display:block; font:700 var(--fs-title)/1.3 var(--f-serif); color:var(--t1); margin-bottom:var(--sp2); }
.pvb-empty p{ margin:0; font-size:var(--fs-small); }
.pvb-empty .did{ display:flex; flex-wrap:wrap; gap:var(--sp2); justify-content:center; margin-top:var(--sp5); }
.pvb-empty .did a{
  padding:10px 15px; border-radius:var(--r-full); background:var(--s2);
  border:1px solid var(--hair2); color:var(--t1); text-decoration:none;
  font:600 var(--fs-small)/1 var(--f-ui);
}
.pvb-empty .did a:hover{ border-color:var(--hero); }

/* Из трёх выходов из тупика сборка — единственный, который сработает
   всегда: похожие имена находятся не для каждого запроса, а фильтры есть
   не у каждого. Поэтому она одна тут в цвете акцента.        qm · 30.08.2026 */
.pvb-empty .did a.make{
  background:var(--hero); border-color:var(--hero); color:var(--on-hero);
  box-shadow:var(--sh-hero);
}
.pvb-empty .did a.make:hover{ background:var(--hero-hi); border-color:var(--hero-hi); }

/* ── УКАЗАТЕЛЬ А–Я ────────────────────────────────────────────────── */
.pvb-az{ margin-top:var(--sp8); padding-top:var(--sp6); border-top:1px solid var(--hair); }
.pvb-az h2{ margin:0 0 var(--sp4); font:700 var(--fs-title)/1.2 var(--f-serif); color:var(--t1); }
.pvb-az nav{ display:flex; flex-wrap:wrap; gap:6px; }
.pvb-az a{
  min-width:40px; height:40px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--s2); border:1px solid var(--hair);
  color:var(--t2); text-decoration:none; font:700 13.5px/1 var(--f-ui);
}
.pvb-az a:hover{ background:var(--s3); color:var(--t1); border-color:var(--hair2); }
.pvb-az a.on{ background:var(--hero-lo); border-color:var(--hero-line); color:var(--t1); }
.pvb-az a.all{ background:var(--hero); color:var(--on-hero); border-color:transparent; padding:0 16px; }
.pvb-az a:focus-visible{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); }

@media (prefers-reduced-motion:reduce){
  .pvb-card{ transition:none; }
}