/* КАТАЛОГ. Публичная часть: её открывают с компьютера и приходят из поиска.
 *
 * Отдельный файл поверх auth.css и app.css: там колонка в 560 px, рассчитанная
 * на кабинет с телефона, и растягивать её на весь экран ноутбука нельзя —
 * формы кабинета от этого разъедутся. Здесь своя ширина и своя сетка, а цвета
 * и шкала отступов общие: каталог должен читаться как тот же сайт.
 */

.cat-body{background:var(--canvas)}
/* Ширина и поля те же, что у шапки (topbar.css): иначе логотип и
   заголовок стоят на разных вертикалях. */
.cat-wrap{max-width:1140px;margin:0 auto;padding-inline:22px}

/* Жёлтая кнопка — единственное действие такого веса на странице: «завести
   страницу» и «занять это место». Живёт здесь, а не в шапке: в шапке она
   перебивала заголовок, ради которого человек и пришёл. */
.cat-cta{
  background:var(--amber);color:var(--ink);text-decoration:none;font-weight:700;
  font-size:14.5px;padding:11px 18px;border-radius:11px;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;
  transition:transform .15s,box-shadow .2s;
}
.cat-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(251,190,15,.9)}
.cat-cta.big{font-size:16px;padding:14px 26px;min-height:50px}

/* --- Первый экран ------------------------------------------------------
 *
 * Один блок: заголовок, строчка под ним, поиск и частые занятия. Раньше это
 * были три полосы подряд, и справа от заголовка пустовала половина экрана —
 * а поисковая карточка висела отдельно от того, что объясняет, зачем она.
 *
 * Белая панель на светлом фоне делает ровно одно: показывает, где начинается
 * и где кончается главное на странице. Всё остальное ниже — уже подробности.
 */
.cat-hero{padding-block:var(--s5) var(--s5)}
.cat-hero-in{
  background:var(--white);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 1px 2px rgba(22,36,60,.05), 0 26px 56px -34px rgba(22,36,60,.5);
  padding:clamp(26px,3.6vw,46px);padding-bottom:clamp(22px,3vw,38px);
}
/* Заголовок и подзаголовок НЕ ограничиваем по ширине: ограничение по числу
   знаков ломало обе строки там, где места хватало на одну. Перенос делает
   браузер и только когда строка правда не помещается. */
.cat-hero h1{
  font-size:clamp(25px,3vw,34px);font-weight:800;line-height:1.14;
  letter-spacing:-.03em;margin:0;max-width:none;text-wrap:balance;
}
.cat-hero-sub{
  color:var(--ink-soft);font-size:15px;line-height:1.45;
  margin:10px 0 0;max-width:none;
}

/* Поле поиска и кнопка. Города здесь больше нет — он в шапке.
   Внутри белой панели поле серое: белое на белом не читается как поле. */
.cat-seek{
  background:var(--canvas);border:1px solid var(--line);border-radius:16px;
  padding:var(--s3);margin-top:var(--s5);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;
}
.cat-seek input{background:var(--white)}
/* На странице списка панели нет — там карточка стоит прямо на фоне. */
.cat-seek.flat{background:var(--white);margin-top:var(--s4)}
.cat-seek.flat input{background:var(--canvas)}
.cat-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.cat-f > span,.cat-f > label{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint);
}
.cat-f input{
  width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:13px 14px;
}
.cat-f input:focus{outline:none;border-color:var(--ink)}

/* Подсказка городов. Раскрытый список из сорока строк человек читает
   глазами; здесь он набирает две буквы и видит до восьми подходящих. */
.cat-pick{position:relative}
.cat-pick-list{
  position:absolute;top:100%;left:0;right:0;z-index:20;margin-top:4px;
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 38px -22px rgba(22,36,60,.55);
  padding:5px;max-height:296px;overflow-y:auto;
}
.cat-pick-list button{
  display:block;width:100%;text-align:left;border:none;background:none;
  font:inherit;font-size:15px;color:var(--ink);cursor:pointer;
  padding:9px 11px;border-radius:8px;
}
.cat-pick-list button:hover,.cat-pick-list button.on{background:var(--canvas)}
.cat-go{
  font:inherit;font-size:16px;font-weight:700;cursor:pointer;
  background:var(--ink);color:#fff;border:none;border-radius:12px;
  padding:0 26px;min-height:48px;transition:transform .15s;
}
.cat-go:hover{transform:translateY(-1px)}

.cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3);align-items:center}
.cat-chips b{font-size:12.5px;font-weight:600;color:var(--ink-faint);margin-right:2px}
/* Плашки поджаты: шесть штук должны помещаться в одну строку, иначе ряд
   «ищут чаще всего» занимает места больше, чем сам поиск. */
.cat-chip{
  background:var(--canvas);border:1px solid var(--line);border-radius:16px;
  padding:5px 10px;font-size:12.5px;text-decoration:none;color:var(--ink-soft);
  transition:border-color .15s,color .15s;
}
.cat-chip:hover{border-color:var(--ink);color:var(--ink)}
/* На телефоне ряда нет вовсе.
 *
 * Шесть плашек в одну строку не помещаются и расползаются на три,
 * отодвигая список мастеров за нижний край экрана. Те же занятия сразу под
 * поиском — своим списком, в котором видно, сколько там людей. */
@media (max-width:640px){
  .cat-chips{display:none}
}

/* --- Секции ------------------------------------------------------------ */

/* Первому экрану свои отступы заданы выше — он и так стоит первым. */
.cat-body section{padding-block:var(--s6)}
.cat-body section.cat-hero{padding-block:var(--s5)}
.cat-eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-ink);margin:0 0 var(--s2);
}
.cat-h1{font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-.03em;margin:0;text-wrap:balance}
.cat-h2{font-size:clamp(22px,3.2vw,29px);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
.cat-lede{color:var(--ink-soft);font-size:16.5px;margin:var(--s2) 0 0;max-width:62ch}

/* Занятия — строками с тонкими линиями. Двадцать карточек с тенями
   превратили бы страницу в мозаику, где не выделяется ничего. */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:0 var(--s5);margin-top:var(--s5)}
.cat-row{
  display:flex;align-items:center;gap:var(--s3);padding:13px 2px;
  border-top:1px solid var(--line);text-decoration:none;color:inherit;
}
.cat-row-n{flex:1;min-width:0;font-size:15.5px;transition:color .15s}
.cat-row:hover .cat-row-n{color:var(--gold-ink)}
.cat-row-c{
  font-size:13px;font-weight:600;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;flex:none;
}

/* Не только страница: органайзер, витрина и то, что ещё в работе.
   Помеченное «в разработке» выцветает — обещание, выданное за готовое,
   запоминается как обман. */
.cat-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--s3);margin-top:var(--s5)}
.cat-more-i{
  border:1px solid var(--line);border-radius:16px;background:var(--white);
  padding:var(--s4) var(--s4) var(--s5);
}
.cat-more-i.wip{background:none;border-style:dashed}
.cat-more-i h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:var(--s3) 0 0}
.cat-more-i p{margin:6px 0 0;color:var(--ink-soft);font-size:14.5px;line-height:1.5}
.cat-more-pill{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;
  color:var(--ink-faint);background:var(--canvas);border:1px solid var(--line);
}
.cat-more-pill.on{color:var(--gold-ink);background:rgba(251,190,15,.14);border-color:rgba(251,190,15,.42)}

.cat-band{background:var(--white);border-block:1px solid var(--line)}

.cat-show{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start}
.cat-gains{display:flex;flex-direction:column;margin-top:var(--s5)}
.cat-gain{display:flex;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--line)}
.cat-gain:first-child{border-top:none;padding-top:var(--s1)}
.cat-gain-i{
  flex:none;width:34px;height:34px;border-radius:10px;
  background:var(--amber-soft);color:var(--gold-ink);
  display:flex;align-items:center;justify-content:center;
}
.cat-gain h3{font-size:16.5px;font-weight:700;margin:0;letter-spacing:-.01em}
.cat-gain p{margin:5px 0 0;color:var(--ink-soft);font-size:15px;max-width:48ch}

/* Демонстрация карточки — та же вёрстка, что на настоящей странице. */
.cat-demo{
  background:var(--white);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 1px 2px rgba(22,36,60,.05), 0 22px 44px -26px rgba(22,36,60,.42);
  padding:var(--s5) var(--s4);text-align:center;
}
.cat-demo-ava{
  width:74px;height:74px;border-radius:50%;margin:0 auto var(--s3);
  background:var(--canvas);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:700;color:var(--ink-faint);
}
.cat-demo-name{font-size:21px;font-weight:800;letter-spacing:-.02em}
.cat-demo-work{color:var(--ink-soft);font-size:14.5px;margin-top:3px}
.cat-demo-work b{color:var(--ink)}
.cat-demo-link{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  background:var(--canvas);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;margin-top:var(--s3);text-align:left;font-size:14.5px;
}
.cat-demo-link span{font-size:12.5px;color:var(--ink-faint)}
.cat-demo-item{display:flex;gap:var(--s3);align-items:center;text-align:left;padding:11px 0;border-top:1px solid var(--line)}
.cat-demo-item:first-of-type{margin-top:var(--s3)}
.cat-demo-pic{width:46px;height:46px;border-radius:10px;flex:none;background:linear-gradient(135deg,#8E5A78,#5B4A78)}
.cat-demo-pic.b{background:linear-gradient(135deg,#3E6B8E,#2F4A78)}
.cat-demo-s{font-weight:600;font-size:14.5px;line-height:1.3}
.cat-demo-p{font-weight:700;font-size:14px;margin-top:2px;font-variant-numeric:tabular-nums}
.cat-demo-foot{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);text-align:left}
.cat-demo-foot code{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--ink-soft);word-break:break-all}
.cat-demo-foot span{display:block;font-size:12px;color:var(--ink-faint);margin-top:3px}
/* Настоящий образец: ссылка целиком, с обложкой и фото позиций. */
a.cat-demo.is-real{display:block;color:inherit;text-decoration:none;overflow:hidden;padding-top:0}
.cat-demo.is-real > span{display:block}
.cat-demo-cover{display:block;width:calc(100% + 2 * var(--s4));max-width:none;height:90px;object-fit:cover;margin:0 calc(-1 * var(--s4))}
.cat-demo.is-real .cat-demo-ava{margin-top:-37px;position:relative;overflow:hidden;border:3px solid var(--white);box-sizing:content-box}
.cat-demo.is-real:not(:has(.cat-demo-cover)){padding-top:var(--s5)}
.cat-demo.is-real:not(:has(.cat-demo-cover)) .cat-demo-ava{margin-top:0}
.cat-demo-ava img{width:100%;height:100%;object-fit:cover}
.cat-demo.is-real .cat-demo-item{display:flex}
.cat-demo.is-real .cat-demo-item > span:last-child{display:block;min-width:0}
.cat-demo.is-real .cat-demo-s,.cat-demo.is-real .cat-demo-p{display:block}
img.cat-demo-pic{object-fit:cover;background:var(--canvas)}
.cat-demo.is-real .cat-demo-foot span{color:var(--ink);font-weight:700;font-size:13.5px}
.cat-demo.is-real:hover .cat-demo-foot span{text-decoration:underline}

.cat-join{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);padding-block:var(--s5)}
.cat-join > div{flex:1;min-width:260px}

/* --- Список ------------------------------------------------------------ */

.cat-list-head{padding-block:var(--s5) 0}
.cat-crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:13.5px;color:var(--ink-faint);margin-bottom:var(--s3)}
.cat-crumbs a{color:var(--ink-faint);text-decoration:none;padding:var(--s1) 0}
.cat-crumbs a:hover{color:var(--ink)}
.cat-crumb-now{color:var(--ink)}

.cat-list-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s5);padding-block:var(--s5) var(--s6)}
/* Боковой список занятий.
   Список всегда раскрыт, даже на телефоне: свёрнутый он превращался в
   белую полосу, по которой непонятно, что там. Чтобы двадцать ссылок не
   отодвинули выдачу за экран, на узком экране он уезжает ПОД неё — порядком
   в сетке, а не раскрытием. */
.cat-side{align-self:start}
/* Поиск по занятиям над списком. Двенадцать ссылок — это перелинковка и
   быстрый выбор, поле — всё остальное: справочник растёт, а колонка нет. */
.cat-side-seek{display:flex;gap:6px;margin:var(--s2) 0 var(--s3)}
.cat-side-seek .cat-f{flex:1;min-width:0}
/* Подпись поля прячем от глаз, но оставляем читалкам: над полем уже стоит
   заголовок колонки, и второй раз те же два слова — просто шум. */
.cat-side-seek .cat-f > label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.cat-side-seek .cat-f input{font-size:15px;padding:9px 11px;background:var(--white)}
.cat-side-go{
  flex:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  background:var(--white);color:var(--ink-soft);border:1px solid var(--line-strong);
  border-radius:10px;padding:0 12px;transition:border-color .15s,color .15s;
}
.cat-side-go:hover{border-color:var(--ink);color:var(--ink)}

.cat-side-t{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:0;padding:var(--s2) 0 0;
}
.cat-side-list{display:flex;flex-direction:column;margin-top:var(--s2)}
.cat-side-list a{
  display:flex;align-items:center;gap:var(--s2);justify-content:space-between;
  padding:9px 11px;border-radius:9px;text-decoration:none;
  color:var(--ink-soft);font-size:14.5px;
}
.cat-side-list a:hover{background:var(--white);color:var(--ink)}
.cat-side-list a.on{background:var(--ink);color:#fff}
.cat-side-list em{font-style:normal;font-size:12.5px;opacity:.7;font-variant-numeric:tabular-nums}

.cat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:var(--s3)}
.cat-card{
  display:flex;gap:var(--s3);align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:var(--s4);text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s;
}
.cat-card:hover{border-color:var(--ink);transform:translateY(-1px)}
.cat-card-ava{
  flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;
  background:var(--canvas);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:700;color:var(--ink-faint);
}
.cat-card-ava img{width:100%;height:100%;object-fit:cover;display:block}
.cat-card-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.cat-card-n{font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.cat-card-w{font-size:13.5px;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:0 6px}
.cat-card-w b{color:var(--ink-soft);font-weight:600}
.cat-card-w i{font-style:normal}
.cat-card-b{font-size:14px;color:var(--ink-soft);line-height:1.45;margin-top:2px}
.cat-card-o{font-size:12.5px;color:var(--gold-ink);margin-top:3px}

.cat-empty{
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:var(--s6) var(--s5);text-align:center;
}
.cat-empty-t{font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em;text-wrap:balance}
.cat-empty-d{color:var(--ink-soft);font-size:15.5px;margin:var(--s3) auto var(--s5);max-width:46ch}

.cat-pages{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);justify-content:center}
.cat-pages a{
  min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:11px;background:var(--white);
  text-decoration:none;color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.cat-pages a:hover{border-color:var(--ink);color:var(--ink)}
.cat-pages a.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}

/* --- Подвал ------------------------------------------------------------ */

.cat-foot{background:var(--white);border-top:1px solid var(--line)}
.cat-foot-in{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;padding-block:var(--s5)}
.cat-foot a{color:var(--ink-faint);text-decoration:none;font-size:14.5px;padding:var(--s2) 0}
.cat-foot a:hover{color:var(--ink)}
.cat-foot-sp{margin-left:auto;color:var(--ink-faint);font-size:13.5px}

/* --- Узкие экраны ------------------------------------------------------ */

@media (max-width:860px){
  .cat-show{grid-template-columns:1fr;gap:var(--s5)}
  .cat-list-body{grid-template-columns:1fr;gap:var(--s4)}
  /* Под выдачу: человек пришёл за списком, а не за оглавлением. */
  .cat-side{order:2;border-top:1px solid var(--line);padding-top:var(--s3)}
  .cat-side-list{max-height:none}
}
@media (max-width:560px){
  /* nowrap на узком экране выталкивает кнопку за край: «Занять это место»
     в одну строку не помещается. Пусть переносится. */
  .cat-cta{min-width:0;white-space:normal;text-align:center}
  .cat-join{flex-direction:column;align-items:stretch}
  .cat-join .cat-cta.big{width:100%}
  .cat-hero{padding-block:var(--s5) var(--s3)}
  .cat-seek{grid-template-columns:1fr}
  .cat-go{grid-column:1/-1}
  .cat-foot-sp{margin-left:0;flex-basis:100%}
}


/* ─── Память браузера: избранное и «недавно смотрели» ──────────────────
   Списки живут в localStorage посетителя и рисуются скриптом. Сервер о
   них не знает, поэтому и разметка приходит пустой — вся вёрстка здесь
   рассчитана на то, что содержимое появится позже. */

/* Звезда на карточке каталога. Лежит внутри ссылки (иначе на телефоне
   до неё не дотянуться — там вся карточка одна большая кнопка), поэтому
   позиционируется абсолютно, а щелчок по ней скрипт гасит. */
.cat-card{position:relative}
.keep-star{
  position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--ink-faint);
  transition:color .15s,background .15s,border-color .15s;
}
.keep-star:hover{color:var(--gold-ink);background:var(--canvas);border-color:var(--line)}
.keep-star.on{color:var(--gold-ink)}
.keep-star.on svg{fill:var(--amber-soft)}
/* Длинное имя не должно заезжать под звезду. */
.cat-card-body{padding-right:26px}

/* Полоса «недавно смотрели» под списком рубрики. */
.keep-strip{margin:var(--s6) auto var(--s5)}
.keep-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s3);
}
.keep-title{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.keep-all{font-size:14px;color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.keep-all:hover{color:var(--ink);text-decoration:underline}

.keep-cards{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.keep-card{
  display:flex;align-items:center;gap:var(--s3);min-width:0;
  padding:10px 12px;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  transition:border-color .15s,transform .15s;
}
.keep-card:hover{border-color:var(--ink);transform:translateY(-1px)}
.keep-ava{
  flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--canvas);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;color:var(--ink-faint);
}
.keep-ava img{width:100%;height:100%;object-fit:cover;display:block}
.keep-body{display:flex;flex-direction:column;min-width:0;gap:2px}
.keep-n{
  font-weight:700;font-size:15px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.keep-w{
  font-size:13px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Отдельные страницы избранного и просмотренных.
   Карточки здесь шире, чем в полосе под каталогом: там их восемь в ряд и
   важна плотность, здесь список читают, и обрезанное многоточием имя
   раздражает. */
/* Воздух вокруг списка. Заголовок, строка под ним и первая карточка без
   отступов читались одним слипшимся блоком, а карточки упирались в подвал. */
.cat-sub{margin:var(--s2) 0 0;color:var(--ink-soft);font-size:15.5px;max-width:64ch}
.cat-body-in{padding-block:var(--s5) var(--s6)}
.keep-main{padding-bottom:var(--s5)}
.keep-main .keep-cards{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.keep-none{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:var(--s5);text-align:center;
}
.keep-none-t{margin:0 0 var(--s2);font-size:17px;font-weight:700}
.keep-none .hint{max-width:46ch;margin:0 auto var(--s4)}