/* ===== CAMS Machinery page ===== */

.machinery-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.6;
  transition: transform 220ms var(--ease), background-color 220ms ease, border-color 220ms ease;
}

a.machinery-btn--solid {
  border: 1px solid var(--paper-strong);
  background: var(--paper-strong);
  color: var(--ink);
}

.machinery-btn:hover {
  transform: translateY(-2px);
}

/* ---------- Hero ---------- */

.machinery-hero {
  position: relative;
  min-height: 900px;
  overflow: clip;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color: var(--paper-strong);
  border-bottom: 1px solid var(--line);
}

.machinery-hero__bg {
  position: absolute;
  top: -52px;
  right: 0;
  width: 1000px;
  height: 920px;
  max-width: none;
  object-fit: cover;
  object-position: bottom;
  pointer-events: none;
}

.machinery-hero__frame {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: var(--frame);
  min-height: 900px;
  margin-inline: auto;
  padding: 32px 0;
}

.machinery-hero__bottom {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.machinery-hero__title {
  margin: 0;
  max-width: 429px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(36px, 4.3vw, 62px);
  font-weight: 700;
  line-height: 1.13;
  text-transform: uppercase;
  background: linear-gradient(110deg, #cacaca 3.5%, #b2b2b2 91.6%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.machinery-hero__lede {
  margin: 0;
  max-width: 529px;
  font-size: 18px;
  line-height: 1.6;
  color: #8a8a8a;
}

/* ---------- Model showcase ---------- */

.machinery-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.machinery-models__col {
  position: relative;
  min-height: 706px;
  padding: 32px;
  overflow: hidden;
}

.machinery-models__col--dark {
  background: #ffffff;
}

.machinery-models__col--light {
  background: #e5e5e5;
}

.machinery-models__label {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #3a3a3a;
}

.machinery-models__row {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.machinery-models__name {
  margin: 0;
  font-size: 42px;
  letter-spacing: 3px;
  line-height: 1.13;
  text-transform: uppercase;
  color: var(--accent);
}

.machinery-models__spec {
  margin: 7px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #3a3a3a;
}

.machinery-models__nav {
  display: flex;
  gap: 4px;
}

.machinery-models__nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--paper-strong);
  background: #e5e5e5;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: transform 220ms var(--ease);
}

.machinery-models__col--light .machinery-models__nav button {
  background: var(--paper-strong);
}

.machinery-models__nav button:hover {
  transform: translateY(-2px);
}

.machinery-models__sketch {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(60%, 620px);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- Program sections (shared by RE:BUILT / PARTS:TO / PRO:SERVICE) ---------- */

.machinery-program {
  padding: 96px 0;
}

.machinery-program--rebuild {
  background: linear-gradient(180deg, #131313 0%, #242424 100%);
}

.machinery-program__frame {
  position: relative;
}

.machinery-program__head {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  padding-bottom: 64px;
}

.machinery-program__tag {
  margin: 0;
  flex: 0 0 auto;
  font-size: 42px;
  letter-spacing: 3px;
  line-height: 1.13;
  text-transform: uppercase;
  color: var(--accent);
}

.machinery-program__copy {
  max-width: 555px;
}

.machinery-program__copy h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.13;
  text-transform: uppercase;
  color: var(--paper-strong);
}

.machinery-program__copy p {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #aaaaaa;
}

.machinery-program--proservice .machinery-program__copy h2 {
  color: var(--ink);
}

.machinery-program--proservice .machinery-program__copy p {
  color: #4a4a4a;
}

/* ---------- RE:BUILT step list ---------- */

.machinery-program__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 48px;
  align-items: center;
  min-height: 627px;
}

.machinery-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.machinery-steps li {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  color: #3a3a3a;
  cursor: pointer;
  transition: color 220ms ease;
}

.machinery-steps li.is-active,
.machinery-steps li:hover {
  color: var(--paper-strong);
}

.machinery-steps__index {
  font-size: 23px;
  line-height: 1.13;
  text-transform: uppercase;
}

.machinery-steps li span:last-child {
  font-size: 18px;
  line-height: 1.33;
}

.machinery-program__image {
  width: 100%;
  height: auto;
  max-height: 627px;
  object-fit: contain;
}

/* Mobile-only prev/next control for cycling the single visible RE:BUILT
   step (see the 640px breakpoint below) — hidden on desktop, where all 7
   steps are already listed at once. */
.machinery-steps__nav {
  display: none;
  gap: 4px;
}

.machinery-steps__nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--paper-strong);
  font-size: 16px;
  cursor: pointer;
  transition: transform 220ms var(--ease);
}

.machinery-steps__nav button:hover {
  transform: translateY(-2px);
}

/* ---------- PARTS:TO flow diagram ----------
   Two supply paths (direct/indirect retail sales, and OEM production +
   local trade) both converging on "Конечный пользователь", matching the
   Figma source diagram. Positioned as percentages of the design's native
   1377x512 canvas inside an aspect-ratio-locked container so it scales
   as one piece; connector lines are an SVG overlay in the same coordinate
   space rather than plain CSS borders, since the real connectors curve. */

.machinery-flow {
  position: relative;
  width: 100%;
  aspect-ratio: 1377 / 512;
  margin: 56px 0;
}

.machinery-flow__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.machinery-flow__lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.machinery-flow__node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #131313 0%, #242424 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #f0e3de;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  padding: 8px 10px;
}

.machinery-flow__node--icon {
  border-radius: 16px;
  padding: 0;
}

.machinery-flow__caption {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f0e3de;
}

.machinery-flow__parts {
  position: absolute;
  display: flex;
  gap: 4%;
}

.machinery-flow__parts span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 10, 20, 0.18);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 16px;
}

.machinery-flow__pos--supplier {
  left: 0;
  top: 36.5%;
  width: 13.9%;
  height: 26.4%;
}

.machinery-flow__pos--gear-top {
  left: 28.5%;
  top: 7%;
  width: 4.9%;
  height: 12.5%;
}

.machinery-flow__pos--home {
  left: 39.5%;
  top: 5.7%;
  width: 9.2%;
  height: 15.2%;
}

.machinery-flow__pos--sales {
  left: 52.5%;
  top: 0;
  width: 14.9%;
  height: 26.4%;
}

.machinery-flow__pos--part-caption {
  left: 19.5%;
  top: 45.9%;
  width: 9.5%;
  height: 7.4%;
}

.machinery-flow__pos--parts-icons {
  left: 33.2%;
  top: 44.9%;
  width: 9.7%;
  height: 9.8%;
}

.machinery-flow__pos--gear-bottom {
  left: 28.5%;
  top: 82.6%;
  width: 4.9%;
  height: 12.5%;
}

.machinery-flow__pos--oem {
  left: 37.1%;
  top: 78.9%;
  width: 8.5%;
  height: 19.9%;
}

.machinery-flow__pos--trade {
  left: 49.7%;
  top: 78.9%;
  width: 11.2%;
  height: 19.9%;
}

.machinery-flow__pos--doc {
  left: 63%;
  top: 82.6%;
  width: 4.5%;
  height: 12.5%;
}

.machinery-flow__pos--production {
  left: 69.3%;
  top: 69.9%;
  width: 9.7%;
  height: 12.1%;
}

.machinery-flow__pos--person {
  left: 81.6%;
  top: 43%;
  width: 6.1%;
  height: 13.9%;
}

.machinery-flow__pos--end-user {
  left: 89.6%;
  top: 46.9%;
  width: 8.1%;
  height: 10%;
}

@media (max-width: 760px) {
  .machinery-flow {
    position: relative;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 32px 0;
  }

  /* Figma's mobile flow keeps a single dashed connector running through the
     whole stack (the desktop diagram's two branches collapse into one
     column here) — a plain vertical line stands in for it. */
  .machinery-flow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    border-left: 1px dashed rgba(255, 255, 255, 0.18);
    transform: translateX(-50%);
  }

  .machinery-flow__lines {
    display: none;
  }

  .machinery-flow__node,
  .machinery-flow__caption,
  .machinery-flow__parts {
    position: static;
    width: auto;
    height: auto;
  }

  .machinery-flow__node--box {
    max-width: 280px;
    padding: 14px 18px;
  }

  .machinery-flow__node--icon {
    width: 56px;
    height: 56px;
  }

  .machinery-flow__parts {
    width: 140px;
  }

  .machinery-flow__parts span {
    height: 44px;
  }

  .machinery-flow__pos--supplier { order: 1; }
  .machinery-flow__pos--gear-top { order: 2; }
  .machinery-flow__pos--home { order: 3; }
  .machinery-flow__pos--sales { order: 4; }
  .machinery-flow__pos--part-caption { order: 5; }
  .machinery-flow__pos--parts-icons { order: 6; }
  .machinery-flow__pos--gear-bottom { order: 7; }
  .machinery-flow__pos--oem { order: 8; }
  .machinery-flow__pos--trade { order: 9; }
  .machinery-flow__pos--doc { order: 10; }
  .machinery-flow__pos--production { order: 11; }
  .machinery-flow__pos--person { order: 12; }
  .machinery-flow__pos--end-user { order: 13; }
}

/* ---------- "Ведущие производители" divider grid ----------
   The logos here are the exact ones in the Figma source (Dell, Canonical,
   Microsoft, Cisco, Fortinet, CrowdStrike, Switch, SentinelOne, Veeam,
   Equinix) — generic tech-company marks unrelated to mining machinery,
   left over from the template this design was built on, but reproduced
   as-is per instruction rather than substituted. */

.machinery-brands {
  padding-top: 48px;
}

.machinery-brands__label {
  margin: 0 0 24px;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a8a8a;
}

.machinery-brands__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.machinery-brands__grid span {
  aspect-ratio: 276 / 122;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.machinery-brands__grid img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
}

.machinery-brands__grid span:nth-child(5n) {
  border-right: 0;
}

.machinery-brands__grid span:nth-last-child(-n + 5) {
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .machinery-brands__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machinery-brands__grid span:nth-child(5n) {
    border-right: 1px solid var(--line);
  }

  .machinery-brands__grid span:nth-child(2n) {
    border-right: 0;
  }

  .machinery-brands__grid span:nth-last-child(-n + 5) {
    border-bottom: 0;
  }

  .machinery-brands__grid span:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- PRO:SERVICE step cards ---------- */

.machinery-program--proservice {
  padding-bottom: 220px;
}

.machinery-program__head--proservice {
  padding-bottom: 96px;
  border-top: 1px solid var(--line-dark);
  padding-top: 32px;
}

.machinery-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.machinery-service-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 420px;
  padding: 32px;
  background: #e5e5e5;
  border: 1px solid var(--line-dark);
}

.machinery-service-card--offset-1 {
  margin-top: 63px;
}

.machinery-service-card--offset-2 {
  margin-top: 125px;
}

.machinery-service-card--offset-3 {
  margin-top: 185px;
}

.machinery-service-card__index {
  font-family: "Orbitron", sans-serif;
  font-size: 96px;
  line-height: 1.13;
  color: #cacaca;
}

.machinery-service-card p {
  margin: 0;
  max-width: 212px;
  font-size: 18px;
  line-height: 1.33;
  color: var(--ink);
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .machinery-hero__bg {
    right: auto;
    left: 20%;
    width: 90%;
  }

  .machinery-models {
    grid-template-columns: 1fr;
  }

  .machinery-program__body {
    grid-template-columns: 1fr;
  }

  .machinery-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machinery-service-card--offset-1,
  .machinery-service-card--offset-2,
  .machinery-service-card--offset-3 {
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  /* Figma's mobile hero stacks nav -> machine photo -> title/lede/button.
     The desktop DOM order is photo first (so it can sit position:absolute
     behind everything), then a frame wrapping [topbar, title block]. Rather
     than move markup (which would also disturb the desktop absolute
     positioning, since __bg is positioned relative to .machinery-hero, not
     .machinery-hero__frame), collapse .machinery-hero__frame's own box with
     display:contents so .topbar and .machinery-hero__bottom become direct
     flex children of .machinery-hero alongside .machinery-hero__bg — that
     makes a 3-way visual reorder possible without touching the HTML. */
  .machinery-hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .machinery-hero__frame {
    display: contents;
  }

  .topbar {
    order: 1;
    width: var(--frame);
    margin-inline: auto;
    padding-top: 24px;
  }

  .machinery-hero__bg {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    margin-top: 24px;
  }

  .machinery-hero__bottom {
    order: 3;
    width: var(--frame);
    margin-inline: auto;
    padding: 24px 0 32px;
  }

  /* Figma's mobile model card is a normal top-to-bottom stack (label ->
     name/spec/nav -> sketch), not the desktop's absolute-positioned overlay
     (sketch centered behind a bottom-pinned row). Un-absolute both so they
     flow in DOM order, which is already label -> row -> sketch. */
  .machinery-models__col {
    min-height: 0;
  }

  .machinery-models__row {
    position: static;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 24px;
  }

  .machinery-models__sketch {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 32px auto 0;
    transform: none;
  }

  .machinery-program {
    padding: 64px 0;
  }

  .machinery-program__head {
    flex-direction: column;
  }

  /* RE:BUILT collapses from "all 7 steps listed" to a one-step-at-a-time
     carousel on mobile, matching Figma — only .is-active shows, stepped via
     the prev/next buttons wired in machinery.js. */
  .machinery-program__body {
    min-height: 0;
  }

  .machinery-steps li {
    display: none;
    gap: 12px;
  }

  .machinery-steps li.is-active {
    display: flex;
  }

  .machinery-steps__nav {
    display: flex;
    margin-top: 24px;
  }

  .machinery-flow__node--box {
    width: 140px;
  }

  .machinery-service-grid {
    grid-template-columns: 1fr;
  }

  .machinery-service-card {
    height: auto;
    min-height: 192px;
    padding: 24px;
  }

  .machinery-service-card__index {
    font-size: 64px;
  }
}