@import url("../ksiegi-rachunkowe/hero-wspolne.css?v=5");

/* KPiR: strona księgi z trzema wpisami i trzema wierszami podsumowania (Suma strony, Przeniesienie z poprzedniej strony, Razem od początku roku); kolumny 9 i 16.
   Trzy układy według szerokości planszy: szeroki (komputer), zwarty (telefon ≥ 390 px), wąski (360 i 320 px: opis nad kwotą). */
.hero-kpir-i-ryczalt { --kol: calc(6.1 * var(--hk-k)); --kol16: calc(var(--kol) + 9px); }
.hero-kpir-i-ryczalt .hk-druk { rotate: .35deg; }
.hero-kpir-i-ryczalt .hk-gora { flex-wrap: wrap; row-gap: .25em; }
.hero-kpir-i-ryczalt .hk-kt { display: grid; }
.hero-kpir-i-ryczalt .hk-w { display: grid; grid-template-columns: minmax(0, 1fr) var(--kol) var(--kol16); column-gap: 8px; align-items: baseline; padding-block: .5em; border-top: 1px solid var(--papier-2); }
.hero-kpir-i-ryczalt .hk-opis { min-width: 0; line-height: 1.2; }
.hero-kpir-i-ryczalt .hk-c9 { grid-column: 2; justify-self: end; text-align: right; }
.hero-kpir-i-ryczalt .hk-c16 { grid-column: 3; justify-self: stretch; text-align: right; padding-left: 8px; border-left: 1px solid var(--papier-2); }
.hero-kpir-i-ryczalt .hk-glowa { align-items: end; padding-block: 0 .45em; border-top: 0; font-size: var(--hk-s); line-height: 1.15; color: var(--tusz-2); }
.hero-kpir-i-ryczalt .hk-glowa .hk-opis { align-self: end; }
.hero-kpir-i-ryczalt .hk-krotka { display: none; }
.hero-kpir-i-ryczalt .hk-numery { padding-block: .3em; border-block: 1.5px solid var(--druk-l); font: 500 var(--hk-s)/1 var(--mono); color: var(--druk); }
.hero-kpir-i-ryczalt .hk-lp { margin-right: .5em; font: 500 var(--hk-s)/1 var(--mono); font-style: normal; color: var(--tusz-2); }
.hero-kpir-i-ryczalt .hk-dow { display: block; margin-top: .2em; font: 500 var(--hk-s)/1 var(--mono); color: var(--tusz-2); }
.hero-kpir-i-ryczalt .hk-suma { padding-block: .4em .5em; }
.hero-kpir-i-ryczalt .hk-suma .hk-opis { font-size: var(--hk-s); font-weight: 600; color: var(--tusz); }
.hero-kpir-i-ryczalt .hk-pierwsza, .hero-kpir-i-ryczalt .hk-razem { border-top: 1.5px solid var(--tusz); }

/* zwarty układ (telefon ≥ 390 px): bez nagłówka opisu i numerów (numer kolumny przed jej nazwą), nazwa księgi pod tytułem, długie opisy nad kwotami */
@container (max-width: 499px) {
  .hero-kpir-i-ryczalt .hk-nazwa { order: 3; flex-basis: 100%; }
  .hero-kpir-i-ryczalt .hk-pelna, .hero-kpir-i-ryczalt .hk-dow, .hero-kpir-i-ryczalt .hk-numery, .hero-kpir-i-ryczalt .hk-glowa .hk-opis { display: none; }
  .hero-kpir-i-ryczalt .hk-krotka { display: inline; }
  .hero-kpir-i-ryczalt .hk-glowa .hk-c9::before, .hero-kpir-i-ryczalt .hk-glowa .hk-c16::before { margin-right: .45em; font: 500 var(--hk-s)/1 var(--mono); color: var(--druk); }
  .hero-kpir-i-ryczalt .hk-glowa .hk-c9::before { content: "9"; }
  .hero-kpir-i-ryczalt .hk-glowa .hk-c16::before { content: "16"; }
  .hero-kpir-i-ryczalt .hk-w { padding-block: .4em; }
  .hero-kpir-i-ryczalt .hk-w:not(.hk-glowa) .hk-opis { font-size: var(--hk-s); }
  .hero-kpir-i-ryczalt .hk-opis2 { grid-column: 1 / 3; }
  .hero-kpir-i-ryczalt .hk-suma .hk-opis { grid-column: 1 / -1; }
  .hero-kpir-i-ryczalt .hk-suma .hk-kw { margin-top: .1em; }
}
/* wąski układ (360 i 320 px): opis nad kwotą (poza wpisami 2 i 3, których opis mieści się obok kwoty); na 320 px bez nazwy księgi pod tytułem */
@container (max-width: 319px) {
  .hero-kpir-i-ryczalt .hk-druk { --hk-h: 25px; }
  .hero-kpir-i-ryczalt .hk-w { padding-block: .35em; }
  .hero-kpir-i-ryczalt .hk-w:not(.hk-glowa):not(.hk-e2) .hk-opis { grid-column: 1 / -1; }
  .hero-kpir-i-ryczalt .hk-w:not(.hk-glowa):not(.hk-e2) .hk-kw { margin-top: .1em; }
}
@container (max-width: 279px) {
  .hero-kpir-i-ryczalt .hk-nazwa { display: none; }
}
@media (max-width: 520px) {
  .hero-kpir-i-ryczalt .hk-plansza { gap: 10px; padding: 10px; }
  .hero-kpir-i-ryczalt .hk-gora { padding-bottom: .4em; margin-bottom: .45em; }
}

/* otwarcie: paski dokumentów (efemeryczne kopie z hero.js, aria-hidden) wpadają z góry planszy do wierszy; kwota paska ląduje dokładnie nad polem kwoty */
.hero-kpir-i-ryczalt .hk-pasek { --tlo: 1; position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: baseline; gap: 1.1em; padding: .45em .75em; visibility: hidden; pointer-events: none;
  font: 500 var(--hk-k)/1.25 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; color: var(--tusz); will-change: transform; }
.hero-kpir-i-ryczalt .hk-pasek::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--papier); border-radius: 2px; opacity: var(--tlo);
  box-shadow: 0 0 0 1px rgba(12, 24, 37, .14), 0 18px 30px -14px rgba(0, 0, 0, .65), 0 5px 12px -5px rgba(0, 0, 0, .5); }
.hero-kpir-i-ryczalt .hk-pasek-dow { font-size: var(--hk-s); color: var(--tusz-2); }