/* =========================================================
   noumy.ai — блок 4 «Безопасность»:
   «Получаем и храним персональные данные по закону»

   Размеры сняты с макета (Figma, секция 36:4531). В макете
   пять фреймов адаптива, и имена фреймов — это диапазоны:
   «1440» → 36:4532, «1440-1200» → 36:4555, «1200-900» → 36:4578,
   «900-760» → 36:4601, «760-360» → 36:4623. Каждый фрейм
   нарисован на НИЖНЕЙ границе своего диапазона, поэтому
   «1440-1200» показывает, что на 1200 всё ещё десктопные
   кегли, а «1200-900» — что на 900 они уже уменьшены.

   Отсюда главное отличие от прошлой версии файла: единой
   «единицы макета» --u на десктопе больше нет. От 1440 до 1200
   размеры в макете НЕ меняются вовсе (заголовок 64, картинка
   110, текст 32, ярлык 20), а от 1200 до 900 каждый уезжает
   в своей пропорции: 64→50 (×0,78), 110→80 (×0,73), 32→24
   (×0,75). Одной долей это не описать — поэтому каждый размер
   считается своей линейной формулой по двум опорным точкам
   макета и запирается clamp'ом:

       S = calc(A + B vw),  B = (S₁₂₀₀ − S₉₀₀)/300 × 100
                            A = S₉₀₀ − B × 9

   Проверка: подставь 1200 и 900 — должны получиться ровно
   макетные числа. Так на 1200 не выходит «67 вместо 80», чем
   грешил старый clamp по --u.

   Три колонки «плашка-ярлык + картинка + текст», между
   колонками вертикальные разделители. Ниже 900 колонки
   складываются в строки, картинка встаёт слева от текста.
   Картинки — три webp в assets/ (исходные PNG прислала
   Настя, из Фигмы не выгружались).

   Анимация здесь только одна — появление: переиспользуем
   общий .reveal из claude/benefits.css (класс и наблюдатель
   на странице одни на всех, второй копии не заводим).

   Сюда ведёт пункт меню «Безопасность»
   (data-target="#security" в index.html).
   ========================================================= */

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

.security__inner {
  max-width: 1440px;
  margin: 0 auto;
  /* отбивки блока 80, поля 40 — держатся до 900 включительно
     (фрейм «1200-900» нарисован на 900 и там ещё 80/40) */
  padding: 80px 40px;
}

/* «/ Безопасность» — Inter Regular 20/1.3, трекинг -0.4px (-0.02em),
   синий. Кегль одинаков на всех фреймах до 760; до заголовка 32. */
.security__eyebrow {
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Заголовок: Inter Medium, интерлиньяж 1.0, трекинг -0.04em
   (в макете -2.56px при 64 и -2px при 50 — это одна и та же доля).

   Кегль: 64 на 1440 и на 1200, 50 на 900.
     B = (64−50)/300×100 = 4,6667 ; A = 50 − 4,6667×9 = 8
   Отступ до колонок: 80 на 1200, 64 на 900.
     B = (80−64)/300×100 = 5,3333 ; A = 64 − 5,3333×9 = 16

   max-width у заголовка НЕТ намеренно: перенос задан жёстко
   через <br> в разметке, чтобы «персональные» всегда начинало
   вторую строку (просьба Насти от 9 сентября 2026). Прежние
   985px тут только мешали бы — они ломали строку раньше <br>. */
.security__title {
  margin: 0 0 clamp(64px, calc(16px + 5.3333vw), 80px);
  font-size: clamp(50px, calc(8px + 4.6667vw), 64px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* ============================ СЕТКА ============================
   Три равные колонки. Зазор 24 на 1440 и 1200, 16 на 900:
     B = (24−16)/300×100 = 2,6667 ; A = 16 − 2,6667×9 = −8
   Проверка ширины колонки: (1360−48)/3 = 437,3 — макетные 437;
   (1120−48)/3 = 357,3 — макетные 357; (820−32)/3 = 262,7 — 263.

   Колонки тянутся по высоте (align-items: stretch по умолчанию) —
   на этом держатся разделители: они рисуются на всю высоту колонки. */

.security__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, calc(-8px + 2.6667vw), 24px);
}

/* от ярлыка до картинки 40 — одинаково на 1440, 1200 и 900,
   поэтому фиксированное число, а не формула */
.sec-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Разделитель. В макете линия стоит ровно по правому краю колонки
   (x = 477 при колонке 40…477), а не по центру зазора — поэтому
   right: 0, а не -12px. У последней колонки его нет. */
.sec-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--divider);
}

/* Ярлык «Согласие» / «152 ФЗ» / «Доступ» — синяя плашка со скруглением
   8px, поля 4/8, Inter Regular 20/1.2, трекинг -0.4px, текст белый.
   Кегль НЕ плавает: во всех пяти фреймах макета плашка одна и та же,
   106 × 32 (высота = 20 × 1,2 + 4 × 2 = 32).
   align-self: flex-start — иначе плашка растянется на всю колонку. */
.sec-item__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--white);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* от картинки до текста 24 — тоже одинаково на 1440/1200/900 */
.sec-item__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Картинка. Слот 110 на 1440 и 1200, 80 на 900:
     B = (110−80)/300×100 = 10 ; A = 80 − 10×9 = −10
   Внутри webp с прозрачным фоном, поэтому квадрат не виден.
   background-size: 100% 100% — исходники квадратные, кадрировать нечего. */
.sec-item__pic {
  flex: none;
  width: clamp(80px, calc(-10px + 10vw), 110px);
  height: clamp(80px, calc(-10px + 10vw), 110px);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
}

.sec-item__pic--consent { background-image: url("../assets/security-consent.webp"); }
.sec-item__pic--fz      { background-image: url("../assets/security-152fz.webp"); }
.sec-item__pic--access  { background-image: url("../assets/security-access.webp"); }

/* Текст: 32/1.1, трекинг -1.6px на 1440 и 1200; 24/1.03, трекинг
   -0.72px на 900. Плавают все три величины, поэтому:
     кегль        B = (32−24)/300×100 = 2,6667 ; A = 24 − 24 = 0
     интерлиньяж  считаем в px: 32×1,1 = 35,2 → 24×1,03 = 24,72
                  B = (35,2−24,72)/300×100 = 3,4933 ; A = −6,72
     трекинг      считаем в px: −1,6 → −0,72
                  B = 0,29333 ; A = −1,92, знак вынесен в формулу
   clamp с отрицательными границами читается как «не больше −0,72
   и не меньше −1,6» — порядок min/max при этом обычный. */
.sec-item__p {
  margin: 0;
  font-size: clamp(24px, 2.6667vw, 32px);
  line-height: clamp(24.72px, calc(-6.72px + 3.4933vw), 35.2px);
  font-weight: 400;
  letter-spacing: clamp(-1.6px, calc(1.92px - 0.29333vw), -0.72px);
  color: var(--ink);
}

/* ============================ ПОЯВЛЕНИЕ ============================
   Общий механизм .reveal (claude/benefits.css + claude/benefits.js):
   элемент выезжает снизу, когда впервые попадает в кадр. Здесь только
   очередь — колонки появляются одна за другой. Других анимаций
   в блоке нет: ни наведения, ни узоров. */

.security__eyebrow.reveal { --d: 0ms; }
.security__title.reveal   { --d: 60ms; }
.sec-item.reveal:nth-child(1) { --d: 0ms; }
.sec-item.reveal:nth-child(2) { --d: 120ms; }
.sec-item.reveal:nth-child(3) { --d: 240ms; }

/* ============================ АДАПТИВ ============================
   Пороги как в блоках 3, 5, 6 и в шапке: 899 и 759. Именно 899,
   а не 900: фрейм «1200-900» нарисован на 900 и там ещё три
   колонки с полями 40 — значит трёхколоночная раскладка обязана
   дожить до 900 включительно, а ломаться на 899.

   Ступень 899…760 (фрейм «900-760», нарисован на 760): поля 16,
   отбивки 50, одна колонка с шагом 56, картинка 80 слева от текста
   с зазором 12. Кегли внутри ступени постоянные, поэтому здесь
   обычные числа без формул. */

@media (max-width: 899px) {
  .security__inner { padding: 50px 16px; }

  /* заголовок 50 держится на всей ступени: на 899 в макете он
     такой же, как на 760 */
  .security__title {
    margin-bottom: 64px;
    font-size: 50px;
  }

  /* одна колонка, между пунктами 56px, разделителей нет */
  .security__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  /* селектор повторяем целиком: у `.sec-item::after` вес меньше,
     чем у `.sec-item:not(:last-child)::after`, и разделители остаются */
  .sec-item:not(:last-child)::after { content: none; }

  /* от ярлыка до строки «картинка + текст» 24 */
  .sec-item { gap: 24px; }

  /* картинка слева от текста. align-items: center, а не flex-start:
     в макете на 760 текст (50) центрован по картинке (80) — отступ
     сверху 15 = (80−50)/2, а на 393 наоборот картинка (80) центрована
     по тексту (100) — отступ 10 = (100−80)/2. Обе ситуации даёт
     ровно центрирование. */
  .sec-item__body {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .sec-item__pic {
    width: 80px;
    height: 80px;
  }

  .sec-item__p {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 24px;
    line-height: 1.03;
    letter-spacing: -0.03em;
  }
}

/* Ступень 759 и ниже (фрейм «760-360», нарисован на 393): поля 12,
   надзаголовок 16, до заголовка 24, заголовок 40. Кегли макета
   заданы на 393, ниже 393 они ужимаются общей долей --u — тот же
   приём, что в блоках 3 и 5. Выше 393 всё упирается в clamp
   и остаётся макетным. */

@media (max-width: 759px) {
  .security {
    /* мобильный макет: контент 369 = 393 − 12 − 12 */
    --u: calc((100vw - 24px) / 369);
  }

  .security__inner { padding: 50px 12px; }

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

  .security__title {
    font-size: clamp(30px, calc(40 * var(--u)), 40px);
  }

  .sec-item__pic {
    width: clamp(56px, calc(80 * var(--u)), 80px);
    height: clamp(56px, calc(80 * var(--u)), 80px);
  }

  .sec-item__p {
    font-size: clamp(18px, calc(24 * var(--u)), 24px);
  }
}