/* Compass&Partners — responsywność mobile.
   Klasy są wstrzykiwane w strony, a typografia/paddingi skalowane przez clamp()
   bezpośrednio w stylach inline — dzięki temu nic nie zależy od sposobu
   serializacji atrybutu style w runtime. */

/* zabezpieczenie przed poziomym przepełnieniem */
.cp-root img, .cp-root svg { max-width: 100%; }

@media (max-width: 820px) {
  /* kontenery — boczne marginesy */
  .cp-wrap { padding-left: 24px !important; padding-right: 24px !important; }

  /* siatki układu */
  .cp-g1 { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cp-g2 { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
  .cp-g3 { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }

  /* nagłówki sekcji (tytuł + opis po prawej) */
  .cp-hd { flex-wrap: wrap !important; gap: 10px !important; }
  .cp-hd > p { text-align: left !important; max-width: 100% !important; margin-top: 4px !important; }

  /* szerokie tabele — przewijanie poziome */
  [data-cpx] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  [data-cpx] > div { min-width: 540px; }

  /* pływające mini-karty → wbudowane w tok */
  .cp-float {
    position: static !important; width: auto !important;
    right: auto !important; left: auto !important; top: auto !important; bottom: auto !important;
    margin-top: 18px !important; box-shadow: 0 10px 30px rgba(16,35,63,0.12) !important;
  }

  /* przełącznik koloru (str. 05) — nie sticky na mobile, by nie nachodził na nav */
  .cp-switch { position: static !important; top: auto !important; }

  /* nawigacja */
  .cpnav nav { gap: 14px 16px !important; }
}

@media (max-width: 560px) {
  .cp-wrap { padding-left: 18px !important; padding-right: 18px !important; }
  .cp-g3 { grid-template-columns: repeat(2, 1fr) !important; }
  .cpnav nav a { font-size: 13px !important; }
}