/* ФТФ ТГУ — фирменные токены и классы. Тёмная тема по фирменному стилю.
   Классы с префиксом ftf- применяются только явно: в HTML-блоках (T123), нулевых блоках и коде.
   Глобальные стили Тильды (типографика, кнопки) задаются в интерфейсе; здесь — их копия для HTML-блоков
   и то, чего в интерфейсе нет: маркер, скошенный угол, градиентный текст, списки, бейдж.
   В конце — правила для шаблонных блоков (карточки TE600). */

:root {
  --ftf-bg: #151515;          /* фон страницы и блоков */
  --ftf-surface: #252525;     /* карточки, вторая плоскость */
  --ftf-surface-hover: #2F2F2F;
  --ftf-text: #FFFFFF;        /* основной текст */
  --ftf-muted: #A0A0A0;       /* вторичный текст, подписи */
  --ftf-line: #3A3A3A;        /* разделители */
  --ftf-accent: #564CD5;
  --ftf-accent-hover: #566BDC;
  --ftf-cyan: #59DBF8;
  --ftf-grad: linear-gradient(90deg, #59DBF8 0%, #564CD5 100%);
  --ftf-font-head: 'TTFirs', Arial, sans-serif;
  --ftf-font-text: 'Circe', Arial, sans-serif;
}

/* Типографика: повторяет глобальные стили Тильды */
.ftf-h1, .ftf-h2, .ftf-h3 { margin: 0; font-family: var(--ftf-font-head); font-weight: 700; text-transform: uppercase; color: var(--ftf-text); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.ftf-h1 { font-size: 40px; line-height: 1; }
.ftf-h2 { font-size: 32px; line-height: 1.1; }
.ftf-h3 { font-size: 24px; line-height: 1.1; }
.ftf-lead, .ftf-text, .ftf-small, .ftf-label, .ftf-num { margin: 0; font-family: var(--ftf-font-text); color: var(--ftf-text); }
.ftf-lead { font-size: 28px; line-height: 1.2; font-weight: 400; }
.ftf-text { font-size: 18px; line-height: 1.2; font-weight: 400; }
.ftf-small { font-size: 14px; line-height: 1.2; font-weight: 400; }
.ftf-label { font-size: 18px; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ftf-num { font-size: 32px; line-height: 0.95; font-weight: 400; }
.ftf-muted { color: var(--ftf-muted); }

@media (max-width: 639px) {
  .ftf-h1 { font-size: 24px; }
  .ftf-h2 { font-size: 20px; }
  .ftf-h3 { font-size: 20px; }
  .ftf-lead { font-size: 20px; }
  .ftf-text { font-size: 16px; }
  .ftf-label { font-size: 16px; }
  .ftf-num { font-size: 28px; }
}

/* Ссылки в HTML-блоках: белые с подчёркиванием, ховер — акцент */
.ftf-link { color: var(--ftf-text); text-decoration: underline; text-underline-offset: 0.15em; transition: color 0.2s; }
.ftf-link:hover { color: var(--ftf-accent); }

/* Кнопки: повторяют глобальные стили «Кнопка акцент» и «Второстепенная» */
.ftf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 48px; padding: 0 28px;
  border: 1px solid var(--ftf-accent); border-radius: 0;
  background: var(--ftf-accent); color: #FFFFFF;
  font-family: var(--ftf-font-text); font-size: 14px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.ftf-btn:hover { background: var(--ftf-accent-hover); border-color: var(--ftf-accent-hover); color: #FFFFFF; }
.ftf-btn--secondary { background: transparent; border-color: var(--ftf-text); color: var(--ftf-text); }
.ftf-btn--secondary:hover { background: var(--ftf-text); border-color: var(--ftf-text); color: var(--ftf-bg); }
@media (max-width: 639px) { .ftf-btn { height: 44px; padding: 0 20px; } }

/* Маркер-выделение: белый Circe Bold на фиолетовой плашке */
.ftf-marker {
  padding: 0.04em 0.22em; background: var(--ftf-accent); color: #FFFFFF; font-weight: 700;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Градиентный текст — для заголовков и крупных цифр */
.ftf-grad-text {
  background: var(--ftf-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Скошенный угол (правый нижний). Рамка = фон внешнего слоя, заливка = ::before.
   Настройки: --c размер скоса, --bw толщина рамки, --bc цвет рамки, --fill цвет внутри. */
.ftf-chamfer {
  --c: 24px; --bw: 1px; --bc: var(--ftf-grad); --fill: var(--ftf-bg);
  position: relative; isolation: isolate; box-sizing: border-box; padding: 24px;
  background: var(--bc); color: var(--ftf-text);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
.ftf-chamfer::before {
  content: ''; position: absolute; inset: var(--bw); z-index: -1; background: var(--fill);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c) + var(--bw) * 0.586), calc(100% - var(--c) + var(--bw) * 0.586) 100%, 0 100%);
}
.ftf-chamfer--accent { --bc: var(--ftf-accent); }
.ftf-chamfer--line { --bc: var(--ftf-text); }
.ftf-chamfer--surface { --fill: var(--ftf-surface); }
.ftf-chamfer--fill { --bc: var(--ftf-accent); --fill: var(--ftf-accent); color: #FFFFFF; }
.ftf-chamfer--fill * { color: inherit; }
@media (max-width: 639px) { .ftf-chamfer { --c: 16px; padding: 16px; } }

/* Список с квадратными маркерами */
.ftf-list { margin: 0; padding: 0; list-style: none; }
.ftf-list > li { position: relative; margin: 0 0 0.6em; padding-left: 1.3em; }
.ftf-list > li::before {
  content: ''; position: absolute; left: 0; top: 0.35em;
  width: 0.5em; height: 0.5em; background: var(--ftf-accent);
}

/* Бейдж «базовое высшее образование | 5 лет»: span.ftf-badge.ftf-chamfer с двумя span внутри.
   Как в гайде: левая часть — белая плашка, правая — белый контур. */
.ftf-badge {
  --c: 10px; --bw: 1px; --bc: var(--ftf-text); --fill: var(--ftf-bg);
  display: inline-flex; align-items: stretch; padding: 0;
  font-family: var(--ftf-font-text); font-size: 14px; line-height: 1; color: var(--ftf-text);
}
.ftf-badge.ftf-chamfer { padding: 0; }
.ftf-badge > span { display: inline-flex; align-items: center; padding: 8px 14px; }
.ftf-badge > span:first-child { background: var(--ftf-text); color: var(--ftf-bg); }
.ftf-badge > span:last-child { padding-right: calc(14px + var(--c) / 2); }

/* Поверхность второго плана */
.ftf-surface { background: var(--ftf-surface); }

/* Нулевые блоки: ссылка, заданная на весь текстовый элемент, — без подчёркивания (как у кнопок) */
.t396 .tn-atom > a[style*="color: inherit"] { text-decoration: none; box-shadow: none; }
/* Кликабельная группа (Тильда делает её тегом ) — без подчёркивания и цвета ссылки у текстов внутри */
.t396 a.tn-group { text-decoration: none; color: inherit; box-shadow: none; }

/* Шаблонные карточки TE600 (T650) — везде со скошенным углом и градиентной рамкой.
   Цвета блока (фон #151515, карточки #252525, белый текст) заданы в настройках блоков;
   рамка = фон карточки, заливка = ::before. */
.t650 .t650__container .t-card__col .t650__inner-col {
  --c: 24px; --bw: 1px; --bc: var(--ftf-grad); --fill: var(--ftf-bg); --fill-hover: var(--ftf-surface);
  position: relative; isolation: isolate; border-radius: 0 !important;
  background: var(--bc) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
.t650 .t650__container .t-card__col .t650__inner-col::before {
  content: ''; position: absolute; inset: var(--bw); z-index: -1;
  background: var(--fill); transition: background-color 0.2s;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c) + var(--bw) * 0.586), calc(100% - var(--c) + var(--bw) * 0.586) 100%, 0 100%);
}
.t650 .t650__container .t-card__col .t650__inner-col:hover::before { background: var(--fill-hover); }
@media (max-width: 639px) {
  .t650 .t650__container .t-card__col .t650__inner-col { --c: 16px; }
}

/* Карточки лент (FD301N и «Смотрите также») — тот же скошенный угол с градиентной рамкой.
   Заливка #151515 и ховер #252525 заданы в настройках блока и повторены здесь в ::before. */
.t-cms__card.t-cms__card_tile {
  --c: 24px; --bw: 1px; --bc: var(--ftf-grad); --fill: var(--ftf-bg); --fill-hover: var(--ftf-surface);
  position: relative; isolation: isolate; border-radius: 0 !important; box-shadow: none !important;
  background: var(--bc) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
.t-cms__card.t-cms__card_tile::before {
  content: ''; position: absolute; inset: var(--bw); z-index: -1;
  background: var(--fill); transition: background-color 0.2s;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c) + var(--bw) * 0.586), calc(100% - var(--c) + var(--bw) * 0.586) 100%, 0 100%);
}
.t-cms__card.t-cms__card_tile:hover::before { background: var(--fill-hover); }
@media (max-width: 639px) {
  .t-cms__card.t-cms__card_tile { --c: 16px; }
}

/* «Деканат» на «Контактах» (T1370, свой HTML с классами vbc-*): тёмная тема без правки кода блока.
   Префикс .t1370 перебивает стили внутри блока. */
.t1370 .vbc-section {
  --vb-ink: var(--ftf-text); --vb-muted: var(--ftf-muted); --vb-accent: var(--ftf-cyan); --vb-card-bg: var(--ftf-surface);
  background: transparent;
}
.t1370 .vbc-heading {
  font-family: var(--ftf-font-head); font-size: 32px; font-weight: 700; line-height: 1.1;
  letter-spacing: 0; text-transform: uppercase;
}
.t1370 .vbc-card, .t1370 .vbc-card__label { border-radius: 0; }
.t1370 .vbc-card__label { background: var(--ftf-surface); box-shadow: none; }
.t1370 .vbc-card__meta a { color: var(--ftf-text); transition: color 0.2s; }
.t1370 .vbc-card__meta a:hover { color: var(--ftf-cyan); }
@media (max-width: 639px) { .t1370 .vbc-heading { font-size: 20px; } }

/* Баннер раздела (нулевой блок на автолэйауте, build_banner.py). У групп нет своих классов,
   поэтому скос задан по id: Тильда кладёт фон группы на #molecule-, а при копировании блока
   id сохраняются. Рамка = градиентная группа с отступом 1px, внутри неё карточка #151515.
   Бейдж: белая группа с отступом 1px, правая часть — тёмный текст .ftf-zcut-in. */
.t396 #molecule-1792855881994000001,
.t396 #molecule-1792855881994000002,
.t396 #molecule-1792855881994000004,
.t396 .ftf-zcut-in .tn-atom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
.t396 #molecule-1792855881994000001 { --c: 24px; }
.t396 #molecule-1792855881994000002 { --c: calc(24px - 1px * 0.586); }
.t396 #molecule-1792855881994000004 { --c: 10px; }
/* Блок растянут по окну (автолэйаут «window»); на десктопе рамка не шире сетки карточек ниже */
.t396 .tn-group[data-group-id="1792855881994000001"] { max-width: 1160px; }
.t396 .ftf-zcut-in .tn-atom { --c: calc(10px - 1px * 0.586); }
/* Фото на десктопе тянется по высоте текстовой колонки (не ниже 360px) и обрезается скосом карточки */
@media (min-width: 960px) {
  .t396 .ftf-zcut-photo { align-self: stretch !important; height: auto !important; min-height: 360px; }
  .t396 .ftf-zcut-photo .tn-atom { position: absolute; inset: 0; height: 100%; }
}
/* На планшете и телефоне фото сверху, у него свой скос; карточка режет низ текстовой части */
@media (max-width: 959px) {
  .t396 #molecule-1792855881994000001 { --c: 16px; }
  .t396 #molecule-1792855881994000002 { --c: calc(16px - 1px * 0.586); }
  .t396 .ftf-zcut-photo .tn-atom {
    --c: 16px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
  }
}

/* Главная, блок «Аудитории» (нулевой блок, build_home_audience.py; id групп закреплены).
   Блок растянут по окну, фото не шире сетки; ховер карточки — заливка #252525. */
.t396 .tn-group[data-group-id="1792858600000000001"] { max-width: 1153px; }
.t396 #molecule-1792858600000000001 { background-size: cover; background-position: center; }
.t396 #molecule-1792858600000000006,
.t396 #molecule-1792858600000000012,
.t396 #molecule-1792858600000000018 { transition: background-color 0.2s; }
.t396 .tn-group[data-group-id="1792858600000000005"]:hover #molecule-1792858600000000006,
.t396 .tn-group[data-group-id="1792858600000000011"]:hover #molecule-1792858600000000012,
.t396 .tn-group[data-group-id="1792858600000000017"]:hover #molecule-1792858600000000018 { background-color: var(--ftf-surface) !important; }
/* Скошенный угол карточек: рамка (градиентная группа, отступ 2px) и карточка внутри неё.
   Скос карточки меньше на 2px × 0.586, чтобы рамка на диагонали была той же толщины. */
.t396 #molecule-1792858600000000005,
.t396 #molecule-1792858600000000011,
.t396 #molecule-1792858600000000017,
.t396 #molecule-1792858600000000006,
.t396 #molecule-1792858600000000012,
.t396 #molecule-1792858600000000018 {
  --c: 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%);
}
.t396 #molecule-1792858600000000006,
.t396 #molecule-1792858600000000012,
.t396 #molecule-1792858600000000018 { --c: calc(24px - 2px * 0.586); }
@media (max-width: 639px) {
  .t396 #molecule-1792858600000000005,
  .t396 #molecule-1792858600000000011,
  .t396 #molecule-1792858600000000017 { --c: 16px; }
  .t396 #molecule-1792858600000000006,
  .t396 #molecule-1792858600000000012,
  .t396 #molecule-1792858600000000018 { --c: calc(16px - 2px * 0.586); }
}
/* «Перейти →» при наведении на карточку — голубой */
.t396 .tn-elem[data-elem-id="1792858600000000010"] .tn-atom,
.t396 .tn-elem[data-elem-id="1792858600000000016"] .tn-atom,
.t396 .tn-elem[data-elem-id="1792858600000000022"] .tn-atom { transition: color 0.2s; }
.t396 .tn-group[data-group-id="1792858600000000005"]:hover .tn-elem[data-elem-id="1792858600000000010"] .tn-atom,
.t396 .tn-group[data-group-id="1792858600000000011"]:hover .tn-elem[data-elem-id="1792858600000000016"] .tn-atom,
.t396 .tn-group[data-group-id="1792858600000000017"]:hover .tn-elem[data-elem-id="1792858600000000022"] .tn-atom { color: var(--ftf-cyan) !important; }