/* ============================================================
   EDUCATION.CSS — стили только для страницы "Образование"
   (education.html). Токены — в tokens.css, общая обвязка (база документа,
   шапка, футер, стикеры) — в smelost.css.
   Вид страницы сохранен один в один с версией до переборки; менялось
   устройство кода, не дизайн.
   ============================================================ */

/* Пастельные фоны плиток каталога. Живут здесь, а не в tokens.css:
   больше их не использует никто на сайте. Приходят в разметку из данных
   (education.js, поле tint у категории). */
:root {
  --tint-purple: #EDE8FE;
  --tint-pink:   #FFE4F2;
  --tint-blue:   #E5EDFD;
  --tint-orange: #FCE8D6;
  --tint-tomato: #FBE1D9;
  --tint-mauve:  #EFE8F4;
  --tint-lime:   #EEF6CC;
}

/* Розовый ползунок прокрутки — пока только у этой страницы (на остальных
   скроллбар системный). Перенесен как есть, чтобы вид не поехал. */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: var(--c-paper-2); }
::-webkit-scrollbar-thumb {
  background: var(--c-pink);
  border-radius: 10px;
  border: 3px solid var(--c-paper-2);
}

/* Смена гарнитуры точечно: заголовки и рукописные акценты. */
.edu-display { font-family: var(--font-display); }
.edu-hand { font-family: var(--font-hand); }

/* Контейнеры секций страницы. Контейнеры общих секций — в smelost.css. */
.edu-intro__inner,
.edu-gallery__inner,
.edu-catalog__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
}

/* ============================================================
   ИНТРО
   ============================================================ */
.edu-intro { padding: 64px 0 48px; }
.edu-intro__eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin: 0 0 14px;
}
.edu-intro__title {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  font-size: clamp(40px, 10vw, 72px);
  line-height: .94;
  letter-spacing: -.03em;
  margin: 0 0 22px;
}
.edu-intro__body {
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-ink-70);
  max-width: 52ch;
  margin: 0;
}

/* ============================================================
   ГАЛЕРЕЯ ДИПЛОМОВ
   ============================================================ */
.edu-gallery { padding: 0 0 56px; }
.edu-gallery-card {
  background: var(--c-white);
  border-radius: 28px;
  box-shadow: var(--sh-2);
  padding: 18px;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 22px;
  align-items: center;
}
.edu-viewer {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-paper-2);
  aspect-ratio: 16/10;
  cursor: zoom-in;
}
/* Картинку подставляет education.js из данных (--edu-shot). */
.edu-viewer-img {
  position: absolute;
  inset: 0;
  background-image: var(--edu-shot);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.edu-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--sh-1);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--c-ink);
  transition: .18s ease;
}
.edu-arrow:hover {
  transform: translateY(-50%) scale(1.08);
  background: var(--c-pink);
  color: var(--c-white);
}
.edu-arrow--prev { left: 14px; }
.edu-arrow--next { right: 14px; }
.edu-counter {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(33, 28, 46, .72);
  color: var(--c-white);
  font-weight: var(--fw-bold);
  font-size: 13px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

.edu-gallery__hand {
  font-size: 26px;
  color: var(--c-pink);
  transform: rotate(-3deg);
  margin: 0 0 14px;
}
.edu-gallery__title {
  font-weight: var(--fw-bold);
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 8px;
}
.edu-gallery__caption {
  font-size: 14.5px;
  color: var(--c-ink-70);
  margin: 0 0 18px;
}
.edu-gallery__hint {
  font-size: 13px;
  color: var(--c-ink-45);
  margin: 18px 0 0;
}

.edu-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.edu-thumb {
  width: 92px;
  height: 62px;
  border-radius: 10px;
  background-image: var(--edu-shot);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: .5;
  box-shadow: var(--sh-1);
  transition: .18s ease;
  border: none;
  padding: 0;
  box-sizing: border-box;
}
.edu-thumb[data-active="true"] {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--c-pink);
}

/* ============================================================
   КАТАЛОГ ПРОГРАММ
   ============================================================ */
.edu-catalog { padding: 0 0 64px; }
.edu-catalog__head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.edu-catalog__title {
  font-weight: var(--fw-ultra);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
.edu-catalog__hand {
  font-size: 26px;
  color: var(--c-purple);
  transform: rotate(-3deg);
  margin: 0 0 6px;
}
.edu-catalog__lead {
  font-size: 17px;
  color: var(--c-ink-70);
  margin: 0 0 26px;
}

.edu-tiles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* Плитка раздела. Цвет и фон приходят из данных (education.js) через
   --edu-tile-tint / --edu-tile-color — они разные у каждого раздела. */
.edu-tile {
  background: var(--edu-tile-tint, var(--tint-purple));
  border-radius: 20px;
  padding: 16px 16px 18px;
  min-height: 104px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  border: 2.5px solid transparent;
  box-shadow: var(--sh-1);
  transition: transform .2s var(--ease-bounce), box-shadow .2s ease;
}
.edu-tile:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: var(--sh-2);
}
.edu-tile[data-active="true"] {
  border-color: var(--edu-tile-color, var(--c-purple));
  box-shadow: var(--sh-2);
}
.edu-tile-num {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  font-size: 34px;
  color: var(--edu-tile-color, var(--c-purple));
}
.edu-tile-title {
  font-weight: var(--fw-bold);
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--c-ink);
}

/* ============================================================
   РАСКРЫТЫЙ РАЗДЕЛ
   Цвет раздела приходит на сам блок как --edu-cat-color / --edu-cat-tint,
   внутренности берут его оттуда — поэтому у точек и плашек внутри нет
   собственных инлайн-стилей.
   ============================================================ */
.edu-detail {
  background: var(--c-white);
  border-radius: 26px;
  box-shadow: var(--sh-2);
  padding: 30px 32px;
  margin-top: 22px;
  animation: edu-pop .3s ease;
}
@keyframes edu-pop {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.edu-detail__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.edu-detail__title {
  font-weight: var(--fw-black);
  font-size: 26px;
  margin: 0;
}
.edu-detail__count {
  font-size: 14px;
  color: var(--c-ink-70);
  margin: 0 0 18px;
}
.edu-detail-dot {
  width: 14px;
  height: 14px;
  border-radius: 5px;
  transform: rotate(10deg);
  flex: none;
  background: var(--edu-cat-color, var(--c-purple));
}
.edu-detail-pill {
  border-radius: var(--r-pill);
  font-weight: var(--fw-bold);
  font-size: 13px;
  padding: 3px 10px;
  background: var(--edu-cat-tint, var(--tint-purple));
}

/* Список программ. Колонок 1/2/3 — по длине списка, модификатором. */
.edu-list { column-gap: 32px; }
.edu-list--cols-1 { display: flex; flex-direction: column; }
.edu-list--cols-2 { column-count: 2; }
.edu-list--cols-3 { column-count: 3; }

.edu-list-item {
  display: flex;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  break-inside: avoid;
  transition: background .15s ease;
}
.edu-list-item:hover { background: var(--c-paper-2); }
.edu-list-item__title {
  font-size: 15px;
  font-weight: var(--fw-med);
  line-height: 1.35;
}
.edu-list-item__sub {
  font-size: 13px;
  color: var(--c-ink-70);
  margin-top: 2px;
}
.edu-list-tick {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  transform: rotate(10deg);
  margin-top: 6px;
  flex: none;
  background: var(--edu-cat-color, var(--c-purple));
}
.edu-badge-wip {
  background: var(--c-lime);
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  font-size: 11px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ============================================================
   ЛАЙТБОКС
   ============================================================ */
.edu-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(33, 28, 46, .88);
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.edu-lightbox.is-open { display: flex; }
.edu-lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  background-image: var(--edu-shot);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .5));
}
.edu-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  color: var(--c-white);
  border: none;
  font-size: 22px;
  cursor: pointer;
}
.edu-lightbox .edu-arrow {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, .16);
  color: var(--c-white);
}
.edu-lightbox .edu-arrow:hover { background: var(--c-pink); }
.edu-lightbox__cap {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--c-white);
}
.edu-lightbox__title {
  font-size: 20px;
  margin-bottom: 6px;
}
.edu-lightbox__meta {
  font-size: 14px;
  opacity: .85;
}

/* ============================================================
   ПОЗИЦИИ СТИКЕРОВ
   Базовый .stkr (позиционирование + покачивание) — в smelost.css,
   здесь только место и размер конкретного стикера.
   ============================================================ */
.vf-stkr--edu-intro-fire {
  top: 8px;
  right: 24px;
  width: 64px;
  height: auto;
  --stkr-r: -8deg;
}

/* ============================================================
   АДАПТИВ
   Брейкпоинты страницы: 820px (галерея в одну колонку) и 767px.
   У шапки свой, 1160px — он в smelost.css.
   ============================================================ */
@media (max-width: 820px) {
  .edu-gallery-card { grid-template-columns: 1fr; }
  .edu-tiles-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .edu-tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .edu-list--cols-2,
  .edu-list--cols-3 { column-count: 1; }
  /* Стикер прячется на узком экране: на 375px он налезает на заголовок. */
  .vf-stkr--edu-intro-fire { display: none; }

  /* Длинные слова ("доказательной", "Образование") в один размер не влезают:
     на 375px заголовок каталога вылезал за поле на 121px, на 320px — на 176px,
     и текст молча срезало (у страницы overflow-x: hidden, скролла не появлялось).
     Тот же прием, что у карточек циклов: потолок clamp равен базовому размеру,
     поэтому на границе 768px размер не скачет, а десктоп не тронут. */
  .edu-catalog__title { font-size: clamp(24px, 8vw, 44px); }
  .edu-intro__title { font-size: clamp(28px, 9.5vw, 72px); }
}

/* Пальцем труднее попасть, чем курсором: цели крупнее на тач-экранах. */
@media (hover: none) {
  .edu-thumb { width: 108px; height: 72px; }
  .edu-tile { min-height: 116px; }
  .edu-lightbox-close { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .edu-tile,
  .edu-arrow { transition: none; }
  .edu-tile:hover { transform: none; }
  /* У стрелки transform держит и вертикальную центровку, поэтому гасим только
     увеличение: полный transform:none ронял бы стрелку вниз на пол-высоты
     (так было в старом коде). */
  .edu-arrow:hover { transform: translateY(-50%); }
  .edu-detail { animation: none; }
}