/* ============================================================
   PK Elektryk — wersja 2 (Awwwards / Light) — styles
   Wzorzec: podglad-LIGHT.html. Marka: PK Elektryk (bez nazwiska),
   dane fikcyjne. Motyw jasny (główny) + ciemny przez [data-theme].
   ============================================================ */

:root {
  --paper: #ffffff;
  --paper-2: #f2f3f5;
  --ink: #15171c;
  --ink-2: #3b414c;
  --muted: #576070;
  --faint: #9aa1ac;
  --accent: #ff6b35;
  --blob: rgba(21, 23, 28, 0.05);
  --toggle-bg: rgba(255, 255, 255, 0.55);
  --toggle-line: rgba(16, 24, 40, 0.12);
  color-scheme: light;
}
[data-theme="dark"] {
  --paper: #0b0d10;
  --paper-2: #16181d;
  --ink: #eef0f3;
  --ink-2: #c3c9d2;
  --muted: #aab1bc;
  --faint: #7a828e;
  --accent: #ff6b35;
  --blob: rgba(120, 150, 255, 0.06);
  --toggle-bg: rgba(255, 255, 255, 0.06);
  --toggle-line: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
}
img, video { max-width: 100%; }
::selection { background: var(--accent); color: #fff; }

/* ---------- dekoracyjne bloby w tle (wolna animacja) ---------- */
.bg-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); background: var(--blob); }
.blob.a { width: 46vw; height: 46vw; top: -8vh; right: -6vw; animation: blobA 22s ease-in-out infinite; }
.blob.b { width: 40vw; height: 40vw; top: 42vh; left: -10vw; animation: blobB 26s ease-in-out infinite; }
.blob.c { width: 34vw; height: 34vw; bottom: -6vh; right: 8vw; animation: blobC 30s ease-in-out infinite; }

/* ---------- keyframes (1:1 z wzorca) ---------- */
@keyframes heroUp { from { transform: translateY(116%); } to { transform: translateY(0); } }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bulbGlow { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.82); } }
@keyframes cueBounce { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(7px); opacity: .55; } }
@keyframes blobA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vw,4vh) scale(1.18); } }
@keyframes blobB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw,-5vh) scale(0.88); } }
@keyframes blobC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5vw,6vh) scale(1.1); } }

/* ---------- stany hover / focus (klasy scpN z wzorca) ---------- */
.scp0 { transition: color .3s; }
.scp0:hover { color: var(--ink); }
.scp1:hover { transform: translateY(-2px); }         /* pełny pill / przycisk */
.scp2:hover { transform: translateY(-3px); box-shadow: rgba(16,24,40,0.05) 0 1px 2px, rgba(16,24,40,0.4) 0 26px 60px -22px; }  /* szklany pill */
.scp3:hover { transform: translateY(-5px); border-color: rgba(16,24,40,0.18); box-shadow: rgba(16,24,40,0.06) 0 2px 4px, rgba(16,24,40,0.26) 0 30px 70px -26px; }  /* karta bento */
.scp4:focus { border-color: var(--accent) !important; }
.scp5 { transition: color .3s, opacity .3s; }
.scp5:hover { color: var(--accent) !important; opacity: 1; }

/* CTA solidne — odwrócone w trybie ciemnym, żeby były widoczne na ciemnym tle */
[data-theme="dark"] .cta-solid { background: #eef0f3 !important; color: #15171c !important; }
[data-theme="dark"] .cta-solid svg path { stroke: #15171c !important; }
[data-theme="dark"] .cta-solid > span[style*="background: rgb(255, 255, 255)"] { background: #15171c !important; }

/* focus-visible ring (dostępność, BUG-006) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, label:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   TRYB CIEMNY — nadpisania po wartościach w stylach inline
   (bez zmian w markupie). Paleta wg Design System v2.0.
   ============================================================ */
[data-theme="dark"] { background: #0b0d10; }
/* — tekst — */
[data-theme="dark"] [style*="color: rgb(21, 23, 28)"] { color: #eef0f3 !important; }
[data-theme="dark"] [style*="color: rgb(59, 65, 76)"] { color: #c3c9d2 !important; }
[data-theme="dark"] [style*="color: rgb(87, 96, 111)"] { color: #aab1bc !important; }
[data-theme="dark"] [style*="color: rgb(107, 114, 128)"] { color: #aab1bc !important; }
[data-theme="dark"] [style*="color: rgb(154, 161, 172)"] { color: #7a828e !important; }
/* — obrysy ikon SVG (stroke ink) — */
[data-theme="dark"] [stroke="#15171c"] { stroke: #eef0f3 !important; }
[data-theme="dark"] [fill="#15171c"] { fill: #eef0f3 !important; }
/* — tła szkła — */
[data-theme="dark"] [style*="background: rgba(255, 255, 255, 0.5)"] { background: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] [style*="background: rgba(255, 255, 255, 0.55)"] { background: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] [style*="background: rgba(255, 255, 255, 0.7)"] { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] [style*="background-color: rgba(255, 255, 255, 0.7)"] { background: rgba(255,255,255,0.06) !important; }
/* — obwódki / linie ink→light — */
[data-theme="dark"] [style*="1px solid rgb(21, 23, 28)"] { border-color: rgba(238,240,243,0.7) !important; }
[data-theme="dark"] [style*="rgba(16, 24, 40, 0.08)"] { border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] [style*="rgba(16, 24, 40, 0.09)"] { border-color: rgba(255,255,255,0.09) !important; }
[data-theme="dark"] [style*="rgba(16, 24, 40, 0.1)"] { border-color: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] [style*="rgba(16, 24, 40, 0.12)"] { border-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] [style*="rgba(16, 24, 40, 0.14)"] { border-color: rgba(255,255,255,0.14) !important; }
[data-theme="dark"] [style*="rgba(16, 24, 40, 0.16)"] { border-color: rgba(255,255,255,0.16) !important; }
/* — metryki manifestu (białe kafle) — */
[data-theme="dark"] [style*="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px)"] { background: rgba(255,255,255,0.04) !important; }
/* — nav po zescrollowaniu (dodaje klasę .scrolled) — */
[data-theme="dark"] #nav.scrolled { background: rgba(11,13,16,0.72) !important; border-color: rgba(255,255,255,0.08) !important; }
/* — stopka (ciemny monolit) → nieco jaśniejszy panel — */
[data-theme="dark"] footer[style*="background: rgb(21, 23, 28)"] { background: #16181d !important; }
/* — placeholder tła zdjęć — */
[data-theme="dark"] [style*="background: rgb(233, 235, 239)"] { background: #22252b !important; }

/* kontrast AA (BUG-003): przyciemnienie najjaśniejszych szarości — tylko tryb jasny
   (dark ma nadpisania z wyższą specyficznością [data-theme="dark"], więc nie koliduje) */
[style*="color: rgb(154, 161, 172)"] { color: #626c7a !important; }
[style*="color: rgb(107, 114, 128)"] { color: #5b6472 !important; }

/* nav po scrollu (jasny) */
#nav.scrolled { background: rgba(255,255,255,0.72); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(16,24,40,0.08) !important; }

/* ---------- przełącznik motywu + hamburger ---------- */
.theme-toggle, .nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--toggle-line); background: var(--toggle-bg);
  color: var(--ink); cursor: pointer; transition: transform .3s, border-color .3s;
  backdrop-filter: blur(10px);
}
.theme-toggle:hover, .nav-burger:hover { transform: translateY(-1px); border-color: var(--accent); }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
.nav-burger { display: none; }

/* ---------- postęp scrolljack Realizacji ---------- */
.real-progress { position: absolute; left: 40px; right: 40px; bottom: 34px; z-index: 5; height: 2px; background: rgba(16,24,40,0.1); border-radius: 2px; overflow: hidden; }
[data-theme="dark"] .real-progress { background: rgba(255,255,255,0.1); }
.real-progress > i { display: block; height: 100%; width: 0; background: var(--accent); }

/* ---------- stany formularza (zaznaczone chipy/tagi) ---------- */
[data-chip].on, [data-tag].on { border-color: var(--ink) !important; background: rgba(21,23,28,0.05) !important; }
[data-theme="dark"] [data-chip].on, [data-theme="dark"] [data-tag].on { background: rgba(255,255,255,0.08) !important; }
[data-form-note].err { color: #c0392b !important; }
[data-theme="dark"] [data-form-note].err { color: #ff8a80 !important; }
.field-invalid { border-color: #c0392b !important; }

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (min-width: 901px) and (max-width: 1024px) {
  /* bento → 2 kolumny (tylko tablet, żeby nie kolidowało z układem 1-kolumnowym < 900px) */
  #uslugi > div:last-child { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 210px !important; }
}
@media (max-width: 900px) {
  /* nav: chowamy linki, pokazujemy hamburger */
  #nav .nav-links { display: none !important; }
  .nav-burger { display: inline-flex; }
  #nav.menu-open .nav-links {
    display: flex !important; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px !important;
    padding: 18px 40px 26px; background: var(--paper);
    border-bottom: 1px solid var(--toggle-line);
  }
  #nav.menu-open .nav-links a { font-size: 15px !important; padding: 8px 0; }

  /* hero: eyebrowy do statycznego przepływu, mniejszy odstęp */
  #hero { padding: 120px 22px 60px !important; min-height: auto !important; }
  #hero > div[style*="top: 118px"] { position: static !important; margin-bottom: 20px; gap: 22px !important; }
  #hero > div[style*="top: 118px"] p:nth-child(2) { padding-left: 0 !important; border-left: none !important; }
  #hero > div[style*="min(30vw, 430px)"] { position: relative !important; width: 100% !important; height: 300px; inset: auto !important; margin: 0 0 26px !important; border-radius: 180px 180px 14px 14px !important; }
  #hero > div[style*="max-width: min(60vw, 860px)"] { max-width: 100% !important; margin-top: 8px !important; }
  #hero h1 span[data-hero-line] { white-space: normal !important; }

  /* sekcje: mniejszy padding poziomy */
  #manifest, #uslugi, #wycena { padding-left: 22px !important; padding-right: 22px !important; }
  #manifest { padding-top: 90px !important; padding-bottom: 90px !important; }

  /* bento → 1 kolumna, auto-height */
  #uslugi > div:last-child { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
  #uslugi article { grid-area: auto !important; grid-column: auto !important; min-height: 180px; }

  /* Realizacje: z scrolljack na pionową listę */
  #realizacje { height: auto !important; overflow: visible !important; padding: 90px 22px 40px; }
  #realizacje > div[style*="top: 40px"] { position: static !important; margin-bottom: 26px; }
  #realizacje > div[style*="top: 52px"], .real-progress { display: none !important; }
  #realTrack { position: static !important; height: auto !important; flex-direction: column; gap: 26px !important; padding: 0 !important; transform: none !important; }
  #realTrack article { width: 100% !important; height: auto !important; }
  #realTrack article > div:first-child { height: 300px; }
  #realTrack > div:last-child { width: 100% !important; height: auto !important; padding: 10px 0 0; }

  /* Wycena: jedna kolumna */
  #wycena > div { grid-template-columns: 1fr !important; gap: 40px !important; }
  #wycena > div > div:first-child { position: static !important; }
  form#quoteForm { padding: 26px !important; }
  form#quoteForm > div[style*="repeat(2, 1fr)"] { grid-template-columns: 1fr !important; }

  /* metryki manifestu → 1 kolumna */
  #manifest > div:last-child { grid-template-columns: 1fr !important; }

  footer { padding: 60px 22px 32px !important; border-radius: 24px 24px 0 0 !important; }
}
@media (max-width: 520px) {
  #hero h1 span[data-hero-line] { font-size: clamp(2.4rem, 13vw, 3.4rem) !important; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal], [data-hero-line], [data-line], [data-tile], [data-hero-fade], [data-clip] {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .bg-blobs { display: none; }
  /* bez scrolljacku: Realizacje jako pionowa/przewijalna lista (wszystkie kadry widoczne) */
  #realizacje { height: auto !important; overflow: visible !important; padding-top: 90px; }
  #realizacje > div[style*="top: 40px"] { position: static !important; margin: 0 40px 26px; }
  #realizacje > div[style*="top: 52px"], .real-progress { display: none !important; }
  #realTrack { position: static !important; height: auto !important; flex-direction: column; gap: 30px !important; padding: 0 40px !important; transform: none !important; }
  #realTrack article { width: 100% !important; height: auto !important; }
  #realTrack article > div:first-child { height: 380px; }
  #realTrack > div:last-child { width: 100% !important; height: auto !important; padding: 8px 0 0 !important; }
}

/* ---------- fallback bez JS / gdy CDN padnie ---------- */
.no-js [data-reveal], .no-js [data-hero-line], .no-js [data-line],
.no-js [data-tile], .no-js [data-hero-fade] {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}
.no-js .bg-blobs { display: none; }