/* Этапы работы (views/constructor/workSteps.php). Виды: cards (карточки), timeline (вертикальная лента), arrows (цепочка со стрелками). */
.cb-worksteps {--ws-marker: 52px; margin: 0; padding: 0; list-style: none}
.cb-worksteps__item {min-width: 0}
.cb .cb-worksteps__name {margin: 0; color: var(--cb-heading); font-size: 19px; font-weight: 700; line-height: 1.3; hyphens: auto; overflow-wrap: anywhere}
.cb .cb-worksteps__text {margin: 10px 0 0; overflow-wrap: anywhere; color: var(--cb-fg); font-size: 15px; line-height: 1.6}
.cb .cb-worksteps__text:first-child {margin-top: 0}
.cb .cb-worksteps__tag {margin: 0 0 8px; color: var(--cb-accent); font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase}

/* Метка этапа: кружок; длинная метка в карточках — плашка */
.cb-worksteps__badge, .cb-worksteps__marker {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--ws-marker); height: var(--ws-marker); border: 2px solid var(--cb-accent); border-radius: 50%; background: var(--cb-bg, #fff); color: var(--cb-accent); font-size: 16px; font-weight: 800; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-align: center; transition: background var(--cb-transition), color var(--cb-transition)}
.cb-worksteps__badge {background: transparent}
.cb-worksteps__badge--wide {width: auto; min-width: var(--ws-marker); max-width: 100%; height: auto; min-height: 40px; padding: 8px 16px; border-radius: 999px; font-size: 12px; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; overflow-wrap: anywhere}
.cb-worksteps__item:hover .cb-worksteps__badge, .cb-worksteps__item:hover .cb-worksteps__marker {background: var(--cb-accent); color: var(--cb-bg, #fff)}

/* ---- Карточки ---- */
.cb-worksteps--cards .cb-worksteps__item {padding: clamp(24px, 2.4vw, 30px) clamp(20px, 2vw, 28px)}
.cb-worksteps--cards .cb-worksteps__head {display: flex; align-items: center; gap: 14px; min-height: var(--ws-marker); margin-bottom: 22px}
.cb-worksteps__rule {flex: 1; min-width: 16px; height: 2px; background: repeating-linear-gradient(90deg, var(--cb-line) 0 8px, transparent 8px 14px)}
.cb-worksteps--cols-5.cb-worksteps--cards .cb-worksteps__item {padding-inline: 20px}
.cb-worksteps--cols-5 .cb-worksteps__name {font-size: 18px}
@media (hover: none) {
    .cb-worksteps .cb-card--hover:hover {transform: none; box-shadow: var(--cb-card-shadow)}
}

/* ---- Вертикальная лента: линия слева, метки на ней, карточки справа ---- */
.cb-worksteps--timeline {display: grid; gap: 18px}
.cb-worksteps--timeline .cb-worksteps__item {position: relative; display: grid; grid-template-columns: var(--ws-marker) minmax(0, 1fr); column-gap: 22px; align-items: start}
.cb-worksteps--timeline .cb-worksteps__item:not(:last-child)::before {content: ""; position: absolute; left: calc(var(--ws-marker) / 2 - 1px); top: calc(12px + var(--ws-marker) / 2); bottom: calc(-18px - 12px - var(--ws-marker) / 2); width: 2px; background: var(--cb-line)}
.cb-worksteps--timeline .cb-worksteps__marker {position: relative; z-index: 1; grid-column: 1; grid-row: 1; margin-top: 12px}
.cb-worksteps--timeline .cb-worksteps__body {grid-column: 2; grid-row: 1; padding: 22px 26px}

/* ---- Цепочка со стрелками ---- */
.cb-worksteps--arrows {--ws-gap: clamp(20px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(var(--ws-cols, 4), minmax(0, 1fr)); gap: 44px var(--ws-gap)}
.cb-worksteps--arrows.cb-worksteps--cols-3 {--ws-cols: 3}
.cb-worksteps--arrows.cb-worksteps--cols-4 {--ws-cols: 4}
.cb-worksteps--arrows.cb-worksteps--cols-5 {--ws-cols: 5}
.cb-worksteps--arrows .cb-worksteps__head {display: flex; align-items: center; gap: 12px; margin-bottom: 24px}
.cb-worksteps__arrow {position: relative; flex: 1; min-width: 24px; height: 2px; margin-right: calc(8px - var(--ws-gap)); background: linear-gradient(90deg, var(--cb-line), var(--cb-accent))}
.cb-worksteps__arrow::after {content: ""; position: absolute; right: 1px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--cb-accent); border-right: 2px solid var(--cb-accent); transform: translateY(-50%) rotate(45deg)}
.cb-worksteps--arrows .cb-worksteps__item:last-child .cb-worksteps__arrow {visibility: hidden; margin-right: 0}
.cb-worksteps--arrows .cb-worksteps__text {max-width: 320px}

@media (min-width: 992px) {
    /* Лента в две стороны от линии по центру */
    .cb-worksteps--timeline {gap: 22px}
    .cb-worksteps--timeline .cb-worksteps__item {grid-template-columns: minmax(0, 1fr) var(--ws-marker) minmax(0, 1fr); column-gap: clamp(28px, 3vw, 48px)}
    .cb-worksteps--timeline .cb-worksteps__item:not(:last-child)::before {left: calc(50% - 1px); bottom: calc(-22px - 12px - var(--ws-marker) / 2)}
    .cb-worksteps--timeline .cb-worksteps__marker {grid-column: 2}
    .cb-worksteps--timeline .cb-worksteps__body {grid-column: 1}
    .cb-worksteps--timeline .cb-worksteps__item--even .cb-worksteps__body {grid-column: 3}

    /* Последний в ряду — без стрелки */
    .cb-worksteps--cols-3 > .cb-worksteps__item:nth-child(3n) .cb-worksteps__arrow,
    .cb-worksteps--cols-4 > .cb-worksteps__item:nth-child(4n) .cb-worksteps__arrow,
    .cb-worksteps--cols-5 > .cb-worksteps__item:nth-child(5n) .cb-worksteps__arrow {visibility: hidden; margin-right: 0}
}
@media (max-width: 991px) {
    .cb-worksteps--arrows.cb-worksteps--arrows {--ws-cols: 2}
    .cb-worksteps--arrows > .cb-worksteps__item:nth-child(2n) .cb-worksteps__arrow {visibility: hidden; margin-right: 0}
}
@media (max-width: 575px) {
    .cb-worksteps {--ws-marker: 46px}
    .cb .cb-worksteps__name {font-size: 18px}
    .cb-worksteps__badge, .cb-worksteps__marker {font-size: 15px}
    .cb-worksteps--cards .cb-worksteps__item {padding: 20px 18px}
    .cb-worksteps--cards .cb-worksteps__head {margin-bottom: 16px}
    /* Короткая метка — кружок слева от текста, карточка ниже */
    .cb-worksteps--cards .cb-worksteps__item:not(.cb-worksteps__item--wide) {display: grid; grid-template-columns: var(--ws-marker) minmax(0, 1fr); column-gap: 16px; align-content: start}
    .cb-worksteps--cards .cb-worksteps__item:not(.cb-worksteps__item--wide) .cb-worksteps__head {grid-row: span 2; align-self: start; margin: 0}
    .cb-worksteps--cards .cb-worksteps__item:not(.cb-worksteps__item--wide) .cb-worksteps__rule {display: none}
    .cb-worksteps--cards .cb-worksteps__item:not(.cb-worksteps__item--wide) .cb-worksteps__name {padding-top: 11px}
    .cb-worksteps--cards .cb-worksteps__item:not(.cb-worksteps__item--wide) .cb-worksteps__text {margin-top: 6px}
    .cb-worksteps--cards .cb-worksteps__item:not(.cb-worksteps__item--wide) .cb-worksteps__text:first-child {margin-top: 0; padding-top: 12px}
    .cb-worksteps--timeline .cb-worksteps__item {column-gap: 16px}
    .cb-worksteps--timeline .cb-worksteps__body {padding: 18px 20px}

    /* Цепочка сверху вниз: метка слева, стрелка вниз до следующего этапа */
    .cb-worksteps--arrows.cb-worksteps--arrows {grid-template-columns: minmax(0, 1fr); gap: 0}
    .cb-worksteps--arrows .cb-worksteps__item {display: grid; grid-template-columns: var(--ws-marker) minmax(0, 1fr); column-gap: 18px}
    .cb-worksteps--arrows .cb-worksteps__head {flex-direction: column; align-self: stretch; gap: 8px; margin: 0}
    .cb-worksteps--arrows .cb-worksteps__body {padding: 10px 0 30px}
    .cb-worksteps--arrows .cb-worksteps__item:last-child .cb-worksteps__body {padding-bottom: 0}
    .cb-worksteps__arrow {flex: 1; width: 2px; min-width: 0; height: auto; min-height: 20px; margin: 0 0 6px; background: linear-gradient(180deg, var(--cb-line), var(--cb-accent))}
    .cb-worksteps__arrow::after {right: auto; top: auto; bottom: 1px; left: 50%; transform: translateX(-50%) rotate(135deg)}
    .cb-worksteps--arrows > .cb-worksteps__item:nth-child(n) .cb-worksteps__arrow {visibility: visible}
    .cb-worksteps--arrows > .cb-worksteps__item:last-child .cb-worksteps__arrow {visibility: hidden}
    .cb-worksteps--arrows .cb-worksteps__text {max-width: none}
}