/* ============================================================
   Дизайн-система сайта «Академика» (Кострома).
   Светлая тема, шрифты Nunito (заголовки) + Nunito Sans (текст).
   Бренд-цвета: тёмно-синий (navy) + красный (red) — с логотипа.
   ============================================================ */

:root {
  --navy: #1f2d6e;
  --navy-700: #18245a;
  --navy-50: #eef1fb;
  --red: #d62436;
  --red-600: #e23347;
  --red-50: #fdeef0;
  --green: #2aa14d;
  --ink: #1e2436;
  --muted: #5e6678;
  --bg: #ffffff;
  --bg-soft: #f4f6fb;
  --line: #e6e9f2;
  --shadow-sm: 0 4px 16px rgba(31,45,110,0.06);
  --shadow-md: 0 12px 32px rgba(31,45,110,0.10);
  --shadow-lg: 0 24px 56px rgba(31,45,110,0.14);
  --radius: 18px;
  --radius-lg: 26px;
  --font-display: 'Nunito', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;
  --max-w: 1180px;
  --max-w-text: 760px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

.site-main { min-height: 60vh; }

/* Зазор перед футером. У .ak-footer есть margin-top (прозрачный → сквозь него
   виден белый body). Если страница заканчивается секцией — убираем margin и
   переносим зазор в нижний паддинг последней секции, чтобы он принял ЕЁ цвет,
   а не белый. Блог и пр. (без завершающей секции) под :has не попадают — у них
   зазор остаётся как был. */
.site-main:has(> section:last-of-type) ~ .ak-footer { margin-top: 0; }
.site-main > section:last-of-type { padding-bottom: 168px; }
@media (max-width: 600px) {
  .site-main > section:last-of-type { padding-bottom: 120px; }
}

img { max-width: 100%; }

/* ===== Контейнер ===== */
.ak-container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* ===== Кнопки ===== */
.ak-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.ak-btn--primary { background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(214,36,54,0.28); }
.ak-btn--primary:hover { background: var(--red-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(214,36,54,0.36); }
.ak-btn--secondary { background: #fff; color: var(--navy); border-color: var(--line); box-shadow: var(--shadow-sm); }
.ak-btn--secondary:hover { border-color: var(--navy); transform: translateY(-2px); }
.ak-btn--ghost { background: var(--navy-50); color: var(--navy); }
.ak-btn--ghost:hover { background: #e3e8fa; }

/* ===== Секции и заголовки ===== */
.ak-section { padding: 72px 0; }
.ak-section--soft { background: var(--bg-soft); }
/* Отступ при скролле к якорю (#otzyvy, #kontakty, #faq…), чтобы цель
   не пряталась под липкой шапкой — и при JS-скролле, и при переходе по /#anchor. */
.ak-section[id] { scroll-margin-top: 84px; }
.ak-section__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.ak-section__label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--red);
  background: var(--red-50);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 16px;
}
.ak-section__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 16px;
}
.ak-section__subtitle { font-size: 18px; color: var(--muted); margin: 0; }

/* ===== Сетка карточек услуг ===== */
.ak-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ak-cards--2 { grid-template-columns: repeat(2, 1fr); }

.ak-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  text-decoration: none;
  color: inherit;
}
.ak-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--navy-50); }
.ak-card__ico {
  width: 60px; height: 60px; border-radius: 16px;
  background: var(--navy-50);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; margin-bottom: 20px;
}
.ak-card__age {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  color: var(--green); background: #eaf7ee; padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px;
}
.ak-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 0 0 10px; color: var(--ink); }
.ak-card__text { font-size: 15px; color: var(--muted); margin: 0 0 20px; flex: 1; }
.ak-card__more {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--red);
  transition: gap 0.2s;
}
.ak-card:hover .ak-card__more { gap: 11px; }
.ak-card__more svg { width: 16px; height: 16px; fill: none; stroke: var(--red); stroke-width: 2.5; }

/* ===== Преимущества (иконки в ряд) ===== */
.ak-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ak-feature { text-align: center; }
.ak-feature__ico {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--red-50); display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.ak-feature__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.ak-feature__text { font-size: 15px; color: var(--muted); margin: 0; }

/* ===== Полоса-CTA ===== */
.ak-cta {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ak-cta__title { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 38px); font-weight: 900; margin: 0 0 12px; }
.ak-cta__text { font-size: 18px; color: #c5cbe6; margin: 0 0 28px; }
.ak-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ak-cta .ak-btn--secondary { background: #fff; border-color: #fff; }

/* ===== Фотогалерея (масонри — корректно показывает любую ориентацию) ===== */
.ak-gallery__grid { columns: 3 300px; column-gap: 16px; }
.ak-gallery__grid img {
  width: 100%; margin: 0 0 16px; display: block;
  border-radius: 16px; break-inside: avoid; box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s;
}
.ak-gallery__grid img:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (max-width: 600px) {
  /* На мобиле масонри из портретных фото разъезжается (справа большие пустоты) —
     показываем ровную сетку 2×N с квадратной обрезкой плиток (object-fit: cover). */
  .ak-gallery__grid { columns: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ak-gallery__grid img { margin: 0; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
}

/* «Показать ещё»: в свёрнутом виде видны первые 6 фото (2 ряда по 3 — симметрично),
   остальное раскрывается по клику. Кнопка появляется ТОЛЬКО если есть 7-я картинка
   (через :has()), т.е. когда реально есть что показать. Без JS. Нужен браузер с :has() —
   все актуальные (Chrome/Edge/Safari/Firefox с 2023). В старых: лишние фото просто скрыты. */
.ak-gallery { text-align: center; }
.ak-gallery__grid { text-align: left; }
.ak-gallery__grid > img:nth-child(n+7) { display: none; }
.ak-gallery:has(.ak-gallery__more-toggle:checked) .ak-gallery__grid > img:nth-child(n+7) { display: block; }
.ak-gallery__more { display: none; margin-top: 24px; }
.ak-gallery:has(.ak-gallery__grid > img:nth-child(7)) .ak-gallery__more { display: inline-flex; }
.ak-gallery__more-hide { display: none; }
.ak-gallery:has(.ak-gallery__more-toggle:checked) .ak-gallery__more-show { display: none; }
.ak-gallery:has(.ak-gallery__more-toggle:checked) .ak-gallery__more-hide { display: inline; }
/* Страница /fotogalereya — показываем все фото, без «Показать ещё». */
.ak-gallery--full .ak-gallery__grid > img:nth-child(n+7) { display: block; }
.ak-gallery__cta { margin-top: 24px; }

/* ============================================================
   Переиспользуемые секции (главная + любые CMS-страницы).
   Вынесены из home.html, чтобы блоки работали на всех страницах.
   Разметку-шаблоны этих секций см. в docs/BLOCKS.md.
   ============================================================ */

/* ===== Hero (две колонки: текст + фото) ===== */
.ak-hero { position: relative; overflow: hidden; background: var(--bg-soft); }
.ak-hero::before {
  content: ''; position: absolute; top: -160px; right: -120px; width: 540px; height: 540px;
  border-radius: 50%; background: radial-gradient(circle, rgba(214,36,54,0.10) 0%, transparent 70%); pointer-events: none;
}
.ak-hero::after {
  content: ''; position: absolute; bottom: -180px; left: -140px; width: 560px; height: 560px;
  border-radius: 50%; background: radial-gradient(circle, rgba(31,45,110,0.10) 0%, transparent 70%); pointer-events: none;
}
.ak-hero__inner { position: relative; z-index: 2; padding: 64px 24px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.ak-hero__label {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--navy); background: #fff; padding: 8px 18px; border-radius: 999px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.ak-hero__title {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px;
}
.ak-hero__title b { color: var(--red); }
.ak-hero__sub { font-size: clamp(16px, 1.4vw, 20px); color: var(--muted); margin: 0 0 30px; }
.ak-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.ak-hero__stats {
  display: flex; align-items: stretch; max-width: 470px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 8px;
}
.ak-hero__stat { flex: 1; text-align: center; padding: 2px 12px; position: relative; }
.ak-hero__stat + .ak-hero__stat::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 40px; background: var(--line);
}
.ak-hero__stat-value {
  font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1;
  color: var(--navy); white-space: nowrap;
}
.ak-hero__stat-value span { font-size: 16px; font-weight: 800; color: var(--navy); opacity: 0.7; }
.ak-hero__stat-label { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 7px; }
.ak-hero__media { position: relative; }
.ak-hero__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow-lg); display: block; }
.ak-hero__badge {
  position: absolute; left: -18px; bottom: -18px; background: #fff; border-radius: 18px;
  padding: 14px 18px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 12px;
}
.ak-hero__badge-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--red-50); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ak-hero__badge-text b { font-family: var(--font-display); font-weight: 900; color: var(--ink); display: block; font-size: 16px; }
.ak-hero__badge-text span { font-size: 13px; color: var(--muted); }

/* Hero без фото: одна колонка, контент по центру, ограниченная ширина.
   Применяй <section class="ak-hero ak-hero--text"> и убери .ak-hero__media. */
.ak-hero--text .ak-hero__inner { grid-template-columns: 1fr; text-align: center; }
.ak-hero--text .ak-hero__text { max-width: 760px; margin: 0 auto; }
.ak-hero--text .ak-hero__actions { justify-content: center; }
.ak-hero--text .ak-hero__stats { margin-left: auto; margin-right: auto; }

/* ===== Сплит-блок (фото + текст) ===== */
.ak-split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
/* Зеркальный вариант: фото справа, текст слева (на десктопе). */
.ak-split--reverse .ak-split__media { order: 2; }
.ak-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-md); display: block; }
/* Портретное/квадратное фото в сплите (фото специалиста) — квадрат без обрезки
   головы. object-position: top — подстраховка, если фото заменят на не-квадратное. */
.ak-split--portrait .ak-split__media img { aspect-ratio: 1 / 1; object-position: top; }
/* Векторная иллюстрация вместо фото в сплите (для страниц без тематических фото,
   напр. /dop-obrazovanie). Короткая горизонтальная карточка с мягким фоном и тенью,
   ограниченная по ширине и центрированная в колонке — не растягивается во весь столбец
   и не «бедна» по высоте. SVG несёт собственный фон, поэтому одинакова на любой секции. */
.ak-split__media.ak-illus {
  width: 100%; max-width: 460px; margin-inline: auto; box-sizing: border-box;
  background: var(--navy-50); border-radius: 24px; box-shadow: var(--shadow-md);
  display: grid; place-items: center; padding: 22px 30px; overflow: hidden;
}
.ak-illus svg { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .ak-illus { max-width: 380px; padding: 18px 24px; }
}
.ak-split__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px; }
.ak-split__text { font-size: 17px; color: var(--muted); margin: 0 0 14px; }
/* Нумерованные шаги процесса (например, в сплите рядом с фото). */
.ak-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.ak-steps__item { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.ak-steps__num {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.ak-steps__title { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin: 6px 0 4px; color: var(--ink); }
.ak-steps__text { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin: 0; }
/* Сплит со списком шагов: на десктопе фото тянется на высоту колонки шагов
   (иначе фото 4:3 заметно короче списка). На мобиле — обычное 4:3. */
@media (min-width: 861px) {
  .ak-split:has(.ak-steps) { align-items: stretch; }
  .ak-split:has(.ak-steps) .ak-split__media img { aspect-ratio: auto; height: 100%; }
}

/* ===== Карточки программ: компактные, с линейной SVG-иконкой в углу ===== */
.ak-card--prog { position: relative; padding: 26px 24px; overflow: hidden; }
.ak-card--prog .ak-card__age { margin-bottom: 14px; }
.ak-card--prog .ak-card__title { font-size: 20px; margin-bottom: 8px; padding-right: 44px; }
.ak-card--prog .ak-card__text { font-size: 14.5px; margin-bottom: 18px; }
.ak-card__corner {
  position: absolute; top: 22px; right: 22px;
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--navy-50); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.ak-card__corner svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ak-card--prog:hover .ak-card__corner { background: var(--red); color: #fff; transform: rotate(-6deg) scale(1.05); }

/* ===== «Почему мы»: сетка карточек-преимуществ ===== */
.ak-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Ровно 4 карточки в ряд (напр. 4 категории) — без «осиротевшей» карточки.
   Планшет/телефон ниже схлопывают .ak-why-grid в 2 → 1 колонку как обычно. */
.ak-why-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Карточки без иконки: контент по верху (не по центру), заголовок на всю ширину.
   min-height у заголовка = 2 строки → 1- и 2-строчные заголовки одной высоты,
   поэтому тексты всех карточек начинаются на одном уровне. Hover — красная рамка. */
.ak-why-grid--plain .ak-why-card { display: flex; flex-direction: column; align-items: flex-start; }
.ak-why-grid--plain .ak-why-card__title { min-height: 3.3em; }
.ak-why-grid--plain .ak-why-card:hover { border-color: var(--red); }
.ak-why-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  /* Иконка и заголовок — в один ряд (на одном уровне), текст — на всю ширину ниже */
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px;
}
.ak-why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--navy-50); }
.ak-why-card__ico {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: var(--navy-50); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, color 0.25s;
}
.ak-why-card__ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ak-why-card:hover .ak-why-card__ico { background: var(--red); color: #fff; }
.ak-why-card__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin: 0; color: var(--ink); }
.ak-why-card__text { grid-column: 1 / -1; font-size: 14.5px; color: var(--muted); line-height: 1.55; margin: 14px 0 0; }
@media (max-width: 880px) { .ak-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .ak-why-grid { grid-template-columns: 1fr; }
  /* Одна колонка — выравнивать заголовки между карточками не с чем, резерв высоты убираем. */
  .ak-why-grid--plain .ak-why-card__title { min-height: 0; }
}

/* ===== STEAM: расшифровка пятью карточками-буквами ===== */
.ak-steam { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.ak-steam__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 18px; box-shadow: var(--shadow-sm); text-align: center;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.ak-steam__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--navy-50); }
.ak-steam__letter {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 1;
  color: #fff; background: var(--navy);
}
.ak-steam__item:nth-child(even) .ak-steam__letter { background: var(--red); }
.ak-steam__en {
  font-family: var(--font-display); font-weight: 800; font-size: 12.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--red); margin-bottom: 3px;
}
.ak-steam__item:nth-child(even) .ak-steam__en { color: var(--navy); }
.ak-steam__ru { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); margin-bottom: 9px; }
.ak-steam__text { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.ak-steam__foot { text-align: center; max-width: 720px; margin: 30px auto 0; color: var(--muted); font-size: 15px; }
.ak-steam__foot b { color: var(--ink); }
@media (max-width: 860px) { .ak-steam { grid-template-columns: repeat(3, 1fr); } }
/* Телефоны: одна колонка, карточки горизонтальные (буква слева, текст справа) —
   компактный список без «висящей» пятой карточки. */
@media (max-width: 520px) {
  .ak-steam { grid-template-columns: 1fr; gap: 12px; }
  .ak-steam__item {
    display: grid; grid-template-columns: auto 1fr; column-gap: 16px;
    align-items: center; text-align: left; padding: 16px 18px;
  }
  .ak-steam__letter {
    grid-column: 1; grid-row: 1 / span 3; align-self: center;
    width: 54px; height: 54px; margin: 0; font-size: 30px; border-radius: 14px;
  }
  .ak-steam__en { margin-bottom: 0; }
  .ak-steam__ru { margin-bottom: 2px; }
}

/* ===== Отзывы (слайдер) ===== */
.ak-reviews { scroll-margin-top: 90px; }
.ak-reviews__slider { position: relative; margin-top: 8px; }
.ak-reviews__track {
  display: flex; gap: 22px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  padding: 6px 2px 12px; margin: 0 -2px;
  scrollbar-width: none;
}
.ak-reviews__track::-webkit-scrollbar { display: none; }
.ak-review {
  flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.ak-review__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ak-review__stars { color: #f5a623; font-size: 16px; letter-spacing: 1px; }
.ak-review__src { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
/* Текст обрезается по высоте (5 строк) с многоточием — полный читается по кнопке. */
.ak-review__text {
  font-size: 15px; color: var(--ink); line-height: 1.6; margin: 0 0 16px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.ak-review__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.ak-review__author { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); }
.ak-review__date { font-size: 13px; color: var(--muted); }
.ak-review__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--red); margin-top: 10px; transition: gap 0.2s; }
.ak-review__link:hover { gap: 10px; }
/* Навигация слайдера */
.ak-reviews__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.ak-reviews__nav-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--navy); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.ak-reviews__nav-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.ak-reviews__nav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ak-reviews__nav-btn[disabled] { opacity: 0.35; cursor: default; }
.ak-reviews__nav-btn[disabled]:hover { background: #fff; color: var(--navy); border-color: var(--line); }
.ak-reviews__cta { text-align: center; margin-top: 28px; }
@media (max-width: 880px) { .ak-review { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 600px) { .ak-review { flex-basis: 86%; } }

/* Hero + split — общий брейкпоинт на одну колонку */
@media (max-width: 860px) {
  .ak-hero__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .ak-hero__actions { justify-content: center; }
  .ak-hero__stats { margin-left: auto; margin-right: auto; }
  .ak-hero__media { max-width: 520px; margin: 0 auto; }
  .ak-split { grid-template-columns: 1fr; gap: 32px; }
  .ak-split--reverse .ak-split__media { order: -1; }
  .ak-split__title { text-align: center; }
}
/* Телефоны: счётчики hero (nowrap-значения в карточке max-width:470px) не влезали
   в узкий вьюпорт → блок выходил за край и обрезался overflow:hidden справа
   (слева отступ есть, справа нет). Ужимаем шрифт/паддинги и тянем карточку по ширине. */
@media (max-width: 480px) {
  .ak-hero__inner { padding: 48px 18px; }
  .ak-hero__stats { width: 100%; max-width: 360px; padding: 14px 4px; }
  .ak-hero__stat { padding: 2px 6px; }
  .ak-hero__stat-value { font-size: 24px; }
  .ak-hero__stat-value span { font-size: 12.5px; }
  .ak-hero__stat-label { font-size: 11px; }
}

/* ===== FAQ (нативный аккордеон на <details>, без JS) ===== */
.ak-faq { max-width: 820px; margin: 0 auto; }
.ak-faq__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden;
  transition: border-color 0.2s;
}
.ak-faq__item[open] { border-color: var(--navy-50); }
.ak-faq__q {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; font-family: var(--font-display); font-weight: 800;
  font-size: 17px; color: var(--ink); transition: color 0.2s;
}
.ak-faq__q:hover { color: var(--navy); }
.ak-faq__q::-webkit-details-marker { display: none; }
.ak-faq__q::after {
  content: ''; flex-shrink: 0; width: 22px; height: 22px; transition: transform 0.25s;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2d6e' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.ak-faq__item[open] .ak-faq__q::after { transform: rotate(45deg); }
.ak-faq__a { padding: 0 24px 22px; font-size: 15.5px; color: var(--muted); line-height: 1.65; margin: 0; }

/* ===== Контакты + карта ===== */
.ak-contacts { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 30px; align-items: stretch; }
.ak-contacts__info {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 28px 28px 24px; display: flex; flex-direction: column;
}
.ak-contacts__row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ak-contacts__row:first-of-type { padding-top: 0; }
.ak-contacts__ico {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
  background: var(--navy-50); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.ak-contacts__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ak-contacts__label { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.ak-contacts__value { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--ink); }
.ak-contacts__value a:hover { color: var(--navy); }
.ak-contacts__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ak-contacts__map {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); min-height: 340px;
}
.ak-contacts__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
@media (max-width: 780px) {
  .ak-contacts { grid-template-columns: 1fr; }
  .ak-contacts__map { min-height: 280px; }
}
@media (max-width: 480px) {
  .ak-contacts__actions .ak-btn { flex: 1 1 100%; justify-content: center; white-space: nowrap; }
}

/* ============================================================
   Типографика контента (CMS-страницы, блог/новости, статьи)
   ============================================================ */
.content {
  max-width: var(--max-w-text);
  margin: 0 auto;
  padding: 48px 24px;
  overflow-wrap: break-word;   /* длинные слова/ссылки не вылезают за край */
}
.content iframe, .content video, .content table { max-width: 100%; }
/* Встроенное видео (YouTube/RuTube/VK и т.п.) — адаптивный контейнер 16:9 */
.content .ak-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.5em 0; }
.content .ak-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
/* То же видео-«окно» 16:9 для блоков-секций (вне .content, напр. видео-блок на CMS-странице) */
.ak-section .ak-video { position: relative; width: 100%; max-width: 760px; margin-inline: auto; aspect-ratio: 16 / 9; }
.ak-section .ak-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 16px; }

/* ===== Расписание (таблица «день × урок») ===== */
.ak-schedule__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.ak-schedule__table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; background: var(--bg); }
.ak-schedule__table th, .ak-schedule__table td { padding: 14px 12px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.ak-schedule__table tr:last-child th, .ak-schedule__table tr:last-child td { border-bottom: 0; }
.ak-schedule__table th:last-child, .ak-schedule__table td:last-child { border-right: 0; }
.ak-schedule__corner, .ak-schedule__lesson-h { background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 800; }
.ak-schedule__corner { font-size: 14px; }
.ak-schedule__lesson-h { white-space: nowrap; }
.ak-schedule__lesson-h b { display: block; font-size: 16px; }
.ak-schedule__time { display: block; margin-top: 3px; font-weight: 700; font-size: 12px; color: #c7d0f0; }
.ak-schedule__time:empty { display: none; }
.ak-schedule__corner, .ak-schedule__day { position: sticky; left: 0; }
.ak-schedule__corner { z-index: 2; }
.ak-schedule__day { z-index: 1; background: var(--navy-50); color: var(--navy); font-family: var(--font-display); font-weight: 800; white-space: nowrap; font-size: 14px; }
.ak-schedule__cell { font-weight: 600; color: var(--ink); background: var(--bg); }
.ak-schedule__table tbody tr:nth-child(even) .ak-schedule__cell { background: var(--bg-soft); }
.ak-schedule__opt { display: block; font-weight: 700; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-top: 3px; }
@media (max-width: 560px) {
  .ak-schedule__table th, .ak-schedule__table td { padding: 11px 9px; font-size: 13px; }
  .ak-schedule__lesson-h b { font-size: 14px; }
}

/* Распорядок дня — вертикальный таймлайн «время → занятие».
   Общий для всей ступени (у каждого класса своё предметное расписание).
   Строка: пилюля-время (липкая по левому краю) + занятие (+ необязательная заметка
   .ak-daily__note). На узких экранах строка складывается в один столбец. */
.ak-daily { max-width: 720px; margin: 0 auto; }
.ak-daily__item { display: grid; grid-template-columns: 116px 1fr; gap: 20px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.ak-daily__item:last-child { border-bottom: 0; }
.ak-daily__time { justify-self: start; background: var(--navy-50); color: var(--navy); font-family: var(--font-display); font-weight: 800; font-size: 14px; white-space: nowrap; padding: 5px 12px; border-radius: 999px; }
.ak-daily__act { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.ak-daily__note { display: block; margin-top: 4px; font-weight: 600; font-size: 14px; color: var(--muted); }
/* Мобилка: время + заголовок в одну строку, пояснение — строкой ниже под заголовком.
   display:contents «растворяет» обёртку <div>, чтобы заголовок и пояснение легли
   прямыми грид-ячейками рядом с пилюлей-временем. */
@media (max-width: 480px) {
  .ak-daily__item { grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; }
  .ak-daily__item > div { display: contents; }
  .ak-daily__time { grid-column: 1; grid-row: 1; }
  .ak-daily__act  { grid-column: 2; grid-row: 1; }
  .ak-daily__note { grid-column: 2; grid-row: 2; margin-top: 0; }
}
.content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
/* Ленты Новостей/Блога — во всю ширину главной (списком карточек),
   в отличие от узкой колонки для чтения отдельной статьи. */
.content--wide { max-width: var(--max-w); }
.content h1, .content h2, .content h3, .content h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 1.6em 0 0.5em;
}
.content h1 { font-size: clamp(30px, 5vw, 42px); margin-top: 0; font-weight: 900; letter-spacing: -0.02em; }
.content h2 { font-size: 30px; font-weight: 800; }
.content h3 { font-size: 23px; font-weight: 800; }
.content p { margin: 0 0 1em; }
.content a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.content a:hover { color: var(--red-600); }
.content ul, .content ol { margin: 0 0 1em 1.2em; padding: 0; }
.content li { margin: 0.4em 0; }
/* Таблицы в контенте (напр. «Цели обработки» в политике): видимые рамки */
.content table { border-collapse: collapse; width: 100%; margin: 0 0 1.5em; }
.content th, .content td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.content th { background: var(--bg-soft); font-weight: 700; color: var(--ink); }
.content blockquote {
  border-left: 4px solid var(--red);
  margin: 1.5em 0; padding: 0.4em 0 0.4em 1.1em;
  color: var(--muted); font-style: italic;
}
.content code { background: var(--bg-soft); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }
.content img { height: auto; border-radius: 14px; display: block; margin: 1.5em auto; }
.content time { color: var(--muted); font-size: 14px; }
.content .lead { font-size: 20px; color: var(--muted); margin-bottom: 1.5em; }
.content .cover { width: 100%; margin: 1.5em 0; border-radius: 16px; }

/* ===== Хлебные крошки ===== */
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 14px; color: var(--muted); margin-bottom: 24px;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--navy); }
.breadcrumbs__sep { opacity: 0.5; }
.breadcrumbs__current { color: var(--ink); }

/* ak-крошки на полностраничных секционных страницах (о-нас, галерея, сведения) */
.ak-breadcrumbs { padding-top: 22px; }
/* Подтягиваем фон крошек под следующую секцию, если она «мягкая» (серый хиро/секция),
   чтобы не было белой полосы над серым блоком. :has() уже используется в проекте. */
.ak-breadcrumbs:has(+ .ak-hero),
.ak-breadcrumbs:has(+ .ak-section--soft) { background: var(--bg-soft); padding-bottom: 4px; }
.ak-breadcrumbs__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
}
.ak-breadcrumbs__item { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.ak-breadcrumbs__item:not(:first-child)::before { content: "/"; opacity: 0.45; }
.ak-breadcrumbs__link { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.ak-breadcrumbs__link:hover { color: var(--navy); }
.ak-breadcrumbs__current { color: var(--ink); }

/* ===== Список новостей/статей ===== */
ul.article-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
/* На широкой ленте — две колонки карточек, чтобы заполнить ширину главной. */
.content--wide ul.article-list { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) {
  .content--wide ul.article-list { grid-template-columns: 1fr; }
}
.article-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  /* Обложка — фикс. квадрат 200×200 в каждой карточке → высота карточек одинаковая. */
  display: grid; grid-template-columns: 228px 1fr; align-items: stretch;
  position: relative;       /* база для растянутой ссылки-оверлея заголовка */
}
.article-card:hover { border-color: var(--navy-50); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.article-card__cover-link { display: block; line-height: 0; padding: 14px; }
/* Обложка — квадрат 200×200, фото обрезается по центру. Одинакова во всех карточках.
   Селектор из двух классов — чтобы перебить `.content img` (height:auto, margin). */
.article-card .article-card__cover { width: 200px; height: 200px; object-fit: cover; border-radius: 12px; margin: 0; }
/* Заглушка обложки (если фото не загрузили) — логотип на фирменном градиенте. */
.article-card__cover--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy-50) 0%, #eef1fb 55%, var(--red-50) 100%);
  border: 1px solid var(--line);
}
.article-card__placeholder-logo { width: 76px; height: 76px; opacity: 0.92; }
.article-card__body {
  padding: 20px 24px; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;   /* заголовок сверху, дата прижата вниз */
}
.article-card:not(:has(.article-card__cover-link)) { grid-template-columns: 1fr; }
.article-card a.article-card__title {
  font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--ink);
  text-decoration: none; line-height: 1.25; margin-bottom: 8px;
  /* не более 2 строк — длинный заголовок обрезается многоточием */
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card a.article-card__title:hover { color: var(--navy); }
/* Кликабельна вся карточка: невидимый слой-ссылка поверх (stretched link). */
.article-card a.article-card__title::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.article-card p {
  margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5;
  /* лид — до 3 строк, дальше многоточие (карточка не растёт) */
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card time { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 13px; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 960px) {
  .ak-cards, .ak-cards--2 { grid-template-columns: repeat(2, 1fr); }
  .ak-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ak-section { padding: 52px 0; }
  .ak-cards, .ak-cards--2 { grid-template-columns: 1fr; }
  .ak-features { grid-template-columns: 1fr; gap: 28px; }
  .ak-cta { padding: 40px 24px; }
  .article-card { grid-template-columns: 1fr; height: auto; }
  .article-card__cover-link { padding: 14px 14px 0; height: auto; }
  /* на телефоне обложка во всю ширину карточки, 16:9 (та же специфичность, ниже в файле) */
  .article-card .article-card__cover { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}