/* ==========================================================================
   TRM · дизайн-система, слой 2 — компоненты
   Префикс ds- : слой живёт рядом со старым styles.css, пока блоки
   переводятся по одному. Значения — только из tokens.css.
   ========================================================================== */

@layer ds.components {

  /* --- 1. Разлиновка и сетка ------------------------------------------ */
  /* Точечные рейки по границам колонок, как у референса. Лишние рейки
     прячутся на узких экранах — число колонок меняется без пересчёта. */
  .ds-rails {
    position: fixed;
    inset: 0 var(--ds-pad);
    z-index: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
  }
  .ds-rails i { width: 0; border-left: 1px dotted var(--ds-rule); }

  @media (max-width: 1023px) {
    .ds-rails i:nth-child(2), .ds-rails i:nth-child(4) { display: none; }
  }
  @media (max-width: 767px) {
    .ds-rails i:nth-child(3) { display: none; }
  }

  .ds-page { position: relative; z-index: 1; }

  .ds-grid {
    display: grid;
    grid-template-columns: repeat(var(--ds-cols), minmax(0, 1fr));
    padding-inline: var(--ds-pad);
  }
  .ds-grid > * { min-width: 0; padding-inline: var(--ds-s-3); }

  /* Зазор между рядами, когда колонки складываются в стопку на узком экране */
  .ds-grid--stack { row-gap: var(--ds-s-6); }

  .ds-span-2 { grid-column: span 2; }
  .ds-span-3 { grid-column: span 3; }
  .ds-span-all { grid-column: 1 / -1; }

  @media (max-width: 1023px) {
    .ds-span-3 { grid-column: span 2; }
  }
  @media (max-width: 767px) {
    .ds-span-2, .ds-span-3 { grid-column: 1 / -1; }
  }

  /* --- 2. Секция -------------------------------------------------------- */
  .ds-section {
    position: relative;
    padding-block: var(--ds-section-y);
    border-top: 1px dotted var(--ds-rule);
  }

  /* Шапка секции: метка и заголовок слева, вводный абзац справа — 2 + 2 колонки */
  .ds-section__head {
    row-gap: var(--ds-s-5);
    margin-bottom: var(--ds-s-8);
  }
  .ds-section__head .ds-h1 { margin-top: var(--ds-s-5); }

  .ds-night {
    background: var(--ds-night);
    color: var(--ds-on-night);
    border-top-color: var(--ds-night-rule);
    --ds-ink: var(--ds-on-night);
    --ds-ink-2: var(--ds-on-night-2);
    --ds-ink-3: #5c5c5c;
    --ds-rule: var(--ds-night-rule);
    --ds-rule-strong: #3a3a3a;
    --ds-surface: var(--ds-night-2);
    --ds-surface-2: #202020;
  }

  /* --- 3. Метка секции: штрих-код + ( Слово ) --------------------------- */
  .ds-label {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-s-3);
    font-size: var(--ds-fs-micro);
    line-height: 1;
    letter-spacing: var(--ds-ls-micro);
    text-transform: uppercase;
    color: var(--ds-ink-2);
  }
  .ds-label__bars {
    width: 22px;
    height: 12px;
    background: repeating-linear-gradient(90deg,
      var(--ds-ink) 0 2px, transparent 2px 4px,
      var(--ds-ink) 4px 5px, transparent 5px 7px);
  }
  .ds-label__text::before { content: '( '; color: var(--ds-ink-3); }
  .ds-label__text::after { content: ' )'; color: var(--ds-ink-3); }

  /* Индекс «( 1 )» для шагов, карточек, групп */
  .ds-index {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-small);
    color: var(--ds-ink);
    white-space: nowrap;
  }
  .ds-index::before { content: '( '; color: var(--ds-ink-3); }
  .ds-index::after { content: ' )'; color: var(--ds-ink-3); }

  /* --- 4. Типографика ---------------------------------------------------- */
  .ds-display, .ds-h1, .ds-h2, .ds-h3 {
    font-family: var(--ds-font-display);
    font-weight: 500;
    letter-spacing: var(--ds-ls-display);
    text-wrap: balance;
  }
  .ds-display { font-size: var(--ds-fs-display); line-height: var(--ds-lh-tight); }
  .ds-h1 { font-size: var(--ds-fs-h1); line-height: 1.1; }
  .ds-h2 { font-size: var(--ds-fs-h2); line-height: 1.12; }
  .ds-h3 { font-size: var(--ds-fs-h3); line-height: var(--ds-lh-snug); letter-spacing: -0.01em; }

  .ds-lead { font-size: var(--ds-fs-lead); line-height: 1.45; letter-spacing: -0.02em; }
  .ds-body { font-size: var(--ds-fs-body); line-height: var(--ds-lh-body); }
  .ds-small { font-size: var(--ds-fs-small); line-height: 1.5; color: var(--ds-ink-2); }
  .ds-micro {
    font-size: var(--ds-fs-micro);
    line-height: 1.4;
    letter-spacing: var(--ds-ls-micro);
    text-transform: uppercase;
    color: var(--ds-ink-2);
  }
  .ds-measure { max-width: 60ch; }

  /* Смешанный акцент: абзац во вторичном цвете, ключевые фразы — в основном */
  .ds-mixed { color: var(--ds-ink-2); }
  .ds-mixed strong, .ds-mixed b { font-weight: inherit; color: var(--ds-ink); }

  /* --- 5. Гигантский вордмарк с матовой полосой -------------------------- */
  /* Кегль считается от рамки: ширина поля / K, где K — отношение ширины
     слова к кеглю, замеренное на живом элементе. */
  .ds-giant {
    position: relative;
    display: block;
    margin-inline: var(--ds-pad);
    font-family: var(--ds-font-display);
    font-weight: 500;
    font-size: calc((100vw - var(--ds-pad) * 2) / var(--k, 3.4));
    line-height: 0.84;
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: var(--ds-ink);
    user-select: none;
  }
  .ds-giant sup { font-size: 0.28em; vertical-align: 1.9em; letter-spacing: 0; }
  .ds-giant__frost {
    position: absolute;
    inset: 50% calc(var(--ds-pad) * -1) 0;
    background: var(--ds-frost);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 70%);
    mask-image: linear-gradient(0deg, transparent, #000 70%);
  }

  /* --- 6. Кнопки и ссылки ------------------------------------------------ */
  /* Подпись едет вверх и подменяется копией, справа квадрат со стрелкой. */
  .ds-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-s-4);
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--ds-font-display);
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.2;
    color: var(--ds-ink);
    text-decoration: none;
    cursor: pointer;
  }
  .ds-btn__label {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  .ds-btn__label > span {
    display: inline-block;
    transition: transform var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-btn__label > span::after {
    content: attr(data-label);
    position: absolute;
    top: 100%;
    left: 0;
  }
  .ds-btn__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--ds-r-0);
    background: var(--ds-ink);
    color: var(--ds-paper);
    transition: background-color var(--ds-dur-fast) var(--ds-ease),
                color var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-btn__icon svg {
    width: 18px;
    height: 18px;
    transition: transform var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-btn:hover .ds-btn__label > span,
  .ds-btn:focus-visible .ds-btn__label > span { transform: translateY(-100%); }
  .ds-btn:hover .ds-btn__icon,
  .ds-btn:focus-visible .ds-btn__icon { background: var(--ds-accent); color: var(--ds-on-accent); }
  .ds-btn:hover .ds-btn__icon svg { transform: translateX(3px); }
  .ds-btn:active .ds-btn__icon { transform: scale(0.96); }
  .ds-btn:focus-visible { outline-offset: 6px; }

  .ds-night .ds-btn__icon { background: var(--ds-on-night); color: var(--ds-night); }

  /* Вариант-акцент: квадрат залит акцентом сразу */
  .ds-btn--accent .ds-btn__icon { background: var(--ds-accent); color: var(--ds-on-accent); }
  .ds-btn--accent:hover .ds-btn__icon { background: var(--ds-ink); color: var(--ds-paper); }

  /* Компактная кнопка для шапки */
  .ds-btn--sm { gap: var(--ds-s-3); font-size: var(--ds-fs-small); }
  .ds-btn--sm .ds-btn__icon { width: 32px; height: 32px; }
  .ds-btn--sm .ds-btn__icon svg { width: 14px; height: 14px; }

  /* Текстовая ссылка со стрелкой, как «Let's talk →» у референса */
  .ds-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-s-2);
    min-height: 44px;
    font-size: var(--ds-fs-small);
    color: var(--ds-ink-2);
    text-decoration: none;
    transition: color var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-link::after {
    content: '→';
    transition: transform var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-link:hover { color: var(--ds-ink); }
  .ds-link:hover::after { transform: translateX(4px); }

  /* Ссылка в тексте */
  .ds-a {
    color: var(--ds-ink);
    text-decoration: underline;
    text-decoration-color: var(--ds-rule-strong);
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-a:hover { text-decoration-color: var(--ds-accent); }

  /* --- 7. Шапка с матовой «юбкой» ---------------------------------------- */
  .ds-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--ds-nav-h);
    align-items: center;
  }
  .ds-nav::before {
    content: '';
    position: absolute;
    inset: 0 0 -24px;
    z-index: -1;
    background: rgba(250, 250, 250, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 40%);
    mask-image: linear-gradient(0deg, transparent, #000 40%);
  }
  .ds-nav__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--ds-font-display);
    font-size: 20px;
    letter-spacing: -0.02em;
    text-decoration: none;
  }
  .ds-nav__brand sup { font-size: 0.5em; }
  /* Меню — две строки колонками, как информационные столбцы в шапке референса:
     семь пунктов не помещаются в одну строку на 2 колонках сетки. */
  .ds-nav__menu {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    justify-content: start;
    gap: 0 var(--ds-s-5);
  }
  .ds-nav__menu a {
    font-size: var(--ds-fs-small);
    line-height: 1.5;
    color: var(--ds-ink-2);
    text-decoration: none;
    transition: color var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-nav__menu a:hover, .ds-nav__menu a[aria-current] { color: var(--ds-ink); }
  .ds-nav__end { display: flex; justify-content: flex-end; align-items: center; gap: var(--ds-s-4); }
  .ds-nav__more { display: none; }

  @media (max-width: 1023px) {
    .ds-nav .ds-nav__menu { display: none; }
    .ds-nav__more { display: block; position: relative; }
  }
  @media (max-width: 767px) {
    .ds-nav { grid-template-columns: 1fr auto; }
    .ds-nav__cta { display: none; }
  }

  .ds-nav__more > summary {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--ds-s-3);
    border: 1px solid var(--ds-rule-strong);
    font-size: var(--ds-fs-small);
    list-style: none;
    cursor: pointer;
  }
  .ds-nav__more > summary::-webkit-details-marker { display: none; }
  .ds-nav__more[open] > summary { background: var(--ds-ink); color: var(--ds-paper); border-color: var(--ds-ink); }
  .ds-nav__panel {
    position: absolute;
    top: calc(100% + var(--ds-s-2));
    right: 0;
    width: min(280px, calc(100vw - var(--ds-pad) * 2));
    padding: var(--ds-s-4);
    background: var(--ds-surface);
    border: 1px solid var(--ds-rule);
  }
  .ds-nav__panel .ds-nav__menu {
    display: grid;
    grid-template-rows: none;
    grid-auto-flow: row;
    justify-content: stretch;
    gap: 0;
  }
  .ds-nav__panel .ds-nav__menu a {
    display: block;
    padding: var(--ds-s-3) 0;
    border-top: 1px dotted var(--ds-rule);
    font-size: var(--ds-fs-body);
    color: var(--ds-ink);
  }
  .ds-nav__panel .ds-nav__menu a:first-child { border-top: 0; }

  /* --- 8. Список-регистр со стрелками ------------------------------------ */
  .ds-list > li {
    display: grid;
    grid-template-columns: var(--ds-s-6) 1fr;
    padding-block: var(--ds-s-4);
    border-top: 1px dotted var(--ds-rule);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.45;
  }
  .ds-list > li:last-child { border-bottom: 1px dotted var(--ds-rule); }
  .ds-list > li::before {
    content: '→';
    color: var(--ds-accent-ink);
    transition: transform var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-night .ds-list > li::before { color: var(--ds-accent); }
  .ds-list > li:hover::before { transform: translateX(4px); }

  /* --- 9. Счётчик ------------------------------------------------------- */
  /* На телефоне счётчики идут парами: по одному на экран — слишком много пустоты */
  @media (max-width: 767px) {
    .ds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .ds-stat {
    display: flex;
    flex-direction: column;
    gap: var(--ds-s-4);
    padding-block: var(--ds-s-5);
    border-top: 1px dotted var(--ds-rule);
  }
  .ds-stat__value {
    font-family: var(--ds-font-display);
    font-size: clamp(56px, 7vw, 104px);
    line-height: 0.9;
    letter-spacing: -0.04em;
  }
  .ds-stat__unit { color: var(--ds-ink-3); }
  .ds-stat__unit--pre { font-size: 0.4em; letter-spacing: 0; margin-right: 0.1em; }

  /* --- 10. Карточка: шаг, источник, раздел ------------------------------- */
  .ds-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ds-s-4);
    padding: var(--ds-s-5) var(--ds-s-3) var(--ds-s-6);
    border-top: 1px dotted var(--ds-rule);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-card__head {
    display: flex;
    align-items: baseline;
    gap: var(--ds-s-3);
  }
  .ds-card__head .ds-h3 { flex: 1; }
  .ds-card__arrow {
    color: var(--ds-ink-3);
    transition: transform var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-card__text { font-size: var(--ds-fs-small); line-height: 1.6; color: var(--ds-ink-2); }
  .ds-card__foot { display: flex; flex-wrap: wrap; gap: var(--ds-s-2); margin-top: auto; padding-top: var(--ds-s-2); }
  .ds-card:hover { background: var(--ds-surface-2); }
  .ds-card:hover .ds-card__arrow { color: var(--ds-accent-ink); transform: translateX(4px); }
  .ds-night .ds-card:hover .ds-card__arrow { color: var(--ds-accent); }

  /* Карточка-панель на подложке: для выделенного содержания (отчёт, кейс) */
  .ds-card--panel {
    background: var(--ds-surface);
    border: 1px solid var(--ds-rule);
    padding-inline: var(--ds-s-5);
  }
  .ds-card--panel:hover { background: var(--ds-surface); border-color: var(--ds-rule-strong); }

  /* --- 11. Чип ---------------------------------------------------------- */
  .ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-s-2);
    min-height: 28px;
    padding: 0 var(--ds-s-3);
    border: 1px solid var(--ds-rule-strong);
    border-radius: var(--ds-r-round);
    font-size: var(--ds-fs-micro);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--ds-ink-2);
    white-space: nowrap;
  }
  .ds-chip--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--ds-r-round);
    background: var(--ds-accent);
  }

  /* --- 12. FAQ-аккордеон на <details> ------------------------------------ */
  .ds-faq { border-bottom: 1px dotted var(--ds-rule); }
  .ds-faq__item { border-top: 1px dotted var(--ds-rule); }
  .ds-faq__q {
    display: grid;
    grid-template-columns: 1fr 32px;
    align-items: center;
    gap: var(--ds-s-4);
    padding-block: var(--ds-s-4);
    font-size: clamp(16px, 1.3vw, 18px);
    font-weight: 500;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
  }
  .ds-faq__q::-webkit-details-marker { display: none; }
  .ds-faq__icon {
    position: relative;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ds-rule-strong);
    border-radius: var(--ds-r-round);
    transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-faq__icon::before, .ds-faq__icon::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 12px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
  .ds-faq__q:hover .ds-faq__icon { border-color: var(--ds-ink); }
  .ds-faq__item[open] .ds-faq__icon { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-paper); }
  .ds-faq__item[open] .ds-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
  .ds-faq__a {
    max-width: 62ch;
    padding: 0 var(--ds-s-8) var(--ds-s-5) 0;
    color: var(--ds-ink-2);
  }
  @media (max-width: 767px) {
    .ds-faq__a { padding-right: 0; }
  }

  /* Плавное раскрытие там, где браузер умеет анимировать details */
  @supports (interpolate-size: allow-keywords) {
    .ds-faq { interpolate-size: allow-keywords; }
    .ds-faq__item::details-content {
      height: 0;
      overflow: clip;
      transition: height var(--ds-dur) var(--ds-ease), content-visibility var(--ds-dur) allow-discrete;
    }
    .ds-faq__item[open]::details-content { height: auto; }
  }

  /* --- 13. Сетка логотипов ----------------------------------------------- */
  .ds-logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px dotted var(--ds-rule);
    border-left: 1px dotted var(--ds-rule);
  }
  .ds-logos > li {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    padding: var(--ds-s-5);
    border-right: 1px dotted var(--ds-rule);
    border-bottom: 1px dotted var(--ds-rule);
    transition: background-color var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-logos img {
    max-width: 78%;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.72;
    mix-blend-mode: multiply;   /* у части файлов белая подложка — растворяем её в фоне */
    transition: filter var(--ds-dur-fast) var(--ds-ease), opacity var(--ds-dur-fast) var(--ds-ease);
  }
  .ds-logos > li:hover { background: var(--ds-surface); }
  .ds-logos > li:hover img { filter: none; opacity: 1; }

  @media (max-width: 1023px) { .ds-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 767px) {
    .ds-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-logos > li { padding: var(--ds-s-4); }
  }

  /* --- 14. Персона: портрет + профиль ------------------------------------ */
  .ds-person__photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--ds-r-media);
    background: var(--ds-surface-2);
  }
  .ds-person__block {
    display: grid;
    gap: var(--ds-s-3);
    padding-block: var(--ds-s-5);
    border-top: 1px dotted var(--ds-rule);
  }
  .ds-person__block:first-child { border-top: 0; padding-top: 0; }

  /* --- 15. Финальный призыв (ночная панель) ------------------------------- */
  .ds-cta { padding-top: var(--ds-s-9); overflow: hidden; }
  .ds-cta__body {
    row-gap: var(--ds-s-5);
    padding-block: var(--ds-s-7) var(--ds-s-9);
  }
  .ds-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s-4) var(--ds-s-6); }

  /* --- 16. Подвал --------------------------------------------------------- */
  .ds-footer { padding-block: var(--ds-s-8) var(--ds-s-5); row-gap: var(--ds-s-7); }
  .ds-footer__col { display: grid; align-content: start; gap: var(--ds-s-3); }
  .ds-footer__col a { text-decoration: none; }
  .ds-footer__col a:hover { color: var(--ds-on-night); }
  .ds-footer__nav { display: grid; gap: var(--ds-s-1); font-size: var(--ds-fs-small); color: var(--ds-ink-2); }
  .ds-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ds-s-3);
    padding-top: var(--ds-s-5);
    border-top: 1px dotted var(--ds-rule);
  }
  .ds-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }

  @media (max-width: 767px) {
    .ds-footer { row-gap: var(--ds-s-6); }
  }
}

@layer ds.utilities {
  .ds-stack { display: grid; gap: var(--ds-gap, var(--ds-s-4)); align-content: start; }
  .ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-gap, var(--ds-s-3)); }
  .ds-mt-5 { margin-top: var(--ds-s-5); }
  .ds-mt-7 { margin-top: var(--ds-s-7); }
  .ds-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}