/* ============================================================================
   TerraMap — developers page
   ========================================================================= */

.tm-dev-hero { padding-block: var(--tm-space-9) var(--tm-space-8); }
.tm-dev-hero .tm-lead { margin-block-start: var(--tm-space-4); }
.tm-dev-hero__cta { margin-block-start: var(--tm-space-6); }

/* Shares the four-column rhythm of the homepage platform section. */
.tm-groups-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tm-space-6);
}

.tm-overview__note {
  max-inline-size: 82ch;
  margin-block-start: var(--tm-space-6);
  padding-inline-start: var(--tm-space-4);
  border-inline-start: 2px solid var(--tm-primary);
}

/* ── Integration: code beside the map it actually renders ──────────────── */

.tm-integration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tm-space-6);
  align-items: start;
}

.tm-integration__code { display: grid; gap: var(--tm-space-4); }

.tm-integration__map {
  block-size: 100%;
  min-block-size: 440px;
  position: sticky;
  inset-block-start: calc(var(--tm-navbar-height) + var(--tm-space-5));
}

.tm-integration__note { margin-block-start: var(--tm-space-5); }

/* ── Quick start ───────────────────────────────────────────────────────── */

.tm-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tm-space-6);
  counter-reset: step;
}

.tm-step {
  display: grid;
  gap: var(--tm-space-3);
  padding-block-start: var(--tm-space-4);
  border-block-start: 2px solid var(--tm-border-strong);
}

.tm-step__num {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-text-caption);
  color: var(--tm-text-muted);
}

.tm-step p { margin-block-start: var(--tm-space-2); }
.tm-steps__note { margin-block-start: var(--tm-space-6); }

/* ── Documentation preview ─────────────────────────────────────────────── */

.tm-docs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--tm-space-7);
  border-block-start: 1px solid var(--tm-border-strong);
}

.tm-docs__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tm-space-4);
  padding-block: var(--tm-space-4);
  border-block-end: 1px solid var(--tm-divider);
}

.tm-docs__name { font-size: var(--tm-text-body); font-weight: var(--tm-weight-medium); }

.tm-docs__status {
  font-size: var(--tm-text-caption);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--tm-text-muted);
}
/* Honest status, stated plainly rather than dressed as a feature badge. */
.tm-docs__status[data-status="live"] { color: var(--tm-success); }

/* ── Final CTA (shared shape with the homepage) ────────────────────────── */

.tm-final .tm-container { max-inline-size: 46rem; text-align: center; }
.tm-final .tm-lead { margin-inline: auto; margin-block-start: var(--tm-space-4); }
.tm-final__cta { justify-content: center; margin-block-start: var(--tm-space-6); }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .tm-groups-4 { grid-template-columns: repeat(2, 1fr); gap: var(--tm-space-7) var(--tm-space-6); }
  .tm-steps { grid-template-columns: repeat(2, 1fr); gap: var(--tm-space-6); }
  .tm-integration { grid-template-columns: 1fr; }
  /* Keep the map frame as the containing block for its absolute canvas.
     `position: static` makes the canvas attach to the viewport and disappear
     behind this clipped frame on every tablet and mobile width. */
  .tm-integration__map {
    position: relative;
    inset-block-start: auto;
    min-block-size: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 767px) {
  .tm-groups-4 { grid-template-columns: 1fr; gap: var(--tm-space-6); }
  .tm-steps { grid-template-columns: 1fr; gap: var(--tm-space-5); }
  .tm-docs { grid-template-columns: 1fr; }
  .tm-dev-hero { padding-block: var(--tm-space-8) var(--tm-space-7); }
  .tm-dev-hero__cta .tm-btn { flex: 1 1 auto; }
  .tm-integration__map { aspect-ratio: 3 / 4; max-block-size: 65vh; }
}

/* The quick-start steps end in the same two actions as the hero, so the page
   never leaves a reader who has just understood the flow without a way in. */
.tm-steps__cta { margin-block-start: var(--tm-space-7); }