/* Hero podstrony „Zmiana biura rachunkowego”: przeniesienie salda, miniatura sceny „Zmiana biura” ze strony głównej (runda miks2).
   Dwie strony księgi (KPiR) na planszy z siatką: „Razem od początku roku” poprzedniego biura (152 700,70) lecą na stronę Advertax i lądują jako „Przeniesienie z poprzedniej strony”.
   HTML stoi w stanie końcowym (bez JavaScriptu i przy ograniczonym ruchu widać od razu obie strony i zgodne kwoty); ruch dokłada hero.js.
   Tokeny ze strony głównej; rozmiary: --t (etykiety) ≥ 14 px, --k (kwoty) ≥ 16 px także na telefonie. Skala okna (--p) tylko od 1001 px.
   Układ wg szerokości figury (container hzb): od 560 px dwie strony obok siebie, poniżej jedna pod drugą (zwarta: poprzednia strona skrócona do nagłówka i kwoty „Razem”, żeby hero miało ok. 450 px). */

.hero-zmiana-biura-rachunkowego { --t: 14px; --k: 16px; --h: 30px; --pad: 14px; container: hzb / inline-size; }

.hero-zmiana-biura-rachunkowego .hzb-plansza { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; align-items: start; padding: 14px;
  border: 1px solid var(--linia); background-color: var(--noc);
  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; }
.hero-zmiana-biura-rachunkowego .hzb-strona { container: hzbs / inline-size; position: relative; z-index: 1; width: min(100%, 440px); padding: 10px var(--pad) 8px; font-size: var(--t); background: var(--papier); color: var(--tusz); border-radius: 2px; box-shadow: var(--cien-papieru); }
.hero-zmiana-biura-rachunkowego .hzb-stara { z-index: 2; rotate: -.5deg; }
.hero-zmiana-biura-rachunkowego .hzb-nowa { justify-self: end; rotate: .45deg; }

.hero-zmiana-biura-rachunkowego .hzb-gora { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding-bottom: 8px; border-bottom: 1.5px solid var(--druk-l); }
.hero-zmiana-biura-rachunkowego .hzb-tytul { font: 800 min(var(--h), 11.5cqw)/.95 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 84; letter-spacing: .012em; color: var(--tusz); white-space: nowrap; }
.hero-zmiana-biura-rachunkowego .hzb-nowa .hzb-tytul { color: var(--druk); }
.hero-zmiana-biura-rachunkowego .hzb-okres { font: 500 var(--t)/1 var(--mono); color: var(--tusz-2); white-space: nowrap; }
.hero-zmiana-biura-rachunkowego .hzb-form { flex: 1 1 100%; margin-top: 4px; font-size: var(--t); line-height: 1.3; color: var(--tusz-2); text-wrap: balance; }

/* wiersze: etykieta po lewej, kwota po prawej (pod kwotą w jednej kolumnie liczą się wszystkie wiersze strony) */
.hero-zmiana-biura-rachunkowego .hzb-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: .36em 0 .3em; border-bottom: 1px solid var(--papier-2); font-size: var(--t); line-height: 1.25; }
.hero-zmiana-biura-rachunkowego .hzb-wiersz > :last-child { justify-self: end; }
.hero-zmiana-biura-rachunkowego .hzb-glowa { padding-top: .6em; font-weight: 600; color: var(--tusz-2); border-bottom: 1.5px solid var(--tusz); }
.hero-zmiana-biura-rachunkowego .hzb-et { font-weight: 500; color: var(--tusz); text-wrap: balance; }
.hero-zmiana-biura-rachunkowego .hzb-wpis .hzb-et { font-weight: 400; }
.hero-zmiana-biura-rachunkowego .hzb-kw { display: inline-block; font: 500 var(--k)/1.25 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; }
.hero-zmiana-biura-rachunkowego .hzb-suma { border-top: 1.5px solid var(--tusz); }
.hero-zmiana-biura-rachunkowego .hzb-suma .hzb-et, .hero-zmiana-biura-rachunkowego .hzb-przen .hzb-et { font-weight: 600; }
.hero-zmiana-biura-rachunkowego .hzb-razem { border-bottom: 0; padding-top: .5em; padding-bottom: .26em; }
.hero-zmiana-biura-rachunkowego .hzb-razem .hzb-et { font-weight: 700; }
.hero-zmiana-biura-rachunkowego .hzb-razem .hzb-kw { padding-bottom: 3px; font-size: calc(var(--k) * 1.1); border-bottom: 3px double currentColor; }   /* podwójna kreska pod sumą, tylko pod kwotą, jak w księdze */
.hero-zmiana-biura-rachunkowego .hzb-nowa .hzb-razem .hzb-kw { color: var(--druk); }
.hero-zmiana-biura-rachunkowego .hzb-nowa .hzb-przen { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); background: rgba(181, 50, 31, .09); }   /* pole, w które ląduje kwota, jest zaznaczone od początku */
.hero-zmiana-biura-rachunkowego .hzb-przyklad { margin-top: 8px; font-size: 14px; line-height: 1.3; color: var(--tx-3); }

/* długie etykiety „Przeniesienie z poprzedniej strony” i „Razem od początku roku”: etykieta nad kwotą, dopóki etykieta i kwota nie mieszczą się w jednym wierszu
   (progi w em kontenera = --t, więc działają przy każdej skali okna; zmierzone: przeniesienie 24,35 em, razem 20,5 em) */
.hero-zmiana-biura-rachunkowego .hzb-wiersz.hzb-przen, .hero-zmiana-biura-rachunkowego .hzb-wiersz.hzb-razem { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
@container hzbs (min-width: 24.6em) {
  .hero-zmiana-biura-rachunkowego .hzb-wiersz.hzb-przen { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
}
@container hzbs (min-width: 20.8em) {
  .hero-zmiana-biura-rachunkowego .hzb-wiersz.hzb-razem { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
}

/* kwota „Razem” poprzedniego biura w locie: ten sam tekst co w komórce, na kartce papieru (tworzy ją hero.js, dopiero gdy gra ruch) */
.hero-zmiana-biura-rachunkowego .hzb-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-zmiana-biura-rachunkowego .hzb-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 pierwszym malowaniem (klasa js dodana w <head>) wartości, które drukuje ruch, są pod maską: bez błysku stanu końcowego; hero.js przejmuje je klasą hzb-gotowe.
   Gdyby skrypt się nie wczytał, po 3,5 s wszystko się odsłania (awaryjnie). Ograniczony ruch: nigdy nie ukrywamy. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-zmiana-biura-rachunkowego:not(.hzb-gotowe) :is(.hzb-nowa .hzb-wpis .hzb-kw, .hzb-nowa .hzb-suma .hzb-kw, .hzb-nowa .hzb-przen .hzb-kw, .hzb-nowa .hzb-razem .hzb-kw) { clip-path: inset(0 100% 0 0); animation: hzb-awaryjnie 0s 3.5s forwards; }
  @keyframes hzb-awaryjnie { to { clip-path: inset(0 0% 0 0); } }
}

/* figura węższa niż 560 px (telefon, okna 1001–1100 px): strony jedna pod drugą, zwarte; poprzednia strona to nagłówek i sama kwota „Razem od początku roku” (źródło lotu; jej wpis, suma i przeniesienie są tylko na wersji obok),
   druga strona bez powtórzonego opisu druku */
@container hzb (max-width: 559px) {
  .hero-zmiana-biura-rachunkowego .hzb-stara :is(.hzb-glowa, .hzb-wpis, .hzb-suma, .hzb-przen), .hero-zmiana-biura-rachunkowego .hzb-nowa .hzb-form { display: none; }
}

/* bardzo wąski telefon (okna do ok. 380 px): druga strona też bez nagłówka kolumn, ciaśniejsze wiersze i tytuł, żeby hero zostało zbliżone do 460 px */
@container hzb (max-width: 339px) {
  .hero-zmiana-biura-rachunkowego .hzb-nowa .hzb-glowa { display: none; }
  .hero-zmiana-biura-rachunkowego .hzb-wiersz { padding: .28em 0 .2em; }
  .hero-zmiana-biura-rachunkowego .hzb-razem { padding-top: .4em; }
  .hero-zmiana-biura-rachunkowego .hzb-tytul { font-size: min(26px, 11.5cqw); }
}

/* figura od 560 px (komputer, tablet): dwie strony obok siebie jak rozkładówka, Advertax o pół wiersza niżej, między nimi wolny pas na lot kwoty */
@container hzb (min-width: 560px) {
  .hero-zmiana-biura-rachunkowego .hzb-plansza { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 7cqw, 80px); row-gap: 0; padding: 22px 20px; }
  .hero-zmiana-biura-rachunkowego .hzb-strona { width: auto; }
  .hero-zmiana-biura-rachunkowego .hzb-nowa { justify-self: stretch; margin-top: 28px; }
}

@media (min-width: 1001px) {
  .hero-zmiana-biura-rachunkowego { --t: calc(14.5 * var(--p)); --k: calc(16.5 * var(--p)); --h: calc(30 * var(--p)); --pad: calc(14 * var(--p)); }
  .hero-zmiana-biura-rachunkowego .hzb-przyklad { font-size: calc(14 * var(--p)); }
}