/*
 * Учебник: главная /uchebnik/ (макет Figma «Немного сайта», узел 4086:4460; телефон - 4086:5159).
 * Классы uch-* проставлены элементам Bricks скриптом scripts/uchebnik/main-page/build.py.
 * Цвета - токены дизайн-системы (--yi-*), фолбэк - значения макета.
 * Брейкпоинты - как у темы Bricks: 991 / 767 / 478.
 */

:root {
  --uch-black: var(--yi-color-black, #0c0c0c);
  --uch-bg: var(--yi-color-bg, #f5f5f6);
  --uch-line: var(--yi-color-line, #e5e5ea);
  --uch-purple: var(--yi-color-purple, #bd5697);
  --uch-green: var(--yi-color-green, #00b259);
  --uch-cyan: var(--yi-color-cyan, #39c2d7);
  --uch-yellow: var(--yi-color-yellow, #fcaf17);
  --uch-pink: var(--yi-color-pink, #ee2e62);
  --uch-head: "Nunito", sans-serif;
  --uch-body: "Nunito Sans", sans-serif;
}

/* Цвет предмета: карточки, бейджи, заглушки обложек */
[data-subject] { --uch-c: var(--uch-black); --uch-c-soft: rgba(12, 12, 12, 0.06); }
[data-subject~="informatika"] { --uch-c: var(--uch-purple); --uch-c-soft: rgba(189, 86, 151, 0.12); }
[data-subject~="matematika"] { --uch-c: var(--uch-green); --uch-c-soft: rgba(0, 178, 89, 0.12); }

/* ---------- Каркас секций ---------- */
.brxe-section.uch-section {
  background: var(--uch-bg);
  border-bottom: 1px solid var(--uch-line);
  padding: 48px 24px;
}
.brxe-container.uch-container {
  width: 100%;
  max-width: 1272px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}
.uch-h2 {
  margin: 0;
  font-family: var(--uch-head);
  font-weight: 800;
  font-size: 36px;
  line-height: 40px;
  color: var(--uch-black);
}
.uch-lead {
  margin: 0;
  font-family: var(--uch-body);
  font-size: 18px;
  line-height: 28px;
  color: var(--uch-black);
}
.uch-ico { display: block; flex: none; }
.uch-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--uch-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--uch-black);
  white-space: nowrap;
}
.uch-meta--sm { font-size: 12px; line-height: 16px; }

/* ---------- Шапка: крошки и быстрые ссылки ---------- */
.uch-crumbs { font-family: var(--uch-body); font-size: 16px; line-height: 24px; color: var(--uch-black); }
.uch-crumbs a { color: var(--uch-black); text-decoration: underline; text-underline-position: from-font; }
.uch-crumbs a:hover { color: var(--uch-purple); }
.uch-search-wrap { display: flex; flex-direction: column; gap: 24px; }
.uch-hero-chips:empty { display: none; }
.uch-chips { display: flex; flex-wrap: wrap; gap: 16px; }
.uch-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 48px;
  background: rgba(0, 0, 0, 0.24);
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.uch-chip:hover, .uch-chip:focus-visible { background: rgba(0, 0, 0, 0.4); color: #fff; }

/* ---------- Выбор предмета ---------- */
.uch-subjects__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.uch-subject {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 300px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.uch-subject__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.uch-subject__head { display: inline-flex; align-items: flex-start; gap: 8px; align-self: flex-start; text-decoration: none; }
.uch-subject__icon-wrap { display: block; width: 28px; height: 28px; }
.uch-subject__name { font-family: var(--uch-head); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--uch-c); }
.uch-subject__head:hover .uch-subject__name { text-decoration: underline; text-underline-position: from-font; }
.uch-subject__desc { margin: 0; max-width: 592px; font-family: var(--uch-body); font-size: 16px; line-height: 24px; color: var(--uch-black); }
.uch-subject__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.uch-subject__links a {
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--uch-black);
  text-decoration: underline;
  text-underline-position: from-font;
}
.uch-subject__links a:hover, .uch-subject__links a:focus-visible { color: var(--uch-c); }
.uch-subject__foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 16px; }
.uch-subject__decor-wrap { position: absolute; right: -34px; bottom: -105px; width: 252px; pointer-events: none; }
.uch-subject__decor { display: block; width: 252px; height: auto; }

/* ---------- Новое в учебнике: слайдер ---------- */
.uch-new__slider { position: relative; overflow: visible; }
.uch-new__slider .splide__track { overflow: hidden; }
/* Слайд Bricks по умолчанию центрирует содержимое - карточке нужно выравнивание влево */
.brxe-slider-nested.uch-new__slider .splide__slide.uch-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
}
.uch-cover {
  position: relative;
  display: block;
  height: 248px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--uch-line);
}
.uch-cover__media { display: block; width: 100%; height: 100%; }
.uch-cover__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.uch-cover:hover .uch-cover__img { transform: scale(1.03); }
.uch-cover__ph { position: absolute; inset: 0; background: var(--uch-c-soft); }
.uch-cover__decor { position: absolute; right: 8%; bottom: -12%; width: 46%; height: auto; }
.uch-card__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uch-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  border-radius: 8px;
  background: var(--uch-line);
  font-family: var(--uch-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--uch-black);
  white-space: nowrap;
}
.uch-card__title { margin: 0; font-family: var(--uch-body); font-weight: 700; font-size: 20px; line-height: 32px; }
.uch-card__title a { color: var(--uch-black); text-decoration: underline; text-underline-position: from-font; }
.uch-card__title a:hover { color: var(--uch-purple); }

/* Стрелки - ассеты макета (48 px); правая активная = зеркальная левая, левая неактивная = зеркальная правая */
.uch-new__slider .splide__arrow {
  position: absolute;
  top: 124px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("uchebnik/arrow-prev.svg") center / 48px 48px no-repeat;
  opacity: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
.uch-new__slider .splide__arrow svg { display: none; }
.uch-new__slider .splide__arrow--prev { left: -71px; right: auto; }
.uch-new__slider .splide__arrow--next { right: -71px; left: auto; transform: translateY(-50%) scaleX(-1); }
.uch-new__slider .splide__arrow:disabled { background-image: url("uchebnik/arrow-next-disabled.svg"); cursor: default; }
.uch-new__slider .splide__arrow--prev:disabled { transform: translateY(-50%) scaleX(-1); }
.uch-new__slider .splide__arrow--next:disabled { transform: translateY(-50%); }
.brxe-slider-nested.uch-new__slider .splide__pagination {
  position: static;
  display: flex;
  width: 100%;
  margin: 24px 0 0;
  padding: 0;
  gap: 8px;
  justify-content: center;
  transform: none;
}
.uch-new__slider .splide__pagination li { line-height: 0; }
.uch-new__slider .splide__pagination__page {
  width: 12px;
  height: 12px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.07);
  opacity: 1;
  transform: none;
}
.uch-new__slider .splide__pagination__page.is-active { background: rgba(0, 0, 0, 0.15); transform: none; }

/* ---------- Подборки статей ---------- */
.uch-colls__filters { width: 100%; }
.uch-filters { position: relative; }
.uch-filters__toggle { display: none; }
.uch-filters__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 16px;
  background: #fff;
}
.uch-filters__row { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.uch-filters__group { display: flex; align-items: center; gap: 8px; margin: 0; }
.uch-filters__label, .uch-filters__reset {
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--uch-black);
  white-space: nowrap;
}
.uch-filters__sep { width: 1px; height: 28px; background: var(--uch-line); }
.uch-filters__reset { padding: 12px 0; border: 0; background: none; cursor: pointer; }
.uch-filters__reset:hover { color: var(--uch-purple); }
.uch-select { position: relative; display: inline-flex; align-items: center; }
.uch-select select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 16px 0 0;
  border: 0;
  background: transparent;
  font-family: var(--uch-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--uch-black);
  cursor: pointer;
}
.uch-select__caret { position: absolute; right: 0; top: 50%; margin-top: -2px; pointer-events: none; }

/* Диапазон классов: два ползунка на одной дорожке */
.uch-range { position: relative; width: 92px; height: 30px; margin-top: -2px; }
.uch-range__track { position: absolute; left: 7px; right: 7px; top: 8px; height: 2px; background: var(--uch-line); }
.uch-range__fill { position: absolute; top: 0; bottom: 0; background: var(--uch-black); }
.uch-range input[type="range"] {
  position: absolute;
  left: 0;
  top: 2px;
  width: 100%;
  height: 14px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.uch-range input[type="range"]::-webkit-slider-runnable-track { background: none; border: 0; }
.uch-range input[type="range"]::-moz-range-track { background: none; border: 0; }
.uch-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--uch-black);
  border-radius: 50%;
  background: #fff;
  pointer-events: auto;
  cursor: grab;
}
.uch-range input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid var(--uch-black);
  border-radius: 50%;
  background: #fff;
  pointer-events: auto;
  cursor: grab;
}
.uch-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--uch-cyan); outline-offset: 1px; }
.uch-range__val {
  position: absolute;
  top: 16px;
  font-family: var(--uch-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--uch-black);
  transform: translateX(-50%);
}

/* Уровни: плашки цвета уровня; выбранная - с чёрной обводкой */
.uch-level, .uch-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: var(--uch-black);
  white-space: nowrap;
}
.uch-level { cursor: pointer; background: #fff; }
.uch-level[data-level=""] { border-color: var(--uch-line); }
.uch-level[data-level="start"], .uch-level-badge[data-level="start"] { background: var(--uch-line); }
.uch-level[data-level="basic"], .uch-level-badge[data-level="basic"] { background: var(--uch-cyan); }
.uch-level[data-level="middle"], .uch-level-badge[data-level="middle"] { background: var(--uch-yellow); }
.uch-level[data-level="pro"], .uch-level-badge[data-level="pro"] { background: var(--uch-pink); }
.uch-level.is-active { box-shadow: 0 0 0 2px var(--uch-black); }
.uch-level-badge--subject { background: rgba(0, 0, 0, 0.12); }

.uch-colls__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.uch-coll {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 305px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  color: var(--uch-black);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.uch-coll[data-level="basic"] { background: rgba(57, 194, 215, 0.1); }
.uch-coll[data-level="middle"] { background: #f7f0e2; }
.uch-coll[data-level="pro"] { background: #fae6ec; }
.uch-coll:hover, .uch-coll:focus-visible { box-shadow: 0 8px 24px rgba(12, 12, 12, 0.08); color: var(--uch-black); }
.uch-coll.is-hidden { display: none; }
.uch-coll__body { display: flex; flex-direction: column; gap: 19px; }
.uch-coll__class {
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.uch-coll__class:empty, .uch-coll__desc:empty, .uch-coll__badges:empty { display: none; }
.uch-coll__title { margin: 0; font-family: var(--uch-head); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--uch-black); }
.uch-coll__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.uch-coll__desc {
  margin: 0;
  max-width: 331px;
  font-family: var(--uch-body);
  font-size: 16px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uch-coll__foot { display: flex; flex-wrap: wrap; gap: 16px; }
.uch-colls__empty { margin: 0; font-family: var(--uch-body); font-size: 16px; line-height: 24px; }
.uch-colls__empty[hidden] { display: none; }

.uch-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.uch-pager:empty { display: none; }
.uch-pager button {
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 48px;
  background: var(--uch-line);
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--uch-black);
  cursor: pointer;
}
.uch-pager button[aria-current="page"] { background: var(--uch-black); color: #fff; cursor: default; }

/* ---------- Популярные темы ---------- */
.uch-popular__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.uch-topic {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 338px;
  padding: 16px;
  border: 1px solid #fff;
  border-radius: 16px;
  background: #fff;
  color: var(--uch-black);
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.uch-topic:hover, .uch-topic:focus-visible { border-color: var(--uch-line); color: var(--uch-black); }
.uch-topic__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.uch-topic__badge:empty { display: none; }
.uch-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--uch-c);
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  white-space: nowrap;
}
.uch-topic__title { margin: 0; font-family: var(--uch-head); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--uch-black); }
.uch-topic__excerpt {
  margin: 0;
  font-family: var(--uch-body);
  font-size: 16px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uch-topic__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.uch-topic__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
.uch-topic__more::after { content: ""; width: 24px; height: 24px; background: url("uchebnik/ico-move-right.svg") center / 24px 24px no-repeat; transition: transform 0.2s ease; }
.uch-topic:hover .uch-topic__more::after { transform: translateX(4px); }

.brxe-button.uch-more {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 160px;
  padding: 16px 24px;
  border: 1px solid var(--uch-line);
  border-radius: 100px;
  background: transparent;
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--uch-black);
  cursor: pointer;
  transition: background 0.2s ease;
}
.brxe-button.uch-more:hover { background: #fff; }
.brxe-button.uch-more.is-loading { opacity: 0.6; pointer-events: none; }

/* ---------- Занятия с преподавателем ---------- */
.brxe-section.uch-cta {
  padding: 48px 24px;
  min-height: 492px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #2c2c2e url("uchebnik/cta-bg.webp") center / cover no-repeat;
}
.brxe-container.uch-cta__inner { align-items: center; text-align: center; }
.uch-cta__title, .uch-cta__text { color: #fff; }
.brxe-button.uch-btn-grad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 16px 24px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--uch-purple), var(--uch-cyan));
  font-family: var(--uch-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  text-decoration: none;
  transition: filter 0.2s ease;
}
.brxe-button.uch-btn-grad:hover { filter: brightness(1.08); color: #fff; }

/* ---------- Адаптив ---------- */
@media (max-width: 1459px) {
  .uch-new__slider .splide__arrow--prev { left: -24px; }
  .uch-new__slider .splide__arrow--next { right: -24px; }
}

@media (max-width: 1199px) {
  .uch-popular__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uch-filters__panel { flex-wrap: wrap; padding: 8px 24px; }
}

@media (max-width: 991px) {
  .uch-subjects__grid { grid-template-columns: minmax(0, 1fr); }
  .uch-colls__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uch-popular__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .brxe-section.uch-section { padding: 24px 17px; }
  .uch-hero-chips { display: none; }
  .uch-subject { min-height: 282px; }
  .uch-subject__links a { color: var(--uch-c); }
  .uch-subject__decor-wrap { right: -58px; bottom: -62px; width: 200px; }
  .uch-subject__decor { width: 200px; }

  .uch-new__slider .splide__arrow { display: none; }
  .uch-cover { height: auto; aspect-ratio: 408 / 248; }

  .uch-filters__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border: 1px solid var(--uch-bg);
    border-radius: 24px;
    background: #fff;
    font-family: var(--uch-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #c7c7cc;
    cursor: pointer;
  }
  .uch-filters.is-filtered .uch-filters__toggle { color: var(--uch-black); }
  .uch-filters__panel { display: none; }
  .uch-filters.is-open .uch-filters__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 8px;
    padding: 16px;
  }
  .uch-filters.is-open .uch-filters__row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .uch-filters__sep { display: none; }
  .uch-filters__group--levels { flex-wrap: wrap; }
  .uch-filters__group--levels .uch-filters__label { width: 100%; }
  .uch-filters__reset { padding: 0; }

  .uch-colls__grid, .uch-popular__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .uch-coll { min-height: 0; }
  .uch-coll__desc { max-width: none; }
  .uch-topic { min-height: 0; }

  .brxe-section.uch-cta { padding: 48px 17px; }
  .uch-cta__text { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .uch-cover__img, .uch-topic__more::after, .uch-chip, .uch-coll, .uch-topic { transition: none; }
}