/* Блок 05 gabion — «Габион: из чего собирается и сколько камня» */
.ig[data-ig="gabion"] [hidden] { display: none !important; }

/* Короб и матрас рядом (на телефоне — стопкой) */
.ig[data-ig="gabion"] .ig-gb-objs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
.ig[data-ig="gabion"] .ig-gb-obj { min-width: 0; }
.ig[data-ig="gabion"] .ig-gb-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--ig-line);
}
.ig[data-ig="gabion"] .ig-gb-cap b { font: 600 18px/1 'Oswald', sans-serif; font-variant-numeric: tabular-nums; color: var(--ig-head); white-space: nowrap; }
.ig[data-ig="gabion"] .ig-gb-tag { font: 600 12px/1 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ig-steel); transition: color var(--ig-t-hover) ease; }
.ig[data-ig="gabion"] .ig-gb-obj.is-act .ig-gb-tag { color: var(--ig-accent); }
.ig[data-ig="gabion"] .ig-gb-obj.is-act .ig-gb-cap { border-bottom-color: var(--ig-accent); }
.ig[data-ig="gabion"] .ig-gb-note, .ig[data-ig="gabion"] .ig-gb-fc { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--ig-muted); }
.ig[data-ig="gabion"] .ig-gb-fc { margin-top: 14px; }

.ig[data-ig="gabion"] .ig-gb-stage { position: relative; }
.ig[data-ig="gabion"] .ig-gb-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ig[data-ig="gabion"] .ig-gb-labs { position: absolute; inset: 0; pointer-events: none; }
.ig[data-ig="gabion"] .ig-gb-lab {
  position: absolute; white-space: nowrap;
  font: 400 12px/1.25 'Inter', sans-serif; color: var(--ig-head);
  text-shadow: 0 0 3px var(--ig-card), 0 0 3px var(--ig-card), 0 0 6px var(--ig-card);
}
.ig[data-ig="gabion"] .ig-gb-lab--m { color: var(--ig-muted); }
.ig[data-ig="gabion"] .ig-gb-lab--bl { transform: translate(-100%, 4px); }
.ig[data-ig="gabion"] .ig-gb-lab--u { transform: translate(-40%, 10px); }
.ig[data-ig="gabion"] .ig-gb-lab--r { transform: translate(10px, -50%); }
.ig[data-ig="gabion"] .ig-gb-lab--l { transform: translate(calc(-100% - 10px), -50%); text-align: right; }
.ig[data-ig="gabion"] .ig-gb-lab--t { transform: translate(-50%, 8px); }
.ig[data-ig="gabion"] .ig-gb-lab--v { writing-mode: vertical-rl; transform: translate(calc(-100% - 6px), -50%) rotate(180deg); }
.ig[data-ig="gabion"] .ig-gb-lab--c { transform: translate(-50%, -50%); }
.ig[data-ig="gabion"] .ig-gb-obj .ig-gb-lab--t { transform: translate(-50%, calc(-100% - 6px)); }
.ig[data-ig="gabion"] .ig-gb-obj:not(.is-act) .ig-gb-lab { color: var(--ig-muted); }

/* Изометрия: сетка тонко, рёбра толще; выбранное изделие — жёлтым, другое — серым */
.ig[data-ig="gabion"] .ig-gb-mesh { fill: none; stroke: var(--ig-neutral); stroke-width: .6; vector-effect: non-scaling-stroke; opacity: .75; }
.ig[data-ig="gabion"] .ig-gb-mesh--p { opacity: .35; }
.ig[data-ig="gabion"] .ig-gb-pedge { fill: none; stroke: var(--ig-neutral); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ig[data-ig="gabion"] .ig-gb-edge { fill: none; stroke: var(--ig-steel); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ig[data-ig="gabion"] .ig-gb-hid { fill: none; stroke: var(--ig-neutral-2); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.ig[data-ig="gabion"] .ig-gb-fill { fill: rgba(185, 192, 199, .04); }
.ig[data-ig="gabion"] .ig-gb-fill--t { fill: rgba(185, 192, 199, .07); }
.ig[data-ig="gabion"] .is-act .ig-gb-mesh { stroke: var(--ig-accent); opacity: .5; }
.ig[data-ig="gabion"] .is-act .ig-gb-mesh--p { opacity: .28; }
.ig[data-ig="gabion"] .is-act .ig-gb-pedge { stroke: var(--ig-accent); opacity: .6; }
.ig[data-ig="gabion"] .is-act .ig-gb-edge { stroke: var(--ig-accent); }
.ig[data-ig="gabion"] .is-act .ig-gb-fill { fill: rgba(245, 197, 24, .05); }
.ig[data-ig="gabion"] .is-act .ig-gb-fill--t { fill: rgba(245, 197, 24, .09); }

/* Калькулятор */
.ig[data-ig="gabion"] .ig-gb-h { margin: 0 0 14px; font: 500 12px/1.2 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ig-head); }
.ig[data-ig="gabion"] .ig-gb-calc { margin-top: clamp(26px, 3.6vw, 40px); padding: clamp(16px, 2.4vw, 28px); background: var(--ig-page); border: 1px solid var(--ig-line); border-radius: var(--ig-r-m); }
.ig[data-ig="gabion"] .ig-gb-ctrl { display: flex; flex-wrap: wrap; gap: 14px clamp(18px, 3vw, 36px); }
.ig[data-ig="gabion"] .ig-gb-grp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ig[data-ig="gabion"] .ig-gb-lbl { font-size: 13px; color: var(--ig-muted); }
.ig[data-ig="gabion"] .ig-gb-ctrl .ig-tabs { margin: 0; gap: 6px; }
.ig[data-ig="gabion"] .ig-gb-ctrl .ig-tab { min-width: 44px; padding: 9px 12px; font-variant-numeric: tabular-nums; }
/* Ручной ввод ширины/высоты короба: высота как у кнопок, неверный ввод — красная рамка и подсказка */
.ig[data-ig="gabion"] .ig-gb-in {
  width: 6.5ch; min-height: 44px; padding: 9px 12px; box-sizing: border-box;
  background: var(--ig-page); color: var(--ig-head); border: 1px solid var(--ig-line-2); border-radius: var(--ig-r-s);
  font: 600 20px/1 'Oswald', sans-serif; font-variant-numeric: tabular-nums;
}
.ig[data-ig="gabion"] .ig-gb-in:focus { border-color: var(--ig-accent); outline: none; }
.ig[data-ig="gabion"] .ig-gb-in:focus-visible { outline: 2px solid var(--ig-accent-2); outline-offset: 2px; }
.ig[data-ig="gabion"] .ig-gb-in[aria-invalid="true"] { border-color: #ff6b5e; }
.ig[data-ig="gabion"] .ig-gb-hint { flex-basis: 100%; margin: -4px 0 0; font-size: 13px; line-height: 1.45; color: var(--ig-muted); }
.ig[data-ig="gabion"] .ig-gb-hint.is-bad { color: #ff8a7f; }
.ig[data-ig="gabion"] .ig-gb-nums { margin-top: clamp(20px, 3vw, 28px); }
.ig[data-ig="gabion"] .ig-num__v { white-space: nowrap; }

/* Подпорная стена */
.ig[data-ig="gabion"] .ig-gb-wall { margin-top: clamp(30px, 4.4vw, 52px); align-items: center; }
.ig[data-ig="gabion"] .ig-gb-wstage { max-width: 560px; }
.ig[data-ig="gabion"] .ig-gb-earth { fill: var(--ig-concrete); }
.ig[data-ig="gabion"] .ig-gb-gline { fill: none; stroke: var(--ig-line-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ig[data-ig="gabion"] .ig-gb-cush { fill: url(#ig-gb-gravel); stroke: var(--ig-neutral); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ig[data-ig="gabion"] #ig-gb-gravel circle { fill: var(--ig-neutral); }
.ig[data-ig="gabion"] .ig-gb-row { fill: rgba(245, 197, 24, .12); stroke: var(--ig-accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ig[data-ig="gabion"] .ig-gb-row--tbd { fill: none; stroke: var(--ig-neutral); stroke-dasharray: 5 4; }
.ig[data-ig="gabion"] .ig-gb-bmin { fill: none; stroke: var(--ig-accent); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ig[data-ig="gabion"] .ig-gb-wall .dim { vector-effect: non-scaling-stroke; }
.ig[data-ig="gabion"] .ig-gb-wq { margin: 0 0 8px; font-size: 13px; color: var(--ig-muted); }
.ig[data-ig="gabion"] .ig-gb-wnum { margin-top: 6px; }
.ig[data-ig="gabion"] .ig-gb-wnote { margin: 16px 0 0; max-width: 42ch; font-size: 14px; color: var(--ig-text); }

/* Комплектующие */
.ig[data-ig="gabion"] .ig-gb-parts { margin-top: clamp(30px, 4.4vw, 48px); }
.ig[data-ig="gabion"] .ig-gb-parts ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ig[data-ig="gabion"] .ig-gb-parts li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--ig-line); border-radius: var(--ig-r-m); }
.ig[data-ig="gabion"] .ig-gb-parts svg { flex: none; width: 64px; height: auto; }
.ig[data-ig="gabion"] .ig-gb-parts p { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.ig[data-ig="gabion"] .ig-gb-parts b { font-weight: 500; color: var(--ig-head); }
.ig[data-ig="gabion"] .ig-gb-parts span { font-size: 13px; color: var(--ig-muted); }
.ig[data-ig="gabion"] .ig-gb-ico { fill: none; stroke: var(--ig-steel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ig[data-ig="gabion"] .ig-gb-ico--n { stroke: var(--ig-neutral-2); stroke-width: 1.5; stroke-dasharray: 3 3; }

@media (max-width: 640px) {
  .ig[data-ig="gabion"] .ig-gb-objs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ig[data-ig="gabion"] .ig-gb-nums { grid-template-columns: 1fr 1fr; }
  .ig[data-ig="gabion"] .ig-gb-nums .ig-num--accent { grid-column: 1 / -1; order: -1; }
}
.ig[data-ig="gabion"] .ig-gb-3d { margin-top: clamp(30px, 4.4vw, 52px); }