/* BFC construct v2 (WAVE F · F1/W13) — ЕДИНЫЙ компонент «Устройство в деталях»
 * на главной И /proektirovshchikam/. Карточки лев/прав ОДИНАКОВЫЙ квадрат ar 1/1,
 * сторона --cxs = clamp(320px,40vw,52vh); вся секция ≤ вьюпорта 1536×830.
 * ЛЕВО: вертикальный трек, ↑ НАД карточкой, ↓ ПОД. ПРАВО: горизонтальный ‹ ›.
 * Тексты секции text-align:left (счётчик — центр допустим). Рамки/радиусы #f6921e (И-91). */
.bfc-exploded{padding:18px 0 22px !important;background:#fff}
.bfc-exploded .wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.bfc-exploded{--cxs:clamp(320px,40vw,52vh)}
.bfc-exp-head{text-align:left;max-width:none;margin:0 0 8px}
.bfc-exp-head .sec-tag{font:600 12px/1 "Roboto Condensed",sans-serif;letter-spacing:2px;text-transform:uppercase;color:#f6921e;margin-bottom:6px;text-align:left}
.bfc-exp-head h2{font-weight:800;font-size:clamp(18px,1.8vw,23px);margin:0 0 4px;text-align:left;text-transform:uppercase;line-height:1.15}
.bfc-exp-head .sec-sub{margin:0;font-size:13px;line-height:1.4;color:#5a6478;text-align:left;max-width:96ch}
.bfc-exp-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:stretch}/* O1.4б: колонки ровняются по верху И низу */
.bfc-exp-col{display:flex;flex-direction:column;min-width:0}
.bfc-exp-coltag{font:600 11px/1 "Roboto Condensed",sans-serif;letter-spacing:2px;text-transform:uppercase;color:#f6921e;margin:0 0 6px;text-align:left}
/* карточка-квадрат */
.bfc-cx-viewport{overflow:hidden;border-radius:16px;width:var(--cxs)}
.bfc-cx-track{display:flex;transition:transform .35s ease;will-change:transform}
.bfc-cx-slide{flex:0 0 100%;min-width:0;margin:0}
.bfc-cx-imgwrap{width:var(--cxs);height:var(--cxs);overflow:hidden;border-radius:16px;border:1.6px solid #f6921e;background:#fafafa}
.bfc-cx-slide img{width:100%;height:100%;object-fit:cover;display:block}
.bfc-cx-scheme .bfc-cx-imgwrap{background:#fff}
.bfc-cx-scheme img{object-fit:contain;padding:9px;background:#fff}
.bfc-cx-slide figcaption{text-align:left;padding:5px 2px 0;font-size:12.5px;line-height:1.3;color:#1a1a1a;max-width:var(--cxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* вертикальная колонка (лево): ↑ над, ↓ под */
.bfc-cx-vert .bfc-cx-track{flex-direction:column}/* H6: height пинит JS по полному слайду (картинка+подпись), 100%-шаг = 1 слайд, без peek */
.bfc-cx-vert .bfc-cx-slide{flex:0 0 100%}
.bfc-cx-upbar,.bfc-cx-downbar{display:flex;align-items:center;justify-content:center;gap:12px;width:var(--cxs);margin:4px 0}
/* O1.4а: ЕДИНЫЙ компонент кнопок обеих галерей (диаметр/обводка/иконка/hover) — селектор покрывает и кнопки без .bfc-cx-btn (портальная ›) */
.bfc-cx-btn,.bfc-cx-up,.bfc-cx-down,.bfc-cx-prev,.bfc-cx-next{width:34px;height:34px;border-radius:50%;border:1.6px solid #f6921e;background:#fff;color:#f6921e;font-size:17px;font-family:inherit;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s;flex:0 0 auto;padding:0}
.bfc-cx-btn:hover,.bfc-cx-up:hover,.bfc-cx-down:hover,.bfc-cx-prev:hover,.bfc-cx-next:hover{background:#f6921e;color:#fff}
.bfc-cx-count{font:600 13px "Roboto Condensed",sans-serif;color:#5a6478;min-width:44px;text-align:center}
/* горизонтальная колонка (право): ‹ дотсы › под карточкой */
.bfc-cx-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px;width:var(--cxs)}
/* O1.4б: нижние панели навигации прижаты к низу колонки (flex-колонка + stretch) — низ галерей совпадает */
.bfc-cx-nav,.bfc-cx-downbar{margin-top:auto;padding-top:6px}
.bfc-cx-dots{display:flex;gap:8px;align-items:center}
.bfc-cx-dot{width:9px;height:9px;border-radius:50%;background:#d8d8d8;border:0;cursor:pointer;padding:0;transition:background .15s,transform .15s}
.bfc-cx-dot.active{background:#f6921e;transform:scale(1.15)}
/* 375: одна колонка, карточка ≤86vw, стрелки в кадре */
@media(max-width:860px){
  .bfc-exploded{--cxs:min(86vw,60vh)}
  .bfc-exp-2col{grid-template-columns:minmax(0,1fr);gap:26px}
}

/* ===== S8FIX F3 (CC-A 2026-07-12): ↓-стрелка левой галереи — на ось картинки (как ↑) ===== */
/* Было: счётчик N/M в потоке .bfc-cx-downbar сдвигал кнопку влево (justify-center центрировал */
/* пару [кнопка+счётчик]). Счётчик → absolute (уходит из flex), кнопка центрируется одна = ось img. */
.bfc-cx-downbar{position:relative}
.bfc-cx-downbar .bfc-cx-count{position:absolute;top:50%;left:calc(50% + 30px);transform:translateY(-50%);margin:0}

/* ===== S10-A4 (CC-A 2026-07-13): img в .bfc-cx-imgwrap — скруглить углы под рамку ===== */
/* Рамка (border 1px #f6921e + radius16 + overflow:hidden) не скругляла img → квадратные */
/* углы торчали (border+radius+overflow Chrome-артефакт). Радиус img = 15 (16 − 1px border). */
.bfc-cx-imgwrap img{border-radius:15px}
