/* =========================================================================
   Jasny wariant strony tytułowej (sekcja .hero) — Integrator KSeF.

   Osobny plik, żeby łatwo go podmienić albo wyłączyć:
   – usunięcie <link> do tego pliku (i <script> hero-jasny.js) w head
     przywraca ciemne hero bez ruszania reszty stylów;
   – domyślny motyw ustawia hero-jasny.js (atrybut data-hero na <html>),
     a gość może go zmienić małym przełącznikiem w prawym górnym rogu hero.

   Wszystko jest ograniczone do html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero), więc nagłówek,
   pasek użytkowy i sekcje poniżej zostają bez zmian.
   ========================================================================= */

/* ---- przełącznik (widoczny w obu motywach) ---------------------------- */
.hero-motyw {
  position: absolute;
  top: 8px;
  right: var(--gutter, 24px);
  z-index: 6;
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ink-line-2, rgba(255,255,255,.18));
  background: transparent;
  color: var(--ink-muted, #94a3b8);
  opacity: .55;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.hero-motyw:hover,
.hero-motyw:focus-visible { opacity: 1; background: rgba(255,255,255,.08); }
.hero-motyw:focus-visible { outline: 2px solid var(--brand-2, #2563eb); outline-offset: 2px; }
.hero-motyw svg { width: 15px; height: 15px; display: block; }
/* w jasnym hero pokazujemy księżyc („przełącz na ciemny"), w ciemnym słońce */
.hero-motyw .ico-ksiezyc { display: none; }
html[data-hero="jasny"] .hero-motyw .ico-slonce  { display: none; }
html[data-hero="jasny"] .hero-motyw .ico-ksiezyc { display: block; }

/* ---- jasne hero ------------------------------------------------------- */
html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero) {
  /* przeciążamy tylko zmienne „ink-*" w obrębie hero: wszystko, co z nich
     korzysta (pigułki, btn-ghost, podpisy, linie), samo robi się jasne */
  --ink-text:   #0f1e38;
  --ink-muted:  #4b5a75;
  --ink-line:   rgba(15,30,56,.12);
  --ink-line-2: rgba(15,30,56,.22);
  background: linear-gradient(180deg, #fbfbfc 0%, #f0f1f3 100%);
  color: #0f1e38;
}
html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero)::before {
  background:
    none;
}
/* wideo w tle jest przygotowane pod ciemne tło */
html[data-hero="jasny"] .hero-bg-video { display: none; }
html[data-hero="jasny"] .hex-bg-hero .hex-cluster { opacity: 1; }
/* sześciokąty na neutralnym szarym (kolor siedzi w atrybutach SVG — CSS je nadpisuje) */
html[data-hero="jasny"] .hex-bg-hero polygon { stroke: rgba(120,120,126,.55); }
html[data-hero="jasny"] .hex-bg-hero polygon:not([fill="none"]) { fill: rgba(120,120,126,.13); }

html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero) h1,
html[data-hero="jasny"] .hero-meta-item-value { color: #0a1628; }
html[data-hero="jasny"] .hero-title-icon { box-shadow: 0 6px 18px rgba(10,22,40,.18); }

html[data-hero="jasny"] .hero-pill {
  background: rgba(255,255,255,.75);
  border-color: rgba(15,30,56,.14);
  color: #1b2a47;
}
html[data-hero="jasny"] .hero-media-caption-mark {
  background: rgba(15,30,56,.06);
  border-color: rgba(15,30,56,.20);
}

/* przyciski: biały „primary" znikałby na jasnym tle */
html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero) .btn-primary,
html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero) .btn:not([class*="btn-"]) {
  background: var(--brand, #1d4ed8);
  border-color: var(--brand, #1d4ed8);
  color: #fff;
}
html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero) .btn-primary:hover,
html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero) .btn:not([class*="btn-"]):hover {
  background: var(--brand-2, #2563eb);
  box-shadow: 0 12px 26px rgba(29,78,216,.28);
}
html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero) .btn-ghost:hover {
  background: rgba(15,30,56,.05);
  border-color: rgba(15,30,56,.32);
}
/* kolorowe przyciski pobierania (.af-btn) zostają, tylko cień lżejszy */
html[data-hero="jasny"] :is(.hero, .gal-hero, .inst-hero, .zm-hero, .blog-hero) .af-btn { box-shadow: 0 4px 12px rgba(15,30,56,.18); }

/* zrzuty ekranu: jasna ramka i miękki cień */
html[data-hero="jasny"] .hero-shot-photo {
  border-color: rgba(15,30,56,.14);
  box-shadow: 0 18px 40px rgba(15,30,56,.18), 0 4px 10px rgba(15,30,56,.10);
}
html[data-hero="jasny"] .hero-shot-photo--back  { filter: brightness(.96); }
html[data-hero="jasny"] .hero-shot-photo--mid   { filter: brightness(.98); }
html[data-hero="jasny"] .hero-shot:focus-visible { outline-color: rgba(15,30,56,.4); }

/* znak partnera: ciemną wersję PNG podstawia hero-jasny.js (podmiana src) */
html[data-hero="jasny"] .hero-partner-badge { filter: none; opacity: 1; }

/* ---- pozostałe typy baneru (podstrony, blog) -------------------------- */
html[data-hero="jasny"] :is(.gal-hero, .inst-hero, .zm-hero, .blog-hero) {
  background: linear-gradient(180deg, #fbfbfc 0%, #f0f1f3 100%);
  --ink-text: #0f1e38; --ink-muted: #4b5a75;
  --ink-line: rgba(15,30,56,.12); --ink-line-2: rgba(15,30,56,.22);
  --paper: #0a1628;
}
html[data-hero="jasny"] :is(.gal-hero, .inst-hero, .zm-hero, .blog-hero) h1 { color: #0a1628; }
html[data-hero="jasny"] :is(.inst-ver, .zm-ver) { color: var(--brand, #1d4ed8); }
html[data-hero="jasny"] .blog-hero-pill { color: var(--brand, #1d4ed8); background: rgba(255,255,255,.7); }
html[data-hero="jasny"] .blog-hero { border-bottom-color: rgba(15,30,56,.10); }

/* ---- panel filarów na stronie głównej --------------------------------- */
html[data-hero="jasny"] .hero-panel { background: #fff; border: 1.5px solid rgba(15,30,56,.26); box-shadow: 0 18px 44px rgba(15,30,56,.18), 0 3px 8px rgba(15,30,56,.08); }
html[data-hero="jasny"] .hero-panel-row + .hero-panel-row { border-top-color: rgba(15,30,56,.16); }
html[data-hero="jasny"] .hero-panel-row:hover { background: rgba(29,78,216,.05); }
html[data-hero="jasny"] .hero-panel-row h2 { color: #0a1628; }
html[data-hero="jasny"] .hero-panel-no { color: var(--brand, #1d4ed8); }
html[data-hero="jasny"] .hero-panel-tags span { background: rgba(15,30,56,.04); color: #1b2a47; }
html[data-hero="jasny"] .hero .card--ink { background: rgba(255,255,255,.72); }
html[data-hero="jasny"] .hero .card--ink h3 { color: #0a1628; }

/* ---- /panel/ — kafle wyboru obszaru ----------------------------------- */
html[data-hero="jasny"] .panel-gate {
  background: #fff;
  border-color: rgba(15,30,56,.16);
  box-shadow: 0 14px 34px rgba(15,30,56,.10);
}
html[data-hero="jasny"] .panel-gate__title { color: #0a1628; }
html[data-hero="jasny"] .panel-gate__canvas { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--brama) 35%, transparent)); }
html[data-hero="jasny"] .panel-split__foot,
html[data-hero="jasny"] .panel-split__foot a { color: #4b5a75; }
/* akcenty bramy (jasnocyjanowe) są za blade na białym — przyciemniamy je */
html[data-hero="jasny"] .panel-gate__nr,
html[data-hero="jasny"] .panel-gate__go:not(.panel-gate__go--wkrotce) { color: color-mix(in srgb, var(--brama) 45%, #0a1628); }
html[data-hero="jasny"] .panel-gate__list li::before { background: color-mix(in srgb, var(--brama) 55%, #0a1628); }
html[data-hero="jasny"] .panel-gate__canvas { filter: brightness(.62) saturate(1.4) drop-shadow(0 0 3px color-mix(in srgb, var(--brama) 30%, transparent)); }
html[data-hero="jasny"] .panel-gate::before,
html[data-hero="jasny"] .panel-gate::after { border-color: color-mix(in srgb, var(--brama) 55%, #0a1628); }