/* ============================================================
   plant.voir.su — css/pages/plant.css
   Страница «Готовый завод» (владелец: spbfly).
   Префикс всех своих классов: .pplant-*
   Токены — только var() из base.css.
   ============================================================ */

/* ---------- плашки (Ярославль / импортное оборудование) ---------- */
.pplant-badges {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem;
}
.pplant-badge {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .5rem 1rem; border-radius: var(--radius-pill);
  font-size: .88rem; font-weight: 600; line-height: 1.4;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
}
.pplant-badge .src { font-weight: 400; }
.pplant-badge-amber {
  border-color: rgba(232,163,61,.45); color: var(--amber-hi);
  background: var(--amber-soft);
}
.pplant-badge-teal {
  border-color: rgba(47,184,166,.4); color: var(--teal);
  background: var(--teal-soft);
}

/* ---------- hero / сцена с переключателем состояний ---------- */
.pplant-stage-wrap { position: relative; }
/* внутренний контейнер для монтируемых состояний (transport/deployed/works):
   заполняет .scene-box, основной постер остаётся под ним фолбэком без JS */
.pplant-stage { position: absolute; inset: 0; z-index: 1; }
.pplant-controls { gap: .45rem; }
.pplant-controls .btn { white-space: nowrap; }
.pplant-state[aria-pressed="true"] {
  border-color: var(--amber);
  color: var(--amber-hi);
  background: var(--amber-soft);
}
.pplant-clips {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: .8rem;
}
.pplant-clip-chip {
  font-family: var(--font-mono); font-size: .72rem; color: var(--teal);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: .18rem .65rem; background: var(--teal-soft); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.pplant-clip-chip:hover { border-color: var(--teal); color: var(--ink); }
.pplant-clip-chip.active { border-color: var(--teal); color: var(--ink); background: rgba(47,184,166,.25); }
.pplant-state-note {
  margin-top: .8rem; padding: .8rem 1rem; border-left: 2px solid var(--teal);
  background: rgba(47,184,166,.06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: #C6D2E0; font-size: .95rem;
}
.pplant-scene-hint { margin-top: .7rem; }

/* ---------- три состояния (карточки) ---------- */
.pplant-state-grid { align-items: stretch; }
.pplant-state-card { position: relative; padding-top: 1.8rem; cursor: pointer; }
.pplant-state-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pplant-state-num {
  position: absolute; top: 1.1rem; right: 1.2rem;
  font-family: var(--font-mono); font-size: 2rem; font-weight: 700;
  color: var(--line); line-height: 1;
}
.pplant-state-card.pplant-active {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), var(--shadow-soft);
}
.pplant-state-card.pplant-active .pplant-state-num { color: var(--amber); }
.pplant-state-card .h3 { font-size: clamp(1.02rem, 1.6vw, 1.25rem); }
.pplant-state-card p { font-size: .92rem; }

/* ---------- здание крупно ---------- */
.pplant-building-grid {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.4rem; align-items: start;
}
.pplant-building-facts { padding: .4rem 0; }
.pplant-building-facts .trow:last-of-type { border-bottom: none; }
.pplant-video { margin-top: 1.4rem; }

/* ---------- 11 преимуществ ---------- */
.pplant-adv-grid { align-items: start; }
.pplant-checks { align-content: start; }
.pplant-checks li { font-size: 1.02rem; }
.pplant-promo { display: grid; gap: 1rem; align-content: start; }
.pplant-promo-card { background: var(--bg2); }
.pplant-promo-card .h3 { margin-top: 0; }
.pplant-promo-card p { font-size: .95rem; }

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
  .pplant-building-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pplant-badges { gap: .5rem; }
  .pplant-badge { font-size: .82rem; padding: .45rem .85rem; }
  .pplant-controls .btn { font-size: .76rem; padding: .42rem .8rem; }
  .pplant-state-note { font-size: .88rem; }
}