/* landing-trainer.css — блок «Не только для МИРЭА».

   Слева текст и три мини-окна со скриншотами, справа композиция экранов
   курса с ярлыками разделов и формулами на фоне. */

.nm {
  position: relative; overflow: hidden;
  padding: clamp(60px, 7.2vw, 118px) 0;
  color: #eef2f8;
}

.nm-grid {
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(26px, 3.2vw, 58px); align-items: center;
}

/* ---------- левая колонка ---------- */
.nm-eyebrow {
  display: inline-block; margin-bottom: 20px; padding: 8px 18px; border-radius: 999px;
  font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #8fc2ff; background: rgba(47, 127, 224, .16); border: 1px solid rgba(88, 150, 240, .45);
}
.nm-title {
  margin: 0 0 18px; padding: 0;
  font-size: clamp(28px, 3.1vw, 46px); font-weight: 800; line-height: 1.1;
  letter-spacing: -.04em; color: #fff;
}
.nm-title::before { content: none; }
.nm-title span { color: #4a94ec; }
.nm-lead { margin: 0 0 16px; max-width: 58ch; font-size: clamp(14.5px, 1.08vw, 16.5px); line-height: 1.64; color: #9fb0c6; }

/* мини-окна со скриншотами */
.nm-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px); margin: clamp(26px, 2.8vw, 42px) 0 clamp(20px, 2.2vw, 32px);
}
.nm-card {
  /* figure по умолчанию имеет боковые отступы — из-за них карточки не занимали
     всю колонку и между ними зияли промежутки */
  margin: 0; position: relative; overflow: hidden; border-radius: 14px;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(160deg, #0b0e15 0%, #08090f 100%);
  box-shadow: 0 22px 48px -34px rgba(0, 0, 0, .95);
  transition: border-color .18s ease, transform .18s ease;
}
.nm-card:hover { border-color: rgba(120, 175, 255, .4); transform: translateY(-2px); }
/* height: auto обязателен — иначе браузер берёт height из атрибута картинки
   и aspect-ratio не применяется */
.nm-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; opacity: .9; }
.nm-ic {
  position: relative; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; margin: -38px 0 12px; border-radius: 14px;
  color: #fff; background: linear-gradient(160deg, #3a97f2 0%, #1e6ed2 100%);
  box-shadow: 0 12px 26px -12px rgba(47, 142, 240, .95);
}
.nm-ic svg { width: 27px; height: 27px; }
.nm-cap {
  position: relative; z-index: 1; display: block; flex: 1 0 auto; min-height: 80px; padding: 0 17px 19px;
  font-size: clamp(12px, .9vw, 13.5px); line-height: 1.42; color: #c3d3e6;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: rgba(6, 9, 14, .7);
}

.nm-more { margin: 0; font-size: clamp(14px, 1.05vw, 16px); color: #9fb0c6; }
.nm-more a { color: #8fc2ff; }
.nm-more svg { width: 20px; height: 20px; margin-left: 10px; vertical-align: -4px; color: #4a94ec; }

/* ---------- правая колонка: композиция экранов ---------- */
.nm-art { position: relative; }
.nm-shot { display: block; width: 100%; height: auto; }

/* ярлыки разделов поверх слоёв */
.nm-tag {
  position: absolute; z-index: 2;
  padding: 8px 16px; border-radius: 10px;
  font: 700 13px/1 var(--sans); color: #dceaff; white-space: nowrap;
  border: 1px solid rgba(88, 150, 240, .55);
  background: linear-gradient(160deg, rgba(20, 40, 74, .92), rgba(10, 20, 38, .92));
  box-shadow: 0 0 22px -8px rgba(47, 142, 240, .9);
}
/* Ярлыки сидят на верхних левых углах экранов. Координаты сняты с самой
   картинки по скачку кромки: 57.6% / 73.0% / 87.3% по ширине и 15.0% /
   22.1% / 28.9% по высоте. Привязка по левому краю обязательна — на правом
   ярлыки с разной длиной текста разъезжались относительно углов. */
/* ярлык стоит НАД верхней гранью экрана, а не половиной внутри неё */
.nm-tag { transform: translate(-10px, calc(-100% - 7px)); }
.nm-tag-1 { left: 57.6%; top: 15.0%; }
.nm-tag-2 { left: 73.0%; top: 22.1%; }
.nm-tag-3 { left: 87.3%; top: 28.9%; }

/* формулы на фоне — тот же приём, что и на первом экране */
.nm-fx {
  position: absolute; z-index: 0; pointer-events: none;
  font-family: Cambria, "Times New Roman", Georgia, serif;
  color: rgba(159, 176, 198, .3);
}
.nm-fx-1 { left: 4%; top: -8%; font-size: clamp(18px, 1.7vw, 26px); }
.nm-fx-2 { left: 8%; bottom: -6%; font-size: clamp(17px, 1.5vw, 24px); }
.nm-note {
  position: absolute; right: 0; bottom: -2%; z-index: 2; margin: 0; text-align: right;
  font: 700 11px/1.75 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #64748c;
}

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .nm-grid { grid-template-columns: minmax(0, 1fr); }
  .nm-art { order: -1; }
  .nm-note { position: static; text-align: left; margin-top: 10px; }
}
@media (max-width: 760px) {
  .nm-cards { grid-template-columns: minmax(0, 1fr); }

  .nm-tag { padding: 5px 11px; font-size: 11px; transform: translate(-18px, calc(-100% - 3px)); }
  /* формулы на фоне накладывались на подпись, которая ушла в поток */
  .nm-fx { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nm-card { transition: none; } }