/* ═══════════════════════════════════════════════════════════════════════════
   /vozmozhnosti — хаб «Что умеет Цех360»

   Строение общих блоков — feature-page.css (.fh, .sec-head, .benefits,
   .rel-grid, .launch, .faq, .final-cta). Нарисованный интерфейс карточек —
   product-ui.css (.orders-ui/.orders-row, .kanban/.kanban-col/.k-card,
   .stock-list/.stock-item, .finance-box) — те же классы, что уже рисуют
   заказы, доску, склад и себестоимость на живых страницах. Здесь — только то,
   чего в двух этих файлах нет: карта связей в герое, лента исходов, шесть
   чередующихся блоков возможностей, сетка второстепенных карточек, гант и
   панель команды (два визуала, которых нет в product-ui.css), и общий блок
   «функции идут вместе с заказом».

   Токены — candidate.css. Своего :root нет. Лестница 1180/900/640/480, та же,
   что у feature-page.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Герой: карта связей вместо интерфейса заказа ─────────────────────────── */
.p-voz .sys-map{ border:1px solid var(--c-line); border-radius:var(--c-r-panel); background:var(--c-bg); box-shadow:0 18px 50px rgba(54,37,20,.07); padding:26px 24px }
.p-voz .sys-map-head{ font-size:15px; font-weight:600; margin:0 0 18px }
.p-voz .sys-map-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px }
.p-voz .sys-node{ text-align:center; min-width:0 }
.p-voz .sys-ico{ width:52px; height:52px; margin:0 auto 10px; border-radius:14px; background:var(--c-soft); border:1px solid var(--c-line); display:grid; place-items:center }
.p-voz .sys-ico svg{ width:20px; height:20px; stroke:var(--c-ink) }
.p-voz .sys-node.is-on .sys-ico{ background:var(--c-accent); border-color:var(--c-accent) }
.p-voz .sys-node.is-on .sys-ico svg{ stroke:#fff }
.p-voz .sys-node b{ display:block; font-size:13px; line-height:1.2 }
.p-voz .sys-node span{ display:block; font-size:11px; color:var(--c-muted-2); margin-top:3px }

/* ── Лента исходов ──────────────────────────────────────────────────────── */
.p-voz .outcomes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line) }
.p-voz .outcome{ padding:20px 18px; border-right:1px solid var(--c-line) }
.p-voz .outcome:nth-child(3n){ border-right:0 }
.p-voz .outcome small{ display:block; color:var(--c-accent); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.1em }
.p-voz .outcome b{ display:block; font-size:15px; line-height:1.35; margin-top:8px; font-weight:600 }

/* ── Шесть возможностей: чередующиеся блоки ───────────────────────────────── */
.p-voz .capability{ display:grid; grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr); gap:48px; align-items:center; padding:64px 0; border-top:1px solid var(--c-line) }
.p-voz .capability:first-of-type{ border-top:0; padding-top:0 }
.p-voz .capability.reverse{ grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr) }
.p-voz .capability.reverse .cap-copy{ order:2 }
.p-voz .capability.reverse .cap-visual{ order:1 }
.p-voz .cap-copy{ min-width:0 }
.p-voz .cap-num{ color:var(--c-accent); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase }
.p-voz .cap-copy h3{ font-size:var(--c-fs-h3); line-height:var(--c-lh-h3); letter-spacing:var(--c-ls-h3); font-weight:var(--c-fw-head); margin:14px 0 12px }
.p-voz .cap-copy > p{ margin:0; font-size:17px; line-height:1.62; color:var(--c-muted) }
.p-voz .cap-checks{ display:grid; gap:10px; margin-top:20px }
.p-voz .cap-check{ display:flex; gap:10px; align-items:flex-start; font-size:15px }
.p-voz .cap-check i{ width:22px; height:22px; border-radius:50%; background:var(--c-green-soft); color:var(--c-green-ink); display:grid; place-items:center; font-style:normal; font-size:12px; flex:0 0 auto }
.p-voz .cap-link{ display:inline-flex; align-items:center; gap:8px; color:var(--c-accent); font-weight:600; margin-top:22px }
.p-voz .cap-visual{ min-width:0 }

/* Гант — второй визуал, которого нет в product-ui.css. */
.p-voz .gantt{ padding:18px }
.p-voz .gantt-head{ display:grid; grid-template-columns:110px repeat(6,minmax(0,1fr)); gap:6px; color:var(--c-muted-2); font-size:11px; margin-bottom:12px }
.p-voz .g-row{ display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center; margin:13px 0 }
.p-voz .g-row b{ font-size:13px; font-weight:600 }
.p-voz .g-timeline{ height:26px; background:repeating-linear-gradient(90deg,#faf8f6 0,#faf8f6 calc(16.66% - 1px),var(--c-line) calc(16.66% - 1px),var(--c-line) 16.66%); position:relative; border-radius:8px }
.p-voz .g-bar{ position:absolute; top:5px; height:16px; border-radius:6px; background:var(--c-green) }
.p-voz .g-bar.is-now{ background:var(--c-accent) }
.p-voz .g-bar.is-wait{ background:#cfc8c0 }

/* Панель команды — третий визуал, которого нет в product-ui.css. */
.p-voz .team-ui{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:12px; padding:14px; background:var(--c-soft) }
.p-voz .team-panel{ background:var(--c-bg); border:1px solid var(--c-line); border-radius:16px; overflow:hidden; min-width:0 }
.p-voz .team-panel h4{ font-size:13px; margin:0; padding:12px 14px; border-bottom:1px solid var(--c-line) }
.p-voz .t-person{ display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:9px; align-items:center; padding:11px 13px; border-bottom:1px solid var(--c-line) }
.p-voz .t-person:last-child{ border-bottom:0 }
.p-voz .t-ava{ width:32px; height:32px; border-radius:50%; background:var(--c-accent-soft); color:var(--c-accent-ink); display:grid; place-items:center; font-size:10px; font-weight:600 }
.p-voz .t-person b{ font-size:12px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.p-voz .t-person p{ font-size:10px; color:var(--c-muted-2); margin:2px 0 0 }
.p-voz .t-role{ font-size:9px; border-radius:999px; padding:5px 7px; background:var(--c-soft-2); white-space:nowrap }
.p-voz .invite{ padding:16px }
.p-voz .invite h5{ margin:0; font-size:17px }
.p-voz .invite p{ font-size:11px; color:var(--c-muted); margin:5px 0 14px }
.p-voz .role-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.p-voz .role-box{ border:1px solid var(--c-line); border-radius:12px; padding:9px; min-width:0 }
.p-voz .role-box b{ font-size:10px; display:block }
.p-voz .role-box span{ display:block; font-size:9px; color:var(--c-muted-2); margin-top:3px }

/* ── Второстепенные возможности ────────────────────────────────────────── */
.p-voz .secondary-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px }
.p-voz .secondary{ min-height:210px; padding:24px; border:1px solid var(--c-line); border-radius:var(--c-r-card); display:flex; flex-direction:column; min-width:0 }
.p-voz .sec-ico{ width:44px; height:44px; border-radius:13px; background:var(--c-soft-2); display:grid; place-items:center }
.p-voz .sec-ico svg{ width:20px; height:20px; stroke:var(--c-ink) }
.p-voz .secondary h3{ font-size:19px; line-height:1.2; margin:16px 0 8px }
.p-voz .secondary p{ font-size:14px; line-height:1.5; color:var(--c-muted); margin:0 }
.p-voz .secondary a{ margin-top:auto; padding-top:18px; color:var(--c-accent); font-weight:600; font-size:14px }

/* ── Функции идут вместе с заказом ─────────────────────────────────────── */
.p-voz .flow{ background:linear-gradient(120deg,#ff7a3d 0%,var(--c-accent) 62%,#ff8f5c 100%); border-radius:28px; padding:32px; color:#fff }
.p-voz .flow h2{ font-size:38px; line-height:1; letter-spacing:-.04em; margin:0; max-width:680px; font-weight:var(--c-fw-head) }
.p-voz .flow > p{ max-width:680px; margin:14px 0 0; color:rgba(255,255,255,.82); font-size:16px }
.p-voz .flow-track{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:28px }
.p-voz .flow-step{ min-height:140px; border:1px solid rgba(255,255,255,.28); border-radius:16px; background:rgba(255,255,255,.1); padding:15px; min-width:0 }
.p-voz .flow-step small{ font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.64) }
.p-voz .flow-step b{ display:block; font-size:15px; line-height:1.25; margin-top:20px }
.p-voz .flow-step span{ display:block; font-size:11px; line-height:1.45; color:rgba(255,255,255,.76); margin-top:6px }

/* Хаб — каталог продукта, а раздел «Отрасли» (семь /dlya-* страниц) в нём
   не представлен вовсе. Тот же компонент, что теперь на каждой отраслевой
   (industry-page.css .p-ind .industries-also) — своя копия под .p-voz,
   тот же принцип, что у остальных переиспользуемых блоков дизайн-системы
   на этом сайте (у каждого CSS-семейства своя копия, см. CLAUDE.md). */
.p-voz .industries-also{ margin-top:40px; padding:22px 26px; border:1px solid var(--c-line); border-radius:var(--c-r-card); background:var(--c-soft) }
.p-voz .industries-also .label{ margin-bottom:12px }
.p-voz .industries-also-list{ display:flex; flex-wrap:wrap; gap:8px 20px }
.p-voz .industries-also-list a{ font-size:14px; font-weight:600; color:var(--c-accent) }
.p-voz .industries-also-list a:hover{ text-decoration:underline }

@media (max-width:1180px){
  .p-voz .capability, .p-voz .capability.reverse{ grid-template-columns:1fr; gap:24px }
  .p-voz .capability.reverse .cap-copy, .p-voz .capability.reverse .cap-visual{ order:initial }
  .p-voz .secondary-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .p-voz .flow-track{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .p-voz .outcomes{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .p-voz .outcome:nth-child(2n){ border-right:0 }
  .p-voz .outcome:nth-child(3n){ border-right:1px solid var(--c-line) }
}
@media (max-width:900px){
  .p-voz .sys-map-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .p-voz .team-ui{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .p-voz .capability, .p-voz .capability.reverse{ padding:44px 0 }
  .p-voz .secondary-grid{ grid-template-columns:1fr }
  .p-voz .flow-track{ grid-template-columns:1fr 1fr }
  .p-voz .flow{ padding:22px; border-radius:22px }
  .p-voz .flow h2{ font-size:30px }
  .p-voz .outcomes{ grid-template-columns:1fr 1fr }
  .p-voz .outcome:nth-child(2n){ border-right:0 }
  .p-voz .gantt-head{ display:none }
  .p-voz .g-row{ grid-template-columns:88px 1fr }
  /* Три колонки .kanban (product-ui.css) не рассчитаны на узкий экран — сам
     файл мобильной раскладки для .kanban не задаёт (только для .kpis-mini и
     .app-layout). При 390 колонка давала 81px на карточку, а «Покраска
     ступеней» просит 147px: слово обрезалось многоточием. В один столбец
     каждая карточка получает всю ширину рамки — с запасом. */
  .p-voz .kanban{ grid-template-columns:1fr }
  /* .stock-head делит ширину между названием и плашкой статуса пополам;
     «Лист 1,5 мм оцинковка» (207px) не помещается в 166px .stock-meta рядом
     с плашкой «заканчивается». В столбик название получает всю ширину
     карточки, плашка переезжает под него. */
  .p-voz .stock-head{ flex-direction:column; align-items:flex-start; gap:8px }
  /* Код заказа обрезался на 2–6px (46px клетки против 48–52px нужных) —
     последняя цифра терялась под многоточием. Дата — то, ради чего в
     таблицу смотрят («просрочен» без даты не на чем держится), поэтому
     прячем не её, а полосу прогресса: она чисто декоративная — статус
     («в работе»/«готово»/«просрочен») уже несёт ту же информацию текстом.
     Код получает свою клетку и уменьшенный кегль, а не долю строки. */
  .p-voz .orders-row{ grid-template-columns:minmax(44px,auto) 1.3fr .85fr auto; gap:8px }
  .p-voz .orders-row > *:nth-child(4){ display:none }
  .p-voz .orders-row b{ font-size:12px }
}