/* ==========================================
   SDKs & Libraries
   ========================================== */
.sdks-hero {
  padding: calc(var(--navbar-height) + var(--space-3xl)) 0 var(--space-2xl);
}
.sdks-hero h1 {
  font-size: clamp(2.4rem, 5vw + 0.5rem, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: var(--space-lg) 0 var(--space-md);
}
.sdks-hero-sub {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 640px;
}
.sdks-hero-sub a { color: var(--text-primary); }

.sdks-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-xl);
}
.sdks-jump a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  text-decoration: none;
}
.sdks-jump a:hover { border-color: var(--text-primary); color: var(--text-primary); }

.sdks-grid-section { padding-bottom: var(--space-3xl); }
.sdks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* minmax(0): a long code line must not widen its column */
  gap: var(--space-md);
}
.sdk-card {
  border: 1px solid var(--border-strong);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  scroll-margin-top: calc(var(--navbar-height) + var(--space-lg));
  background: var(--bg-primary);
}
.sdk-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.sdk-card h3 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; }
.sdk-card-head .sdk-version { margin-left: auto; }
/* The language's own mark, in its own colours (Devicon, MIT) */
.sdk-logo { width: 28px; height: 28px; flex-shrink: 0; }
a.sdk-logo { display: block; transition: opacity var(--duration-fast); }   /* the mark leads to the package's registry page */
a.sdk-logo:hover { opacity: 0.7; }
.sdk-logo svg { width: 100%; height: 100%; display: block; }
.sdk-logo--mono svg { fill: var(--text-primary); }   /* Rust's mark is black by design; it follows the ink */
.sdk-version {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.sdk-install, .sdk-example {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.55;
  padding: 0.65rem 0.8rem;
  overflow-x: auto;
  white-space: pre-wrap;        /* a long line wraps rather than hides behind a scrollbar */
  overflow-wrap: anywhere;
  margin: 0;
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 2.5%, var(--bg-primary));   /* opaque: the page grid must not show through code */
  /* a thin scrollbar for the lines that overflow */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-primary) 22%, transparent) transparent;
}
.sdk-install::-webkit-scrollbar, .sdk-example::-webkit-scrollbar { height: 5px; }
.sdk-install::-webkit-scrollbar-thumb, .sdk-example::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-primary) 22%, transparent); border-radius: 3px; }
.sdk-install::-webkit-scrollbar-track, .sdk-example::-webkit-scrollbar-track { background: transparent; }
.sdk-install { font-weight: 500; }
/* Shell commands get a prompt; manifest snippets (Maven, SwiftPM, rebar) don't */
.sdk-install[data-shell] code::before { content: '$ '; color: var(--text-muted); }
.sdk-card { position: relative; z-index: 1; }
.sdk-notes { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin-top: auto; }   /* notes and link sit together at the foot */
.sdk-repo {
  margin-top: auto;           /* at the foot — and directly under the notes when there are any */
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 25%, transparent);
  align-self: flex-start;
  padding-bottom: 0.1rem;
}
.sdk-notes + .sdk-repo { margin-top: 0; }
.sdk-repo:hover { color: var(--accent); border-bottom-color: var(--accent); }

.sdks-raw {
  padding: var(--space-3xl) 0 calc(var(--space-3xl) + var(--space-xl));
  border-top: 1px solid var(--border);
}
.sdks-raw-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.sdks-raw h2 { font-size: clamp(1.6rem, 2.4vw + 0.5rem, 2.2rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-md); }
.sdks-raw p { color: var(--text-secondary); line-height: 1.65; }
.sdks-raw p a { color: var(--text-primary); }
.sdks-raw-links { display: flex; gap: var(--space-lg); margin-top: var(--space-md); font-family: var(--font-mono); font-size: 0.8rem; }
.sdk-example--raw { font-size: 0.85rem; padding: 1rem 1.2rem; }

/* Buttons on this page take the navbar's mono voice */
.sdks-page .btn { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 0; }

@media (max-width: 1180px) { .sdks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .sdks-grid { grid-template-columns: 1fr; }
  .sdks-raw-inner { grid-template-columns: 1fr; }
}