/* =========================================================
   Кейс «Не один» — фрейм 133:2342
   Дополняет styles.css и case.css.
   ========================================================= */

/* шапка кейса на 50px выше — низ добираем, полотно не съезжает */
.neodin-page .chero,
.ancient-page .chero { padding-top: 298px; padding-bottom: 229px; }

/* «сайт с 0» стоит над названием, а не под ним */
.chero__sub--top { margin-bottom: 8px; }
.neodin-page .chero__title { margin-top: 0; }

/* ---------- Глубинное интервью ---------- */
.nfinding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-top: 55px;
  max-width: 946px;
}

.nbadge {
  padding: 14px 30px 10px;
  border-radius: 50px;
  background: var(--green-white);
  color: var(--black);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  margin-bottom: 11px;
}

.nbody-28 { margin: 0; font-weight: 500; font-size: 28px; line-height: 1.17; color: var(--black); }
.nbody-24 { font-size: 24px; line-height: 1.17; color: var(--black); }

.nlead {
  margin-top: 55px;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  color: var(--black);
}
.nlead--tight { margin-top: 40px; }

.ncards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
  margin-top: 20px;
}

.ncard {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 30px;
  border-radius: 20px;
  background: var(--white);
}
.ncard__title { font-weight: 500; font-size: 28px; line-height: 1.17; color: var(--black); }
.ncard__text  { font-size: 24px; line-height: 1.17; color: var(--black); }

/* ---------- Бенчмаркинг ---------- */
.nbullets {
  display: flex;
  flex-direction: column;
  gap: 33px;
  margin-top: 20px;
  max-width: 990px;
}
.nbullets li { display: flex; gap: 12px; align-items: flex-start; }
.nbullets__icon { flex: none; width: 20px; height: 18.82px; margin-top: 8px; }
.nbullets div { display: flex; flex-direction: column; gap: 9px; }

.nbullets--plain { margin-top: 40px; max-width: 1100px; }
.nbullets--plain li { padding-left: 32px; position: relative; }
.nbullets--plain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 20px;
  height: 19px;
  background: url('assets/img/case-neodin/star-bullet.svg') no-repeat center / contain;
}

/* ---------- Решение: Главная ---------- */
.nsplit {
  display: grid;
  grid-template-columns: 524px 696px;
  gap: 60px;
  align-items: start;
  margin-top: 52px;
}
.nsplit .mediafig { margin-top: 0; }
.nsplit > div > .cbody:first-child,
.nsplit > .cbody { margin-top: 0; }

/* ---------- Видео и скриншоты ---------- */
.mediafig { margin: 55px 0 0; }
/* серая обводка — фон макета не сливается с фоном сайта */
.mediafig video,
.mediafig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d8d8d8;
  border-radius: 20px;
  background: var(--element);
  cursor: zoom-in;
}
.mediafig figcaption {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--muted);
}

/* с блока «Сценарий 1» медиа идёт в два столбца: элементы текут
   друг под другом с одинаковым шагом, по рядам не выравниваются */
.ngrid {
  columns: 2;
  column-gap: 30px;
  margin-top: 55px;
}
.ngrid .mediafig {
  margin: 0 0 30px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* ---------- Адаптив ---------- */
@media (max-width: 1340px) {
  .nsplit { grid-template-columns: minmax(0, 420px) 1fr; gap: 40px; }
  .ncards { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .ngrid { column-gap: 20px; }
  .ngrid .mediafig { margin-bottom: 20px; }
  .nbadge { font-size: 19px; padding: 11px 22px 8px; }
  .nbody-28, .nlead, .ncard__title { font-size: 22px; }
  .nbody-24, .ncard__text { font-size: 19px; }
  .nsplit { grid-template-columns: 1fr; }
  .ngrid { columns: 1; }
  .ngrid .mediafig { margin-bottom: 28px; }
  .mediafig { margin-top: 36px; }
  .mediafig figcaption { font-size: 17px; }
}


/* =========================================================
   Ancient: короткая карточка проекта под интро
   ========================================================= */
.nmeta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 55px 0 0;
  padding: 28px 34px 24px;
  border-radius: 20px;
  background: var(--white);
}
.nmeta dt { font-size: 20px; line-height: 1.3; color: var(--muted); }
.nmeta dd { margin: 6px 0 0; font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--black); }

@media (max-width: 1000px) {
  .nmeta { grid-template-columns: 1fr 1fr; gap: 22px; padding: 22px 24px 20px; }
  .nmeta dt { font-size: 17px; }
  .nmeta dd { font-size: 20px; }
}
@media (max-width: 560px) {
  .nmeta { grid-template-columns: 1fr; }
}