/* ============================================================
   UTILITIES — типографика, отступы, плитки, сетки
   Сгенерировано из инлайновых style="" в разметке.

   Подключается ПОСЛЕДНИМ во всех страницах. Это принципиально:
   утилита должна выигрывать у компонентного правила той же
   специфичности — раньше эту роль играл инлайновый style="".
   ============================================================ */

/* Размер шрифта */
html .t-10.t-10 { font-size: 10px; }
html .t-11.t-11 { font-size: 11px; }
html .t-12.t-12 { font-size: 12px; }
html .t-13.t-13 { font-size: 13px; }
html .t-14.t-14 { font-size: 14px; }
html .t-16.t-16 { font-size: 16px; }
html .t-17.t-17 { font-size: 17px; }
html .t-18.t-18 { font-size: 18px; }
html .t-22.t-22 { font-size: 22px; }
html .t-28.t-28 { font-size: 28px; }
html .t-30.t-30 { font-size: 30px; }
html .t-32.t-32 { font-size: 32px; }
html .t-34.t-34 { font-size: 34px; }
html .t-36.t-36 { font-size: 36px; }
html .t-38.t-38 { font-size: 38px; }
html .t-40.t-40 { font-size: 40px; }
html .t-44.t-44 { font-size: 44px; }
html .t-48.t-48 { font-size: 48px; }
html .t-56.t-56 { font-size: 56px; }

/* Плавный размер (clamp) */
html .t-fluid-64.t-fluid-64 { font-size: clamp(34px, 5vw, 64px); }
html .t-fluid-68.t-fluid-68 { font-size: clamp(32px, 5.2vw, 68px); }
html .t-fluid-92.t-fluid-92 { font-size: clamp(44px, 7.5vw, 92px); }
html .t-fluid-96.t-fluid-96 { font-size: clamp(44px, 7.5vw, 96px); }
html .t-fluid-104.t-fluid-104 { font-size: clamp(48px, 8vw, 104px); }
html .t-fluid-120.t-fluid-120 { font-size: clamp(56px, 9vw, 120px); }

/* Межстрочное */
html .lh-1.lh-1 { line-height: 1; }
html .lh-11.lh-11 { line-height: 1.1; }
html .lh-15.lh-15 { line-height: 1.5; }
html .lh-16.lh-16 { line-height: 1.6; }
html .lh-17.lh-17 { line-height: 1.7; }
html .lh-19.lh-19 { line-height: 1.9; }
html .lh-96.lh-96 { line-height: 0.96; }
html .lh-98.lh-98 { line-height: 0.98; }
html .lh-102.lh-102 { line-height: 1.02; }
html .lh-105.lh-105 { line-height: 1.05; }
html .lh-106.lh-106 { line-height: 1.06; }
html .lh-108.lh-108 { line-height: 1.08; }
html .lh-112.lh-112 { line-height: 1.12; }
html .lh-125.lh-125 { line-height: 1.25; }
html .lh-155.lh-155 { line-height: 1.55; }
html .lh-165.lh-165 { line-height: 1.65; }

/* Межбуквенное */
html .ls-t01.ls-t01 { letter-spacing: -0.01em; }
html .ls-2.ls-2 { letter-spacing: 0.2em; }
html .ls-t02.ls-t02 { letter-spacing: -0.02em; }
html .ls-t03.ls-t03 { letter-spacing: -0.03em; }
html .ls-4.ls-4 { letter-spacing: 0.04em; }
html .ls-14.ls-14 { letter-spacing: 0.14em; }
html .ls-16.ls-16 { letter-spacing: 0.16em; }
html .ls-18.ls-18 { letter-spacing: 0.18em; }
html .ls-t035.ls-t035 { letter-spacing: -0.035em; }

/* Отступы */
html .m-0.m-0 { margin: 0; }
html .m-0-0-12.m-0-0-12 { margin: 0 0 12px; }
html .m-0-auto-28.m-0-auto-28 { margin: 0 auto 28px; }
html .mb-s5.mb-s5 { margin-bottom: var(--s-5); }
html .mb-s6.mb-s6 { margin-bottom: var(--s-6); }
html .mb-s7.mb-s7 { margin-bottom: var(--s-7); }
html .mt-0.mt-0 { margin-top: 0; }
html .mt-4.mt-4 { margin-top: 4px; }
html .mt-s4.mt-s4 { margin-top: var(--s-4); }
html .mt-6.mt-6 { margin-top: 6px; }
html .mt-s6.mt-s6 { margin-top: var(--s-6); }
html .mt-s7.mt-s7 { margin-top: var(--s-7); }
html .mt-8.mt-8 { margin-top: 8px; }
html .mt-10.mt-10 { margin-top: 10px; }
html .mt-12.mt-12 { margin-top: 12px; }
html .mt-14.mt-14 { margin-top: 14px; }
html .mt-16.mt-16 { margin-top: 16px; }
html .mt-18.mt-18 { margin-top: 18px; }
html .mt-20.mt-20 { margin-top: 20px; }
html .mt-24.mt-24 { margin-top: 24px; }
html .mt-28.mt-28 { margin-top: 28px; }
html .mt-32.mt-32 { margin-top: 32px; }
html .mt-36.mt-36 { margin-top: 36px; }
html .mt-40.mt-40 { margin-top: 40px; }
html .pl-18.pl-18 { padding-left: 18px; }
html .pt-s7.pt-s7 { padding-top: var(--s-7); }

/* Ширина строки */
html .mw-380.mw-380 { max-width: 380px; }
html .mw-560.mw-560 { max-width: 560px; }
html .mw-620.mw-620 { max-width: 620px; }
html .mw-680.mw-680 { max-width: 680px; }
html .mw-700.mw-700 { max-width: 700px; }
html .mw-720.mw-720 { max-width: 720px; }
html .mw-760.mw-760 { max-width: 760px; }
html .mw-820.mw-820 { max-width: 820px; }
html .mw-860.mw-860 { max-width: 860px; }
html .mw-880.mw-880 { max-width: 880px; }

/* Раскладка */
html .bd-hair.bd-hair { border: var(--hairline); }
html .bg-line.bg-line { background: var(--line); }
html .c-accent.c-accent { color: var(--accent); }
html .c-dim.c-dim { color: var(--titanium-dim); }
html .c-err.c-err { color: #c0392b; }
html .c-primary.c-primary { color: var(--color-primary); }
html .d-grid.d-grid { display: grid; }
html .d-none.d-none { display: none; }
html .fw-wrap.fw-wrap { flex-wrap: wrap; }
html .fw-500.fw-500 { font-weight: 500; }
html .gap-1.gap-1 { gap: 1px; }
html .gap-s9.gap-s9 { gap: var(--s-9); }
html .items-center.items-center { align-items: center; }
html .items-end.items-end { align-items: flex-end; }
html .items-start.items-start { align-items: start; }
html .op-6.op-6 { opacity: 0.6; }
html .td-none.td-none { text-decoration: none; }

/* Сетки и колонки */
html .grid-hair-2.grid-hair-2 { grid-template-columns: repeat(2, 1fr); }
html .grid-hair-3.grid-hair-3 { grid-template-columns: repeat(3, 1fr); }
html .grid-hair-4.grid-hair-4 { grid-template-columns: repeat(4, 1fr); }
html .split-11.split-11 { grid-template-columns: 1.1fr 0.9fr; }
html .split-12.split-12 { grid-template-columns: 1fr 1.2fr; }
html .split-13.split-13 { grid-template-columns: 1fr 1.3fr; }
html .split-115.split-115 { grid-template-columns: 1fr 1.15fr; }
html .split-115r.split-115r { grid-template-columns: 1.15fr 1fr; }

/* Плитки и блоки */
html .honeypot.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
html .link-button.link-button {
  background: none;
  border: none;
  padding: 0;
  color: #c0392b;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
html .pad-center.pad-center {
  padding: 40px 24px;
  text-align: center;
}
html .row-center-14.row-center-14 {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
html .tile.tile {
  background: rgba(255, 255, 255, 0.5);
  padding: var(--s-5);
}
html .tile-quote.tile-quote {
  background: rgba(139, 51, 38, 0.06);
  padding: var(--s-6);
  border-left: 2px solid var(--color-accent);
}
html .tile-6.tile-6 {
  background: rgba(255, 255, 255, 0.5);
  padding: var(--s-6);
}

/* ============================================================
   АДАПТИВ УТИЛИТ
   Повторяет масштабирование, которое раньше делалось подстрочным
   матчингом по атрибуту style. Класс продублирован намеренно:
   так правило выигрывает у базового выше и у бренд-тем кейсов,
   у которых селекторы вида «.theme-x .display».
   ============================================================ */

/* Планшет — 980 и ниже */
@media (max-width: 980px) {
  /* Двухколоночные раскладки кейсов → в одну колонку */
  html .split-13.split-13,
  html .split-12r.split-12r {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  html .grid-hair-4.grid-hair-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Телефон — 720 и ниже */
@media (max-width: 720px) {
  html .hstat .t-28.t-28 { font-size: 22px; }

  /* Заголовки набирались в десктопном масштабе — ужимаем */
  html h1.display.t-fluid-120.t-fluid-120 { font-size: clamp(40px, 11vw, 64px); }
  html h2.t-56.t-56 {
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1.05;
  }
  html h2.t-44.t-44 {
    font-size: clamp(28px, 7.5vw, 36px);
    line-height: 1.1;
  }
  html h3.t-36.t-36 {
    font-size: clamp(24px, 6.5vw, 30px);
    line-height: 1.15;
  }
  html h3.t-28.t-28,
  html h3.t-22.t-22 { font-size: 20px; }
  html p.t-17.t-17 { font-size: 16px; }
  html p.t-16.t-16 { font-size: 15px; }
  html p.t-14.t-14 { line-height: 1.55; }

  /* Крупные числа на страницах кейсов и продуктов */
  html div.t-36.t-36 { font-size: 28px; }
  html div.t-56.t-56 { font-size: 36px; line-height: 1.05; }
  /* Текст манифеста */
  html p.t-28.t-28 { font-size: 22px; line-height: 1.3; }

  /* Сетки показателей → 2 колонки */
  html .grid-hair-3.grid-hair-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Узкий телефон — 480 и ниже */
@media (max-width: 480px) {
  html .hstat .t-28.t-28 { font-size: 20px; }

  /* Заголовки ужимаем ещё сильнее */
  html h2.t-56.t-56 { font-size: 30px; }
  html h2.t-44.t-44 { font-size: 26px; }
  html h3.t-36.t-36 { font-size: 22px; }

  /* Сетки плиток 4-up / 3-up → одна колонка */
  html .grid-hair-4.grid-hair-4,
  html .grid-hair-3.grid-hair-3 {
    grid-template-columns: 1fr;
  }
}