/* Совушка — стили страницы каталога. Общее (шапка, кнопки, слоты, hero, подвал) — в styles.css */

/* ═══════════════════ Первый экран каталога ═══════════════════ */
/* высота первого экрана — под фон 3:1 целиком: ширина окна / 3 минус выход фона
   вверх под шапку (88px) и вниз (40px). Текст стоит по центру этой высоты */
.hero-area-catalog { display: grid; min-height: calc(100vw / 3 - 128px); }
.hero-area-catalog .backdrop-fade { height: 60px; } /* низ картинки почти не размываем — там сова */
.hero-catalog { display: grid; align-content: center; padding: 64px 0 72px; }
.hero-catalog .hero-title { max-width: 900px; font-size: clamp(30px, 4.2vw, 52px); }
.hero-catalog .hero-lead { max-width: 58ch; margin-top: 20px; font-size: 17px; }
.hero-catalog .hero-chips { margin-top: 32px; gap: 12px 32px; }

/* ═══════════════════ Каталог: фильтры слева, результаты справа ═══════════════════ */
.catalog { position: relative; z-index: 1; padding: 26px 0 44px; } /* над краем фона первого экрана */
.catalog-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }

/* ---------- Фильтры ---------- */
.filters {
  position: sticky;
  top: calc(var(--header-h) + var(--header-gap) * 2);
  padding: 22px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.filters-title { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.link-soft { padding: 0; font: inherit; font-size: 13px; font-weight: 550; color: var(--brand-600); background: none; border: 0; cursor: pointer; }
.link-soft:hover { color: var(--brand-hover); }
.search { position: relative; display: block; }
.search .ic { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; color: var(--brand-600); transform: translateY(-50%); pointer-events: none; }
.search input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.16s, background-color 0.16s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { background: var(--surface); border-color: var(--brand-300); }
.fgroup { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.fgroup-title { margin-bottom: 12px; font-size: 14px; font-weight: 650; color: var(--ink); }
.price-row { display: flex; gap: 10px; }
.price-row input {
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
}
.price-row input:focus { border-color: var(--brand-300); }
/* ползунок цены: тонкая дорожка, залитая до значения, круглая ручка. --fill ставит catalog.js */
.price-range {
  --fill: 100%;
  display: block;
  width: 100%;
  height: 18px;
  margin: 14px 0 0;
  background: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.price-range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--brand-600) var(--fill), var(--brand-200) var(--fill)); border-radius: 2px; }
.price-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  background: #fff;
  border: 2px solid var(--brand-600);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.16s;
}
.price-range:hover::-webkit-slider-thumb { background: var(--brand-100); }
.price-range::-moz-range-track { height: 4px; background: var(--brand-200); border-radius: 2px; }
.price-range::-moz-range-progress { height: 4px; background: var(--brand-600); border-radius: 2px; }
.price-range::-moz-range-thumb { width: 14px; height: 14px; background: #fff; border: 2px solid var(--brand-600); border-radius: 50%; }
.price-range:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
/* переключатель уровня */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.seg button {
  padding: 9px 8px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 0.16s, color 0.16s;
}
.seg button:hover { color: var(--ink); background: var(--surface-menu); }
.seg button[aria-pressed="true"] { color: #fff; background: var(--brand-600); }
/* чекбоксы со счётчиками */
.check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; transition: color 0.16s; }
.check:hover { color: var(--ink); }
/* чекбокс: скруглённый квадрат, отмеченный — синий с белой галочкой */
.check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--surface) center / 12px no-repeat;
  border: 1.5px solid var(--line-hover);
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.16s, border-color 0.16s;
}
.check:hover input { border-color: var(--brand-300); }
.check input:checked {
  background-color: var(--brand-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--brand-600);
}
.check input:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.check .count { margin-left: auto; font-size: 12px; color: var(--muted); }
/* быстрый выбор школ */
.schools-quick { display: grid; gap: 8px; }
.school-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--ink);
  text-align: left;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.16s, border-color 0.16s;
}
.school-btn:hover { background: var(--surface-menu); }
.school-btn[aria-pressed="true"] { background: var(--brand-100); border-color: var(--brand-300); }
.school-btn .slot { flex: 0 0 auto; width: 26px; border-radius: 8px; }
.filters-reset { width: 100%; margin-top: 18px; }
.filters-reset .ic { width: 16px; height: 16px; }

/* ---------- Результаты ---------- */
.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 16px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--ink-soft); transition: color 0.16s; }
.crumbs a:hover { color: var(--brand-600); }
.results-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.found { font-size: 13.5px; font-weight: 550; color: var(--ink-soft); }
.sort {
  padding: 9px 34px 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%235f6b7a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.16s;
}
.sort:hover { border-color: var(--line-hover); }
.filters-toggle { display: none; }
/* вкладки предметов */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tab {
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.16s, color 0.16s, border-color 0.16s;
}
.tab:hover { color: var(--ink); background: var(--surface-menu); }
.tab[aria-pressed="true"] { color: var(--brand-600); background: var(--brand-100); border-color: var(--brand-200); }
/* активные фильтры */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.active-filters[hidden] { display: none; }
.afchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--brand-600);
  background: var(--brand-100);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.16s;
}
.afchip:hover { background: var(--brand-200); }
.afchip .ic { width: 14px; height: 14px; }

/* ---------- Карточки курсов ---------- */
.courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* фон карточки — цвет предмета: --tint заливка, --tint-2 плашка логотипа и рамка при наведении */
.course {
  --tint: #eef4fc;
  --tint-2: #d6e7fd;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  background: linear-gradient(160deg, #fff 0%, var(--tint) 100%);
  border: 1px solid transparent;
  border-radius: 20px;
  transition: border-color 0.18s;
}
.course:hover { border-color: var(--tint-2); }
.course[data-subject="rus"]  { --tint: #e6f0ff; --tint-2: #cfe0fb; }
.course[data-subject="math"] { --tint: #ebebff; --tint-2: #d8d7fb; }
.course[data-subject="soc"]  { --tint: #fff0e4; --tint-2: #fbdcc3; }
.course[data-subject="eng"]  { --tint: #e6f7ef; --tint-2: #c9eedb; }
.course[data-subject="inf"]  { --tint: #f1eaff; --tint-2: #e0d3fb; }
.course[data-subject="bio"]  { --tint: #e9f7e6; --tint-2: #cfeec8; }
.course[data-subject="phys"] { --tint: #e4f2ff; --tint-2: #c9e2fb; }
.course[data-subject="chem"] { --tint: #e3f6f7; --tint-2: #c5ecee; }
.course[data-subject="hist"] { --tint: #fbf1e1; --tint-2: #f3dfbf; }
.course[data-subject="lit"]  { --tint: #fdeef2; --tint-2: #f8d5de; }
.course[data-subject="geo"]  { --tint: #e4f4fb; --tint-2: #c6e5f5; }
.course > :not(.bg) { position: relative; z-index: 1; } /* над слоем фона */
/* вторая колонка всплывает чуть позже первой (задержка только на появление, не на ховер) */
.courses .course.in:nth-child(even) { transition-delay: 0.09s, 0.09s, 0s, 0s; }
.course[hidden] { display: none; }
/* шапка карточки: логотип школы, справа предмет и школа */
.course-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.course-logo { flex: 0 0 auto; width: 52px; padding: 8px; background: var(--surface); border-radius: 14px; }
.course-logo.empty::before { border-radius: 14px; }
.course-heading { min-width: 0; }
.course-title { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
.course-school { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 550; color: var(--ink-soft); }
.course-badge { flex: 0 0 auto; align-self: flex-start; margin-left: auto; padding: 4px 10px; font-size: 11.5px; font-weight: 650; color: var(--brand-600); background: var(--surface); border-radius: var(--radius-pill); }
.course-text { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag { padding: 4px 10px; font-size: 11.5px; font-weight: 550; color: var(--ink-soft); background: rgba(255, 255, 255, 0.75); border-radius: var(--radius-pill); }
.tag-duration { color: var(--brand-600); background: var(--surface); }
.course-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
/* цена: может быть одна или обе сразу — за месяц и за весь курс.
   Каждая сумма с подписью — единый блок, чтобы подпись не отрывалась при переносе */
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.price-item { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.course-foot .btn { margin-left: auto; }   /* при переносе кнопка остаётся справа */
.price b { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.price small { font-size: 12px; color: var(--ink-soft); }
/* плитка «Другие предметы» */
.course-more { align-items: center; justify-content: center; padding: 28px 18px; text-align: center; background: var(--surface-2); }
.course-more:hover { border-color: var(--line-hover); }
.more-num { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; font-size: 16px; font-weight: 650; color: var(--brand-600); background: var(--brand-100); border-radius: 50%; }
.course-more .course-text { max-width: 26ch; }
.course-more .btn { margin-top: 18px; }
.no-results { padding: 40px 20px; font-size: 14px; color: var(--ink-soft); text-align: center; background: var(--surface-2); border-radius: 18px; }
.no-results[hidden] { display: none; }

/* ═══════════════════ Адаптив ═══════════════════ */
@media (max-width: 1080px) {
  .catalog-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 900px) {
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; display: none; }
  .filters.open { display: block; }
  .filters-toggle { display: inline-flex; }
  .results-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .hero-area-catalog { min-height: 0; }
  .hero-catalog { padding: 36px 0 44px; }
  .courses { grid-template-columns: minmax(0, 1fr); }
  .results-meta { width: 100%; }
  .sort { flex: 1 1 auto; }
}