/* ══════════════════════════════════════════════════════════════════════
   Раздел «Обучение» (/education, education.py, карточка 2026-10-20-005).

   Дизайн-код arcoo.ru (Д-20): палитра и шрифты марки через переменные --d-*
   и --font-*, своих цветов и шрифтов здесь нет. Обвязка страницы, панель
   фильтров, чипсы, пустые блоки и кнопки взяты у каталога работ
   (direction.css, art-catalog.css) — тут только то, чего там нет.

   Д-1: все карточки ряда одной ширины и высоты. Держится сеткой: ячейки
   grid растягиваются по самой высокой в ряду, а подвал карточки прижат
   margin-top:auto — поэтому цена и кнопка стоят на одной линии у всех,
   сколько бы строк ни заняло название.
   ══════════════════════════════════════════════════════════════════════ */

.edu .lead{ max-width:68ch; }
.edu-intro{ max-width:72ch; display:flex; flex-direction:column; gap:14px;
  margin:clamp(18px,2.4vw,32px) 0 clamp(26px,4vw,52px); }
.edu-intro p{ margin:0; color:var(--d-ink); }

.edu-sec{ margin:clamp(40px,6vw,88px) 0 0; }
.edu-sec > .h2{ margin:0 0 clamp(16px,2.4vw,28px); }
.edu-more{ margin:clamp(20px,2.6vw,32px) 0 0; }

.edu-link{ display:inline-flex; align-items:center; gap:6px; color:var(--d-accent-text);
  font:500 14px/1.4 var(--font-mono); letter-spacing:.04em; }
.edu-small{ max-width:64ch; color:var(--d-muted); font-size:var(--text-sm); margin:8px 0 0; }

/* ── Направления (категории) ───────────────────────────────────────── */
.edu-cats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px); }
.edu-cat{ display:flex; flex-direction:column; gap:8px; min-height:100%;
  padding:clamp(18px,2vw,26px); border:1px solid var(--d-line-strong);
  background:var(--d-page-alt); color:var(--d-ink); transition:border-color .3s ease; }
.edu-cat:hover{ border-color:var(--d-accent); }
.edu-cat b{ font:400 clamp(20px,1.5vw,25px)/1.2 var(--font-display); }
.edu-cat span{ font-size:var(--text-sm); color:var(--d-muted); }
.edu-cat i{ margin-top:auto; font-style:normal; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--d-accent-text); }

/* ── Сетка карточек ────────────────────────────────────────────────── */
.edu-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px); }
.results .edu-grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }

.edu-card{ display:flex; flex-direction:column; gap:8px; min-height:100%;
  padding:0 0 clamp(14px,1.6vw,20px); border:1px solid var(--d-line);
  background:var(--d-page-alt); }
.edu-card > *:not(.edu-shot){ padding-inline:clamp(14px,1.4vw,18px); }

/* Обложка курса — кадр 16:9 (ТЗ §3.2). Афиша мероприятия бывает вертикальной,
   её вписываем целиком на тёмном поле, а не режем (edu-shot-fit). */
.edu-shot{ display:block; position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--navy-900); }
.edu-shot img{ display:block; width:100%; height:100%; object-fit:cover; }
.edu-shot-fit img{ object-fit:contain; }
.edu-shot-mark{ position:absolute; inset:0; display:grid; place-items:center;
  font:400 20px/1 var(--font-display); letter-spacing:.3em; color:var(--gold-400); }

.edu-card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:clamp(12px,1.4vw,16px) 0 0; }
.edu-tag{ font:500 10px/1.5 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  font-style:normal; padding:4px 8px; border:1px solid var(--d-accent);
  color:var(--d-accent-text); }
.edu-tag-soft{ border-color:var(--d-line-strong); color:var(--d-muted); }
.edu-tag-on{ border-color:var(--status-positive); color:var(--status-positive); }

.edu-card-title{ margin:0; font:400 clamp(18px,1.3vw,22px)/1.25 var(--font-display); }
.edu-card-title a{ color:var(--d-ink); }
.edu-card-title a:hover{ color:var(--d-accent-text); }

/* Портрет преподавателя — вертикальный 3:4 с привязкой к верху (Д-4),
   круга здесь нет: круглая аватарка на ARCOO только в овальных кнопках (Д-28). */
.edu-who{ display:flex; align-items:center; gap:8px; margin:0;
  font-size:var(--text-sm); color:var(--d-ink); }
.edu-who a{ display:inline-flex; align-items:center; gap:8px; color:inherit; }
.edu-face{ width:30px; height:40px; object-fit:cover; object-position:center top;
  background:var(--d-page); flex:none; }

.edu-meta{ margin:0; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--d-muted); min-height:1.4em; }
.edu-rate{ display:flex; align-items:baseline; gap:8px; margin:0; font-size:12px; }
.edu-rate b{ color:var(--d-accent-text); font-size:14px; }
.edu-rate span{ color:var(--d-muted); }

.edu-card-foot{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:clamp(10px,1.2vw,14px); }
.edu-price{ font:400 clamp(16px,1.1vw,19px)/1.2 var(--font-display); color:var(--d-ink); }

/* ── Четыре шага ───────────────────────────────────────────────────── */
.edu-steps{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); }
.edu-steps li{ display:flex; flex-direction:column; gap:6px; min-height:100%;
  padding-top:14px; border-top:1px solid var(--d-accent); }
.edu-steps i{ font-style:normal; font-size:11px; letter-spacing:.18em;
  color:var(--d-accent-text); }
.edu-steps b{ font:400 clamp(17px,1.2vw,21px)/1.25 var(--font-display); color:var(--d-ink); }
.edu-steps span{ font-size:var(--text-sm); color:var(--d-muted); }

/* ── Справочник форматов ───────────────────────────────────────────── */
.edu-formats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px); }
.edu-format{ display:flex; flex-direction:column; gap:8px; min-height:100%;
  padding:clamp(16px,1.8vw,24px); border:1px solid var(--d-line);
  background:var(--d-page-alt); }
.edu-format h3{ margin:0; font:400 clamp(18px,1.3vw,22px)/1.2 var(--font-display);
  color:var(--d-ink); }
.edu-format p{ margin:0; font-size:var(--text-sm); color:var(--d-ink); }
.edu-format dl{ display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:6px 0 0;
  font-size:11px; letter-spacing:.06em; }
.edu-format dt{ color:var(--d-muted); text-transform:uppercase; }
.edu-format dd{ margin:0; color:var(--d-ink); }
.edu-format-who{ margin-top:auto; padding-top:8px; color:var(--d-muted); }

/* ── Списки и полоса «разместить курс» ─────────────────────────────── */
.edu-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.edu-list li{ position:relative; padding-left:18px; font-size:var(--text-sm); color:var(--d-ink); }
.edu-list li::before{ content:''; position:absolute; left:0; top:.6em; width:7px; height:1px;
  background:var(--d-accent); }

.edu-teach-band{ padding:clamp(24px,3.4vw,48px); border:1px solid var(--d-line-strong);
  background:var(--d-page-alt); }
.edu-teach-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px); align-items:start; }
.edu-teach-grid p{ margin:0 0 14px; }
.edu-teach-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }

.edu-three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,40px); align-items:start; }
.edu-three > div{ display:flex; flex-direction:column; gap:10px; }
.edu-three .h3{ margin:0; }

/* ── Узкие экраны ──────────────────────────────────────────────────── */
@media (max-width:1100px){
  .edu-cats, .edu-formats, .edu-three{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .edu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .edu-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .edu-teach-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .edu-cats, .edu-formats, .edu-three, .edu-grid, .edu-steps{ grid-template-columns:1fr; }
  .results .edu-grid{ grid-template-columns:1fr; }
  .edu-card-foot{ flex-direction:column; align-items:stretch; }
  .edu-card-foot .d-btn{ justify-content:center; }
}

/* Д-1: на телефоне «Сортировка» и «Все фильтры» стоят в столбик во всю ширину.
   Без этого кнопка фильтров отжимает список сортировки до одной стрелки (direction.css
   даёт .bar-right всю ширину, а .sort — flex:1) и выбранный порядок не прочитать:
   замер на 375 px, 20.10.2026. Каталога работ правило не касается — оно внутри .edu. */
@media (max-width:767px){
  .edu .cx-bar .bar-right{ flex-direction:column; align-items:stretch; gap:10px; }
  .edu .cx-bar .sort{ flex:0 0 auto; flex-direction:column; align-items:stretch;
    gap:6px; min-width:0; }
  .edu .cx-bar .sort select{ width:100%; min-width:0; }
  .edu .cx-bar .filters-open{ width:100%; justify-content:center; }
}

/* У «уменьшения движения» своя вёрстка: блоки стоят на месте, как и на
   остальных страницах направлений (direction.css, тот же приём). */
@media (prefers-reduced-motion:reduce){
  .edu-cat{ transition:none; }
}