/* Integration Lessons v3.1 — shared rail, equal-card and responsive polish */
body.integration-page {
  /* Match the visible .nv3-desk rail: 1440px wrapper minus 20px on each side. */
  --integration-shell: min(calc(100vw - 40px), 1400px);
  --integration-gap: clamp(12px, 1.25vw, 18px);
  --integration-primary-nav-height: 142px;
  --f-serif: var(--aqm-font-primary, 'IBM Plex Sans Thai', 'Prompt', sans-serif);
  --f-sans: var(--aqm-font-primary, 'IBM Plex Sans Thai', 'Prompt', sans-serif);
  --f-mono: var(--aqm-font-data, 'IBM Plex Sans Thai', 'Prompt', sans-serif);
}

/* Keep the contextual lesson navigation below the complete primary navigation.
   JavaScript updates this offset from the real rendered height at every breakpoint. */
body.integration-page .topnav {
  top: var(--integration-primary-nav-height) !important;
  z-index: 880;
}

body.integration-page .sect {
  scroll-margin-top: calc(var(--integration-primary-nav-height) + 64px);
}

body.integration-page .page-hero {
  padding-inline: 0;
}

body.integration-page .hero-inner,
body.integration-page .topnav-in,
body.integration-page .main,
body.integration-page .aqm-footer-inner {
  width: var(--integration-shell) !important;
  max-width: 1400px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

body.integration-page .topnav-in {
  min-width: max-content;
}

body.integration-page .main {
  overflow: clip;
}

body.integration-page .learning-brief,
body.integration-page .station-grid,
body.integration-page .live-banner,
body.integration-page .kpi-row,
body.integration-page .g2,
body.integration-page .g3,
body.integration-page .sgrid,
body.integration-page .aqm-footer-metrics {
  align-items: stretch;
  gap: var(--integration-gap);
}

body.integration-page .learning-card,
body.integration-page .station-card,
body.integration-page .live-tile,
body.integration-page .kpi,
body.integration-page .card,
body.integration-page .lesson,
body.integration-page .scard,
body.integration-page .chart-wrap,
body.integration-page .aqm-footer-metric {
  min-width: 0;
}

body.integration-page .learning-card,
body.integration-page .station-card,
body.integration-page .live-tile,
body.integration-page .kpi,
body.integration-page .scard,
body.integration-page .chart-wrap {
  height: 100%;
}

body.integration-page .learning-card,
body.integration-page .station-card,
body.integration-page .live-tile,
body.integration-page .scard,
body.integration-page .chart-wrap {
  display: flex;
  flex-direction: column;
}

body.integration-page .learning-card {
  min-height: 164px;
}

body.integration-page .learning-card p,
body.integration-page .station-card .sc-body,
body.integration-page .chart-wrap > div:last-child {
  flex: 1;
}

body.integration-page .station-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.integration-page .live-banner,
body.integration-page .kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.integration-page .kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.integration-page .g2,
body.integration-page .g3,
body.integration-page .sgrid {
  grid-auto-rows: 1fr;
}

body.integration-page .g2 > *,
body.integration-page .g3 > *,
body.integration-page .sgrid > * {
  height: 100%;
}

body.integration-page .card-body,
body.integration-page .lesson-body,
body.integration-page .code-block {
  min-width: 0;
}

body.integration-page .vardef,
body.integration-page .dtable {
  width: 100%;
}

body.integration-page .page-hero h1 {
  max-width: 920px;
  font-size: clamp(1.85rem, 3.2vw, 3.35rem);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.18;
}

body.integration-page .sect-hd {
  max-width: 960px;
}

body.integration-page .sect-hd h2 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  letter-spacing: -.02em;
}

html[data-aqm-theme="dark"] body.integration-page .dtable tr[style],
html[data-aqm-theme="dark"] body.integration-page .vardef tr[style] {
  background: var(--cream) !important;
}

@media (max-width: 1180px) {
  body.integration-page .station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.integration-page .live-banner,
  body.integration-page .kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.integration-page .learning-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.integration-page .g3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body.integration-page {
    --integration-shell: min(calc(100vw - 28px), 1400px);
  }

  body.integration-page .page-hero {
    padding-block: 38px 32px;
  }

  body.integration-page .learning-brief,
  body.integration-page .station-grid,
  body.integration-page .g2,
  body.integration-page .g3 {
    grid-template-columns: 1fr;
  }

  body.integration-page .live-banner,
  body.integration-page .kpi-row,
  body.integration-page .sgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.integration-page .learning-card {
    min-height: 0;
  }

  body.integration-page .card-body,
  body.integration-page .lesson-body {
    overflow-x: auto;
  }

  body.integration-page .card-body > .vardef,
  body.integration-page .lesson-body > .vardef,
  body.integration-page .lesson-body > .dtable {
    min-width: 640px;
  }
}

@media (max-width: 430px) {
  body.integration-page .live-banner,
  body.integration-page .kpi-row,
  body.integration-page .sgrid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.integration-page *,
  body.integration-page *::before,
  body.integration-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body.integration-page .hero-inner,
  body.integration-page .topnav-in,
  body.integration-page .main,
  body.integration-page .aqm-footer-inner {
    width: 100% !important;
    max-width: none !important;
  }
}