/* ============================================================
   ЕДС · новый блок «Кому и когда нужны наши услуги»
   Отдельный файл: подключается только вкладкой этого блока,
   общие eds.css / eds-board.css не тронуты.
   ============================================================ */

/* колонки прижаты к своим краям, лишнее уходит в средний зазор */
.kk-grid{display:grid;grid-template-columns:minmax(0,491px) minmax(0,569px);justify-content:start;gap:100px;align-items:stretch;margin-top:34px}
.kk-col{display:flex;flex-direction:column}
.kk-col>.plate{display:block;margin-bottom:16px}

.kk-list{flex:1;display:flex;flex-direction:column;gap:1px;background:var(--rule)}

.kk-card{--ch:11px;flex:1;position:relative;display:flex;gap:13px;align-items:center;
  background:var(--field-3);padding:calc(var(--cell) * .5) 32px;transition:background .24s ease}
.kk-card::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--signal);transition:width .38s cubic-bezier(.2,.8,.2,1)}
.kk-card:hover{background:#fff}
.kk-card:hover::after{width:100%}
.kk-card .ic{--ch:6px;flex:none;width:38px;height:38px;display:grid;place-items:center;
  background:var(--field-2);color:var(--signal-deep);
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  transition:background .24s ease,color .24s ease}
.kk-card:hover .ic{background:var(--signal);color:var(--signal-ink)}
.kk-card .ic svg{width:20px;height:20px}
/* max-width удерживает переносы на тех же словах, что и при ширине колонки 560px;
   ширина колонки = 32px паддинг + иконка + gap + max-width текста + 32px отступ справа */
.kk-card p{margin:0;width:100%;max-width:454px;font-size:15.5px;line-height:1.44;font-weight:600;text-wrap:pretty}
.kk-col.dk .kk-card p{max-width:524px}

/* тёмные плашки — правый ряд, с воздухом между собой */
.kk-col.dk .kk-list{background:transparent;gap:10px}
.kk-col.dk .kk-card{--ch:13px;background:var(--chassis);color:var(--on-chassis)}
.kk-col.dk .kk-card:hover{background:var(--chassis-2)}
.kk-col.dk .kk-card .ic{background:var(--chassis-3);color:var(--signal)}
.kk-col.dk .kk-card:hover .ic{background:var(--signal);color:var(--signal-ink)}

/* вкладка: контейнер даёт .eds-board, ширина кадра фиксированная */
@container (max-width:1000px){
  .kk-grid{grid-template-columns:minmax(0,1fr);gap:var(--board-gap)}
  .kk-card{flex:none}
  .kk-card p,.kk-col.dk .kk-card p{max-width:none}
}
@container (max-width:700px){
  .kk-card br{display:none}
  .kk-card p{font-size:15px}
}
/* полная страница: контейнера нет, ориентир — вьюпорт; main есть только там.
   До 1180px — фиксированные колонки, как на 1440.
   Ниже — плавные колонки: ручные переносы остаются, текст досверстывается по ширине. */
@media (max-width:1180px){
  main .kk-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.4vw,76px)}
  main .kk-card{padding:calc(var(--cell) * .5) clamp(20px,2.4vw,32px)}
  main .kk-col:not(.dk) .kk-card p{max-width:none}
}
/* одна колонка только на узких экранах */
@media (max-width:760px){
  main .kk-grid{grid-template-columns:minmax(0,1fr);gap:var(--board-gap)}
  main .kk-card{flex:none}
  main .kk-card br{display:none}
  main .kk-card p{font-size:15px}
}

/* ============================================================
   Ритм переходов на полной странице.
   Между секциями работает 2 × --sec (padding снизу + сверху).
   Приводим к тому же шагу два перехода, которые выбивались:
   hero → 01 (у hero padding-bottom:0) и 02 → 03 (блок внутри секции).
   ============================================================ */
main .hero{padding-bottom:var(--sec)}
main #fit .blk{margin-top:calc(var(--sec) * 2)}

/* ============================================================
   Горизонтальная раскладка: группа за группой, табы в два ряда.
   Только десктоп — узкие экраны ниже собираются в одну колонку.
   ============================================================ */
.kk-grid:has(.kk-row){grid-template-columns:minmax(0,1fr);gap:44px}
.kk-row{display:flex;flex-direction:column}
.kk-row>.plate{display:block;margin-bottom:16px}
.kk-row .kk-list{display:grid;grid-template-columns:491px 569px;column-gap:100px;row-gap:16px;
  background:transparent;flex:none}
.kk-row .kk-card{flex:none}
.kk-row.dk .kk-card{--ch:13px;background:var(--chassis);color:var(--on-chassis)}
.kk-row.dk .kk-card:hover{background:var(--chassis-2)}
.kk-row.dk .kk-card .ic{background:var(--chassis-3);color:var(--signal)}
.kk-row.dk .kk-card:hover .ic{background:var(--signal);color:var(--signal-ink)}
.kk-row.dk .kk-card p{max-width:524px}

/* десктоп: тёмные плашки «когда нужны наши услуги» — выше по вертикали, уже по бокам */
@media (min-width:1025px){
  main .kk-row.dk .kk-card{padding:calc(var(--cell) * 1) 25.6px}
}
@container (min-width:1025px){
  .eds-board main .kk-row.dk .kk-card{padding:calc(var(--cell) * 1) 25.6px}
}

@container (max-width:1223px){
  .eds-board main .kk-row .kk-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,4.4vw,100px)}
  .eds-board main .kk-row .kk-card p,.eds-board main .kk-row.dk .kk-card p{max-width:none}
}
@container (max-width:820px){
  .eds-board main .kk-row .kk-list{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .eds-board main .kk-row .kk-card br{display:none}
}
@media (max-width:1223px){
  main .kk-row .kk-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,4.4vw,100px)}
  main .kk-row .kk-card p,main .kk-row.dk .kk-card p{max-width:none}
}
@media (max-width:820px){
  main .kk-row .kk-list{grid-template-columns:minmax(0,1fr)}
  main .kk-row .kk-card br{display:none}
}


/* ============================================================
   Мобильная и планшетная раскладка «кому и когда»:
   строка = иконка + короткий текст, тонкий разделитель,
   без отступов и зазоров. Десктоп (>1024px) не затронут.
   ============================================================ */
.kk-m{display:none}
@media (max-width:1024px){
main .kk-row .kk-list{display:block;grid-template-columns:none;column-gap:0;row-gap:0;background:transparent}
main .kk-row .kk-card{--ch:0px;display:flex;align-items:center;gap:12px;padding:10px 0;background:transparent;color:var(--ink);clip-path:none;border-top:1px solid var(--rule-soft)}
main .kk-row .kk-card:last-child{border-bottom:1px solid var(--rule-soft)}
main .kk-row .kk-card::after{content:none}
main .kk-row .kk-card:hover{background:transparent}
main .kk-row .kk-card>p{display:none}
main .kk-row .kk-card>p.kk-m{display:block;max-width:none;font-size:13.5px;line-height:1.3;font-weight:600;white-space:nowrap}
main .kk-row .kk-card .ic,main .kk-row .kk-card:hover .ic{width:26px;height:26px;background:transparent;clip-path:none;color:var(--signal-deep)}
main .kk-row .kk-card .ic svg{width:22px;height:22px}
main .kk-row.dk .kk-card,main .kk-row.dk .kk-card:hover{background:transparent;color:var(--ink)}
main .kk-row .kk-card br{display:none}
}
@container (max-width:1024px){
.eds-board main .kk-row .kk-list{display:block;grid-template-columns:none;column-gap:0;row-gap:0;background:transparent}
.eds-board main .kk-row .kk-card{--ch:0px;display:flex;align-items:center;gap:12px;padding:10px 0;background:transparent;color:var(--ink);clip-path:none;border-top:1px solid var(--rule-soft)}
.eds-board main .kk-row .kk-card:last-child{border-bottom:1px solid var(--rule-soft)}
.eds-board main .kk-row .kk-card::after{content:none}
.eds-board main .kk-row .kk-card:hover{background:transparent}
.eds-board main .kk-row .kk-card>p{display:none}
.eds-board main .kk-row .kk-card>p.kk-m{display:block;max-width:none;font-size:13.5px;line-height:1.3;font-weight:600;white-space:nowrap}
.eds-board main .kk-row .kk-card .ic,.eds-board main .kk-row .kk-card:hover .ic{width:26px;height:26px;background:transparent;clip-path:none;color:var(--signal-deep)}
.eds-board main .kk-row .kk-card .ic svg{width:22px;height:22px}
.eds-board main .kk-row.dk .kk-card,.eds-board main .kk-row.dk .kk-card:hover{background:transparent;color:var(--ink)}
.eds-board main .kk-row .kk-card br{display:none}
}