/* ═══════════════════════════════════════════════════════════════════════
   КАТАЛОГ КУРСОВ. Перенос макета design-drafts/v4-01-katalog.html.

   Из макета не перенесено: блок «Куда поставить поиск» (.alts) — он был
   страницей выбора, а не частью каталога; выбран вариант 1 (поиск справа
   от разделов), он здесь и стоит.

   Общие токены, шапка, кнопки, чипы и обложка — css/pages.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── строка «разделы + поиск» ──
   Одна строка, один блок управления: слева чем сузить, справа что найти.
   Поиск прижат вправо через margin-left:auto, а не отдельной колонкой сетки —
   тогда разделы можно добавлять и убирать, ничего не пересчитывая. */
.tools{display:flex;align-items:center;gap:clamp(8px,0.8vw,12px);flex-wrap:wrap;
  margin-bottom:clamp(18px,1.5vw,26px)}

.filter{display:flex;gap:8px;flex-wrap:wrap}
/* Переключатели живут внутри .filter, каждый прямо перед своей подписью:
   правило `input:checked + label` тогда одно на все разделы, сколько бы
   их ни завели в админке. */
.filter input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
/* На архиве рубрики те же кнопки — обычные ссылки (`.fl`), потому что там
   выборку сузил сервер и фильтровать в браузере нечего. Вид ОБЯЗАН совпадать,
   поэтому оформление у подписи и ссылки одно на двоих: разъедутся — на двух
   страницах каталога будут разные на вид переключатели. */
.filter label,
.filter .fl{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  height:var(--ctl-h);padding:0 clamp(15px,1.1vw,22px);
  border-radius:calc(var(--rad) - 3px);background:var(--surface);border:1.5px solid var(--line);
  font-size:clamp(14px,0.16vw + 13px,15.5px);font-weight:500;color:var(--ink-2);
  transition:border-color .18s,background-color .18s,color .18s}
.filter .fl{text-decoration:none}
.filter label:hover,
.filter .fl:hover{border-color:#C4D2E4}
.filter label span,
.filter .fl span{font-size:12.5px;font-weight:600;color:var(--faint);
  background:var(--surface-2);padding:2px 8px;border-radius:99px;
  transition:background-color .18s,color .18s;font-variant-numeric:tabular-nums}
.filter input:checked + label,
.filter .fl.on{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent);font-weight:600}
.filter input:checked + label span,
.filter .fl.on span{background:rgba(31,79,163,.14);color:var(--accent)}
.filter input:focus-visible + label,
.filter .fl:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── поле поиска ── */
.search{position:relative;margin-left:auto;flex:0 1 clamp(200px,24vw,320px);min-width:180px}
.search input{width:100%;height:var(--ctl-h);
  padding:0 clamp(38px,2.6vw,44px) 0 clamp(38px,2.6vw,44px);
  border:1.5px solid var(--line);border-radius:calc(var(--rad) - 3px);background:var(--surface);
  color:var(--ink);font:400 clamp(14px,0.16vw + 13px,15.5px)/1.4 "Golos Text",sans-serif;
  transition:border-color .18s ease,box-shadow .18s ease}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(31,79,163,.14)}
.search input::-webkit-search-cancel-button{display:none}
.search .mag{position:absolute;left:clamp(13px,1vw,15px);top:50%;transform:translateY(-50%);
  width:17px;height:17px;pointer-events:none;color:var(--faint);
  fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  transition:color .18s}
.search input:focus ~ .mag{color:var(--accent)}
/* крестик появляется, только когда есть что стирать */
.search .clr{position:absolute;right:clamp(8px,0.7vw,10px);top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:0;border-radius:50%;background:var(--surface-2);color:var(--muted);
  display:none;place-items:center;cursor:pointer;transition:background-color .16s,color .16s}
.search .clr:hover{background:var(--bad-soft);color:var(--bad)}
.search .clr svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.search.has .clr{display:grid}

/* Разделов нет (рубрики не заведены) — поиск остаётся один в строке.
   Прижимать его вправо тогда незачем: одинокое поле у правого края
   с пустотой слева читается как «здесь что-то потерялось». */
.tools--nofilter .search{margin-left:0;flex:0 1 clamp(240px,32vw,420px)}

/* ── строка «что нашлось» ──
   Появляется только при поиске: без запроса это лишний шум над каталогом. */
.found{display:none;align-items:center;gap:10px;flex-wrap:wrap;
  margin:-6px 0 clamp(14px,1.2vw,20px);font-size:14px;color:var(--muted)}
.found.on{display:flex}
.found b{color:var(--ink);font-weight:600}
.found .scope{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:500}
.found .reset{color:var(--accent);font-weight:500;cursor:pointer;background:none;border:0;
  font-size:14px;font-family:inherit;padding:0;text-decoration:underline;text-underline-offset:3px}
.found .reset:hover{color:#173F86}

/* ── карточки ── */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(260px,23vw,320px),1fr));
  gap:clamp(14px,1.3vw,22px)}
.cc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--rad) + 4px);box-shadow:var(--shadow);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.cc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#C4D2E4}
.cc-b{padding:clamp(15px,1.1vw,20px);display:flex;flex-direction:column;flex:1;gap:clamp(11px,0.8vw,15px)}
.cc h3{font-size:clamp(16px,0.31vw + 12px,18.5px);line-height:1.28}
.cc-m{display:flex;gap:7px;flex-wrap:wrap;margin-top:-4px}
.cc-p{margin-top:auto}
.cc-p .l{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13px;margin-bottom:7px}
.cc-p .l b{font-family:Rubik,sans-serif;font-weight:600;font-size:14.5px;color:var(--accent)}
.cc-p .l span{color:var(--muted)}
.cc .btn{width:100%}

/* курс, у которого ещё нет ни одного урока и теста */
.cc--soon{box-shadow:none;background:#FAFCFE}
.cc--soon:hover{transform:none;box-shadow:none;border-color:var(--line)}
.cc--soon .cover{filter:saturate(.2) opacity(.55)}
.cc--soon h3{color:var(--muted);font-weight:500}
.soonrow{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;height:var(--btn-h)}
.soonrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* карточка, не подошедшая под запрос или чужой раздел */
.cc.miss{display:none}
/* совпавший кусок названия */
.cgrid mark{background:#FCF0D2;color:inherit;border-radius:3px;padding:0 2px}

/* описание курса на карточке — не больше трёх строк, чтобы карточки
   в ряду не разъезжались по высоте из-за длинного текста */
.cc-note{font-size:13.5px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── ничего не нашлось ── */
.empty{display:none;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(40px,4vw,70px) clamp(20px,2vw,30px);
  background:var(--surface);border:1px dashed var(--line);border-radius:calc(var(--rad) + 4px)}
.empty.on{display:flex}
.empty .ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);color:var(--faint);margin-bottom:16px}
.empty .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.empty b{font-family:Rubik,sans-serif;font-weight:600;font-size:clamp(17px,0.31vw + 13px,20px)}
.empty p{margin-top:9px;font-size:14.5px;color:var(--muted);line-height:1.55;max-width:44ch}
.empty .btn{margin-top:18px}

/* каталог совсем пуст — курсов ещё не завели */
.nocourses{padding:clamp(40px,4vw,70px) clamp(20px,2vw,30px);text-align:center;
  background:var(--surface);border:1px dashed var(--line);border-radius:calc(var(--rad) + 4px);
  color:var(--muted);font-size:15px}

@media(max-width:820px){
  /* Поиск встаёт над разделами и занимает всю ширину — по нему чаще попадают
     пальцем, чем по узкой кнопке сбоку. */
  .search{flex:1 1 100%;margin-left:0;order:-1}
  .filter{width:100%}
  /* Ширина у кнопок своя, а не поровну: при делении на три «ОГЭ, 9 класс»
     ломался на две строки. Пусть лучше перенесётся вся кнопка целиком. */
  .filter label,
  .filter .fl{flex:none;white-space:nowrap;padding:0 14px}
}
@media(max-width:760px){.cgrid{grid-template-columns:1fr}}