/* ============================================================
   AI CJM – Страница /edu/ (Корпоративное AI-обучение).
   Перенесена на светлую премиум-систему (см. redesign.css).
   Подключать ПОСЛЕ redesign.css и redesign-components.css.
   Форма (#cta) и футер берут стиль из redesign-components.css.
============================================================ */

/* Острые углы во всех легаси-радиусах + маппинг отсутствующих
   в redesign.css токенов на новые. Так не нужно править каждый
   var(--r-*)/var(--muted) по месту. */
:root{
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;
  --muted: var(--ink-3);
  --muted-2: var(--ink-3);
}

/* ============================================================
   БАЗОВЫЙ СЛОЙ (заменяет нужный минимум из legacy components.css)
============================================================ */

/* Sticky-хедер (73px) перекрывает верх секции при переходе по якорю
   (#pains, #products, #programs, #proof, #cta) — заголовок обрезается. */
main[id], section[id]{ scroll-margin-top: 84px; }

.section{ padding: var(--section-py) var(--pad-x); }
.section.soft{ background: var(--bg-1); }
.container{ max-width: 1180px; margin-left: auto; margin-right: auto; }

.h-section{
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.06;
  color: var(--ink); text-align: center; margin: 0 0 18px;
}
.h-section .a, .h-section .accent, .accent{ color: var(--accent-bright); }
.h-sub{
  text-align: center; margin: 0 auto 48px; max-width: 820px;
  font-size: 16px; line-height: 1.55; color: var(--ink-2);
}

/* Кнопки: базовый .btn – в redesign.css (синий, острые углы).
   Здесь – варианты, что использует разметка edu. */
.btn-primary{ background: var(--accent); color: #fff; }
.btn-primary:hover{ background: var(--accent-ink); }
.btn-ghost{
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-input);
}
.btn-ghost:hover{ background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-lg{ padding: 18px 36px; font-size: 16px; }

/* ============================================================
   HERO + первый экран
============================================================ */
.container, .hero, .logo-strip{ max-width: 1180px; margin-left: auto; margin-right: auto; }

.screen{
  display: flex; flex-direction: column;
  padding: clamp(56px, 9vh, 120px) var(--pad-x) clamp(40px, 6vh, 72px);
  gap: clamp(56px, 8vh, 96px);
}
.hero{ padding: 0; text-align: center; }
.hero h1{
  font-size: clamp(34px, 8.5vw, 96px);   /* vw, а не vh – иначе на узком экране заголовок не уменьшается и вылезает */
  margin: 0 0 32px; letter-spacing: -.03em; line-height: 1.05;
  font-weight: 800; color: var(--ink);
}
.hero .hero-sub{
  margin: 0 auto 44px; max-width: 760px;
  font-size: clamp(16px, 4.4vw, 24px); line-height: 1.5;
  color: var(--ink); font-weight: 500;
}
.hero .hero-sub b{ color: var(--accent-bright); font-weight: 800; }
.hero .hero-cta{
  justify-content: center; margin-top: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 1.6vh, 18px);
}
.hero-cases{
  font-size: clamp(14px, 1.5vh, 16px); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-cases a{
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.hero-cases a:hover{ color: var(--accent); }

/* Logo strip – плашки клиентов на холодном сером, острые углы */
.logo-strip.ds-style{ padding: 0; border-bottom: none; }
.logo-strip.ds-style .logo-strip-head{
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.logo-strip.ds-style .ds-label{ font-size: 15px; font-weight: 700; color: var(--ink); }
.logo-strip.ds-style .ds-head-actions{ display: flex; align-items: center; gap: 14px; }
.logo-strip.ds-style .ds-more{ font-size: 13px; color: var(--ink-3); }
.logo-strip.ds-style .ds-btn-link{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none;
  transition: color .15s ease;
}
.logo-strip.ds-style .ds-btn-link:hover{ color: var(--accent); }
.logo-strip.ds-style .ds-btn-link:hover .ds-arrow{ transform: translateX(3px); }
.logo-strip.ds-style .ds-arrow{ transition: transform .15s ease; }
.logo-strip.ds-style .ds-strip{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.logo-strip.ds-style .ds-slot{
  height: 46px; padding: 8px 18px;
  background: var(--bg-1); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex-shrink: 0; transition: background .15s ease, border-color .15s ease;
}
.logo-strip.ds-style .ds-slot img{
  height: 22px; width: auto; max-width: 130px;
  object-fit: contain; opacity: .95;
}
.logo-strip.ds-style .ds-slot .ds-wm{
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink); white-space: nowrap;
}
.logo-strip.ds-style .ds-slot:hover{ background: #e9eef6; border-color: #c5d0e4; }
.logo-strip.ds-style .ds-slot:hover img{ opacity: 1; }

/* Hero proof-карточки */
.hero-proofs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; max-width: 1100px; }
.proof-card{
  background: var(--bg-card); border: 1px solid var(--line);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 8px;
}
.proof-card .proof-num{ font: 800 32px/1 'Inter'; color: var(--accent-bright); letter-spacing: -.02em; }
.proof-card .proof-label{ font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.proof-card .proof-label b{ color: var(--ink); font-weight: 700; }

/* ============================================================
   БОЛИ – интерактивные карточки (details)
============================================================ */
.pains{ display: grid; gap: 12px; }
.pain-card{
  background: var(--bg-card); border: 1px solid var(--line);
  overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease;
}
.pain-card[open]{ box-shadow: 0 6px 24px rgba(15,23,42,.06); border-color: #c5d0e4; }
.pain-card > summary{
  cursor: pointer; list-style: none; padding: 22px 28px;
  display: grid; grid-template-columns: 48px 1fr auto; gap: 18px;
  align-items: center; user-select: none;
}
.pain-card > summary::-webkit-details-marker{ display: none; }
.pain-card .pain-num{ font: 800 16px/1 'Inter'; color: var(--accent-bright); letter-spacing: .04em; }
.pain-card .pain-quote{ font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.005em; line-height: 1.3; margin: 0; }
.pain-card .pain-toggle{
  width: 32px; height: 32px;
  background: var(--bg-1); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  transition: transform .25s ease, background .15s ease, color .15s ease;
}
.pain-card[open] .pain-toggle{ background: var(--accent); color: #fff; transform: rotate(45deg); }
.pain-body{
  padding: 26px 28px 28px 94px; display: grid; gap: 24px;
  border-top: 1px dashed var(--line-soft); margin-top: 4px;
}
.pain-body > div{ padding-bottom: 22px; border-bottom: 1px dashed var(--line-soft); }
.pain-body > div:has(+ .pain-cases),
.pain-body > div:last-child{ padding-bottom: 0; border-bottom: none; }
.pain-body p{ margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.pain-body p b{ color: var(--ink); font-weight: 700; }
.pain-body em{ color: var(--ink); font-style: normal; font-weight: 600; }
.pain-body .pain-section-label{ font: 800 12px/1 'Inter'; letter-spacing: .02em; color: var(--accent-bright); margin-bottom: 10px; }
.pain-body ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pain-body ul li{ position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.pain-body ul li::before{ content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 2px; background: var(--accent); }
.pain-cases{ display: grid; gap: 10px; padding: 18px 20px; background: var(--bg-1); }
.pain-case{ display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
.pain-case-logo{ display: flex; align-items: center; height: 24px; }
.pain-case-logo img{ max-height: 24px; max-width: 130px; width: auto; height: auto; object-fit: contain; opacity: .92; }
.pain-case-logo .case-wm{ font: 800 14px/1 'Inter'; color: var(--ink); letter-spacing: -.005em; white-space: nowrap; }
.pain-case-text{ font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.pain-case-text b{ color: var(--ink); font-weight: 700; }
.pain-case-text em{ color: var(--ink); font-style: italic; }

/* ============================================================
   ПОЧЕМУ ОБУЧЕНИЕ – 2×2
============================================================ */
.why-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.why-card{ background: var(--bg-card); border: 1px solid var(--line); padding: 32px 32px 28px; }
.why-card .why-num{ font: 800 12px/1 'Inter'; letter-spacing: .02em; color: var(--accent-bright); margin-bottom: 14px; }
.why-card h3{ margin: 0 0 12px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.why-card p{ margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ============================================================
   ТРИ ПРОДУКТА
============================================================ */
.products{ display: grid; gap: 24px; grid-template-columns: 1fr; }
.product{
  background: var(--bg-card); border: 1px solid var(--line);
  padding: 38px 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px;
}
.product .p-label{ font: 800 11px/1 'Inter'; letter-spacing: .02em; color: var(--accent-bright); margin-bottom: 14px; }
.product h3{ margin: 0 0 16px; font-size: 28px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; color: var(--ink); }
.product .p-result{ font-size: 16px; line-height: 1.5; color: var(--ink); margin-bottom: 16px; }
.product .p-result b{ color: var(--accent-bright); }
.product .p-who{ font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; }
.product .p-who b{ color: var(--ink); }
.product .p-inside{ font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.product .p-inside b{ color: var(--ink); font-weight: 700; }
.product .p-steps{ list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.product .p-steps li{ display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.product .p-steps li .step-num{ font: 800 13px/1 'Inter'; color: var(--accent-bright); padding-top: 2px; }
.product .p-side{ background: var(--bg-1); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.product .p-side-label{ font: 800 10.5px/1 'Inter'; letter-spacing: .02em; color: var(--ink-3); }
.product .p-cases{ display: grid; gap: 14px; }
.product .p-case{ display: grid; gap: 4px; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
.product .p-case:first-child{ border-top: none; padding-top: 0; }
.product .p-case-name{ font: 700 14px/1.25 'Inter'; color: var(--ink); }
.product .p-case-desc{ font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.product.product-flag{ background: linear-gradient(135deg, #eef4ff, #e3ecfb); border-color: #cdd9f5; }

/* ============================================================
   ПРОГРАММЫ – таблица
============================================================ */
.programs-wrap{ margin-top: 16px; }
.programs{ width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg-card); border: 1px solid var(--line); }
.programs thead th{
  text-align: left; padding: 18px 22px; font: 800 11px/1 'Inter'; letter-spacing: .04em;
  color: var(--ink-3); border-bottom: 1px solid var(--line-soft); background: var(--bg-1);
}
.programs tbody td{ padding: 18px 22px; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.5; }
.programs tbody tr:last-child td{ border-bottom: none; }
.programs td.prog-name{ font-weight: 700; color: var(--ink); width: 28%; }
.programs td.prog-tools{ color: var(--ink-2); width: 26%; }
.programs td.prog-dur{ color: var(--ink-2); width: 18%; white-space: nowrap; }
.programs td.prog-cases{ color: var(--ink-2); }
.programs td.prog-cases b{ color: var(--ink); font-weight: 700; }

.formats-extra{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.format-extra{ background: var(--bg-card); border: 1px solid var(--line); padding: 22px 22px 24px; }
.format-extra h4{ margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.005em; line-height: 1.25; }
.format-extra p{ margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.format-extra .clients-line{ margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }

/* ============================================================
   PROOF / метрики / кейсы (bento)
============================================================ */
.proof-metrics{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.metric{ background: var(--bg-card); border: 1px solid var(--line); padding: 24px 26px; }
.metric .m-num{ font: 800 36px/1 'Inter'; color: var(--accent-bright); letter-spacing: -.02em; margin-bottom: 8px; }
.metric .m-label{ font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.metric .m-label b{ color: var(--ink); font-weight: 700; }

.bento-cases{ margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.bento-case{
  background: var(--bg-card); border: 1px solid var(--line);
  padding: 26px 28px 28px; display: flex; flex-direction: column; height: 100%;
  min-height: 260px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bento-case:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15,23,42,.08); border-color: #c5d0e4; }
.bento-case.featured{ grid-column: span 2; background: linear-gradient(135deg, #eef4ff 0%, #e3ecfb 100%); border-color: #cdd9f5; padding: 36px 40px 38px; min-height: 280px; }
.bento-case .bc-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bento-case .bc-logo{ height: 28px; display: inline-flex; align-items: center; }
.bento-case .bc-logo img{ height: 100%; width: auto; max-width: 140px; object-fit: contain; opacity: .95; }
.bento-case .bc-logo .bc-wm{ font: 800 20px/1 'Inter'; color: var(--ink); letter-spacing: -.01em; }
.bento-case.featured .bc-logo{ height: 36px; }
.bento-case.featured .bc-logo .bc-wm{ font-size: 28px; }
.bento-case .bc-tag{ margin-left: auto; font: 700 11px/1.3 'Inter'; color: var(--ink-3); text-align: right; }
.bento-case .bc-headline{ font: 800 17px/1.25 'Inter'; color: var(--ink); letter-spacing: -.005em; margin: 0 0 10px; }
.bento-case.featured .bc-headline{ font-size: 22px; margin-bottom: 12px; }
.bento-case .bc-desc{ font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; flex: 1; }
.bento-case .bc-desc b{ color: var(--ink); font-weight: 700; }
.bento-case.featured .bc-desc{ font-size: 14.5px; }
.bento-case .bc-metric{ margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.bento-case .bc-metric .num{ font: 800 28px/1.05 'Inter'; color: var(--accent-bright); letter-spacing: -.02em; white-space: nowrap; }
.bento-case .bc-metric .label{ font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.bento-case .bc-metric .label b{ color: var(--ink); font-weight: 700; }
.bento-case.featured .bc-metric .num{ font-size: 40px; }
.bento-case.featured .bc-metric .label{ font-size: 14px; }

.outstanding{ margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.outstanding .out-card{ background: var(--bg-card); border: 1px solid var(--line); padding: 24px 26px; }
.outstanding .out-card .out-num{ font: 800 11px/1 'Inter'; color: var(--accent-bright); letter-spacing: .02em; margin-bottom: 12px; }
.outstanding .out-card h4{ margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.005em; line-height: 1.25; color: var(--ink); }
.outstanding .out-card p{ margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.logo-wall{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.logo-wall .lw-slot{
  background: var(--bg-1); border: 1px solid var(--line); padding: 10px 16px;
  display: inline-flex; align-items: center; height: 44px; min-width: 100px;
  font: 700 12px/1 'Inter'; color: var(--ink); letter-spacing: -.005em;
}
.logo-wall .lw-slot img{ max-height: 22px; max-width: 110px; width: auto; height: auto; object-fit: contain; opacity: .9; }

/* ============================================================
   Линия-разделитель между секциями
============================================================ */
.section + .section,
.section + footer,
main + .section{ border-top: 1px solid var(--line); }

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 1100px){
  .product{ grid-template-columns: 1fr; }
  .product .p-side{ order: 2; }
  .bento-cases{ grid-template-columns: repeat(2, 1fr); }
  .bento-case.featured{ grid-column: span 2; }
}
@media (max-width: 920px){
  .why-grid{ grid-template-columns: 1fr; }
  .hero-proofs{ grid-template-columns: 1fr; }
  .formats-extra{ grid-template-columns: 1fr; }
  .outstanding{ grid-template-columns: 1fr; }
  .proof-metrics{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .bento-cases{ grid-template-columns: 1fr; }
  .bento-case.featured{ grid-column: 1; padding: 28px 24px; }
  .bento-case.featured .bc-metric .num{ font-size: 44px; }
  .pain-card > summary{ grid-template-columns: 44px 1fr 32px; padding: 18px 20px; gap: 12px; }
  .pain-card .pain-quote{ font-size: 16px; }
  .pain-body{ padding: 18px 20px 22px 20px; }
  .pain-case{ grid-template-columns: 1fr; gap: 6px; }
  .programs thead{ display: none; }
  .programs tbody td{ display: block; padding: 10px 18px; }
  .programs tbody tr{ display: block; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
  .programs tbody tr:last-child{ border-bottom: none; }
  .programs td.prog-name{ padding-top: 18px; font-size: 16px; }
  .product{ padding: 28px 24px; }
}