/* Responsive gedrag voor de Spike Academy site.
   Inline styles blijven leidend; deze regels vangen de breakpoints op. */

/* 1280 en kleiner: ruimere kolommen inkorten */
@media (max-width: 1280px) {
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* 1024 en kleiner: vier kolommen naar twee, brede tekstkolommen smaller */
@media (max-width: 1024px) {
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="90px 1fr"] { grid-template-columns: 1fr !important; gap: 12px !important; }
  h1 { font-size: 40px !important; }
}

/* 768 en kleiner: alles onder elkaar */
@media (max-width: 768px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="padding: 40px 32px"],
  [style*="padding: 72px 32px"],
  [style*="padding: 76px 32px"],
  [style*="padding: 84px 32px"],
  [style*="padding: 92px 32px"],
  [style*="padding: 64px 32px"],
  [style*="padding: 56px 32px"],
  [style*="padding: 60px 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
  h1 { font-size: 32px !important; line-height: 1.12 !important; }
  h2 { font-size: 26px !important; }
  header nav { display: none !important; }
  table { font-size: 14px !important; }
}

/* 640 en kleiner: compacte widgets en knoppen */
@media (max-width: 640px) {
  [role="dialog"] { right: 12px !important; left: 12px !important; width: auto !important; }
  [aria-label="Open de AI-assistent"] { right: 12px !important; bottom: 16px !important; padding: 12px 18px !important; font-size: 14px !important; }
  h1 { font-size: 28px !important; }
  article { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 900px) {
  .pm-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 860px) {
  .nb-signup { grid-template-columns: 1fr !important; }
  .nb-prevnext { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  .nb-row { grid-template-columns: 54px 20px 1fr !important; }
  .nb-row .nb-rail + div { padding-left: 4px !important; }
}