/* =========================================================================
   Витрина преподавателей /catalog и /catalog/:id — серверный ERB под public-
   лейаутом (Задача 5, SEO-гибрид). Public-лейаут НЕ грузит Vite/Tailwind, поэтому
   продуктовые токены §2 DESIGN.md и стили переносим сюда bespoke — визуальный
   паритет с прежними Catalog.vue / CatalogTeacher.vue.
   Регистр — ПРОДУКТОВЫЙ (§2/§3 DESIGN.md), не витринный: компактная шкала,
   flat-by-default, синий = действие/статус. CSP style_src 'self' 'unsafe-inline':
   inline style="--mono-*" в аватаре допустим, но всё структурное — здесь.
   ========================================================================= */

/* ---- self-hosted Montserrat (те же файлы, что лендинг; только normal-начертания).
   latin-ext нужен для ₽ (U+20BD) и стрелок ↑↓; cyrillic — для русского. ---- */
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/fonts/montserrat-cyrillic-wght-normal.woff2") format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/fonts/montserrat-cyrillic-ext-wght-normal.woff2") format('woff2-variations');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/fonts/montserrat-latin-wght-normal.woff2") format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/fonts/montserrat-latin-ext-wght-normal.woff2") format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---- Токены §2 DESIGN.md (синхронно с app/frontend/entrypoints/application.css) ---- */
:root{
  color-scheme: light dark;
  --c-bg:#F5F7F9; --c-surface:#FFFFFF; --c-surface-2:#EDF1F4;
  --c-border:#DCE2E8; --c-border-strong:#C4CDD6;
  --c-text:#1A2230; --c-muted:#5B6675;
  --c-accent:#008CD2; --c-accent-ink:#0A6FA8; --c-accent-soft:#D6ECF8;
  --r-md:6px; --r-lg:8px; --r-xl:12px; --r-full:9999px;
  --sh-sm:0 1px 2px rgba(0,0,0,.05);
  --sh-md:0 8px 24px rgba(0,0,0,.12); /* выпадашки/поповеры (дропдаун фильтра) */
}
/* Тёмная тема — как в приложении: системная (ОС тёмная и явно не выбрана светлая)
   ИЛИ явный data-theme="dark". Роли и контраст ≥ AA сохранены (The Two-Theme Rule). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-bg:#0F1319; --c-surface:#171C24; --c-surface-2:#1E242D;
    --c-border:#29313C; --c-border-strong:#3A4450;
    --c-text:#E7EBF1; --c-muted:#98A2B0;
    --c-accent:#33A8E0; --c-accent-ink:#5CBEEC; --c-accent-soft:#0C2C3E;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --c-bg:#0F1319; --c-surface:#171C24; --c-surface-2:#1E242D;
  --c-border:#29313C; --c-border-strong:#3A4450;
  --c-text:#E7EBF1; --c-muted:#98A2B0;
  --c-accent:#33A8E0; --c-accent-ink:#5CBEEC; --c-accent-soft:#0C2C3E;
}
:root[data-theme="light"]{ color-scheme: light; }

*{box-sizing:border-box;}
html{background:var(--c-bg);-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--c-bg);color:var(--c-text);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:.875rem;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;}

/* ---- Каркас (sticky-footer: main тянется, футер прижат вниз) ---- */
.catalog{min-height:100vh;display:flex;flex-direction:column;
  background:var(--c-bg);color:var(--c-text);}
.catalog__topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--c-border);background:var(--c-surface);padding:12px 16px;}
.catalog__brand{flex:0 0 auto;display:inline-flex;}
.catalog__logo{height:32px;width:auto;}
/* Вторичный CTA в шапке: контурная кнопка, не конкурирует с grid/«показать контакт».
   nowrap + компактный паддинг на мобиле, чтобы не переполнять шапку на 360px. */
.catalog__topbar-cta{flex:0 0 auto;white-space:nowrap;}
.catalog__main{flex:1 1 auto;width:100%;max-width:72rem;margin-inline:auto;padding:32px 16px;}
.catalog__main--narrow{max-width:48rem;}
.catalog__h1{margin:0 0 8px;font-size:1.5rem;font-weight:700;line-height:2rem;
  letter-spacing:-.01em;color:var(--c-text);text-wrap:balance;}
/* Лид-абзац под H1 (только index): ориентирует пользователя + SEO-текст. */
.catalog__lead{margin:0 0 24px;max-width:60ch;color:var(--c-muted);
  font-size:.875rem;line-height:1.55;text-wrap:pretty;}
@media (max-width:400px){
  .catalog__topbar{padding:12px;}
  .catalog__topbar-cta{padding:8px 12px;}
}

/* ---- Фильтры (GET-форма, без JS) ---- */
.catalog__filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;
  margin-bottom:24px;padding:16px;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--r-xl);}
/* Курс/Сортировка/Направление — одинаковые нативные select с подписью сверху, в ряд. */
.catalog__course,.catalog__sort,.catalog__dir{display:inline-flex;flex-direction:column;gap:4px;
  font-size:.75rem;font-weight:600;color:var(--c-muted);}
.catalog__filters select{appearance:none;font:inherit;font-size:.875rem;font-weight:400;
  color:var(--c-text);background:var(--c-surface);
  border:1px solid var(--c-border-strong);border-radius:var(--r-md);
  padding:8px 34px 8px 12px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8698' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:1.1rem;}
.catalog__filters select:focus-visible{border-color:var(--c-accent);}
.catalog__dir select{padding-right:34px;}
/* «Сбросить» — вторичный ghost-контрол в ряд с остальными, не голая ссылка. */
.catalog__reset{align-self:flex-end;display:inline-flex;align-items:center;
  padding:8px 12px;border:1px solid var(--c-border);border-radius:var(--r-md);
  background:transparent;font-size:.875rem;font-weight:600;color:var(--c-muted);
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
.catalog__reset:hover{color:var(--c-text);background:var(--c-surface-2);
  border-color:var(--c-border-strong);}
/* Apply-on-change: при активном JS кнопка «Показать» не нужна (фильтр применяется
   сразу по change). Без JS правило не срабатывает — кнопка остаётся фолбэком. */
.catalog__filters--js .catalog__apply{display:none;}

/* ---- Кнопки (§5 DESIGN.md) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 16px;border-radius:var(--r-md);border:1px solid var(--c-border-strong);
  background:var(--c-surface);color:var(--c-text);
  font:inherit;font-size:.875rem;font-weight:600;line-height:1.25rem;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
.btn:hover{background:var(--c-surface-2);}
.btn--primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff;}
.btn--primary:hover{background:var(--c-accent-ink);border-color:var(--c-accent-ink);}

/* ---- Пустое состояние (приглашение, не ошибка — §Design Principles) ---- */
.catalog__empty{display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:48rem;margin-inline:auto;padding:64px 32px;text-align:center;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);}
.catalog__empty::before{content:"\266B";display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:var(--r-full);
  background:var(--c-accent-soft);color:var(--c-accent-ink);font-size:2rem;}
.catalog__empty h2{margin:0;font-size:1.5rem;font-weight:600;color:var(--c-text);}
.catalog__empty p{margin:0;max-width:44ch;color:var(--c-muted);line-height:1.55;}

/* ---- Грид карточек ---- */
.catalog__grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}

/* ---- Карточка преподавателя ---- */
.tcard{background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-xl);padding:20px;box-shadow:var(--sh-sm);}
.tcard--grid{display:flex;flex-direction:column;gap:12px;}
.tcard__name{margin:0;font-size:1.125rem;font-weight:600;color:var(--c-text);}
.tcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  font-size:.875rem;color:var(--c-muted);}
.tcard--grid .tcard__meta{justify-content:space-between;}
.tcard__meta b{font-weight:600;color:var(--c-text);}
.tcard--grid .btn--primary{margin-top:auto;}
.tcard__more{text-align:center;font-size:.875rem;color:var(--c-muted);}
.tcard__more:hover{color:var(--c-accent);text-decoration:underline;}

/* Детальная карточка (show): аватар слева, тело справа с md-брейкпоинта */
.catalog__main--narrow .tcard{display:flex;flex-direction:column;gap:20px;}
.tcard__avatar{width:100%;}
.tcard__body{display:flex;flex-direction:column;gap:12px;}
.tcard__body .tcard__name{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;}
.tcard__body .tcard__meta{gap:6px 16px;}
.tcard__body .btn{align-self:flex-start;}
@media (min-width:640px){
  .catalog__main--narrow .tcard{flex-direction:row;align-items:flex-start;}
  .tcard__avatar{flex:0 0 14rem;width:14rem;}
  .tcard__body{flex:1 1 auto;}
}

.catalog__back{display:inline-block;margin-bottom:16px;
  font-size:.875rem;font-weight:600;color:var(--c-accent);}
.catalog__back:hover{text-decoration:underline;}

/* ---- Чипы курсов (label-шкала: xs semibold muted, §3) ---- */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.chip{padding:4px 10px;border-radius:var(--r-full);background:var(--c-surface-2);
  font-size:.75rem;font-weight:600;color:var(--c-muted);}

/* ---- Секции детальной анкеты ---- */
.tsection{margin-top:24px;}
.tsection h2{margin:0 0 8px;font-size:1.125rem;font-weight:600;color:var(--c-text);}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
  font-size:.875rem;line-height:1.5;color:var(--c-text);}
.muted{color:var(--c-muted);}

/* ---- Аватар: фото 1:1 или монограмма (порт TeacherAvatar.vue) ---- */
.tavatar{position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;
  border-radius:var(--r-lg);background:var(--c-surface-2);}
.tavatar__img{width:100%;height:100%;object-fit:cover;}
.tavatar__mono{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;background:var(--mono-bg);color:var(--mono-fg);}
.tavatar__initials{font-size:2.25rem;font-weight:700;letter-spacing:.02em;}
.tavatar__note{position:absolute;right:.5rem;bottom:.25rem;
  font-size:1.875rem;opacity:.25;line-height:1;}

/* ---- Футер (общий партиал index/show) ---- */
.catalog__footer{margin-top:48px;border-top:1px solid var(--c-border);
  background:var(--c-surface);}
.catalog__footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  max-width:72rem;margin-inline:auto;padding:24px 16px;}
.catalog__footer-brand{display:flex;flex-direction:column;gap:2px;margin-right:auto;}
.catalog__footer-name{font-size:1.125rem;font-weight:700;color:var(--c-text);}
.catalog__footer-tagline{font-size:.75rem;font-weight:600;color:var(--c-muted);}
.catalog__footer-nav{display:flex;flex-wrap:wrap;gap:8px 20px;}
.catalog__footer-link{font-size:.875rem;font-weight:600;color:var(--c-accent);}
.catalog__footer-link:hover{text-decoration:underline;}
.catalog__footer-cta{flex:0 0 auto;white-space:nowrap;}
@media (max-width:400px){
  .catalog__footer-cta{width:100%;}
}

/* ---- Reduced motion: гасим все переходы (The Two-Theme Rule + a11y §PRODUCT) ---- */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}