/* ob-modules — пульт из 16 клавиш и панель модуля (01-SPEC.md: ИЗМЕНЕНИЕ ТЗ И8.5). Дорожка В.
   ≥ 1024 px — сетка 4×4, панель справа; 768–1023 — 4 колонки, панель под сеткой; < 768 — 2 колонки.
   layout="pin" — компактный вид для залипающего раздела главной (И8.5 п.4; круг 4 — по высоте окна). */
ob-modules {
  --ob-modules-key-depth: 4px;     /* «объёмная» клавиша: тень снизу */
  --ob-modules-key-press: 2px;     /* нажатие — сдвиг на 2 px */
  --ob-modules-key-min: 112px;     /* высота клавиши в обычном виде */
  --ob-modules-key-min-sm: 88px;   /* высота клавиши на телефоне */
  --ob-modules-pin-name: 14px;     /* название клавиши в виде pin при окне ≥ 1280 */
  --ob-modules-lift: -5px;         /* п.41: подъём при наведении — те же параметры, что у карточек главной */
  --ob-modules-lift-shadow: var(--shadow);
  --ob-modules-lift-dur: .25s;
  --ob-modules-pin-num: 11px;      /* номер клавиши в виде pin */
  --ob-modules-pin-name-sm: 12px;  /* название клавиши в виде pin при окне 1024–1279 */
  --ob-modules-shot-w: 960;        /* пропорция рамки кадра 16:10 — под неё снимает дорожка Б */
  --ob-modules-shot-h: 600;
  --ob-modules-pin-desc-lh: 1.45;  /* межстрочный описания в виде pin */
  --ob-modules-pin-desc-rows: 3;   /* место под описание в виде pin (≥ 1024): самое длинное — 3 строки */
  --ob-modules-pin-desc-rows-md: 5;   /* то же при 768–1023 (текст справа от кадра): до 5 строк на 768 */
  display: block;
  width: 100%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ob-modules { --ob-modules-lift-shadow: 0 18px 40px rgba(0, 0, 0, .28); }
}
:root[data-theme="dark"] ob-modules { --ob-modules-lift-shadow: 0 18px 40px rgba(0, 0, 0, .28); }

.ob-modules__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
@media (min-width: 1024px) {
  .ob-modules__wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-6); }
  .ob-modules__panel { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}

/* ---------- клавиши ---------- */
/* п.39: как клавиша пульта — номер мелко в левом верхнем углу, название в левом нижнем, всё влево;
   выбранная залита акцентом */
.ob-modules__keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;        /* ряды одной высоты */
  gap: var(--sp-2);
  padding-bottom: var(--ob-modules-key-depth);
}
@media (min-width: 768px) {
  .ob-modules__keys { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
}

.ob-modules__key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-width: 0;
  min-height: var(--ob-modules-key-min-sm);
  margin: 0;
  padding: var(--sp-3);
  text-align: left;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 var(--ob-modules-key-depth) 0 0 var(--line);
  font: inherit;
  cursor: pointer;
  transition: transform var(--ob-modules-lift-dur) var(--ease), box-shadow var(--ob-modules-lift-dur) var(--ease),
              background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
@media (min-width: 768px) {
  .ob-modules__key { min-height: var(--ob-modules-key-min); padding: var(--sp-4); }
}
/* п.41: наведение — подъём, тень, рамка акцентом; только у мыши (на сенсоре не залипает) */
@media (hover: hover) {
  .ob-modules__key:not([aria-pressed="true"]):not(:active):hover {
    border-color: var(--accent);
    box-shadow: 0 var(--ob-modules-key-depth) 0 0 var(--line), var(--ob-modules-lift-shadow);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ob-modules__key:not([aria-pressed="true"]):not(:active):hover { transform: translateY(var(--ob-modules-lift)); }
}
.ob-modules__key:active {
  transform: translateY(var(--ob-modules-key-press));
  box-shadow: 0 calc(var(--ob-modules-key-depth) - var(--ob-modules-key-press)) 0 0 var(--line);
}
.ob-modules__key[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: translateY(var(--ob-modules-key-press));
  box-shadow: 0 calc(var(--ob-modules-key-depth) - var(--ob-modules-key-press)) 0 0 var(--accent-hover);
}

.ob-modules__key-num {
  font-size: var(--fs-kick);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ob-modules__key[aria-pressed="true"] .ob-modules__key-num,
.ob-modules__key[aria-pressed="true"] .ob-modules__key-line { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }
.ob-modules__key-name {
  margin-top: auto;           /* название и строка — к низу клавиши, номер остаётся сверху */
  padding-top: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: normal;      /* слово целиком: «Оргструктура» не рвётся */
  -webkit-hyphens: manual;
  hyphens: manual;
}
@media (min-width: 768px) {
  .ob-modules__key-name { font-size: var(--fs-body); }
}
.ob-modules__key-line {
  font-size: var(--fs-kick);
  line-height: 1.35;
  color: var(--muted);
}

/* ---------- панель ---------- */
.ob-modules__panel {
  min-width: 0;
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ob-modules__count {
  margin: 0;
  font-size: var(--fs-kick);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.ob-modules__title {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.ob-modules__desc {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.ob-modules__screen {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-2);
  background: var(--frame);
  border-radius: var(--radius-sm);
}
.ob-modules__shot,
.ob-modules__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ob-modules-shot-w) / var(--ob-modules-shot-h);
  border-radius: calc(var(--radius-sm) - var(--sp-2) / 2);
}
.ob-modules__shot { object-fit: cover; object-position: top left; background: var(--card); }

.ob-modules__demo {
  display: inline-block;
  margin-top: var(--sp-4);
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: none;
}
.ob-modules__demo:hover { text-decoration: underline; }

/* ---------- layout="pin": пульт ужимается в высоту, которую ему дали ---------- */
/* Главная даёт залипающей части высоту окна без шапки, а тегу — остаток (flex: 1; min-height: 0).
   Тогда клавиши (4 ряда) и панель делят эту высоту: без прокрутки и обрезки, и высота панели не
   зависит от выбранного модуля — кадр или схема вписывается в рамку (contain). Высоты не дали
   (reduced-motion, фикстура без рамки) — пульт той же раскладки по содержимому. */
@media (min-width: 1024px) {
  ob-modules[layout="pin"] { display: flex; flex-direction: column; min-height: 0; }
  ob-modules[layout="pin"] .ob-modules__wrap {
    flex: 1 1 auto;
    height: 100%;               /* и если тег — блок заданной высоты, а не flex */
    min-height: 0;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);   /* панель шире сетки клавиш */
    grid-template-rows: minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: stretch;
  }
  ob-modules[layout="pin"] .ob-modules__keys {
    min-height: 0;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--sp-2);
  }
  ob-modules[layout="pin"] .ob-modules__key {
    min-height: 0;
    gap: 0;
    padding: var(--sp-2) var(--sp-3);
  }
  ob-modules[layout="pin"] .ob-modules__key-line { display: none; }
  ob-modules[layout="pin"] .ob-modules__key-num { font-size: var(--ob-modules-pin-num); line-height: 1.2; }
  ob-modules[layout="pin"] .ob-modules__key-name { padding-top: var(--sp-1); font-size: var(--ob-modules-pin-name); line-height: 1.2; }
  ob-modules[layout="pin"].ob-modules--tight .ob-modules__key-num { display: none; }   /* очень низкое окно */

  ob-modules[layout="pin"] .ob-modules__panel {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: var(--sp-3) var(--sp-4);
  }
  ob-modules[layout="pin"] .ob-modules__title { margin: var(--sp-1) 0; font-size: var(--fs-lead); }
  ob-modules[layout="pin"] .ob-modules__desc {
    flex: none;
    min-height: calc(var(--ob-modules-pin-desc-rows) * var(--ob-modules-pin-desc-lh) * 1em);   /* кадр одного размера у всех 16 */
    font-size: var(--fs-kick);
    line-height: var(--ob-modules-pin-desc-lh);
  }
  ob-modules[layout="pin"] .ob-modules__screen {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--sp-3);
    padding: 0;
    background: transparent;    /* рамка — у самого кадра, по его размеру */
  }
  ob-modules[layout="pin"] .ob-modules__demo { flex: none; margin-top: var(--sp-2); }
}
@media (min-width: 1024px) and (max-width: 1279px) {   /* узкая сетка: «Мессенджеры» целиком */
  ob-modules[layout="pin"] .ob-modules__key { padding: var(--sp-2); }
  ob-modules[layout="pin"] .ob-modules__key-name { font-size: var(--ob-modules-pin-name-sm); }
}
/* 768–1023: клавиши 4×4 низкими плашками (номер сверху слева, название снизу слева) сверху, под ними панель на всю
   оставшуюся высоту — кадр слева, текст справа. Так сетка и панель целиком в окне и при 800×650. */
@media (min-width: 768px) and (max-width: 1023px) {
  ob-modules[layout="pin"] { display: flex; flex-direction: column; min-height: 0; }
  ob-modules[layout="pin"] .ob-modules__wrap {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: stretch;
  }
  ob-modules[layout="pin"] .ob-modules__keys { grid-auto-rows: auto; gap: var(--sp-2); }
  ob-modules[layout="pin"] .ob-modules__key {
    min-height: 0;
    gap: 0;
    padding: var(--sp-1) var(--sp-3);
  }
  ob-modules[layout="pin"] .ob-modules__key-line { display: none; }
  ob-modules[layout="pin"] .ob-modules__key-num { font-size: var(--ob-modules-pin-num); line-height: 1.2; }
  ob-modules[layout="pin"] .ob-modules__key-name {   /* одна строка: «Обучение и База знаний» влезает от 768 */
    padding-top: var(--sp-1);
    font-size: var(--ob-modules-pin-name-sm);
    line-height: 1.2;
    white-space: nowrap;
  }

  ob-modules[layout="pin"] .ob-modules__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "screen count" "screen title" "screen desc" "screen demo";
    column-gap: var(--sp-4);
    align-content: start;
    min-height: 0;
    overflow: hidden;
    padding: var(--sp-3);
  }
  ob-modules[layout="pin"] .ob-modules__count { grid-area: count; }
  ob-modules[layout="pin"] .ob-modules__title { grid-area: title; margin: var(--sp-1) 0; font-size: var(--fs-lead); }
  ob-modules[layout="pin"] .ob-modules__desc {
    grid-area: desc;
    min-height: calc(var(--ob-modules-pin-desc-rows-md) * var(--ob-modules-pin-desc-lh) * 1em);   /* панель одной высоты у всех 16 */
    font-size: var(--fs-kick);
    line-height: var(--ob-modules-pin-desc-lh);
  }
  ob-modules[layout="pin"] .ob-modules__demo { grid-area: demo; align-self: start; margin-top: var(--sp-2); }
  ob-modules[layout="pin"] .ob-modules__screen {
    grid-area: screen;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: transparent;
  }
}
/* layout="pin", ≥ 768: рамка кадра одной пропорции 16:10 (960:600, --ob-modules-shot-w/h) у всех 16 —
   наибольший прямоугольник этой пропорции, который влезает в отведённое место; рамка (--frame)
   обнимает сам кадр. Кадр другой пропорции или размера ложится в рамку по cover от верхнего левого
   угла (базовое правило .ob-modules__shot). Размер рамки не зависит от того, загрузился ли кадр. */
@media (min-width: 768px) {
  ob-modules[layout="pin"] .ob-modules__shot,
  ob-modules[layout="pin"] .ob-modules__svg {
    width: auto;                /* запас для браузеров без container queries */
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: var(--sp-1);
    background: var(--frame);
    border-radius: var(--radius-sm);
  }
  @supports (container-type: size) {
    ob-modules[layout="pin"] .ob-modules__panel { container-type: inline-size; }
    ob-modules[layout="pin"] .ob-modules__screen { container-type: size; }
    ob-modules[layout="pin"] .ob-modules__shot,
    ob-modules[layout="pin"] .ob-modules__svg {
      width: min(100cqw, 100cqh * var(--ob-modules-shot-w) / var(--ob-modules-shot-h));
    }
  }
}
@media (min-width: 1024px) {
  @supports (container-type: size) {
    /* высоты не дали (reduced-motion, фикстура) — место под кадр во всю ширину панели; дали — ужимается */
    ob-modules[layout="pin"] .ob-modules__screen {
      height: calc(100cqw * var(--ob-modules-shot-h) / var(--ob-modules-shot-w));
    }
  }
}

/* ---------- схемы в SVG (модули без кадра) ---------- */
.ob-modules__s-bg { fill: var(--card); }
.ob-modules__s-box { fill: var(--bg-2); stroke: var(--line); stroke-width: 3; }
.ob-modules__s-acc { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 3; }
.ob-modules__s-ok { fill: var(--card); stroke: var(--ok); stroke-width: 3; }
.ob-modules__s-line { fill: none; stroke: var(--muted); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ob-modules__s-txt { fill: var(--ink); font-family: var(--font); font-size: 40px; font-weight: 600; }
.ob-modules__s-mut { fill: var(--muted); font-family: var(--font); font-size: 32px; font-weight: 400; }
.ob-modules__s-acc-txt { fill: var(--accent-ink); font-family: var(--font); font-size: 40px; font-weight: 700; }
.ob-modules__s-sm { fill: var(--ink); font-family: var(--font); font-size: 32px; font-weight: 600; }
.ob-modules__s-acc-sm { fill: var(--accent-ink); font-family: var(--font); font-size: 30px; font-weight: 700; }
.ob-modules__s-ok-txt { fill: var(--ok); font-family: var(--font); font-size: 32px; font-weight: 600; }

/* ---------- телефон ---------- */
@media (max-width: 767px) {
  .ob-modules__panel { padding: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .ob-modules__key { transition: none; }
}