/*
Theme Name: Slugger
Description: Тема бойцовского клуба Slugger. Значения из брендбука и дизайн-пакета — docs/DESIGN-HANDOFF.md.
Version: 0.36.8
Requires PHP: 8.2
*/

/* ==========================================================================
   Основание: цвета, шрифты, размеры. Всё из брендбука, отсебятины нет.
   Семь решений, которые нельзя «чинить», перечислены в docs/DESIGN-HANDOFF.md.
   ========================================================================== */

:root {
  /* Фирменные */
  --slg-black: #000000;
  --slg-orange: #FF7420;
  --slg-gray: #353535;
  --slg-light: #DADADA;
  --slg-white: #FFFFFF;

  /* Служебные поверхности */
  --slg-surface: #141414;          /* карточка, модалка */
  --slg-surface-hover: #191919;
  --slg-footer: #0A0908;
  --slg-class-card: #17140F;       /* карточка занятия */
  --slg-class-card-hover: #1C1813;
  --slg-wordmark: #141210;         /* словомарк в подвале */
  --slg-watermark: #26231F;

  /* Текст: иерархия контраста. Ниже #8C8C8C НЕ опускаться — не читается. */
  --slg-text: #FFFFFF;
  --slg-text-1: #EDEDED;
  --slg-text-2: #C4C4C4;
  --slg-text-3: #B4B4B4;
  --slg-text-4: #A6A6A6;
  --slg-text-muted: #8C8C8C;

  /* Границы */
  --slg-hairline: rgba(255, 255, 255, .09);
  --slg-divider: rgba(255, 255, 255, .07);
  --slg-input-border: rgba(255, 255, 255, .14);
  --slg-accent-hover: rgba(255, 116, 32, .5);
  --slg-accent-soft-bg: rgba(255, 116, 32, .1);
  --slg-accent-soft-border: rgba(255, 116, 32, .3);

  /* Шрифты. Montserrat в запасе исторически — фолбэк для кириллицы. */
  --slg-display: 'Kanit', 'Montserrat', sans-serif;
  --slg-body: 'Inter Tight', system-ui, sans-serif;

  /* Размеры */
  --slg-radius-pill: 100px;
  --slg-radius-lg: 20px;
  --slg-radius-md: 14px;
  --slg-radius-sm: 12px;
  --slg-radius-xs: 9px;
  --slg-header-h: 70px;
  --slg-container: 1200px;
  --slg-container-wide: 1440px;
  --slg-auth-width: 480px; /* страница входа (F-012) — используется и содержимым, и крошкой */
  --slg-transition: .15s;

  /* Насыщенность шрифта */
  --slg-fw-regular: 400;
  --slg-fw-medium: 500;
  --slg-fw-semibold: 600;
  --slg-fw-bold: 700;
  --slg-fw-black: 800;

  /* Размер текста. Имя — по значению, не по роли: часть значений измерена и подписана как
     точное совпадение с макетом (см. комментарий у font-size: 10px в правилах ниже) — слияние
     близких чисел в общую «лесенку» было бы решением по виду, не заказанным явно (T-055,
     найдено при реализации 2026-08-25). Названо — долг перед сенсором закрыт без единого
     пикселя визуальной правки. */
  --slg-fs-10: 10px;
  --slg-fs-10-5: 10.5px;
  --slg-fs-11: 11px;
  --slg-fs-11-5: 11.5px;
  --slg-fs-12: 12px;
  --slg-fs-12-5: 12.5px;
  --slg-fs-13: 13px;
  --slg-fs-13-5: 13.5px;
  --slg-fs-14: 14px;
  --slg-fs-14-5: 14.5px;
  --slg-fs-15: 15px;
  --slg-fs-15-5: 15.5px;
  --slg-fs-16: 16px;
  --slg-fs-17: 17px;
  --slg-fs-18: 18px;
  --slg-fs-19: 19px;
  --slg-fs-20: 20px;
  --slg-fs-21: 21px;
  --slg-fs-22: 22px;
  --slg-fs-23: 23px;
  --slg-fs-24: 24px;
  --slg-fs-26: 26px;
  --slg-fs-30: 30px;
  --slg-fs-32: 32px;
  --slg-fs-46: 46px;

  /* Плавные заголовки (clamp — минимум/масштаб/максимум) — каждое выражение уникально, используется ровно один раз, названо мимо слияния (тот же метод, что у остального размера текста). */
  --slg-fs-clamp-42-9-128: clamp(42px, 9vw, 128px);
  --slg-fs-clamp-34-5-58: clamp(34px, 5vw, 58px);
  --slg-fs-clamp-28-3-6-44: clamp(28px, 3.6vw, 44px);
  --slg-fs-clamp-140-22-340: clamp(140px, 22vw, 340px);
  --slg-fs-clamp-26-3-5-40: clamp(26px, 3.5vw, 40px);
  --slg-fs-clamp-64-17-5-250: clamp(64px, 17.5vw, 250px);
  --slg-fs-clamp-32-4-5-54: clamp(32px, 4.5vw, 54px);
  --slg-fs-clamp-30-4-5-56: clamp(30px, 4.5vw, 56px);
  --slg-fs-clamp-24-2-4-30: clamp(24px, 2.4vw, 30px);
  /* Межстрочный интервал — тот же принцип: имя, не слияние. */
  --slg-lh--8: .8;
  --slg-lh--92: .92;
  --slg-lh-1: 1;
  --slg-lh-1-02: 1.02;
  --slg-lh-1-1: 1.1;
  --slg-lh-1-15: 1.15;
  --slg-lh-1-2: 1.2;
  --slg-lh-1-25: 1.25;
  --slg-lh-1-5: 1.5;
  --slg-lh-1-55: 1.55;
  --slg-lh-1-65: 1.65;
  --slg-lh-1-7: 1.7;

  /* Отступ/промежуток (margin/padding/gap) — имя по значению, не по роли, тот же метод,
     что у размера текста выше: T-055 часть 2 (2026-09-24). Слияние близких чисел НЕ
     сделано — среди значений уже нашлись измеренные под макет (style.css:311-313,
     1998), сливать их чужим именем было бы неверно; названо каждое наблюдённое
     значение, долг перед сенсором закрыт без единого пикселя визуальной правки. */
  --slg-space-0-0-12: 0 0 12px; /* 5× */
  --slg-space-0-0-8: 0 0 8px; /* 3× */
  --slg-space-0-0-10: 0 0 10px; /* 2× */
  --slg-space-9: 9px; /* 5× */
  --slg-space-18-34: 18px 34px; /* 1× */
  --slg-space-11-20: 11px 20px; /* 2× */
  --slg-space-8: 8px; /* 9× */
  --slg-space-3: 3px; /* 5× */
  --slg-space-6-13: 6px 13px; /* 2× */
  --slg-space-12: 12px; /* 11× */
  --slg-space-0-auto: 0 auto; /* 7× */
  --slg-space-5-52-5-18: 5px 52px 5px 18px; /* 1× */
  --slg-space-7-15: 7px 15px; /* 1× */
  --slg-space-18: 18px; /* 5× */
  --slg-space-0-18: 0 18px; /* 1× */
  --slg-space-10: 10px; /* 16× */
  --slg-space-22: 22px; /* 7× */
  --slg-space-6-0: 6px 0; /* 1× */
  --slg-space-14: 14px; /* 11× */
  --slg-space-2: 2px; /* 7× */
  --slg-space-6-7: 6px 7px; /* 1× */
  --slg-space-56-30: 56px 30px; /* 1× */
  --slg-space-56: 56px; /* 1× */
  --slg-space-20: 20px; /* 5× */
  --slg-space-26: 26px; /* 7× */
  --slg-space-26-0-46: 26px 0 46px; /* 1× */
  --slg-space-34: 34px; /* 4× */
  --slg-space-0-30-70: 0 30px 70px; /* 1× */
  --slg-space-0-0-16: 0 0 16px; /* 5× */
  --slg-space-18-0-0: 18px 0 0; /* 2× */
  --slg-space-26-0-0: 26px 0 0; /* 1× */
  --slg-space-14-42: 14px 42px; /* 1× */
  --slg-space-40-0-0: 40px 0 0; /* 1× */
  --slg-space-14-26: 14px 26px; /* 1× */
  --slg-space-28: 28px; /* 1× */
  --slg-space-4-0-0: 4px 0 0; /* 3× */
  --slg-space-10-0-0: 10px 0 0; /* 1× */
  --slg-space-5: 5px; /* 2× */
  --slg-space-11: 11px; /* 1× */
  --slg-space-0-auto-32: 0 auto 32px; /* 1× */
  --slg-space-6: 6px; /* 4× */
  --slg-space-0-auto-44: 0 auto 44px; /* 1× */
  --slg-space-9-16: 9px 16px; /* 2× */
  --slg-space-32-28: 32px 28px; /* 1× */
  --slg-space-4: 4px; /* 6× */
  --slg-space-0-0-24: 0 0 24px; /* 1× */
  --slg-space-6-0-26: 6px 0 26px; /* 1× */
  --slg-space-0-0-26: 0 0 26px; /* 2× */
  --slg-space-13: 13px; /* 1× */
  --slg-space-16-20: 16px 20px; /* 1× */
  --slg-space-26-24: 26px 24px; /* 1× */
  --slg-space-0-0-6: 0 0 6px; /* 2× */
  --slg-space-26-24-0: 26px 24px 0; /* 1× */
  --slg-space-16-24: 16px 24px; /* 1× */
  --slg-space-20-24: 20px 24px; /* 1× */
  --slg-space-7: 7px; /* 2× */
  --slg-space-15: 15px; /* 1× */
  --slg-space-8-0-0: 8px 0 0; /* 2× */
  --slg-space-13-15: 13px 15px; /* 1× */
  --slg-space-22-26: 22px 26px; /* 1× */
  --slg-space-neg22-neg22-8: -22px -22px 8px; /* 1× */
  --slg-space-16: 16px; /* 6× */
  --slg-space-0-0-30: 0 0 30px; /* 1× */
  --slg-space-8-15: 8px 15px; /* 1× */
  --slg-space-20-0-40: 20px 0 40px; /* 1× */
  --slg-space-20-0-8: 20px 0 8px; /* 1× */
  --slg-space-0-0-18: 0 0 18px; /* 2× */
  --slg-space-34-0-12: 34px 0 12px; /* 2× */
  --slg-space-30: 30px; /* 4× */
  --slg-space-22-30-0: 22px 30px 0; /* 1× */
  --slg-space-0-0-22: 0 0 22px; /* 1× */
  --slg-space-11-16: 11px 16px; /* 2× */
  --slg-space-0-0-14: 0 0 14px; /* 5× */
  --slg-space-13-0: 13px 0; /* 1× */
  --slg-space-8-16: 8px 16px; /* 1× */
  --slg-space-7-18: 7px 18px; /* 1× */
  --slg-space-2-0: 2px 0; /* 1× */
  --slg-space-46-18-18: 46px 18px 18px; /* 1× */
  --slg-space-neg0-14em: -0.14em; /* 1× */
  --slg-space-0-18-18: 0 18px 18px; /* 1× */
  --slg-space-18-0-26: 18px 0 26px; /* 1× */
  --slg-space-13-14: 13px 14px; /* 2× */
  --slg-space-34-30: 34px 30px; /* 1× */
  --slg-space-24: 24px; /* 1× */
  --slg-space-5-10: 5px 10px; /* 1× */
  --slg-space-6-12: 6px 12px; /* 1× */
  --slg-space-60-34: 60px 34px; /* 1× */
  --slg-space-40-20: 40px 20px; /* 1× */
  --slg-space-16-0: 16px 0; /* 1× */
  --slg-space-0-30: 0 30px; /* 1× */
  --slg-space-4-9: 4px 9px; /* 1× */
  --slg-space-14-18: 14px 18px; /* 1× */
  --slg-space-12-14: 12px 14px; /* 1× */
  --slg-space-10-14: 10px 14px; /* 1× */
  --slg-space-0-0-4: 0 0 4px; /* 1× */
  --slg-space-11-13: 11px 13px; /* 1× */
  --slg-space-18-20: 18px 20px; /* 1× */
  --slg-space-12-16: 12px 16px; /* 1× */
  --slg-space-6-0-0: 6px 0 0; /* 2× */
  --slg-space-14-0-0: 14px 0 0; /* 1× */
  --slg-space-16-0-0: 16px 0 0; /* 1× */
  --slg-space-15-14: 15px 14px; /* 1× */
  --slg-space-6-14: 6px 14px; /* 1× */
  --slg-space-26-0-10: 26px 0 10px; /* 1× */
  --slg-space-0-0-20: 0 0 20px; /* 1× */
  --slg-space-10-12: 10px 12px; /* 1× */
  --slg-space-2-0-0: 2px 0 0; /* 1× */
  --slg-space-3-8: 3px 8px; /* 1× */
}

/* ==========================================================================
   Сброс и основа
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--slg-black);
  color: var(--slg-text);
  font-family: var(--slg-body);
  font-size: var(--slg-fs-14-5);
  font-weight: var(--slg-fw-medium);
  line-height: var(--slg-lh-1-55);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--slg-orange); outline-offset: 2px; }

@keyframes slgFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

main { animation: slgFade .4s ease both; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Типографика
   ========================================================================== */

/* Все значения ниже сняты со свёрстанного шаблона дизайнера
   (`tmp/design_handoff_slugger_wordpress/preview/index.html`), открытого в браузере.
   Шаблон — первоисточник. Таблица в README того же пакета говорит про наклон и
   прописные у всех заголовков; сама вёрстка этого не делает, и прав шаблон. */

.slg-h1 {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-black);
  /* Верх и наклон формулы — из шаблона. Нижняя граница своя: в шаблоне текст
     первого экрана короткий чешский, а у Варшавы стоит «OTWIERAMY W LISTOPADZIE»,
     и при 52px это слово не влезает в телефон шириной 320. */
  font-size: var(--slg-fs-clamp-42-9-128);
  line-height: var(--slg-lh--92);
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
}

/* Заголовок страницы: без прописных и на ступень легче первого экрана. */
h1,
.slg-h2 {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-clamp-34-5-58);
  line-height: var(--slg-lh-1);
  letter-spacing: -.02em;
  margin: var(--slg-space-0-0-12);
}

/* Заголовок секции — ещё ступенью ниже. Прописные остаются только там, где они
   есть в шаблоне: первый экран, призыв в конце, кнопки, надзаголовки. */
h2 {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-clamp-28-3-6-44);
  line-height: var(--slg-lh-1-02);
  letter-spacing: -.02em;
  margin: var(--slg-space-0-0-12);
}

h3,
.slg-h3 {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-21);
  line-height: var(--slg-lh-1-1);
  letter-spacing: -.01em;
  margin: var(--slg-space-0-0-8);
}

.slg-kicker {
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-12);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slg-text-2);
  margin: var(--slg-space-0-0-10);
}

.slg-lead { font-size: var(--slg-fs-16); font-weight: var(--slg-fw-regular); line-height: var(--slg-lh-1-55); color: var(--slg-text-3); }
.slg-small { font-size: var(--slg-fs-12-5); font-weight: var(--slg-fw-semibold); color: var(--slg-text-4); }
.slg-muted { font-size: var(--slg-fs-12-5); color: var(--slg-text-muted); }

/* ==========================================================================
   Кнопки. Наведение — только яркость, никаких сдвигов вверх.
   ========================================================================== */

.slg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--slg-space-9);
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-15);
  text-transform: uppercase;
  letter-spacing: .01em;
  padding: var(--slg-space-18-34);
  min-height: 44px;                /* тач-цель не меньше 44px */
  border-radius: var(--slg-radius-pill);
  background: var(--slg-orange);
  color: var(--slg-black);
  transition: filter var(--slg-transition);
}

.slg-btn:hover,
.slg-btn:focus-visible { filter: brightness(1.08); }

.slg-btn--sm { font-size: var(--slg-fs-13); padding: var(--slg-space-11-20); }

/* Тихая ссылка рядом с главной кнопкой. Пары «залитая + призрачная» нет
   намеренно — её убрали при ревью дизайна. */
.slg-link-quiet {
  display: inline-flex;
  align-items: center;
  gap: var(--slg-space-8);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-14-5);
  color: var(--slg-text-1);
  border-bottom: 2px solid rgba(255, 255, 255, .28);
  padding-bottom: var(--slg-space-3);
  transition: border-color var(--slg-transition), color var(--slg-transition);
}

.slg-link-quiet:hover { border-color: var(--slg-orange); color: var(--slg-white); }

.slg-badge {
  display: inline-flex;
  align-items: center;
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-11-5);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--slg-space-6-13);
  border-radius: var(--slg-radius-pill);
  background: var(--slg-accent-soft-bg);
  border: 1px solid var(--slg-accent-soft-border);
  color: var(--slg-orange);
}

/* ==========================================================================
   Полоса акции — самый верх, над шапкой. Кликается целиком.
   ========================================================================== */

.slg-promo { position: relative; background: var(--slg-orange); color: var(--slg-black); }

.slg-promo__inner {
  display: flex;
  align-items: center;
  gap: var(--slg-space-12);
  max-width: var(--slg-container-wide);
  margin: var(--slg-space-0-auto);
  /* Замер макета 2026-08-18: текст 13.5px вес 700, высота всей полосы 43px (у нас была 51).
     Высота выводится из оформления, а не из длины слова: кнопка 12px x высота строки плюс
     вертикальные отступы этой обёртки. Отступ уменьшен с 9 до 5, чтобы получить макетные 43.
     ШИРИНУ не закрепляем — она зависит от текста, который владелец меняет из панели. */
  padding: var(--slg-space-5-52-5-18);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-13-5);
  letter-spacing: -.01em;
}

.slg-promo__tag {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  /* Замер макета 2026-08-18: 10px, межбуквенное 1.4px (= .14em при 10px).
     Было 11px и .08em — значок выходил крупнее и плотнее макетного. */
  font-size: var(--slg-fs-10);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
  flex-shrink: 0;
}

.slg-promo__text { flex: 1; min-width: 0; }

.slg-promo__cta {
  flex-shrink: 0;
  background: var(--slg-black);
  color: var(--slg-white);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-12);
  padding: var(--slg-space-7-15);
  border-radius: var(--slg-radius-pill);
  transition: filter var(--slg-transition);
}

.slg-promo:hover .slg-promo__cta { filter: brightness(1.35); }

.slg-promo__close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--slg-radius-pill);
  color: var(--slg-black);
  opacity: .6;
  transition: opacity var(--slg-transition);
}

.slg-promo__close:hover { opacity: 1; }

/* ==========================================================================
   Шапка
   ========================================================================== */

.slg-head {
  display: flex;
  align-items: center;
  gap: var(--slg-space-18);
  max-width: var(--slg-container-wide);
  margin: var(--slg-space-0-auto);
  padding: var(--slg-space-0-18);
  min-height: var(--slg-header-h);
  border-bottom: 1px solid var(--slg-hairline);
}

.slg-brand { display: flex; align-items: center; gap: var(--slg-space-10); flex-shrink: 0; }
.slg-brand__mark { width: 34px; height: 34px; }

.slg-brand__word {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-black);
  font-style: italic;
  font-size: var(--slg-fs-20);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--slg-white);
}

.slg-nav { display: flex; align-items: center; gap: var(--slg-space-22); margin-left: var(--slg-space-22); }

.slg-nav a {
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-14);
  color: var(--slg-text-2);
  padding: var(--slg-space-6-0);
  border-bottom: 2px solid transparent;
  transition: color var(--slg-transition), border-color var(--slg-transition);
}

.slg-nav a:hover { color: var(--slg-white); }

.slg-nav a[aria-current] { color: var(--slg-white); border-bottom-color: var(--slg-orange); }

.slg-head__right { display: flex; align-items: center; gap: var(--slg-space-14); margin-left: auto; }

.slg-cities {
  display: flex;
  gap: var(--slg-space-2);
  padding: var(--slg-space-3);
  border-radius: var(--slg-radius-pill);
  background: rgba(255, 255, 255, .05);
}

.slg-cities a {
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-12);
  padding: var(--slg-space-6-13);
  border-radius: var(--slg-radius-pill);
  color: var(--slg-text-3);
  transition: background var(--slg-transition), color var(--slg-transition);
}

.slg-cities a:hover { color: var(--slg-white); }
.slg-cities a[aria-current] { background: var(--slg-white); color: var(--slg-black); }

.slg-langs { display: flex; gap: var(--slg-space-2); }

.slg-langs a {
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-12);
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: var(--slg-space-6-7);
  border-radius: var(--slg-radius-xs);
  color: var(--slg-text-4);
  transition: color var(--slg-transition);
}

.slg-langs a:hover { color: var(--slg-white); }
.slg-langs a[aria-current] { font-weight: var(--slg-fw-black); color: var(--slg-orange); }

.slg-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.slg-burger span { display: block; width: 20px; height: 2px; background: var(--slg-white); position: relative; }

.slg-burger span::before,
.slg-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--slg-white);
}

.slg-burger span::before { top: -6px; }
.slg-burger span::after { top: 6px; }

/* ==========================================================================
   Содержимое
   ========================================================================== */

.slg-wrap { max-width: var(--slg-container); margin: var(--slg-space-0-auto); padding: var(--slg-space-56-30); }

.slg-section { margin-top: var(--slg-space-56); }
.slg-section > h2 { margin-bottom: var(--slg-space-20); }

.slg-card {
  display: block;
  border: 1px solid var(--slg-hairline);
  background: var(--slg-surface);
  border-radius: var(--slg-radius-lg);
  padding: var(--slg-space-26);
  transition: background var(--slg-transition), border-color var(--slg-transition);
}

a.slg-card:hover { background: var(--slg-surface-hover); border-color: var(--slg-accent-hover); }

.slg-cta-row { display: flex; align-items: center; gap: var(--slg-space-26); flex-wrap: wrap; margin: var(--slg-space-26-0-46); }

.slg-club-teasers { margin-top: var(--slg-space-34); }
.slg-club-form { max-width: 560px; margin-top: var(--slg-space-26); }

.slg-h1 span { display: block; }

.slg-grid { display: grid; gap: var(--slg-space-18); }
.slg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.slg-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   Hero главной клуба
   ========================================================================== */

.slg-hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: flex-end;   /* содержимое прижато к низу */
  overflow: hidden;
  animation: slgFade .7s ease both;   /* hero появляется дольше остальных */
}

.slg-hero__media { position: absolute; inset: 0; }

.slg-hero__video { width: 100%; height: 100%; object-fit: cover; }

.slg-hero__media--empty { background: var(--slg-gray); }

/* Затемнение: сверху приглушить, снизу довести до чёрного, чтобы текст
   читался при любом кадре видео. */
.slg-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, .55) 0%,
    rgba(0, 0, 0, .2) 35%,
    rgba(0, 0, 0, .85) 82%,
    var(--slg-black) 100%
  );
}

.slg-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--slg-container);
  margin: var(--slg-space-0-auto);
  padding: var(--slg-space-0-30-70);
}

/* Крупная надпись SFC уходит за правый край — фирменный приём, не мусор. */
.slg-hero__watermark {
  position: absolute;
  right: -.06em;
  bottom: -.08em;
  z-index: 1;
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-black);
  font-style: italic;
  font-size: var(--slg-fs-clamp-140-22-340);
  line-height: var(--slg-lh--8);
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .09);
  user-select: none;
  pointer-events: none;
}

.slg-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--slg-space-9);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-13);
  color: var(--slg-text-1);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  margin: var(--slg-space-0-0-16);
}

.slg-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--slg-orange);
  flex-shrink: 0;
}

.slg-hero__sub {
  max-width: 520px;
  margin: var(--slg-space-18-0-0);
  font-size: var(--slg-fs-16);
  font-weight: var(--slg-fw-regular);
  color: var(--slg-text-1);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}

.slg-hero .slg-cta-row { margin: var(--slg-space-26-0-0); }

/* Строка показателей внизу hero. Числа настоящие (R-022…R-025). */
.slg-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--slg-space-14-42);
  margin: var(--slg-space-40-0-0);
  padding: 0;
}

.slg-stats__item { display: flex; flex-direction: column; gap: var(--slg-space-2); }

.slg-stats__value {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-black);
  font-size: var(--slg-fs-30);
  line-height: var(--slg-lh-1);
  /* Оранжевый, как в макете (замер 2026-08-18, docs/design/mockup-measured-2026-08-18.json).
     ПРОВЕРЕНО, а не предположено: класс встречается РОВНО в одном месте — внутри бегущей строки,
     и сама строка идёт отдельным блоком ПОСЛЕ первого экрана. Поверх видео его нет. Прежняя
     версия этого пояснения утверждала обратное («показатели лежат на видео») — выдумка, которая
     уехала бы в историю навсегда.
     Тень осталась от прежнего замысла и по макету НЕ сверялась: в замерах её нет ни с одной
     стороны. Трогать её отдельно, а не заодно. */
  color: var(--slg-orange);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}

.slg-stats__label {
  /* Замер макета 2026-08-18: 14px, вес 600, межбуквенное 0.7px, цвет #B4B4B4.
     Было 12.5px и #C4C4C4 — подпись выходила мельче и светлее макетной. */
  font-size: var(--slg-fs-14);
  font-weight: var(--slg-fw-semibold);
  letter-spacing: .05em;
  color: #B4B4B4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

@media (max-width: 860px) {
  .slg-stats { gap: var(--slg-space-14-26); margin-top: var(--slg-space-28); }
  .slg-stats__value { font-size: var(--slg-fs-23); }
}

@media (prefers-reduced-motion: reduce) {
  .slg-hero__video { display: none; }
}

@media (max-width: 860px) {
  .slg-hero { min-height: 520px; }
  .slg-hero__inner { padding-bottom: var(--slg-space-34); }
}

/* ==========================================================================
   Тарифы
   ========================================================================== */

.slg-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--slg-space-8);
  border: 1px solid var(--slg-hairline);
  background: var(--slg-surface);
  border-radius: var(--slg-radius-lg);
  padding: var(--slg-space-26);
  transition: border-color var(--slg-transition);
}

.slg-plan:hover { border-color: var(--slg-accent-hover); }

/* Выделяем один тариф рамкой, а не заливкой: оранжевый — акцент,
   а не фон (решение №7 дизайнера). */
.slg-plan--featured { border-color: var(--slg-accent-soft-border); }

/* Значок «популярное» вынесен в угол: иначе он раздвигает содержимое, и
   выделенная карточка съезжает вниз относительно соседних. Заметно глазом. */
.slg-plan .slg-badge { position: absolute; top: 18px; right: 18px; }

.slg-plan__name {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-22);
  line-height: var(--slg-lh-1-1);
  margin: 0;
}

.slg-plan__price {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-black);
  font-size: var(--slg-fs-32);
  line-height: var(--slg-lh-1);
  margin: var(--slg-space-4-0-0);
}

.slg-plan__note { margin: 0; font-size: var(--slg-fs-13-5); color: var(--slg-text-3); }

.slg-plan__meta {
  list-style: none;
  margin: var(--slg-space-10-0-0);
  padding: 0;
  display: grid;
  gap: var(--slg-space-5);
  font-size: var(--slg-fs-12-5);
  color: var(--slg-text-muted);
}

/*
 * T-048: раньше `margin-top: auto` прижимал к низу карточки саму кнопку — она была прямым
 * ребёнком flex-колонки `.slg-plan`. Кнопок стало две, обе легли в обёртку `.slg-plan__actions`,
 * и теперь именно обёртка — прямой ребёнок и держит прижатие; кнопкам эта строка больше не нужна.
 */
.slg-plan__actions { display: flex; flex-direction: column; gap: var(--slg-space-8); margin-top: auto; padding-top: var(--slg-space-11); }
.slg-plan__cta { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Страница тарифов: карточка целиком по макету. Стили ниже действуют только
   внутри `.slg-plans` — на главной та же карточка остаётся короткой.
   -------------------------------------------------------------------------- */

.slg-page-head { max-width: 640px; margin: var(--slg-space-0-auto-32); }
.slg-page-head h1 { margin-bottom: var(--slg-space-12); }

.slg-eyebrow--quiet { color: var(--slg-text-1); }
.slg-eyebrow__star { color: var(--slg-orange); margin-right: var(--slg-space-9); }

.slg-muted__link { color: var(--slg-text-1); border-bottom: 1px solid var(--slg-input-border); }
.slg-muted__link:hover { color: var(--slg-orange); border-color: var(--slg-orange); }

/* Переключатель видов. Это ссылки, а не скрипт: работают без JavaScript и
   открываются по ссылке. В поиск виды не идут: «этот же адрес» на странице
   всегда чистый, поэтому поисковик считает их одной страницей. */
.slg-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--slg-space-6);
  width: fit-content;
  margin: var(--slg-space-0-auto-44);
  padding: var(--slg-space-5);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--slg-hairline);
  border-radius: var(--slg-radius-pill);
}

.slg-tabs__item {
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-12-5);
  padding: var(--slg-space-9-16);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--slg-radius-pill);
  background: rgba(255, 255, 255, .05);
  color: var(--slg-text-3);
  transition: background var(--slg-transition), color var(--slg-transition);
}

.slg-tabs__item:hover { color: var(--slg-white); }

.slg-tabs__item--on {
  background: var(--slg-orange);
  color: var(--slg-black);
}

.slg-plans { align-items: stretch; }

/* T-007: семь тарифов в сетке по три оставляют последний ряд из одной
   карточки, прижатой влево. Если карточка стоит первой в своём ряду
   (3n+1) И одновременно последняя в списке — значит в её ряду больше
   никого нет; центрируем в средней колонке. Работает при любом числе
   карточек, кратном 3+1 (7, 10…), не только при ровно семи. */
.slg-plans.slg-grid--3 > :nth-child(3n+1):last-child { grid-column: 2 / 3; }

.slg-plans .slg-plan { gap: 0; padding: var(--slg-space-32-28); }

/* Значок «популярное» — по центру верхней грани, как в макете. Просвет между
   рядами 18px, значок выступает на 12px: на соседнюю карточку не залезает. */
.slg-plans .slg-plan__badge {
  top: -12px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  background: var(--slg-orange);
  border-color: transparent;
  color: var(--slg-black);
  font-size: var(--slg-fs-10-5);
  white-space: nowrap;
}

.slg-plans .slg-plan__name { font-weight: var(--slg-fw-semibold); font-size: var(--slg-fs-24); margin-bottom: var(--slg-space-4); }
.slg-plan__tag { margin: var(--slg-space-0-0-24); font-size: var(--slg-fs-13); color: var(--slg-text-3); }

/* Число и валюта — строчные элементы, а не флекс: базовая линия у них общая
   сама собой, и лишнего пробела между ними не появляется.
   Межстрочный интервал не 1: при 46px хвосты цифр вылезают за строку и
   налезают на подпись под ценой (поймано отрисовкой, а не глазами). */
.slg-plans .slg-plan__price {
  margin: 0;
  font-size: var(--slg-fs-46);
  line-height: var(--slg-lh-1-15);
  letter-spacing: -.02em;
}

.slg-plan__unit { font-family: var(--slg-body); font-weight: var(--slg-fw-semibold); font-size: var(--slg-fs-16); color: var(--slg-text-3); }
.slg-plan__per { margin: var(--slg-space-6-0-26); font-size: var(--slg-fs-13); color: var(--slg-text-4); }

.slg-plans .slg-plan__meta {
  margin: var(--slg-space-0-0-26);
  padding-top: var(--slg-space-22);
  border-top: 1px solid var(--slg-hairline);
  gap: var(--slg-space-13);
  font-size: var(--slg-fs-14);
  color: #D4D4D4;
  flex: 1;
}

.slg-plan__feature { position: relative; padding-left: var(--slg-space-26); }

.slg-plan__feature::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--slg-orange);
  font-weight: var(--slg-fw-bold);
}

.slg-plan__feature--freeze::before { content: '\2733'; font-size: var(--slg-fs-12); top: 1px; }

.slg-plans .slg-plan__actions { margin-top: auto; }

.slg-plans .slg-plan__cta {
  align-self: stretch;
  justify-content: center;
  padding: var(--slg-space-16-20);
  background: transparent;
  border: 1px solid var(--slg-input-border);
  color: var(--slg-white);
  font-size: var(--slg-fs-14);
}

.slg-plans .slg-plan__cta:hover { border-color: var(--slg-accent-hover); }

.slg-plans .slg-plan--featured .slg-plan__cta {
  background: var(--slg-orange);
  border-color: transparent;
  color: var(--slg-black);
}

/* --------------------------------------------------------------------------
   Доплаты и разовые
   -------------------------------------------------------------------------- */

.slg-extras__title {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-14);
  line-height: var(--slg-lh-1-2);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--slg-text-3);
  margin: var(--slg-space-0-0-16);
}

.slg-extra {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: var(--slg-space-26-24);
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--slg-surface);
  border-radius: var(--slg-radius-lg);
  transition: border-color var(--slg-transition), background var(--slg-transition);
}

.slg-extra:hover { border-color: var(--slg-accent-hover); background: var(--slg-surface-hover); }

.slg-extra__name {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-19);
  line-height: var(--slg-lh-1-2);
  margin: var(--slg-space-0-0-6);
}

.slg-extra__note { margin: 0; flex: 1; font-size: var(--slg-fs-13); line-height: var(--slg-lh-1-5); color: var(--slg-text-3); }

.slg-extra__price {
  margin: var(--slg-space-18-0-0);
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-black);
  font-size: var(--slg-fs-32);
  line-height: var(--slg-lh-1-15);
  letter-spacing: -.02em;
  color: var(--slg-orange);
}

.slg-extra__unit { font-family: var(--slg-body); font-weight: var(--slg-fw-semibold); font-size: var(--slg-fs-14); color: var(--slg-text-3); }

.slg-extra__cta {
  margin-top: var(--slg-space-14);
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-12);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--slg-white);
}

.slg-extra__cta:hover { color: var(--slg-orange); }

/* --------------------------------------------------------------------------
   Сравнение тарифов
   -------------------------------------------------------------------------- */

.slg-compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--slg-hairline);
  border-radius: var(--slg-radius-lg);
  background: #111111;
}

.slg-compare { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }

.slg-compare__caption {
  padding: var(--slg-space-26-24-0);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-13);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slg-text-4);
  text-align: left;
}

.slg-compare th,
.slg-compare td { padding: var(--slg-space-16-24); font-size: var(--slg-fs-13-5); }

.slg-compare thead th {
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-12-5);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slg-text-4);
}

.slg-compare tbody tr { border-top: 1px solid var(--slg-divider); }

.slg-compare tbody th {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-15);
  color: var(--slg-text);
}

.slg-compare tbody td { color: var(--slg-text-2); }

.slg-compare__price {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-16);
  color: var(--slg-white);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Подбор тарифа по частоте
   -------------------------------------------------------------------------- */

.slg-guide {
  list-style: none;
  margin: var(--slg-space-0-auto);
  padding: 0;
  max-width: 720px;
  border: 1px solid var(--slg-hairline);
  border-radius: var(--slg-radius-lg);
  background: var(--slg-surface);
}

.slg-guide__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--slg-space-12);
  padding: var(--slg-space-20-24);
  border-bottom: 1px solid var(--slg-divider);
}

.slg-guide__row:last-child { border-bottom: none; }
.slg-guide__q { font-weight: var(--slg-fw-semibold); font-size: var(--slg-fs-15); }
.slg-guide__a { display: inline-flex; align-items: baseline; gap: var(--slg-space-12); }

.slg-guide__plan {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-16);
}

.slg-guide__price { font-weight: var(--slg-fw-bold); font-size: var(--slg-fs-14); color: var(--slg-orange); white-space: nowrap; }

/* ==========================================================================
   Акции
   ========================================================================== */

.slg-offer {
  display: flex;
  flex-direction: column;
  gap: var(--slg-space-10);
  border: 1px solid var(--slg-hairline);
  background: var(--slg-surface);
  border-radius: var(--slg-radius-lg);
  padding: var(--slg-space-26);
  transition: border-color var(--slg-transition);
}

.slg-offer:hover { border-color: var(--slg-accent-hover); }

.slg-offer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--slg-space-10); margin: 0; }

/* Закончившаяся акция: приглушаем, но не прячем — пустая страница читается
   как «клуб ничего не делает», а список прошедших как «здесь бывает». */
.slg-offer--expired { opacity: .62; }
.slg-offer--expired:hover { opacity: .8; border-color: var(--slg-hairline); }

.slg-offer__status {
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-11);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slg-text-muted);
}

.slg-offer__items {
  list-style: none;
  margin: var(--slg-space-4-0-0);
  padding: 0;
  display: grid;
  gap: var(--slg-space-7);
  font-size: var(--slg-fs-13-5);
  color: var(--slg-text-2);
}

.slg-offer__items li { padding-left: var(--slg-space-15); position: relative; }

.slg-offer__items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slg-orange);
}
.slg-offer .slg-badge { align-self: flex-start; }
.slg-offer .slg-h3 { margin: 0; }
.slg-offer__desc { margin: 0; font-size: var(--slg-fs-14-5); color: var(--slg-text-3); }

.slg-offer__label {
  margin: var(--slg-space-8-0-0);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-11-5);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slg-text-muted);
}

/* Пунктирная рамка вокруг кода — из дизайн-пакета: код читается как купон. */
.slg-offer__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--slg-space-12);
  margin: 0;
  padding: var(--slg-space-13-15);
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: var(--slg-radius-sm);
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-18);
  letter-spacing: .04em;
}

.slg-offer__code .slg-icon { color: var(--slg-text-muted); flex-shrink: 0; }
.slg-offer__cta { margin-top: auto; align-self: stretch; justify-content: center; }

/* ==========================================================================
   Витрина сети: карточки городов
   ========================================================================== */

.slg-hero--network { min-height: 480px; }
.slg-hero--network .slg-hero__media--empty { background: var(--slg-surface); }

.slg-citycard {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--slg-hairline);
  border-radius: var(--slg-radius-lg);
  background: var(--slg-surface);
  transition: border-color var(--slg-transition);
}

.slg-citycard:hover { border-color: var(--slg-accent-hover); }

.slg-citycard__photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(.3) brightness(.72);
  transition: filter var(--slg-transition);
}

.slg-citycard:hover .slg-citycard__photo { filter: grayscale(0) brightness(.85); }

.slg-citycard__photo--empty { display: block; background: var(--slg-gray); }

.slg-citycard__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--slg-space-12);
  flex-wrap: wrap;
  padding: var(--slg-space-22-26);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82));
}

.slg-citycard__name {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-black);
  font-style: italic;
  font-size: var(--slg-fs-clamp-26-3-5-40);
  line-height: var(--slg-lh-1);
  text-transform: uppercase;
  letter-spacing: -.02em;
}

/* ==========================================================================
   Блог
   ========================================================================== */

.slg-post {
  display: flex;
  flex-direction: column;
  gap: var(--slg-space-8);
  border: 1px solid var(--slg-hairline);
  background: var(--slg-surface);
  border-radius: var(--slg-radius-lg);
  padding: var(--slg-space-22);
  transition: background var(--slg-transition), border-color var(--slg-transition);
}

.slg-post:hover { background: var(--slg-surface-hover); border-color: var(--slg-accent-hover); }

.slg-post__photo {
  width: calc(100% + 44px);
  margin: var(--slg-space-neg22-neg22-8);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--slg-radius-lg) var(--slg-radius-lg) 0 0;
}

.slg-post__title {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-19);
  line-height: var(--slg-lh-1-2);
  margin: 0;
}

.slg-post__meta { margin: 0; font-size: var(--slg-fs-12-5); color: var(--slg-text-muted); }

/* --------------------------------------------------------------------------
   Лента блога по макету: карточка с обложкой во всю ширину, рубрикой,
   временем чтения и призывом. Правила действуют внутри `.slg-posts` — на
   главной та же карточка остаётся короткой.
   -------------------------------------------------------------------------- */

.slg-page-head--left { margin-left: 0; max-width: 560px; }

.slg-posts .slg-post { gap: 0; padding: 0; overflow: hidden; }

.slg-posts .slg-post__photo {
  width: 100%;
  height: 190px;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.slg-post__body { display: flex; flex-direction: column; flex: 1; padding: var(--slg-space-22); }

.slg-posts .slg-post__meta {
  display: flex;
  align-items: center;
  gap: var(--slg-space-10);
  margin: var(--slg-space-0-0-12);
}

.slg-post__topic {
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-11);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--slg-orange);
}

.slg-post__read { font-size: var(--slg-fs-12); color: var(--slg-text-muted); }
.slg-post__topic + .slg-post__read::before { content: '· '; }

/* Заголовок карточки — обычным регистром, как в макете: название статьи это
   фраза, а прописными она читается вдвое медленнее. Общее правило для h2
   набирает прописными, здесь оно снимается намеренно. */
.slg-posts .slg-post__title {
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-18);
  line-height: var(--slg-lh-1-25);
  text-transform: none;
  flex: 1;
}

.slg-post__cta {
  margin-top: var(--slg-space-16);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-13);
  color: var(--slg-text-2);
}

.slg-post:hover .slg-post__cta { color: var(--slg-orange); }

/* Полоса рубрик. Ссылки, а не скрипт: отбор виден в адресе и открывается ссылкой. */
.slg-chips { display: flex; flex-wrap: wrap; gap: var(--slg-space-8); margin: var(--slg-space-0-0-30); }

.slg-chips__item {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: var(--slg-space-8-15);
  border: 1px solid var(--slg-input-border);
  border-radius: var(--slg-radius-pill);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-12-5);
  color: var(--slg-text-3);
  transition: color var(--slg-transition), border-color var(--slg-transition);
}

.slg-chips__item:hover { color: var(--slg-white); border-color: var(--slg-accent-hover); }

.slg-chips__item--on {
  background: var(--slg-orange);
  border-color: var(--slg-orange);
  color: var(--slg-black);
}

/* Слот времени (T-062) — по умолчанию НЕ кликается (форма записи выключена — Individual::
   enabled() ложна, юртексты не готовы). Отличается от живых .slg-chips__item нарочно
   (приглушённый цвет, не белый/не оранжевый при наведении, курсор по умолчанию) — иначе вид
   ничем не выдаёт, что нажатие ничего не сделает (Diablo impl-review 2026-09-23, SERIOUS). */
.slg-slot {
  cursor: default;
  pointer-events: none;
  color: var(--slg-text-muted);
  border-color: var(--slg-divider);
  font-weight: var(--slg-fw-medium);
}

/* .slg-slot--pick — форма записи ВКЛЮЧЕНА, слот настоящий и кликабельный: возвращает обычный
   вид живого .slg-chips__item, отменяя приглушение выше. */
.slg-slot--pick {
  cursor: pointer;
  pointer-events: auto;
  color: var(--slg-text-3);
  border-color: var(--slg-input-border);
  font-weight: var(--slg-fw-bold);
}

.slg-empty { padding: var(--slg-space-20-0-40); }
/* Пустое состояние внутри карточки: карточка уже даёт боковые отступы, а padding
   выше их обнулял (текст прижимался к левому краю) и добавлял 40px снизу. */
.slg-card.slg-empty { padding: var(--slg-space-20) var(--slg-space-26); }

.slg-article__meta { display: flex; align-items: center; gap: var(--slg-space-10); margin: var(--slg-space-0-0-16); }

/* Статья: узкая колонка — длинную строку тяжело читать */
.slg-article { max-width: 760px; }
.slg-article__photo { width: 100%; border-radius: var(--slg-radius-md); margin: var(--slg-space-20-0-8); }
.slg-article__body { font-size: var(--slg-fs-16); line-height: var(--slg-lh-1-7); color: var(--slg-text-1); }
.slg-article__body p { margin: var(--slg-space-0-0-18); }
.slg-article__body h2 { font-size: var(--slg-fs-26); margin: var(--slg-space-34-0-12); }
.slg-article__body a { color: var(--slg-orange); text-decoration: underline; text-underline-offset: 3px; }
.slg-article .slg-kicker a { color: var(--slg-text-2); }
.slg-article .slg-kicker a:hover { color: var(--slg-white); }

/* ==========================================================================
   Галерея
   ========================================================================== */

/* Мозаика, а не ровная сетка: одинаковые плитки читаются как каталог товаров,
   а не как «загляни внутрь зала».

   Рисунок повторяется каждые четыре кадра и заполняет две строки без дыр:
   крупный кадр 2×2, два обычных рядом с ним, широкий на две колонки под ними.

   Без дыр складывается ТОЛЬКО при числе снимков, кратном четырём. Сегодня их
   восемь — два блока ровно. Девятый оставит пустое место справа от себя
   (замерено: заполнение падает с 96% до 80%). Когда список снимков переедет в
   панель управления, за этим следит проверка «снимков кратно четырём». */
.slg-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--slg-space-12);
}

.slg-gallery__item:nth-child(4n + 1) { grid-column: span 2; grid-row: span 2; }
.slg-gallery__item:nth-child(4n) { grid-column: span 2; }

.slg-gallery__item {
  padding: 0;
  overflow: hidden;
  border-radius: var(--slg-radius-lg);
  border: 1px solid var(--slg-hairline);
  background: var(--slg-surface);
}

.slg-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--slg-transition);
  filter: grayscale(.2);
}

/* Наведение — только яркость, без сдвигов: решение №1 дизайнера */
.slg-gallery__item:hover img { filter: none; }


.slg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--slg-space-30);
  background: rgba(0, 0, 0, .92);
}

.slg-lightbox[hidden] { display: none; }

.slg-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--slg-radius-sm);
}

.slg-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--slg-fs-30);
  color: var(--slg-text-2);
  border-radius: var(--slg-radius-pill);
}

.slg-lightbox__close:hover { color: var(--slg-white); }

/* Узкий экран. Здесь же снимается мозаика: крупная плитка на две колонки из
   двух — это просто широкая плитка, ритма она не даёт, а соседние кадры
   выталкивает. Высота строки задаётся тут же — раздельные правила высоты и
   раскладки уже один раз наехали друг на друга (плитки перекрывались на 38
   точек, поймано отрисовкой). */
@media (max-width: 860px) {
  /* Строка 220, а не 170: снимки вертикальные, а плитка 170 точек оставляет от
     кадра горизонтальную полоску — ринга и мешков на ней уже не узнать. */
  .slg-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }

  .slg-gallery__item:nth-child(4n + 1),
  .slg-gallery__item:nth-child(4n) { grid-column: auto; grid-row: auto; }

  .slg-lightbox { padding: var(--slg-space-16); }
}

/* Телефон: один столбец. Три кадра рядом по сотне точек не читаются. */
@media (max-width: 560px) {
  .slg-gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
}

/* ==========================================================================
   Тренеры
   ========================================================================== */

.slg-person { display: flex; flex-direction: column; gap: var(--slg-space-4); }

.slg-person__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--slg-radius-md);
  border: 1px solid var(--slg-hairline);
  margin-bottom: var(--slg-space-12);
  filter: grayscale(.35) contrast(1.05);
  transition: filter var(--slg-transition);
}

.slg-person:hover .slg-person__photo { filter: none; }

.slg-person__name {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-19);
  line-height: var(--slg-lh-1-15);
  margin: 0;
}

.slg-person__role { margin: 0; font-size: var(--slg-fs-13); color: var(--slg-text-3); }

/* Вход в кабинет в шапке. Обведён кружком, как в макете: иконка без обводки
   на тёмном фоне теряется рядом с яркой кнопкой записи. */
.slg-account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--slg-input-border);
  border-radius: var(--slg-radius-pill);
  color: var(--slg-text-1);
  transition: border-color var(--slg-transition), color var(--slg-transition);
}

.slg-account-link:hover,
.slg-account-link:focus-visible { border-color: var(--slg-orange); color: var(--slg-orange); }

/* ==========================================================================
   Путь до страницы. Мелкий и тихий: это подпись, а не навигация — человек
   пришёл читать страницу, а не смотреть, где он.
   ========================================================================== */

/* Строка под шапкой: путь слева, языки справа (.slg-langbar, виден только там, где шапка
   прячет языки в бутерброд). Ширину, отступы и центровку держит она, а не путь внутри:
   иначе путь висит левее заголовка и выглядит съехавшим. */
.slg-subbar {
  max-width: var(--slg-container);
  margin: var(--slg-space-0-auto);
  padding: var(--slg-space-22-30-0);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--slg-space-10);
}

/* Страница входа (F-012) сузила содержимое до --slg-auth-width — без этой правки строка
   висела бы левее заголовка ровно по причине, описанной выше. */
.slg-subbar--narrow { max-width: var(--slg-auth-width); }

/* Без пути строка — только языки, а на широком экране их и так показывает шапка. */
.slg-subbar--solo { justify-content: flex-end; }

.slg-crumbs {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--slg-fs-12-5);
  color: var(--slg-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--slg-space-7);
}

.slg-langbar { display: none; margin-left: auto; gap: var(--slg-space-2); flex: none; }

.slg-langbar a {
  display: inline-flex;
  align-items: center;
  min-height: 36px; /* зона нажатия пальцем: 12px-текст с отступом 6px давал ~26px */
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-12);
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 0 var(--slg-space-7);
  border-radius: var(--slg-radius-xs);
  color: var(--slg-text-4);
  transition: color var(--slg-transition);
}

.slg-langbar a:hover { color: var(--slg-white); }
.slg-langbar a[aria-current] { font-weight: var(--slg-fw-black); color: var(--slg-orange); }

@media (max-width: 1100px) {
  .slg-langbar { display: flex; }
}

@media (min-width: 1101px) {
  .slg-subbar--solo { display: none; }
}

.slg-crumbs a { transition: color var(--slg-transition); }
.slg-crumbs a:hover { color: var(--slg-white); }
.slg-crumbs [aria-current="page"] { color: var(--slg-text-3); }

/* ==========================================================================
   Личный кабинет. Тот же чёрно-оранжевый, что и весь сайт: человек не должен
   почувствовать, что провалился в чужую систему.
   ========================================================================== */

/* Пометка «данные ненастоящие». Намеренно заметная: страница живая, и принять
   выдуманные цифры за свои нельзя. */
.slg-draft {
  display: block;
  margin: var(--slg-space-0-0-22);
  padding: var(--slg-space-11-16);
  border: 1px solid var(--slg-accent-soft-border);
  border-radius: var(--slg-radius-sm);
  background: var(--slg-accent-soft-bg);
  color: var(--slg-orange);
  font-size: var(--slg-fs-13);
  font-weight: var(--slg-fw-semibold);
}

/* Остаток абонемента — одна строка, а не карточка: при отмене занятия человек
   хочет знать, вернётся ли тренировка, но ради этого не должен искать глазами
   отдельный блок. */
.slg-acc__pass-line { font-size: var(--slg-fs-14-5); color: var(--slg-text-3); margin: var(--slg-space-4-0-0); }
.slg-acc__pass-line strong { color: var(--slg-white); }

.slg-acc__list { list-style: none; margin: var(--slg-space-0-0-14); padding: 0; display: grid; gap: var(--slg-space-2); }

.slg-acc__row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: var(--slg-space-14);
  padding: var(--slg-space-13-0);
  border-bottom: 1px solid var(--slg-divider);
}

.slg-acc__row:last-child { border-bottom: none; }
.slg-acc__row--cancelled .slg-acc__what { text-decoration: line-through; opacity: 0.6; }

.slg-acc__when { font-size: var(--slg-fs-14); display: flex; flex-direction: column; gap: var(--slg-space-2); }
.slg-acc__time { color: var(--slg-orange); font-variant-numeric: tabular-nums; }
.slg-acc__what { display: flex; flex-direction: column; gap: var(--slg-space-2); font-size: var(--slg-fs-14-5); }

.slg-acc__cancel {
  font-size: var(--slg-fs-13);
  font-weight: var(--slg-fw-semibold);
  color: var(--slg-text-3);
  border: 1px solid var(--slg-input-border);
  border-radius: var(--slg-radius-pill);
  padding: var(--slg-space-8-16);
  min-height: 36px;
}

.slg-acc__cancel:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 720px) {
  /* Отмена уезжает под строку: в три колонки на телефоне название занятия
     сжимается до нечитаемого. */
  .slg-acc__row { grid-template-columns: 96px 1fr; }
  .slg-acc__cancel { grid-column: 2; justify-self: start; margin-top: var(--slg-space-4); }
}

/* ==========================================================================
   Контакты. Адрес и часы читают на бегу, часто с телефона по дороге в зал,
   поэтому строки короткие и разделены, а не слиты в один абзац.
   ========================================================================== */

/* Карточек бывает две (Варшава) или три (Прага) — жёсткие две колонки
   оставляли третью висеть одну с пустотой справа. Здесь колонки считаются
   по месту, поэтому строка всегда заполнена. */
.slg-contact__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Нижний ряд контактов там, где карточка в нём одна (Прага). Без потолка
   ширины она растягивается во всю страницу — читается как полоса, а не как
   карточка рядом с верхними. Варшаве этот класс не ставится: там рядом форма
   ожидания, и потолок оставлял бы справа пустую полосу. */
.slg-contact__grid--rest {
  grid-template-columns: repeat(auto-fit, minmax(280px, 520px));
  justify-content: start;
}

/* Отступ сверху нужен форме на главной, где она идёт после текста.
   Внутри сетки он сдвигает карточку вниз относительно соседней. */
.slg-contact__grid .slg-club-form { margin-top: 0; max-width: none; }

.slg-contact__addr {
  font-style: normal;      /* <address> курсивом по умолчанию — адрес так читается хуже */
  font-size: var(--slg-fs-15);
  line-height: var(--slg-lh-1-65);
  color: var(--slg-text-2);
  margin: var(--slg-space-0-0-14);
}

.slg-contact__addr strong { color: var(--slg-white); }

.slg-contact__map { display: inline-block; font-size: var(--slg-fs-13-5); }

/* «Как добраться». Маршрут — главное действие карточки, поэтому кнопка;
   карта остаётся рядом тихой ссылкой для тех, кто сначала хочет посмотреть,
   где это вообще. Отступы у строки с кнопкой свои: общие рассчитаны на
   призыв в полную ширину страницы и внутри карточки выглядят провалом. */
.slg-location .slg-cta-row { margin: var(--slg-space-0-0-14); }

/* Дни и время в две колонки: глаз ищет строку «неделя», а не читает подряд. */
.slg-contact__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--slg-space-7-18);
  margin: 0;
  font-size: var(--slg-fs-14-5);
}

.slg-contact__hours dt { color: var(--slg-text-3); }
.slg-contact__hours dd { margin: 0; color: var(--slg-white); font-variant-numeric: tabular-nums; }

.slg-contact__links { list-style: none; margin: var(--slg-space-0-0-12); padding: 0; display: grid; gap: var(--slg-space-10); }

.slg-contact__links a {
  font-size: var(--slg-fs-14-5);
  color: var(--slg-text-2);
  transition: color var(--slg-transition);
}

.slg-contact__links a:hover,
.slg-contact__links a:focus-visible { color: var(--slg-white); }

.slg-contact__legal { line-height: var(--slg-lh-1-7); }

@media (max-width: 560px) {
  /* На узком экране две колонки часов схлопываются в нечитаемую кашу. */
  .slg-contact__hours { grid-template-columns: 1fr; gap: var(--slg-space-2-0); }
  .slg-contact__hours dd { margin-bottom: var(--slg-space-8); }
}

/* ==========================================================================
   Подвал. Крупный словомарк прижат к нижнему краю с обрезкой — фирменный
   приём, не декоративный мусор.
   ========================================================================== */

.slg-foot { background: var(--slg-footer); border-top: 1px solid var(--slg-hairline); overflow: hidden; }
.slg-foot__inner { max-width: var(--slg-container-wide); margin: var(--slg-space-0-auto); padding: var(--slg-space-46-18-18); }
/* Колонки считаются по месту, а не жёстко пятью дорожками: на странице «не
   найдено» колонки разделов нет, и жёсткая сетка оставляла справа 259 точек
   пустоты, а подписку загоняла в узкий столбец. */
.slg-foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--slg-space-30);
}

/* Подписка на новости. Поля выключены, пока принимать адреса некуда (T-008);
   рядом всегда стоит строка, объясняющая почему — выключенное поле без
   объяснения выглядит поломкой. */
.slg-subscribe { display: flex; flex-wrap: wrap; gap: var(--slg-space-8); margin: var(--slg-space-0-0-10); }

.slg-subscribe__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.slg-subscribe__field {
  flex: 1;
  min-width: 140px;
  padding: var(--slg-space-11-16);
  border: 1px solid var(--slg-input-border);
  border-radius: var(--slg-radius-pill);
  background: rgba(255, 255, 255, .04);
  color: var(--slg-text);
  font: inherit;
  font-size: var(--slg-fs-13-5);
}

.slg-subscribe__field::placeholder { color: var(--slg-text-muted); }

.slg-subscribe__btn {
  padding: var(--slg-space-11-20);
  border-radius: var(--slg-radius-pill);
  background: var(--slg-orange);
  color: var(--slg-black);
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-13);
}

.slg-subscribe__field[aria-disabled="true"],
.slg-subscribe__btn:disabled { opacity: .45; cursor: not-allowed; }

/* На телефоне подвал складывается в две колонки, и поле с кнопкой в одну
   строку не помещаются: подвал вылезал за экран на пять точек. Столбиком. */
@media (max-width: 560px) {
  .slg-subscribe { flex-direction: column; }
  .slg-subscribe__field,
  .slg-subscribe__btn { width: 100%; min-width: 0; }
}

.slg-foot__title {
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-12);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slg-text-muted);
  margin: var(--slg-space-0-0-14);
}

.slg-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--slg-space-9); }
.slg-foot__list a { font-size: var(--slg-fs-13-5); color: var(--slg-text-3); transition: color var(--slg-transition); }
.slg-foot__list a:hover { color: var(--slg-white); }

.slg-foot__legal {
  display: flex;
  justify-content: space-between;
  gap: var(--slg-space-18);
  flex-wrap: wrap;
  margin-top: var(--slg-space-34);
  padding-top: var(--slg-space-20);
  border-top: 1px solid var(--slg-divider);
  font-size: var(--slg-fs-12-5);
  color: var(--slg-text-muted);
}

.slg-foot__wordmark {
  display: block;
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-black);
  font-style: italic;
  font-size: var(--slg-fs-clamp-64-17-5-250);
  line-height: var(--slg-lh--8);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--slg-wordmark);
  text-align: center;
  margin-bottom: var(--slg-space-neg0-14em);
  user-select: none;
  pointer-events: none;
}

/* ==========================================================================
   Выезжающая панель на узком экране
   ========================================================================== */

.slg-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--slg-black);
  padding: var(--slg-space-0-18-18);
  overflow-y: auto;
}

.slg-mobile__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--slg-header-h); }
.slg-mobile__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: var(--slg-fs-26); color: var(--slg-text-2); }
.slg-mobile__nav { display: grid; gap: var(--slg-space-4); margin: var(--slg-space-18-0-26); }

.slg-mobile__nav a {
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-17);
  color: var(--slg-text-2);
  padding: var(--slg-space-14);
  border-radius: var(--slg-radius-sm);
}

.slg-mobile__nav a[aria-current] { background: rgba(255, 116, 32, .08); color: var(--slg-white); font-weight: var(--slg-fw-bold); }

.slg-mobile__row { display: flex; gap: var(--slg-space-10); margin-bottom: var(--slg-space-14); }

.slg-mobile__row a {
  flex: 1;
  text-align: center;
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-14);
  padding: var(--slg-space-13-14);
  border-radius: var(--slg-radius-sm);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--slg-text-3);
}

.slg-mobile__row a[aria-current] {
  border-color: var(--slg-orange);
  background: var(--slg-accent-soft-bg);
  color: var(--slg-white);
}

/* ==========================================================================
   Переломная ширина 860px — из дизайн-пакета
   ========================================================================== */

/* Шапка прячется в бутерброд раньше остальной раскладки — на 1100, а не на 860.
   Причина замерена, а не придумана: содержимое шапки требует 968 точек
   по-чешски и 1071 по-польски (там длиннее слова в меню). На переломе 860
   шапка не помещалась, и страница ехала вбок на любом окне от 861 до 1071 —
   то есть на обычном ноутбуке. Всё, что прячется, есть в бутерброде: разделы,
   выбор клуба и языка. */
@media (max-width: 1100px) {
  .slg-nav,
  .slg-cities,
  .slg-langs,
  .slg-head__book { display: none; }

  .slg-burger { display: flex; }

  .slg-mobile.is-open { display: block; }
}

@media (max-width: 860px) {
  .slg-wrap { padding: var(--slg-space-34-30); }

  .slg-grid--2,
  .slg-grid--3 { grid-template-columns: 1fr; }

  /* T-007: сетка одноколоночная — центрировать в «средней колонке»,
     которой здесь больше нет, значило бы создавать её заново неявно и
     раздувать страницу вбок (найдено рендер-проверкой). */
  .slg-plans.slg-grid--3 > :nth-child(3n+1):last-child { grid-column: auto; }

  .slg-foot__cols { grid-template-columns: 1fr 1fr; gap: var(--slg-space-24); }

  .slg-mobile.is-open { display: block; }
}

/* ==========================================================================
   Секции главной. Состав и порядок — из макета (docs/design/HOME-VS-MAKET.md).
   ========================================================================== */

.slg-eyebrow {
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-12-5);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slg-orange);
  margin: var(--slg-space-0-0-12);
}

.slg-eyebrow--center { text-align: center; }
.slg-center { text-align: center; }

/* Заголовок секции и подпись/ссылка рядом — как в макете: заголовок слева,
   пояснение справа, не под ним. */
/* Ведущая секция страницы: в шаблоне её заголовок на ступень крупнее прочих. */
.slg-sec-head h2 {
  font-size: var(--slg-fs-clamp-32-4-5-54);
  line-height: var(--slg-lh-1);
}

.slg-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--slg-space-18);
  margin-bottom: var(--slg-space-30);
}

.slg-sec-head h2 { margin: 0; }
.slg-sec-head .slg-lead { max-width: 360px; margin: 0; }

.slg-grid--4 { grid-template-columns: repeat(4, 1fr); }
.slg-grid--5 { grid-template-columns: repeat(5, 1fr); }

/* Карточка формата занятий */
.slg-prog {
  display: flex;
  flex-direction: column;
  gap: var(--slg-space-10);
  padding: var(--slg-space-22);
  min-height: 300px;
  border-radius: var(--slg-radius-lg);
  background: var(--slg-surface);
  border: 1px solid var(--slg-hairline);
}

.slg-prog__num {
  align-self: flex-start;
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-11);
  letter-spacing: .08em;
  color: var(--slg-orange);
  padding: var(--slg-space-5-10);
  border-radius: var(--slg-radius-xs);
  background: var(--slg-accent-soft-bg);
  /* Номер прижат к верху, название и текст — к низу карточки: так в макете */
  margin-bottom: auto;
}

.slg-prog__name { font-family: var(--slg-display); font-weight: var(--slg-fw-semibold); font-size: var(--slg-fs-21); margin: 0; }
.slg-prog__text { font-size: var(--slg-fs-13-5); color: var(--slg-text-3); margin: 0; }

.slg-prog__badge {
  align-self: flex-start;
  font-size: var(--slg-fs-12);
  color: var(--slg-text-2);
  padding: var(--slg-space-6-12);
  border: 1px solid var(--slg-input-border);
  border-radius: var(--slg-radius-pill);
}

/* Расписание на главной — одна широкая карточка */
.slg-home-schedule { padding: var(--slg-space-34); }
.slg-home-schedule h2 { margin-bottom: var(--slg-space-10); }

/* Мозаика галереи: крупный кадр слева, два мелких справа, снизу — вход внутрь */
.slg-mosaic {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: var(--slg-space-14);
}

.slg-mosaic__item { width: 100%; height: 100%; object-fit: cover; border-radius: var(--slg-radius-lg); }
.slg-mosaic__item--0 { grid-row: span 2; }

.slg-mosaic__more {
  grid-column: 2 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-17);
  border-radius: var(--slg-radius-lg);
  background: var(--slg-surface);
  border: 1px solid var(--slg-hairline);
  transition: border-color var(--slg-transition), color var(--slg-transition);
}

.slg-mosaic__more:hover { border-color: var(--slg-orange); color: var(--slg-orange); }

/* Призыв в конце страницы */
.slg-home-cta {
  padding: var(--slg-space-60-34);
  border-radius: var(--slg-radius-lg);
  background: var(--slg-surface);
  border: 1px solid var(--slg-hairline);
}

/* Призыв в конце — единственный секционный заголовок, который в шаблоне
   набран прописными и крупнее остальных. */
.slg-home-cta h2 {
  margin-bottom: var(--slg-space-10);
  font-weight: var(--slg-fw-black);
  font-size: var(--slg-fs-clamp-30-4-5-56);
  line-height: var(--slg-lh-1);
  text-transform: uppercase;
}

.slg-plan--top { border-color: var(--slg-accent-soft-border); }

@media (max-width: 1000px) {
  .slg-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .slg-grid--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .slg-grid--4,
  .slg-grid--5 { grid-template-columns: 1fr; }
  /* Мозаика на телефоне разваливается в столбец: три кадра рядом по 100px
     не читаются. */
  .slg-mosaic { grid-template-columns: 1fr; grid-template-rows: none; }
  .slg-mosaic__item { height: 200px; }
  .slg-mosaic__item--0 { grid-row: auto; }
  .slg-mosaic__more { grid-column: 1; padding: var(--slg-space-22); }
  .slg-home-cta { padding: var(--slg-space-40-20); }
}

/* Соцсети в подвале — кружки, как в макете. */
.slg-socials { display: flex; gap: var(--slg-space-10); margin-top: var(--slg-space-16); }

.slg-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: var(--slg-fs-12);
  font-weight: var(--slg-fw-bold);
  letter-spacing: .04em;
  color: var(--slg-text-2);
  border: 1px solid var(--slg-input-border);
  border-radius: var(--slg-radius-pill);
  transition: border-color var(--slg-transition), color var(--slg-transition);
}

.slg-socials a:hover,
.slg-socials a:focus-visible { border-color: var(--slg-orange); color: var(--slg-orange); }

/* ==========================================================================
   Бегущая строка показателей под hero — как в макете.
   ========================================================================== */

.slg-ticker {
  /* Отдельная полоса ПОД hero, а не поверх видео: в макете она на чёрном, и
     только так подписи читаются на ходу при любом кадре. */
  position: relative;
  overflow: hidden;
  background: var(--slg-black);
  margin-top: 0;
  border-top: 1px solid var(--slg-hairline);
  border-bottom: 1px solid var(--slg-hairline);
  padding: var(--slg-space-16-0);
  /* Края растворяются, чтобы лента не обрывалась резко об экран. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.slg-ticker__track {
  display: flex;
  width: max-content;
  animation: slgTicker 38s linear infinite;
}

/* Лента едет ровно на половину своей длины: второй список — копия первого,
   поэтому в момент возврата картинка совпадает и шва не видно. */
@keyframes slgTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.slg-ticker .slg-stats { margin: 0; flex-wrap: nowrap; gap: 0; }

.slg-ticker .slg-stats__item {
  /* В ленте показатель читается одной строкой — «15 trenérů», как в макете.
     На главной вне ленты он стоит столбиком, поэтому направление задаётся
     здесь явно, а не наследуется. */
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--slg-space-9);
  padding: var(--slg-space-0-30);
  white-space: nowrap;
}

/* Разделитель между показателями — как в макете. Идёт последним элементом
   строки, поэтому направление строки задано выше. */
.slg-ticker .slg-stats__item::after {
  content: '+';
  margin-left: var(--slg-space-30);
  color: var(--slg-orange);
  opacity: .55;
}

/* Подпись в ленте — прописными, как в макете (регистр сверен замером, совпадает).
   Остальные значения ЗАМЕНЕНЫ по замеру 2026-08-18: макет даёт 14px, вес 600,
   межбуквенное 0.7px (= .05em при 14px) и цвет #B4B4B4. Здесь стояли 12px, вес 700,
   .1em и более светлый #C4C4C4 — подпись выходила мельче, жирнее и разряженнее макетной.
   Это правило СИЛЬНЕЕ базового `.slg-stats__label`, поэтому правка только там не работала.
   Числа: docs/design/mockup-measured-2026-08-18.json */
.slg-ticker .slg-stats__label {
  font-size: var(--slg-fs-14);
  font-weight: var(--slg-fw-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #B4B4B4;
}

.slg-ticker:hover .slg-ticker__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  /* Движение отключено: лента стоит, показатели читаются те же. */
  .slg-ticker__track { animation: none; }
  .slg-ticker { mask-image: none; }
}

/* Метка на полосе акции — чёрная плашка, как в макете, а не мелкий текст.
   ВНИМАНИЕ: это ВТОРОЕ объявление этого класса (первое — выше по файлу). Правка только в одном
   месте молча не сработает.
   Замер макета 2026-08-18: надпись ОРАНЖЕВАЯ на чёрном, отступы 4/9. Была белая и 5/11. */
.slg-promo__tag {
  background: var(--slg-black);
  color: var(--slg-orange);
  padding: var(--slg-space-4-9);
  border-radius: var(--slg-radius-pill);
  opacity: 1;
}

/* ==========================================================================
   Расписание. Неделя колонками на широком экране, столбиком на телефоне.
   Данные пока примерные — отсюда заметная пометка сверху (T-005).
   ========================================================================== */

.slg-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--slg-space-10);
  margin: var(--slg-space-0-0-26);
  padding: var(--slg-space-14-18);
  border: 1px solid var(--slg-accent-soft-border);
  border-radius: var(--slg-radius-md);
  background: var(--slg-accent-soft-bg);
  font-size: var(--slg-fs-13-5);
  line-height: var(--slg-lh-1-5);
  color: var(--slg-text-1);
}

.slg-notice__tag {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-11);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slg-orange);
  flex-shrink: 0;
}

.slg-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--slg-space-12);
  align-items: start;
}

.slg-week__col { display: flex; flex-direction: column; gap: var(--slg-space-10); min-width: 0; }

.slg-week__head {
  display: flex;
  flex-direction: column;
  gap: var(--slg-space-2);
  padding: var(--slg-space-12-14);
  border: 1px solid var(--slg-hairline);
  border-radius: var(--slg-radius-sm);
  /* Непрозрачный фон поверх --slg-black, а не полупрозрачный: карточки занятий,
     скользящие под шапкой (position: sticky), не должны просвечивать. */
  background: var(--slg-black);
  position: sticky;
  top: var(--slg-space-12);
  z-index: 1;
}

.slg-week__day { font-family: var(--slg-display); font-weight: var(--slg-fw-bold); font-size: var(--slg-fs-14); }
.slg-week__count { font-size: var(--slg-fs-11-5); color: var(--slg-text-muted); }
.slg-week__none { margin: 0; padding: var(--slg-space-10-14); font-size: var(--slg-fs-12-5); color: var(--slg-text-muted); }

.slg-class {
  padding: var(--slg-space-14);
  border: 1px solid var(--slg-hairline);
  border-radius: var(--slg-radius-sm);
  background: var(--slg-class-card);
  transition: background var(--slg-transition), border-color var(--slg-transition);
}

.slg-class:hover { background: var(--slg-class-card-hover); border-color: var(--slg-accent-hover); }

.slg-class__time {
  margin: var(--slg-space-0-0-6);
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-15);
  color: var(--slg-orange);
  font-variant-numeric: tabular-nums;
}

.slg-class__title {
  margin: var(--slg-space-0-0-4);
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-14);
  line-height: var(--slg-lh-1-25);
  text-transform: none;
}

.slg-class__coach { margin: var(--slg-space-0-0-8); font-size: var(--slg-fs-12); color: var(--slg-text-3); }
/* Языки тренера и свободные места — приписки под названием занятия.
   Места набраны заметнее: ради них расписание и открывают. */
/* Текст только для чтения вслух: на экране не виден, читалке нужен. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Карточка занятия, на которое можно записаться: ссылка накрывает всю карточку.
   Цель размером со слово — промах на телефоне, а карточек в сетке под сотню. */
.slg-class--open { position: relative; }

.slg-class__link { position: absolute; inset: 0; z-index: 1; }

.slg-class--open:hover,
.slg-class--open:focus-within { border-color: var(--slg-accent-soft-border); }

.slg-class__cta {
  position: absolute;
  right: 13px;
  bottom: 13px;
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-bold);
  font-size: var(--slg-fs-11);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slg-orange);
  opacity: 0;
  transition: opacity var(--slg-transition);
}

.slg-class--open:hover .slg-class__cta,
.slg-class--open:focus-within .slg-class__cta { opacity: 1; }

/* На телефоне наведения нет — подпись видна сразу. */
@media (hover: none) {
  .slg-class__cta { opacity: 1; }
}

/* Страница записи — «как на кассе»: слева сводка выбранного, справа поля в две
   колонки, кнопка в полосе внизу и не уезжает с прокруткой. Прежняя раскладка
   не помещалась на экран ноутбука: кнопка заканчивалась на 1114 точке при
   экране в 900, теперь — на 783. */

/* Страница входа — одна форма из одного поля, без соседнего контента. Общий
   .slg-wrap (1200px) растягивал поле и кнопку на всю ширину экрана — читалось
   как «форма без темы», хотя тема была, просто без потолка ширины. */
.slg-auth-wrap.slg-wrap { max-width: 480px; }

/* Страница записи плотнее прочих: это единственная страница, где всё должно
   уместиться на экране целиком — иначе человек не видит кнопку, ради которой
   пришёл. */
.slg-booking.slg-wrap { padding-top: var(--slg-space-26); }
.slg-booking .slg-card { padding: var(--slg-space-20); }
.slg-booking .slg-form { gap: var(--slg-space-10); }
.slg-booking .slg-field input[type="text"],
.slg-booking .slg-field input[type="tel"],
.slg-booking .slg-field input[type="email"] { padding: var(--slg-space-11-13); }
/* Код из WhatsApp: подпись над полем, поле во всю ширину панели, крупные цифры. */
.slg-booking .slg-field--code input[type="text"] {
  padding: var(--slg-space-15-14);
  font-family: var(--slg-display);
  font-size: var(--slg-fs-26);
  font-weight: var(--slg-fw-semibold);
  letter-spacing: .18em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.slg-booking__top {
  display: flex;
  align-items: baseline;
  gap: var(--slg-space-14);
  flex-wrap: wrap;
  margin-bottom: var(--slg-space-16);
}

.slg-booking__top .slg-eyebrow { margin: 0; }
.slg-booking__title { font-size: var(--slg-fs-clamp-24-2-4-30); margin: 0; }

.slg-booking__grid { grid-template-columns: minmax(240px, 320px) minmax(320px, 1fr); align-items: start; }

/* T-062: расписание слева / панель записи справа (макет IbFmp.png) — колонки в обратную
   сторону от slg-booking__grid: там узкий сайдбар первый, здесь узкий сайдбар второй. */
.slg-individual-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: start; }
.slg-individual-layout__panel { position: sticky; top: 16px; }
/* T-076: вход и список по виду — одна колонка, панели записи рядом нет. */
.slg-individual-layout--single { grid-template-columns: minmax(0, 1fr); }
.slg-ind-doors { display: grid; gap: var(--slg-space-26); }
.slg-ind-door__title { font-size: var(--slg-fs-clamp-24-2-4-30); margin: var(--slg-space-0-0-12); }
.slg-ind-back { font-size: var(--slg-fs-14); color: var(--slg-text-2); }
.slg-ind-trainers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--slg-space-12); }
.slg-ind-trainer { padding: var(--slg-space-20); }
.slg-ind-trainer__name { font-weight: var(--slg-fw-bold); margin: var(--slg-space-0-0-8); }
.slg-ind-trainer__disc { font-size: var(--slg-fs-14); color: var(--slg-text-2); margin: var(--slg-space-0-0-10); }
.slg-ind-trainer .slg-chips { margin: 0; }
@media (max-width: 860px) {
    .slg-individual-layout { grid-template-columns: 1fr; }
    .slg-individual-layout__panel { position: static; }
}

.slg-booking__class { padding: var(--slg-space-18-20); position: sticky; top: 16px; }
.slg-booking__class-name { margin-bottom: var(--slg-space-4); }
.slg-booking__when { margin: var(--slg-space-0-0-14); font-size: var(--slg-fs-14); color: var(--slg-text-2); }

.slg-booking__facts {
  display: grid;
  gap: var(--slg-space-8);
  margin: 0;
  padding-top: var(--slg-space-14);
  border-top: 1px solid var(--slg-hairline);
  font-size: var(--slg-fs-13-5);
}

.slg-booking__row { display: flex; justify-content: space-between; gap: var(--slg-space-12); }
.slg-booking__facts dt { color: var(--slg-text-muted); }
.slg-booking__facts dd { margin: 0; color: var(--slg-white); }
.slg-booking__seats { font-family: var(--slg-display); font-weight: var(--slg-fw-semibold); color: var(--slg-orange); }
.slg-booking__back { display: inline-block; margin-top: var(--slg-space-14); font-size: var(--slg-fs-13); }

/* Поля парами: подпись над полем — самая высокая из раскладок, а в два
   столбца та же форма короче на четыре строки. */
.slg-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--slg-space-12-16);
  /* Без этого ячейка тянется по высоте соседа: у поля с пояснением под ним
     сосед растягивался, и пара «телефон + почта» выглядела разной. */
  align-items: start;
}
.slg-field--wide { grid-column: 1 / -1; }

.slg-form__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--slg-space-16);
  flex-wrap: wrap;
  margin: var(--slg-space-6-0-0);
  padding: var(--slg-space-14-0-0);
  border-top: 1px solid var(--slg-hairline);
}

/*
 * Полоса НЕ липкая. В прототипе она липла, но после сокращения формы кнопка и
 * так помещается на экран ноутбука (замер: низ кнопки 838 при экране 900), а
 * липкая полоса при этом накрывала галочку согласия — то есть мешала ровно
 * тому, что нужно нажать перед ней.
 */

.slg-form__bar-note { font-size: var(--slg-fs-12-5); color: var(--slg-text-muted); }

.slg-form { display: grid; gap: var(--slg-space-14); margin-top: var(--slg-space-16); }

.slg-field { display: grid; gap: var(--slg-space-6); margin: 0; }

.slg-field label { font-size: var(--slg-fs-13); color: var(--slg-text-2); }

/* Шестнадцать точек — не вкусовщина: при меньшем размере мобильный Safari
   увеличивает страницу, как только палец попадает в поле, и человек теряет из
   виду и форму, и кнопку. */
.slg-field input[type="text"],
.slg-field input[type="tel"],
.slg-field input[type="email"] {
  width: 100%;
  padding: var(--slg-space-13-14);
  font: inherit;
  font-size: var(--slg-fs-16);
  color: var(--slg-white);
  background: var(--slg-input-bg, rgba(255, 255, 255, .04));
  border: 1px solid var(--slg-input-border);
  border-radius: 12px;
}

.slg-field input:focus-visible { outline: 2px solid var(--slg-orange); outline-offset: 1px; }

.slg-field__note { font-size: var(--slg-fs-12); color: var(--slg-text-muted); }

/* Обязательное поле. Звёздочка оранжевая — но не только цветом: сам знак
   виден и без цвета, а читалке про обязательность говорит разметка поля. */
.slg-field__req { color: var(--slg-orange); margin-left: var(--slg-space-3); }

/* Необязательное — подписью, а не пустотой: иначе «без звёздочки» читается
   как недосмотр, а не как разрешение пропустить. */
.slg-field__opt {
  margin-left: var(--slg-space-6);
  font-size: var(--slg-fs-11-5);
  color: var(--slg-text-muted);
}

.slg-form__legend {
  margin: var(--slg-space-16-0-0);
  font-size: var(--slg-fs-12-5);
  color: var(--slg-text-muted);
}

/* Согласие: галочка и текст в строку, галочка не съезжает от длинной подписи. */
.slg-field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--slg-space-10); }
.slg-field--check input { margin-top: var(--slg-space-3); width: 18px; height: 18px; accent-color: var(--slg-orange); }
.slg-field--check label { font-size: var(--slg-fs-13); line-height: var(--slg-lh-1-5); }
.slg-field--check a { color: var(--slg-orange); border-bottom: 1px solid var(--slg-accent-soft-border); }

.slg-notice--error { border-color: var(--slg-accent-soft-border); }
.slg-notice--error:focus-visible { outline: 2px solid var(--slg-orange); outline-offset: 2px; }

/* «Отправили, ответа нет» — не отказ. Отдельный вид, потому что цвет читается раньше текста:
   на красной плашке человек видит «не получилось» и жмёт ещё раз — ровно то, от чего защита.
   Полоса слева, а не только цвет: одним цветом не читается ни на плохом экране, ни при
   дальтонизме — то же основание, что у рамки поля с ошибкой ниже. */
.slg-notice--warn {
  border-color: var(--slg-divider);
  border-left: 3px solid var(--slg-orange);
}
.slg-notice--warn:focus-visible { outline: 2px solid var(--slg-orange); outline-offset: 2px; }

/* Поле, в котором ошибка: рамка, а не только цвет текста — цвет одним им
   не читается ни на плохом экране, ни при дальтонизме. */
.slg-field input[aria-invalid="true"] {
  border-color: var(--slg-orange);
  border-width: 2px;
}

.slg-field__error { margin: 0; font-size: var(--slg-fs-13); color: var(--slg-orange); }
.slg-field__error[hidden] { display: none; }

/* Ловушка для роботов: убрана с экрана, но не спрятана как «hidden». */
.slg-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.slg-booking__done { max-width: 560px; }

/* Отметка памяти: подпись в две строки, пояснение мельче. */
.slg-field--check .slg-field__note { display: block; margin-top: var(--slg-space-3); }

@media (max-width: 860px) {
  .slg-booking__grid { grid-template-columns: 1fr; }
  .slg-form__grid { grid-template-columns: 1fr; }
  /* На телефоне сводка не липнет: она короткая и уезжает вместе со страницей. */
  .slg-booking__class { position: static; }
}

/* `display` перебивает атрибут «спрятано»: без этой строки ссылка «это не я»
   висела на чистом устройстве, где стирать нечего. */
.slg-field__forget[hidden] { display: none; }
.slg-notice[hidden] { display: none; }

.slg-field__forget {
  display: inline-block;
  margin-top: var(--slg-space-4);
  font-size: var(--slg-fs-12);
  color: var(--slg-orange);
  border-bottom: 1px solid var(--slg-accent-soft-border);
}

/* Телефон в руке. Палец — не курсор: цели крупнее, кнопка во всю ширину,
   галочки больше, между полями воздуха больше.
   Цепляемся за ВВОД, а не только за ширину: повёрнутый телефон — это 844
   точки шириной, и по ширине правила не срабатывали, хотя палец никуда не
   делся (поймано критиком). */
@media (pointer: coarse), (max-width: 560px) {
  .slg-form { gap: var(--slg-space-18); }

  .slg-field input[type="text"],
  .slg-field input[type="tel"],
  .slg-field input[type="email"] { padding: var(--slg-space-15-14); }

  .slg-field--check input { width: 24px; height: 24px; margin-top: 1px; }
  .slg-field--check label { font-size: var(--slg-fs-14); }

  .slg-booking .slg-cta-row { margin: var(--slg-space-6-0-0); }

  /* Пустое состояние на телефоне — те же 20px со всех сторон, что у карточек записи. */
  .slg-card.slg-empty { padding: var(--slg-space-20); }

  /* На узком экране полоса перестаёт липнуть: она перекрывала последнее поле,
     то самое, в которое человек в этот момент печатает. */
  /* На узком экране полоса идёт во всю ширину карточки: с боковыми отступами
     родителя она вылезала за его край. */
  .slg-form__bar { flex-direction: column; align-items: stretch; gap: var(--slg-space-10); }
  .slg-form__bar-note { order: 2; text-align: center; }

  .slg-booking .slg-btn {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: var(--slg-fs-15);
  }

  /* Карточка занятия над формой — короче: на телефоне она отодвигает саму
     форму за нижний край экрана. */
  .slg-booking__class { padding: var(--slg-space-20); }
  .slg-booking__facts { gap: var(--slg-space-6-14); font-size: var(--slg-fs-14); }
}

/* Юридический документ: длинный сплошной текст, а не карточки. Ширина строки
   ограничена — на всю ширину страницы такой текст не читается; заголовки и
   списки заданы явно, потому что разметку внутрь вставляет не программист. */
.slg-legal__text {
  max-width: 720px;
  font-size: var(--slg-fs-15-5);
  line-height: var(--slg-lh-1-7);
  color: var(--slg-text-2);
}

.slg-legal__text p { margin: var(--slg-space-0-0-16); }

.slg-legal__text h2 {
  font-size: var(--slg-fs-24);
  line-height: var(--slg-lh-1-25);
  margin: var(--slg-space-34-0-12);
  color: var(--slg-white);
}

.slg-legal__text h3 {
  font-size: var(--slg-fs-19);
  margin: var(--slg-space-26-0-10);
  color: var(--slg-white);
}

.slg-legal__text ul,
.slg-legal__text ol { margin: var(--slg-space-0-0-16); padding-left: var(--slg-space-20); }
.slg-legal__text li { margin: var(--slg-space-0-0-8); }

.slg-legal__text a {
  color: var(--slg-orange);
  border-bottom: 1px solid var(--slg-accent-soft-border);
}

.slg-legal__text table { width: 100%; border-collapse: collapse; margin: var(--slg-space-0-0-20); }
.slg-legal__text th,
.slg-legal__text td {
  text-align: left;
  padding: var(--slg-space-10-12);
  border-bottom: 1px solid var(--slg-hairline);
  font-size: var(--slg-fs-14);
}

/* Переход по неделям. Отдельной строкой над днями: это не отбор, а окно —
   смешивать их в одну полосу значит путать «какие занятия» с «когда». */
.slg-weeknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--slg-space-12);
  margin: var(--slg-space-0-0-18);
}

.slg-weeknav__link {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-13);
  color: var(--slg-white);
  border: 1px solid var(--slg-hairline);
  border-radius: var(--slg-radius-pill);
  padding: var(--slg-space-9-16);
  transition: border-color var(--slg-transition), color var(--slg-transition);
}

.slg-weeknav__link:hover,
.slg-weeknav__link:focus-visible { border-color: var(--slg-orange); color: var(--slg-orange); }

/* Край окна: ссылка никуда не ведёт, но место держит — иначе полоса прыгает. */
.slg-weeknav__link--off { color: var(--slg-text-muted); border-color: transparent; }
.slg-weeknav__link--off:hover { color: var(--slg-text-muted); border-color: transparent; }

.slg-weeknav__range {
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-14);
  font-variant-numeric: tabular-nums;
}

.slg-weeknav__now {
  margin-left: var(--slg-space-8);
  font-family: var(--slg-body);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-11-5);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slg-orange);
}

@media (max-width: 560px) {
  .slg-weeknav { justify-content: center; }
  .slg-weeknav__range { order: -1; width: 100%; text-align: center; }
}

/* Дата столбца рядом с днём недели. */
.slg-week__date {
  font-size: var(--slg-fs-11-5);
  color: var(--slg-text-muted);
  font-variant-numeric: tabular-nums;
}

.slg-class__langs {
  margin: var(--slg-space-2-0-0);
  font-size: var(--slg-fs-11-5);
  letter-spacing: .06em;
  color: var(--slg-text-muted);
}

.slg-class__seats {
  margin: var(--slg-space-8-0-0);
  font-family: var(--slg-display);
  font-weight: var(--slg-fw-semibold);
  font-size: var(--slg-fs-12-5);
  color: var(--slg-orange);
}

.slg-class__seats--none { color: var(--slg-text-muted); }

.slg-class__meta { display: flex; flex-wrap: wrap; gap: var(--slg-space-6); margin: 0; }

.slg-class__kind,
.slg-class__level {
  font-size: var(--slg-fs-10-5);
  font-weight: var(--slg-fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--slg-space-3-8);
  border-radius: var(--slg-radius-pill);
  border: 1px solid var(--slg-hairline);
  color: var(--slg-text-3);
}

.slg-class__level { border-color: var(--slg-accent-soft-border); color: var(--slg-orange); }

/* Семь колонок держатся до 1100 точек, дальше по три, на телефоне столбиком:
   колонка уже 130 точек превращает название занятия в лесенку из слогов. */
@media (max-width: 1100px) {
  .slg-week { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .slg-week { grid-template-columns: 1fr; }

  /* Расписание индивидуальных на телефоне (владелец 06.10: «время занимает очень много места»):
     день — одна строка-заголовок, время — компактные таблетки по три в ряд, как в виджетах записи.
     Только у .slg-week--slots (страница индивидуальных): у группового расписания в колонке карточки
     занятий, их в три ряда не ставим. Колонка остаётся flex, чтобы заголовок дня прилипал по-прежнему. */
  .slg-week--slots .slg-week__col {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--slg-space-8);
  }
  .slg-week--slots .slg-week__head {
    flex: 0 0 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--slg-space-10-14);
  }
  .slg-week--slots .slg-week__none { flex: 0 0 100%; padding: var(--slg-space-0-0-8); }
  .slg-week--slots .slg-week__col .slg-chips__item {
    flex: 0 0 calc((100% - 2 * var(--slg-space-8)) / 3);
    box-sizing: border-box;
    justify-content: center;
    min-height: 40px;
    padding: var(--slg-space-8) var(--slg-space-4);
    font-size: var(--slg-fs-14);
  }
}