/* =========================================================
   Кейс «Ситилинк» — фрейм 232:1866
   Дополняет styles.css, case.css и neodin.css.
   ========================================================= */

/* ---------------------------------------------------------
   Общие правила страницы
   --------------------------------------------------------- */
/* строка текста не длиннее 850px — иначе её тяжело читать */
.citi-page .ctitle,
.citi-page .cbody,
.citi-page .csub,
.citi-page .nlead,
.citi-page .nbody-28,
.citi-page .stable__text { max-width: 850px; }

/* отступы шапки — общие для всех кейсов (case.css: --nav-h + --chero-gap) */
.citi-page .chero__sub { margin-top: 8px; }
.citi-page .chero__claim { margin-top: 45px; }
.chero__claim--narrow { max-width: 594px; }

/* чип над заголовком блока: статус редизайна */
.ctag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 14px 5px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--white);
}
.ctag--done,
.ctag--wip  { background: var(--green-text); }
.ctag--none { background: var(--muted); }

/* ссылки в кейсе — зелёные */
.citi-page .clink { color: var(--green-text); }
.citi-page .clink:hover { color: var(--black); }

/* ---------------------------------------------------------
   Обложка: три экрана (232:2648 — плашка 1275×800)
   Отступы ровно из макета: 89 по бокам, 50 сверху и снизу,
   35 между экранами.
   --------------------------------------------------------- */
.sintro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  align-items: start;        /* три экрана по одной линии сверху */
  margin-top: 64px;
  padding: 50px 89px;
  border-radius: 50px;
  background: var(--plate);
}
.sintro__phone { margin: 0; }
.sintro__phone img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------
   Бизнес-цель (232:1891) — отступы ровно из макета:
   55 до заголовка, 5 под ним, 22 до списка, 18 между пунктами
   --------------------------------------------------------- */
.sgoal__title { margin-top: 55px; }
.sgoal__lead  { margin-top: 5px; font-weight: 500; font-size: 24px; line-height: 1.17; }

/* звёздочка-буллит вместо точки */
.nbullets--star { margin-top: 22px; gap: 18px; }
.nbullets--star .ncard__text { font-size: 24px; line-height: 1.17; }

/* выводы интервью — в две колонки */
.nbullets--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 33px 60px;
  max-width: none;
}
.nbullets--grid li { padding-left: 0; }
.nbullets--grid li::before { content: none; }

/* ---------------------------------------------------------
   Таблица гипотез (232:1910)
   --------------------------------------------------------- */
.stable {
  margin-top: 35px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
}
.stable__row {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 30px;
  border-bottom: 1px solid var(--element);
}
.stable__row:last-child { border-bottom: 0; }
.stable__text {
  flex: 1 0 0;
  min-width: 0;
  font-size: 24px;
  line-height: 1.45;
  color: var(--dark-el);
}

/* ---------------------------------------------------------
   Чипы
   --------------------------------------------------------- */
.schip {
  display: inline-block;
  flex: none;
  align-self: flex-start;
  padding: 6px 12px 4px;
  border-radius: 100px;
  font-family: 'Inter', var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}
.schip--yes  { background: rgba(52, 199, 89, .1); color: #429e59; }
.schip--no   { background: #ffecec;               color: #ff383c; }
.schip--part { background: #fffae6;               color: #d8ad00; }

/* чипы в карточках — крупнее и своим шрифтом (232:2001, 232:2014) */
.ncard .schip {
  font-family: var(--font-body);
  font-size: 18px;
  padding: 6px 12px 4px;
  white-space: normal;
}
.schip--grey  { background: var(--muted);            color: var(--white); }
.schip--green { background: var(--green-text);       color: var(--white); }
.schip--high  { background: rgba(255, 56, 60, .1);   color: #ff383c; }
.schip--mid   { background: rgba(255, 204, 0, .1);   color: #d8ad00; }
.schip--low   { background: rgba(86, 86, 86, .1);    color: var(--muted); }

/* ---------------------------------------------------------
   Сетки карточек (232:1949, 232:1999, 232:2012)
   --------------------------------------------------------- */
.ncards--2 { grid-template-columns: 1fr 1fr; }
.ncards--3 { grid-template-columns: repeat(3, 1fr); }
.ncards--4 { grid-template-columns: repeat(4, 1fr); }
.ncards--2, .ncards--3, .ncards--4 { margin-top: 20px; align-items: stretch; }

/* плашки: по макету отступ внутри 30px со всех сторон (232:1950, 232:2000, 232:2013) */
.citi-page .ncard { padding: 30px; }
.ncards--3 .ncard { gap: 15px; }   /* заголовок → текст */
.ncards--2 .ncard,
.ncards--4 .ncard { gap: 20px; }   /* чип → текст */

/* ---------------------------------------------------------
   Карусель решений (232:2032 и соседние «Макеты N»)
   Раскладка в координатах макета 1280, как в кейсе ВБ.
   --------------------------------------------------------- */
.wcard--citi { background: var(--plate); }
.wcard--citi .wcard__head {
  left: calc(30 * var(--px));
  top: calc(50 * var(--px));
  width: calc(820 * var(--px));
}
.wcard--citi .wcard__title { font-size: calc(32 * var(--px)); }
.wcard--citi .wcard__text  { margin-top: calc(20 * var(--px)); font-size: calc(24 * var(--px)); line-height: 1.3; }

/* подпись «До» / «После» */
.wcard--citi .wshot figcaption {
  bottom: calc(100% + 17 * var(--px));
  font-size: calc(26 * var(--px));
}

/* кнопки листания — по центру экранов; --nav-t задаётся на карточке */
.wcard--citi .wnav--prev { left: calc(80 * var(--px)); }
.wcard--citi .wnav--next { left: calc(1150 * var(--px)); }

.wcard--citi .wdots { bottom: calc(66 * var(--px)); }
.wcard--citi .wdot  { background: #d4d4d4; }
.wcard--citi .wdot[aria-selected="true"] { background: var(--green-text); }

/* ---------------------------------------------------------
   Адаптив
   --------------------------------------------------------- */
@media (max-width: 1340px) {
  .ncards--4 { grid-template-columns: 1fr 1fr; }
  /* пропорции макета: 7% по бокам, 3,9% сверху/снизу, 2,7% между экранами */
  .sintro { padding: 3.92% 6.97%; gap: 3.19%; }
}
@media (max-width: 1000px) {
  .citi-page .chero { padding: 200px 20px 90px; }
  .sintro { border-radius: 30px; }
  .ncards--2, .ncards--3, .ncards--4 { grid-template-columns: 1fr; }
  .nbullets--grid { grid-template-columns: 1fr; gap: 28px; }
  .stable__row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px; }
  .stable__text { font-size: 19px; }
  .ncard .schip { font-size: 16px; }
  .sgoal__title { margin-top: 40px; }
  .nbullets--star .ncard__text { font-size: 19px; }
}