/* =========================================================
   noumy.ai — блок 3 «Комфорт для кандидата»:
   «Объективность и доступность для кандидатов»

   Размеры сняты с макета (Figma, секция 60:6471 — пять фреймов
   адаптива): 1440 (60:6472), 1440-1200 (60:6519),
   1200-900 (60:6566), 900-760 (60:6613), 760-360 (60:6660).
   До 9 сентября 2026 блок был свёрстан по прежней секции 36:4276.

   ГЛАВНОЕ ПРАВИЛО СТУПЕНЕЙ. Внутри одной ступени кегли, поля
   плашек и их высота НЕ тянутся — они фиксированы. Тянутся
   только ширины плашек. Это прямо видно по макету: фреймы 1440
   и 1200 отличаются только шириной плашек, а заголовок в обоих
   64px, поля 32, высота 397. Раньше здесь всё ужималось общей
   долей --u, и на 1200 заголовок выходил 53px вместо 64,
   поля 26 вместо 32, высота 327 вместо 397.

   Ступени (числа из фреймов макета):

   |                    | ≥1200 | 1199–900 | 899–760 | ≤759 |
   | поля блока         | 40    | 40       | 16      | 12   |
   | отбивки сверху/сн. | 80    | 80       | 50      | 50   |
   | надзаголовок       | 20    | 20       | 20      | 16   |
   | заголовок          | 64    | 50       | 50      | 40   |
   | подзаголовок       | 20    | 16       | 16      | 16   |
   | поля плашки        | 32    | 24       | 16      | 10   |
   | высота плашки      | 397   | 280      | 240     | 187  |
   | «24/7»             | 120   | 80       | 80      | 50   |
   | «100% прозрачн.»   | 80    | 60       | 60      | 28   |
   | «Финальное реш.»   | 37    | 25       | 25      | 20   |
   | текст плашки       | 20    | 16       | 16      | 12   |
   | ширина «24/7»           | 376    | 100%    | 100%  | 100% |
   | ширина «100% прозр.»    | 382→330| 58,9%   | 63,7% | 180px|
   | ширина «Фин. решение»   | 382→350| 80,1%   | 65,2% | 87%  |
   | клетка узора       | 40→32 | 32→24    | 24→18   | 10   |

   Раскладка меняется дважды: на 1200 — только пропорции колонок,
   на 900 — сама композиция (заголовок встаёт на всю ширину,
   «24/7» и «100%» становятся в ряд, «Финальное решение» уходит
   под них вправо, как на мобильном).

   Три плашки, из края каждой торчит пиксельный узор цветом
   фона страницы. Квадратики рисует claude/comfort.js — там же
   лежат карты узоров.

   Выезд заголовков и плашек переиспользует общий .reveal
   из claude/benefits.css: класс и наблюдатель на странице
   одни на всех, второй копии не заводим.
   ========================================================= */

.comfort {
  position: relative;
  background: var(--bg);

  /* текст в блоке темнее общего --ink, как и во втором блоке:
     в макете тут #141414 (кандидат на объединение с --benefit-ink) */
  --comfort-ink: #141414;
  /* серая плашка «24/7» — единственный цвет блока, которого
     раньше в проекте не было */
  --comfort-grey: #CECECC;

  /* КЛЕТКА УЗОРА. В макете она тянется непрерывно: 40 на 1440,
     32 на 1200, 24 на 900, 18 на 760, 10 на мобильном. Формула
     на каждой ступени своя и выведена по ДВУМ опорным точкам
     (cell = A + B·vw), чтобы клетка попадала в макетное число
     на обеих границах ступени, а не только на одной. Раньше тут
     была одна общая доля (100vw − 80) / 1360: она давала 40 на 1440
     и 24,1 на 900, но 32,9 вместо 32 на 1200 — лишний почти
     пиксель на клетку, восемь клеток узора, и текст на 1200
     оказывался под квадратиками.

     Тянуть клетку, а не ступенчато переключать, важно потому, что
     узор приклеен к краю плашки: пока плашка тянется, вместе с ней
     должен тянуться и он, иначе квадратики наползают на текст. */
  --px-cell: clamp(32px, calc(3.3333vw - 8px), 40px);
}

.comfort__inner {
  max-width: 1440px;
  margin: 0 auto;
  /* отбивки блока: 80px сверху и снизу на десктопе, поля 40px как в hero */
  padding: 80px 40px;
}

/* «/ Комфорт для кандидата» — Inter Regular 20/1.3, трекинг -0.4px, синий.
   В десктопном фрейме тут сырой #3646FD, но в мобильном и во втором блоке
   этот же надзаголовок привязан к переменной Primary/default (#0F3DF2) —
   берём переменную. Отступ до заголовка 32px во всех фреймах, кроме
   мобильного (там 24). */
.comfort__eyebrow {
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* ============================ СЕТКА ============================
   Верхний ряд: колонка заголовка 668 + серая плашка 668.
   Нижний ряд: синяя 783 + тёмная 553. Зазор 24, суммы по макету:
   668 + 24 + 668 и 783 + 24 + 553 = 1360.

   Разрезы у рядов разные, поэтому это ОДНА сетка из пяти дорожек,
   а не два ряда по две колонки: дорожки 2 и 4 работают зазорами
   (собственный column-gap выключен, иначе он добавится сверху).
   Заодно это даёт пересобрать порядок на узких экранах: там «24/7»
   и «100% прозрачность» стоят рядом, а не под заголовком.

   Дорожки заданы в процентах с поправкой в пикселях, а не в fr:
   у фреймов 1440 и 1200 разрезы стоят по-разному (668/783 против
   548/618), и одна пропорция в обе точки не попадает. Формулы
   выведены по двум опорным точкам макета и дают ровно макетные
   числа на 1440 и на 1200; сумма дорожек — ровно 100%:

     (50% − 12) + 24 + (18.75% − 164) + 24 + (31.25% + 128) = 100%

   Проверка на 1440 (контент 1360): 668 + 24 + 91 + 24 + 553.
   Проверка на 1200 (контент 1120): 548 + 24 + 46 + 24 + 478. */

.comfort__grid {
  display: grid;
  grid-template-columns:
    calc(50% - 12px) 24px calc(18.75% - 164px) 24px calc(31.25% + 128px);
  gap: 24px 0;
  align-items: stretch;
}

.comfort__head { grid-column: 1 / 2; grid-row: 1; }
.pcard--time   { grid-column: 3 / 6; grid-row: 1; }
.pcard--clear  { grid-column: 1 / 4; grid-row: 2; }
.pcard--human  { grid-column: 5 / 6; grid-row: 2; }

/* Заголовок: Inter Medium 64px, интерлиньяж 1.0, трекинг -2.56px.
   В десктопном фрейме цвет отдан чистым чёрным, в мобильном — Accent
   dark; берём Accent dark, как во всех остальных заголовках сайта. */
.comfort__title {
  margin: 0;
  max-width: 553px;
  font-size: 64px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* Подзаголовок: Inter Regular 20/1.3, трекинг -0.8px */
.comfort__sub {
  margin: 20px 0 0;
  max-width: 553px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--comfort-ink);
}

/* ============================ ПЛАШКИ ============================
   Заголовок прижат к верху, текст — к низу, поля 32px со всех сторон,
   высота 397. overflow: hidden обрезает пиксельный узор по краю
   плашки, как в макете. */

.pcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: var(--pcard-pad);
  min-height: 397px;

  --pcard-pad: 32px;

  /* ЧТОБЫ КВАДРАТИКИ НЕ НАЛЕЗАЛИ НА ТЕКСТ.
     --px-cols — ширина узора в клетках (карты лежат в comfort.js:
     5 у «24/7», 8 у «100%», 3 у «Финального решения»).
     --px-clear — предельная ширина текста, при которой он ещё
     не доходит до узора: узор приклеен к правому краю плашки,
     значит свободна вся плашка минус колонки узора минус левое
     поле. Ширина плашки в координатах текста — это 100% плюс два
     поля, поэтому «100% + одно поле − колонки».

     Дальше ширина каждого текста пишется как min(макет, клиренс):
     где макет уже узкий — выигрывает макет, где он подходит
     к узору вплотную — клиренс. Раньше ширины были просто
     макетными числами с одной опорной точки, и на другой границе
     ступени плашка успевала сузиться сильнее текста. */
  --px-cols: 0;
  --px-clear: calc(100% + var(--pcard-pad) - var(--px-cols) * var(--px-cell));
}

.pcard--time  { --px-cols: 5; background: var(--comfort-grey); color: var(--comfort-ink); }
/* синяя плашка: в макете сырой #3646FD, в проекте это Primary/default */
.pcard--clear { --px-cols: 8; background: var(--accent);       color: var(--white); }
/* тёмная плашка: в макете #3C3C3C — тот же Accent dark с точностью
   до неразличимого, отдельного цвета не заводим */
.pcard--human { --px-cols: 3; background: var(--ink);          color: var(--white); }

.pcard__h,
.pcard__p { position: relative; z-index: 1; margin: 0; font-weight: 400; }

/* «24/7» — 120px, интерлиньяж 0.93, трекинг -7.2px */
.pcard--time .pcard__h {
  font-size: 120px;
  line-height: 0.93;
  letter-spacing: -0.06em;
  white-space: nowrap;
}

/* «100% прозрачность» — 80px, интерлиньяж 0.93, трекинг -4.8px.
   Ограничения ширины на верхней ступени в пикселях, а не в процентах:
   в макете 515 и на 1440, и на 1200, хотя плашка там разной ширины —
   значит это фиксированный предел, а не доля. Процент давал на 1200
   369 вместо 515 и лишнюю строку. */
.pcard--clear .pcard__h {
  font-size: 80px;
  line-height: 0.93;
  letter-spacing: -0.06em;
  max-width: 515px;
}

/* «Финальное решение принимает человек» — 37px, интерлиньяж 1.05.
   Было 40: в новом макете (Figma, секция 60:6471) кегль уменьшен
   везде выше мобильного — 37 на 1440 и 1200, 25 на 900 и 760.

   Ширина в макете 382 на 1440 и 341 на 1200, то есть ВНУТРИ ступени
   она тянется — значит формула по двум опорным точкам:
   B = (382 − 341) / 240 × 100 = 17,08; A = 341 − 17,08 × 12 = 136.
   Выше 1440 контейнер упирается в 1440, поэтому потолок 382. */
.pcard--human .pcard__h {
  font-size: 37px;
  line-height: 1.05;
  letter-spacing: -0.06em;
  max-width: min(382px, calc(136px + 17.08vw));
}

/* Текст плашки: Inter Regular 20/1.2, трекинг -0.4px. Ширина у каждой
   своя — она держит текст в стороне от пиксельного узора. В макете
   376 / 382 / 382 одинаково на 1440 и на 1200, поэтому в пикселях. */
.pcard__p {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* У «24/7» узор лежит сверху и до нижнего текста не достаёт —
   там просто макетные 376. У двух других текст стоит вровень
   с узором: на 1440 выигрывает макетная ширина (382 у обоих),
   на 1200 — клиренс (330 и 350, ровно как в макете). */
.pcard--time  .pcard__p { max-width: 376px; }
.pcard--clear .pcard__p { max-width: min(382px, var(--px-clear)); }
.pcard--human .pcard__p { max-width: min(382px, var(--px-clear)); }

/* ====================== ПИКСЕЛЬНЫЙ УЗОР ======================
   Квадратики цветом фона страницы, приклеены к правому краю плашки:
   --c — номер колонки справа налево, --r — номер ряда от того края,
   к которому узор прижат (сверху у «24/7», снизу у «100%»,
   от центра у «Финального решения»). Разметку строит
   claude/comfort.js по картам узоров; здесь только геометрия
   и появление.

   Узор один на все разрешения — тянется только клетка --px-cell
   (40 / 32 / 24 / 18 / 10 по ступеням, как в макете).

   Появляются по одному в случайном порядке, когда плашка попадает
   в кадр: comfort.js тасует список и раздаёт каждому свой
   transition-delay. */

.pcard__px {
  position: absolute;
  right: calc(var(--c, 0) * var(--px-cell));
  top: calc(var(--r, 0) * var(--px-cell));
  width: var(--px-cell);
  height: var(--px-cell);
  background: var(--bg);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity .32s linear,
    transform .32s cubic-bezier(.2, .9, .3, 1.35);
}

/* синяя плашка: узор растёт от НИЖНЕГО края */
.pcard--br .pcard__px {
  top: auto;
  bottom: calc(var(--r, 0) * var(--px-cell));
}

/* тёмная плашка: узор стоит серединой правого края, а не прилипает
   к верху. Высоту узора CSS знает по --px-rows: его проставляет
   claude/comfort.js по числу рядов в карте (8), потому что иначе
   середину не посчитать — рядов в разметке нет, есть только
   отдельные квадратики с координатами.

   В макете вертикальные отступы у этого узора в каждом фрейме
   свои (45 / 85 / 64 / 48 / 52 сверху), правила там нет; на 760
   и 393 это ровно центр, на остальных — центр с точностью до
   нескольких процентов высоты. Берём центр. */
.pcard--mid .pcard__px {
  top: calc(50% - var(--px-rows, 8) * var(--px-cell) / 2 + var(--r, 0) * var(--px-cell));
}

.pcard__px.is-on { opacity: 1; transform: none; }

/* ============================ ПОЯВЛЕНИЕ ============================
   Сами плашки выезжают снизу общим механизмом .reveal
   (claude/benefits.css + claude/benefits.js), по очереди. */

.comfort__title.reveal { --d: 60ms; }
.comfort__sub.reveal   { --d: 120ms; }
.pcard--time.reveal    { --d: 0ms; }
.pcard--clear.reveal   { --d: 120ms; }
.pcard--human.reveal   { --d: 240ms; }

/* ============================ АДАПТИВ ============================ */

/* ---------- 1199–900: композиция та же, размеры мельче ----------
   Фрейм макета «1200-900» (60:6566) снят на 900. Композиция
   десктопная: заголовок и «24/7» в первом ряду, «100%» и
   «Финальное решение» во втором. Меняются кегли, поля и высота
   плашек — они на этой ступени тоже фиксированы, тянутся только
   ширины.

   Дорожки здесь в fr, а не в процентах: опорная точка у фрейма
   одна (900), выводить формулу по двум точкам не из чего, поэтому
   ширины плашек просто держат пропорцию макета. На 900 выходят
   ровно макетные 398 | 24 | 62 | 16 | 320 (контент 820):
   заголовок 398, «24/7» 398, «100%» 484, «Финальное» 320.
   Зазоры в макете тут разные по рядам — 24 в верхнем и 16
   в нижнем, — поэтому это фиксированные пиксели, а не fr. */
@media (max-width: 1199px) {
  /* клетка узора: 32 на 1200 и 24 на 900 — B = 8 / 300 × 100 = 2,667 */
  .comfort { --px-cell: clamp(24px, 2.6667vw, 32px); }

  .comfort__grid {
    grid-template-columns:
      minmax(0, 398fr) 24px minmax(0, 62fr) 16px minmax(0, 320fr);
    gap: 16px 0;
  }

  /* max-width снят: на этой ступени ширину заголовка держит сама
     колонка сетки (398 на 900 — ровно как в макете), а фиксированный
     предел зажимал бы его на 1199, где колонка 543 */
  .comfort__title { font-size: 50px; max-width: none; }
  .comfort__sub   { font-size: 16px; max-width: none; }

  .pcard {
    gap: 16px;
    --pcard-pad: 24px;
    min-height: 280px;
  }

  .pcard--time  .pcard__h { font-size: 80px; }
  .pcard--clear .pcard__h { font-size: 60px; max-width: 87.6%; }  /* 382 из 436 */
  /* 25px вместо 28 и 236 вместо всей ширины — новый макет */
  .pcard--human .pcard__h { font-size: 25px; max-width: 86.8%; }  /* 236 из 272 */

  .pcard__p { font-size: 16px; }
  .pcard--time  .pcard__p { max-width: 100%; }                         /* 350 = вся ширина */
  .pcard--clear .pcard__p { max-width: min(58.9%, var(--px-clear)); }  /* 257 из 436 */
  .pcard--human .pcard__p { max-width: min(80.1%, var(--px-clear)); }  /* 218 из 272 */
}

/* ---------- 899–760: композиция перестраивается ----------
   Фрейм «900-760» (60:6613), снят на 760. Заголовок встаёт на всю
   ширину, «24/7» и «100% прозрачность» — в ряд, «Финальное решение»
   под ними с прижимом вправо. То есть композиция уже мобильная,
   но размеры ещё крупные: поля блока 16, отбивки 50, поля плашек 16.

   Дорожки: 248 | 46 | 16 | 418 (контент 728). «24/7» занимает
   первые две (294), «100%» — последнюю (418), «Финальное решение»
   вторую-четвёртую (480) — так его левый край попадает туда, где
   в макете кончается сдвиг. Зазор 16 — отдельной дорожкой,
   чтобы не растягивался вместе с плашками. */
@media (max-width: 899px) {
  .comfort {
    /* клетка узора: 24 на 900 и 18 на 760 — снова две опорные точки,
       B = 6 / 140 × 100 = 4,2857; A = 18 − 4,2857 × 7,6 = −14,57 */
    --px-cell: clamp(18px, calc(4.2857vw - 14.57px), 24px);
  }

  .comfort__inner { padding: 50px 16px; }

  .comfort__grid {
    grid-template-columns:
      minmax(0, 248fr) minmax(0, 46fr) 16px minmax(0, 418fr);
    gap: 16px 0;
  }

  /* 48 + row-gap 16 = 64 до плашек, как в макете */
  .comfort__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 48px; }
  .pcard--time   { grid-column: 1 / 3; grid-row: 2; }
  .pcard--clear  { grid-column: 4 / 5; grid-row: 2; }
  .pcard--human  { grid-column: 2 / 5; grid-row: 3; }

  .comfort__title { max-width: none; }
  .comfort__sub   { max-width: none; }

  .pcard { --pcard-pad: 16px; min-height: 240px; }

  .pcard--clear .pcard__h { max-width: 99%; }    /* 382 из 386 */
  .pcard--human .pcard__h { max-width: 60.7%; }  /* 272 из 448 */

  .pcard--clear .pcard__p { max-width: min(63.7%, var(--px-clear)); }  /* 246 из 386 */
  .pcard--human .pcard__p { max-width: min(65.2%, var(--px-clear)); }  /* 292 из 448 */
}

/* ---------- ≤759: мобильный ----------
   Фрейм «760-360» (60:6660), снят на 393. Размеры фиксированы
   от 393 и выше (до 759), ниже 393 ужимаются долей --u вместе
   с плашками — иначе на 360 текст не влезает в поля 10px. */
@media (max-width: 759px) {
  .comfort {
    /* мобильный макет: контент 369 = 393 − 12 − 12 */
    --u: calc((100vw - 24px) / 369);
    --px-cell: clamp(7px, calc(10 * var(--u)), 10px);
  }

  .comfort__inner { padding: 50px 12px; }

  .comfort__eyebrow { margin-bottom: 24px; font-size: 16px; }

  .comfort__title { font-size: clamp(30px, calc(40 * var(--u)), 40px); }
  .comfort__sub { margin-top: 16px; font-size: 16px; letter-spacing: -0.02em; }

  /* В макете iPhone плашки стоят встык, без зазоров: сверху 169 + 200
     на всю ширину, снизу 259 с прижимом вправо. Дорожка 2 (59fr) нужна
     только затем, чтобы нижняя плашка начиналась там, где кончается
     сдвиг: 110 + 59 = 169 и 59 + 200 = 259. */
  .comfort__grid {
    grid-template-columns: minmax(0, 110fr) minmax(0, 59fr) minmax(0, 200fr);
    gap: 0;
  }
  .comfort__head { grid-column: 1 / 4; grid-row: 1; margin-bottom: 64px; }
  .pcard--time   { grid-column: 1 / 3; grid-row: 2; }
  .pcard--clear  { grid-column: 3 / 4; grid-row: 2; }
  .pcard--human  { grid-column: 2 / 4; grid-row: 3; }

  .pcard {
    gap: 12px;
    --pcard-pad: clamp(8px, calc(10 * var(--u)), 10px);
    min-height: clamp(140px, calc(187 * var(--u)), 187px);
  }

  /* «100% прозрачность»: 180 — это вся ширина плашки на 393, то есть
     ровно макет. Пишем ПИКСЕЛЯМИ, а не 100%: от 393 до 759 плашка
     растёт, а кегли уже зафиксированы, и на 100% текст растянулся бы
     в две строки вместо четырёх, а заголовок — в одну вместо двух.
     Ниже 393 плашка уже 180, и 100% в min() перехватывает.

     Слово «едины» на 180 попадало в третью строку, а она проходит
     под верхним рядом квадратиков — оттого «едины» и оказывалось
     под узором. Лечится не шириной (пробовали 179 — на части
     мобильных ширин перенос не менялся), а тем, что «едины для всех»
     держится одной строкой: тогда вся тройка уезжает в четвёртую
     строку, а та короткая и до квадратиков не достаёт.

     Делать это неразрывным пробелом в разметке нельзя — он действовал
     бы на всех разрешениях, а выше 759 перенос там макетный. Поэтому
     в index.html стоит <span class="pcard__nb">, и nowrap на нём
     включается только здесь. Перенос завязан на кегль и трекинг —
     поменяешь их или копирайт, проверь это место заново. */
  .pcard--time  .pcard__h { font-size: clamp(34px, calc(50 * var(--u)), 50px); }
  .pcard--clear .pcard__h { font-size: clamp(20px, calc(28 * var(--u)), 28px); max-width: min(180px, 100%); }
  .pcard--human .pcard__h { font-size: clamp(15px, calc(20 * var(--u)), 20px); max-width: 79%; }

  .pcard__p { font-size: clamp(10px, calc(12 * var(--u)), 12px); }
  .pcard--time  .pcard__p { max-width: 100%; }
  .pcard--clear .pcard__p { max-width: min(180px, 100%); }
  .pcard--clear .pcard__nb { white-space: nowrap; }
  .pcard--human .pcard__p { max-width: min(87%, var(--px-clear)); }
}

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