/* KSeF: e-faktura dostaje numer KSeF i trafia do biura (mikrokoncept podstrony, runda „miks2”).
   Plansza z siatką jak w scenie „Zmiana biura”; na niej faktura na papierze (numer KSeF drukuje się znak po znaku), czerwona pieczęć KSeF, przerywana linia „uprawnienie”
   i karta „Biuro rachunkowe”, do której leci kwota faktury. HTML jest stanem końcowym (bez JS i przy ograniczonym ruchu widać wszystko); ruch dokłada hero.js.
   Rozmiary: --t (opisy) ≥ 14 px, --k (kwoty) ≥ 16 px także na telefonie; od 1001 px skala okna --p z wysoki.css. Bez nazw firm i numerów NIP (jak druki strony głównej). */

.hero-ksef { --t: 14px; --k: 16px; --tyt: 28px; --pieczec: 34px; --qr: 56px; width: 100%; color: var(--tusz); }
.hero-ksef-plansza { position: relative; display: grid; gap: 6px; padding-block: 14px 10px;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "faktura" "ksef" "upr" "biuro" "przyklad";
  margin-inline: calc(var(--m) * -1); padding-inline: var(--m); border-block: 1px solid var(--linia);
  background-image: linear-gradient(90deg, rgba(38, 64, 90, .5) 1px, transparent 1px), linear-gradient(rgba(38, 64, 90, .5) 1px, transparent 1px); background-size: 56px 56px; }

/* faktura na papierze */
.hero-ksef-faktura { grid-area: faktura; position: relative; z-index: 1; padding: 12px 14px 10px; background: var(--papier); color: var(--tusz); border-radius: 2px; box-shadow: var(--cien-papieru); rotate: -.45deg; font-size: var(--t); line-height: 1.35; }
.hero-ksef-gora { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .9em; row-gap: 2px; padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1.5px solid var(--druk-l); }
.hero-ksef-tytul { font: 800 var(--tyt)/.95 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 84; letter-spacing: .012em; color: var(--tusz); }
.hero-ksef-nr { font: 500 var(--t)/1 var(--mono); color: var(--druk); }
.hero-ksef-data { margin-left: auto; font: 500 var(--t)/1 var(--mono); color: var(--tusz-2); }
.hero-ksef-strony { display: none; }                      /* strony faktury: etykiety i szare paski bez nazw i numerów NIP; na telefonie pominięte (oszczędność wysokości) */
.hero-ksef-strony p { display: grid; align-content: start; gap: 0; margin: 0; }
.hero-ksef-strony small { font-size: var(--t); font-weight: 600; color: var(--tusz-2); }
.hero-ksef-strony em { display: block; height: 4px; margin-top: 6px; background: var(--papier-2); border-radius: 1px; }
.hero-ksef-strony em:first-of-type { width: 78%; }
.hero-ksef-strony em + em { width: 52%; }
.hero-ksef-kwoty p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 3px 0 2px; border-top: 1px solid var(--papier-2); }
.hero-ksef-kw { font: 500 var(--k)/1.25 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; display: inline-block; }
.hero-ksef-kwoty .hero-ksef-doz { border-top: 1.5px solid var(--tusz); padding-top: 5px; font-weight: 700; }
.hero-ksef-kwoty .hero-ksef-doz .hero-ksef-kw { padding-bottom: 3px; font-size: calc(var(--k) * 1.12); color: var(--druk); border-bottom: 3px double currentColor; }   /* podwójna kreska pod kwotą do zapłaty */
.hero-ksef-numer { display: grid; grid-template-columns: minmax(0, 1fr) var(--qr); align-items: end; gap: 10px; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--papier-2); }
.hero-ksef-numer-tekst { display: grid; gap: 2px; min-width: 0; }
.hero-ksef-numer small { font-size: var(--t); font-weight: 600; color: var(--tusz-2); }
.hero-ksef-kod { font: 500 var(--t)/1.4 var(--mono); letter-spacing: .02em; color: var(--tusz); }
.hero-ksef-kod .g { display: inline-block; white-space: nowrap; }
.hero-ksef-kod i { font-style: normal; }
.hero-ksef-qr { width: var(--qr); height: var(--qr); color: var(--tusz); }

/* pieczęć KSeF i przerywana linia „uprawnienie” */
.hero-ksef-ksef { grid-area: ksef; position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 14px 9px; background: var(--druk); color: #fff; border-radius: 2px; box-shadow: var(--cien-papieru); rotate: .5deg; }
.hero-ksef-ksef b { font: 800 var(--pieczec)/.9 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 84; letter-spacing: .012em; }
.hero-ksef-ksef span { font-size: var(--t); font-weight: 600; line-height: 1.3; text-align: right; }
.hero-ksef-upr { grid-area: upr; display: flex; align-items: stretch; gap: 12px; min-height: 24px; padding-left: 24px; }
.hero-ksef-upr i { border-left: 2px dashed var(--tx-3); }
.hero-ksef-upr span { align-self: center; font-size: var(--t); color: var(--tx-2); }

/* biuro rachunkowe */
.hero-ksef-biuro { grid-area: biuro; position: relative; z-index: 1; padding: 10px 14px 8px; background: var(--papier); color: var(--tusz); border-radius: 2px; box-shadow: var(--cien-papieru); rotate: .4deg; font-size: var(--t); line-height: 1.35; }
.hero-ksef-biuro-t { display: grid; gap: 1px; margin: 0 0 5px; padding-bottom: 6px; border-bottom: 1.5px solid var(--druk-l); }
.hero-ksef-biuro-t b { font: 800 calc(var(--tyt) * .8)/.95 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 84; letter-spacing: .012em; }
.hero-ksef-biuro-t small { display: none; font-size: var(--t); color: var(--tusz-2); }
.hero-ksef-lista { margin: 0; padding: 0; list-style: none; }
.hero-ksef-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0 2px; border-top: 1px solid var(--papier-2); font-weight: 600; }
.hero-ksef-lista li:first-child { border-top: 0; }
.hero-ksef-lista .nowy { margin-inline: -14px; padding-inline: 14px; background: rgba(181, 50, 31, .09); }   /* pole, do którego ląduje faktura, jest zaznaczone od początku */
.hero-ksef-razem { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 5px 0 2px; border-top: 1.5px solid var(--tusz); font-weight: 700; }
.hero-ksef-razem .hero-ksef-kw { padding-bottom: 3px; border-bottom: 3px double currentColor; }
.hero-ksef-przyklad { grid-area: przyklad; font-size: 14px; line-height: 1.3; color: var(--tx-3); }

/* kwota faktury w locie: kopia „Do zapłaty” na kartce papieru (tworzy ją hero.js tylko wtedy, gdy gra ruch) */
.hero-ksef-lot { --tlo: 1; position: absolute; left: 0; top: 0; z-index: 6; visibility: hidden; pointer-events: none; font: 500 var(--k)/1.25 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; color: var(--druk); will-change: transform; }
.hero-ksef-lot::before { content: ""; position: absolute; inset: -.3em -.55em; z-index: -1; background: var(--papier); border-radius: 2px; opacity: var(--tlo); box-shadow: 0 20px 34px -14px rgba(0, 0, 0, .65), 0 5px 12px -5px rgba(0, 0, 0, .5); }

/* przed startem ruchu (JavaScript działa i ruch jest dozwolony) elementy ruchome są niewidoczne od pierwszej klatki, bez migotania gotowego druku;
   hero.js nakłada własne stany początkowe i dopisuje klasę .gra, a po 3 s ta zasłona sama znika, gdyby skrypt się nie wczytał */
@keyframes hero-ksef-awaryjnie { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-ksef:not(.gra) :is(.hero-ksef-kod i, .hero-ksef-ksef, .hero-ksef-qr, .hero-ksef-upr i, .hero-ksef-upr span, .hero-ksef-lista .nowy > *, .hero-ksef-razem .hero-ksef-kw) { opacity: 0; animation: hero-ksef-awaryjnie 0s linear 3s forwards; }
}

@media (max-width: 349px) {
  .hero-ksef { --tyt: 26px; --pieczec: 30px; --qr: 52px; }
  .hero-ksef-faktura, .hero-ksef-biuro { padding-inline: 12px; }
  .hero-ksef-lista .nowy { margin-inline: -12px; padding-inline: 12px; }
}

/* kolumna hero w przedziale 1001–1239 px jest za wąska na dwie kolumny druku: zostaje układ jak na telefonie, bez wyjścia poza kolumnę */
@media (min-width: 1001px) and (max-width: 1239px) {
  .hero-ksef-plansza { margin-inline: 0; padding: 20px; }
}

/* tablet i komputer: faktura po lewej, po prawej pieczęć, linia i karta biura */
@media (min-width: 761px) and (max-width: 1000px), (min-width: 1240px) {
  .hero-ksef { --tyt: 30px; --pieczec: 40px; --qr: 64px; }
  .hero-ksef-plansza { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "faktura ksef" "faktura upr" "faktura biuro" "przyklad przyklad"; column-gap: 20px; row-gap: 0;
    margin-inline: 0; padding: 26px; }
  .hero-ksef-faktura { padding: 16px 16px 14px; }
  .hero-ksef-gora { padding-bottom: 10px; margin-bottom: 12px; }
  .hero-ksef-strony { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .hero-ksef-kwoty p { padding: 6px 0 5px; }
  .hero-ksef-kwoty .hero-ksef-doz { padding-top: 8px; }
  .hero-ksef-numer { margin-top: 10px; padding-top: 10px; }
  .hero-ksef-ksef { align-self: start; flex-direction: column; align-items: flex-start; padding: 12px 16px 13px; }
  .hero-ksef-ksef span { text-align: left; }
  .hero-ksef-upr { min-height: 44px; padding-left: 28px; }
  .hero-ksef-biuro { align-self: start; padding: 14px 16px 12px; }
  .hero-ksef-biuro-t { gap: 5px; margin-bottom: 8px; padding-bottom: 8px; }
  .hero-ksef-biuro-t small { display: block; }
  .hero-ksef-lista li { padding: 6px 0 5px; }
  .hero-ksef-lista .nowy { margin-inline: -16px; padding-inline: 16px; }
  .hero-ksef-razem { padding: 8px 0 3px; }
  .hero-ksef-przyklad { margin-top: 16px; }
}
@media (min-width: 1240px) {
  .hero-ksef { --t: calc(14 * var(--p)); --k: calc(16 * var(--p)); --tyt: calc(34 * var(--p)); --pieczec: calc(44 * var(--p)); --qr: calc(76 * var(--p)); }
  .hero-ksef-plansza { column-gap: calc(22 * var(--p)); padding: calc(28 * var(--p)); }
  .hero-ksef-faktura { padding: calc(18 * var(--p)) calc(18 * var(--p)) calc(16 * var(--p)); }
  .hero-ksef-ksef { padding: calc(14 * var(--p)) calc(16 * var(--p)) calc(15 * var(--p)); }
  .hero-ksef-biuro { padding: calc(14 * var(--p)) calc(16 * var(--p)) calc(12 * var(--p)); }
  .hero-ksef-biuro-t { gap: calc(5 * var(--p)); }
  .hero-ksef-lista .nowy { margin-inline: calc(-16 * var(--p)); padding-inline: calc(16 * var(--p)); }
  .hero-ksef-przyklad { font-size: calc(14 * var(--p)); }
}