/* Wersja mobilna landingu i raportu.
   Komponenty maja style inline (projekt z Claude Design), wiec ponizsze reguly
   nadpisuja je przez !important. Klasy lp-* / rp-* nadaja komponenty w js/. */

/* overflow-x musi byc tez na html - samo body nie zatrzymuje rozszerzania
   viewportu na mobile; clip (a nie hidden) nie psuje position: sticky w nawigacji */
html, body { overflow-x: clip; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* siatki: dzieci gridu z min-width:auto rozpychaja kolumny dluga trescia */
.lp-g2 > *, .lp-g3 > *, .lp-g4 > *, .lp-hero > *, .lp-train > *, .rp-g > * { min-width: 0; }

/* link "przejdź do treści" - widoczny dopiero po fokusie z klawiatury */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 300; padding: 10px 16px; border-radius: 8px; background: #fff; color: var(--sb-grey-600); font: 500 14px/1 var(--sb-font-sans); box-shadow: 0 8px 24px -8px rgba(22,26,62,.35); text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
#main:focus { outline: none; }
.lp-drop:focus-visible { outline: 3px solid var(--sb-purple-300); outline-offset: 4px; }

/* kotwice z menu nie chowaja naglowka sekcji pod przyklejona nawigacja (64 px) */
section[id] { scroll-margin-top: 64px; }

/* ── nawigacja: menu mobilne ─────────────────────────────── */
.lp-nav-burger { display: none; }
.lp-nav-menu { display: none; }

@media (max-width: 960px) {
  .lp-nav-link { display: none !important; }
  .lp-nav-burger { display: inline-flex !important; }
  .lp-nav-menu.is-open { display: flex; }
}

/* ── tablet ───────────────────────────────────────────────── */
@media (max-width: 960px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr) !important; gap: 72px !important; }
  .lp-hero-copy { max-width: 620px; }
  .lp-hero-visual { max-width: 560px; width: 100%; margin: 0 auto; }
  .lp-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lp-train { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .lp-train-card { max-width: 560px; width: 100%; margin: 0 auto; }
  .rp-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ── telefon ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .lp-nav-in { padding: 0 16px !important; }
  .lp-sec { padding-left: 16px !important; padding-right: 16px !important; }
  .lp-sec-d { padding-top: 64px !important; padding-bottom: 64px !important; }
  .lp-head { margin-bottom: 32px !important; }
  .lp-head h2, .lp-head p { white-space: normal !important; text-wrap: balance !important; }
  .lp-head br { display: none; }

  .lp-hero-sec { padding-top: 40px !important; padding-bottom: 72px !important; }
  .lp-hero-float { left: 12px !important; right: 12px; bottom: -32px !important; max-width: none !important; }
  .lp-hero-card-body { padding: 18px !important; }
  .lp-hero-score { gap: 16px !important; }

  .lp-g2, .lp-g3 { grid-template-columns: minmax(0, 1fr) !important; }
  .lp-dash-row { flex-direction: column; align-items: flex-start !important; gap: 20px !important; }
  .lp-dash-body { padding: 20px 16px !important; }
  .lp-dash-tabs { padding: 12px 16px 0 !important; }

  .lp-crit { grid-template-columns: minmax(0, 1fr) !important; padding: 8px 20px 16px !important; }
  .lp-critbar { grid-template-columns: minmax(0, 1fr) 72px 40px !important; gap: 12px !important; }

  .lp-drop { padding: 40px 20px !important; }

  .lp-form2 { grid-template-columns: minmax(0, 1fr) !important; }
  /* iOS powieksza strone przy fokusie pola z czcionka < 16 px */
  .lp-input, .lp-email-input { font-size: 16px !important; }
  .lp-train-card { padding: 22px !important; }

  .lp-audit-bar, .lp-audit-qs, .lp-audit-foot { padding-left: 18px !important; padding-right: 18px !important; }
  .lp-audit-opts { grid-template-columns: minmax(0, 1fr) !important; padding-left: 0 !important; }
  .lp-audit-res { grid-template-columns: minmax(0, 1fr) !important; padding: 22px 18px !important; justify-items: center; }
  .lp-audit-res > div:last-child { width: 100%; }

  .lp-cta { padding: 56px 20px !important; }
  .lp-foot { padding-left: 16px !important; padding-right: 16px !important; }
  .lp-foot nav { margin-left: -12px !important; }

  /* modal raportu: pelny ekran */
  .lp-modal { padding: 0 !important; }
  .lp-modal-box { max-height: 100dvh !important; height: 100dvh; border-radius: 0 !important; }
  .lp-modal-body { padding: 20px 16px 28px !important; }
  .lp-analyzing { padding: 20px !important; }
  .lp-analyzing-detail { display: none; }

  /* sekcje raportu (modal + report.html) */
  .rp-main { padding: 0 16px !important; }
  .rp-section-head { flex-wrap: wrap; row-gap: 4px !important; }
  .rp-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 14px !important; padding: 14px 16px !important; }
  .rp-meta > :first-child { grid-column: 1 / -1; }
  .rp-hero { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; padding: 22px 18px !important; justify-items: center; }
  .rp-hero > :last-child { width: 100%; }
  .rp-g2 { grid-template-columns: minmax(0, 1fr) !important; }
  .rp-g5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rp-g5.rp-stake { grid-template-columns: minmax(0, 1fr) !important; }
  .rp-pad { padding: 18px !important; }
  .rp-critrow { padding: 12px 12px !important; }
  .rp-critrow-grid { grid-template-columns: minmax(0, 1fr) 64px 40px !important; gap: 10px !important; }
  .rp-critrow-weight { display: none; }
  .rp-lock-note { white-space: normal !important; }
  .rp-gate { padding: 22px 18px !important; }
}

@media (max-width: 560px) {
  .lp-g4 { grid-template-columns: minmax(0, 1fr) !important; }
  .lp-g4 > * > div, .lp-g3 > * > div { padding: 22px !important; }
}

@media (max-width: 380px) {
  .lp-nav-cta { display: none !important; }
  .lp-hero-metrics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .lp-hero-metrics > :last-child { grid-column: 1 / -1; }
}