/*
 * Number placement restored after the clean static rebuild.
 * Rules are scoped to the three affected service pages.
 */

/* Smoke extraction: override the legacy #main full-width reset. */
.page-shell #main.codex-dym-page {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Ventilation: summary number and text share one row. */
.codex-vent-page .stat {
  display: flex;
  align-items: center;
  gap: 14px;
}

.codex-vent-page .stat strong {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
}

/* Ventilation: object numbers sit inside the photo's upper-left corner. */
.codex-vent-page .object-card {
  position: relative;
}

.codex-vent-page .object-card .object-body > span {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  margin: 0;
  background: #ffc000;
  color: #111;
  box-shadow: 0 6px 16px rgb(7 55 70 / 20%);
}

/* Ventilation: step counters sit inside the photo's upper-left corner. */
.codex-vent-page .steps .step {
  position: relative;
  grid-template-columns: minmax(160px, 230px) 1fr;
}

.codex-vent-page .steps .step::before {
  position: absolute;
  z-index: 2;
  top: 27px;
  left: 27px;
  margin: 0;
  box-shadow: 0 6px 16px rgb(7 55 70 / 20%);
}

/* Heating: number and heading share one row. */
.codex-heat-page .object-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.codex-heat-page .object-card > span {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin: 0;
}

.codex-heat-page .object-card > h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
}

.codex-heat-page .object-card > p {
  grid-column: 1 / -1;
  margin-top: 14px;
}

/* Heating: step counters sit inside the photo's upper-left corner. */
.codex-heat-page .steps .step {
  position: relative;
  grid-template-columns: minmax(150px, 210px) 1fr;
}

.codex-heat-page .steps .step::before {
  position: absolute;
  z-index: 2;
  top: 27px;
  left: 27px;
  margin: 0;
  box-shadow: 0 6px 16px rgb(7 55 70 / 20%);
}

/* Smoke extraction: summary number and text share one row. */
.codex-dym-page .codex-dym-stats > div {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.codex-dym-page .codex-dym-stats b {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
}

/* Smoke extraction: all six step counters sit inside the photos. */
.codex-dym-page .codex-dym-steps article {
  position: relative;
}

.codex-dym-page .codex-dym-steps article::before {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 50%;
  background: #ffc000;
  color: #111;
  font: 900 16px/1 Montserrat, Arial, sans-serif;
  box-shadow: 0 6px 16px rgb(7 55 70 / 20%);
}

@media (max-width: 920px) {
  .codex-vent-page .steps .step,
  .codex-heat-page .steps .step {
    grid-template-columns: 1fr;
  }

  .codex-vent-page .steps .step > img,
  .codex-heat-page .steps .step > .step-media {
    grid-column: 1;
    grid-row: 1;
  }

  .codex-vent-page .steps .step > div,
  .codex-heat-page .steps .step > div:last-child {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .page-shell #main.codex-dym-page {
    width: min(1180px, calc(100% - 28px)) !important;
  }
}