/* Two existing solution pages: media consistency, unchanged process geometry. */
.solution-detail:is(.solution-sand-aggregate-production-line, .solution-gold-ore-crushing-grinding-preparation) .numbered-equipment-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  padding: 0;
  background: #f3f3ef;
}

/* Keep the original complete site photograph, without the 16:9 side bars. */
.solution-sand-aggregate-production-line .solution-guide-hero figure img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.solution-detail:is(.solution-sand-aggregate-production-line, .solution-gold-ore-crushing-grinding-preparation) .solution-guide-hero figcaption {
  color: #546873;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.solution-detail:is(.solution-sand-aggregate-production-line, .solution-gold-ore-crushing-grinding-preparation) .numbered-equipment-grid span,
.solution-detail:is(.solution-sand-aggregate-production-line, .solution-gold-ore-crushing-grinding-preparation) .line-work-copy b {
  color: #08739a;
}

.solution-detail:is(.solution-sand-aggregate-production-line, .solution-gold-ore-crushing-grinding-preparation) .process-marker {
  background: #18313b;
  border-color: #08739a;
  box-shadow: none;
}

.solution-detail:is(.solution-sand-aggregate-production-line, .solution-gold-ore-crushing-grinding-preparation) .process-marker b {
  color: #fff;
}

/* Existing stage coordinates and text stay intact; colour is the only transition. */
.solution-stage-linked .process-marker,
.solution-stage-linked .line-work-copy p,
.solution-stage-linked .process-mobile-key li {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.solution-stage-linked .process-marker { cursor: pointer; }
.solution-stage-linked .process-marker.is-active {
  background: #08739a;
  border-color: #08739a;
}

.solution-stage-linked .line-work-copy p.is-active,
.solution-stage-linked .process-mobile-key li.is-active { background: #edf4f6; }

.solution-stage-linked .line-work-copy b[role="button"] {
  width: fit-content;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.solution-stage-linked .process-marker:focus-visible,
.solution-stage-linked .line-work-copy b[role="button"]:focus-visible,
.solution-stage-linked .process-mobile-key li:focus-visible {
  outline: 2px solid #08739a;
  outline-offset: 4px;
}

@media (max-width:760px) {
  .solution-stage-linked .process-mobile-key li { min-height: 44px; cursor: pointer; }
  /* A 44px transparent hit area preserves the existing numbered circle placement. */
  .solution-stage-linked .process-marker::after {
    content: "";
    position: absolute;
    inset: -9px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .solution-stage-linked .process-marker,
  .solution-stage-linked .line-work-copy p,
  .solution-stage-linked .process-mobile-key li { transition: none; }
}