/* Mikrokoncept strony: druk na planszy z siatką milimetrową (jak scena miesiąca i „Zmiana biura”), papier, żywe cyfry.
   Plik wygenerowany przez narzedzia/miks2/hero-kadry-buduj.mjs. Rozmiary: tekst ≥ 14 px, kwoty ≥ 16 px; od 1001 px skala okna --p (wysoki.css), poniżej px. */
.hero-kadry-i-place { --t: 14.5px; --k: 16px; --kod: 30px; --w: 26px; position: relative; margin: 0; min-width: 0; }
@media (max-width: 1000px) { .hero-kadry-i-place { max-width: 640px; } }
@media (min-width: 1001px) { .hero-kadry-i-place { --t: calc(15 * var(--p)); --k: calc(17 * var(--p)); --kod: calc(34 * var(--p)); --w: calc(30 * var(--p)); } }
.hero-kadry-i-place-plansza { container: hero / inline-size; padding: clamp(14px, 2.4vw, 28px) clamp(12px, 2.4vw, 26px); border: 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; }
.hero-kadry-i-place-papier { position: relative; padding: clamp(12px, 2vw, 22px) clamp(12px, 2.2vw, 24px) clamp(10px, 1.8vw, 18px); background: var(--papier); color: var(--tusz); border-radius: 2px; box-shadow: var(--cien-papieru);
  rotate: -.45deg; font: 500 var(--t)/1.3 var(--sans); }
.hero-kadry-i-place-gora { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2em .9em; padding-bottom: .6em; margin-bottom: .2em; border-bottom: 1.5px solid var(--druk-l); }
.hero-kadry-i-place-kod { font: 800 var(--kod)/1 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 84; letter-spacing: -.005em; color: var(--tusz); }
.hero-kadry-i-place-nazwa { color: var(--tusz-2); }
.hero-kadry-i-place-okres { margin-left: auto; font: 500 var(--t)/1 var(--mono); color: var(--tusz-2); white-space: nowrap; }
.hero-kadry-i-place-kw { display: inline-block; font: 500 var(--k)/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; }
.hero-kadry-i-place-r { text-align: right; white-space: nowrap; }
.hero-kadry-i-place-wynik { display: flex; align-items: baseline; gap: .8em; margin-top: .1em; padding-top: .5em; border-top: 1.5px solid var(--tusz); }
.hero-kadry-i-place-opis { font-weight: 650; min-width: 0; }
.hero-kadry-i-place-wynik .hero-kadry-i-place-kw { margin-left: auto; color: var(--druk); font-size: var(--w); line-height: 1.1; }
.hero-kadry-i-place-przyklad { margin: 10px 0 0; font-size: 14px; line-height: 1.3; color: var(--tx-3); }
.hero-kadry-i-place table { width: 100%; border-collapse: collapse; }
.hero-kadry-i-place th, .hero-kadry-i-place td { padding: .3em 0 .26em; text-align: left; vertical-align: baseline; font-weight: 500; border-top: 1px solid var(--papier-2); }
.hero-kadry-i-place td.hero-kadry-i-place-r { padding-left: .55em; }
.hero-kadry-i-place th.hero-kadry-i-place-r, .hero-kadry-i-place td.hero-kadry-i-place-r { text-align: right; }
@media (max-width: 420px) { .hero-kadry-i-place-plansza { padding: 10px 8px; } .hero-kadry-i-place-papier { padding: 11px 10px 10px; } }
.hero-kadry-i-place b { font: 500 1em/1 var(--mono); color: var(--druk); }
/* ruch: do pierwszego odsłonięcia kwoty ukrywa maska; hero.js nakłada ją inline (gsap.set), zdejmuje tę klasę i dopiero potem gra oś; zdjęcie awaryjne po 5 s w hero.html */
.hero-kadry-i-place.hero-kadry-i-place-anim [data-hk] { clip-path: inset(0 100% 0 0); }
.hero-kadry-i-place-lot { position: absolute; left: 0; top: 0; z-index: 3; margin: 0; pointer-events: none; font: 500 var(--k)/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; color: var(--druk); will-change: transform; }

.hero-kadry-i-place-tab { table-layout: fixed; }
.hero-kadry-i-place-cu, .hero-kadry-i-place-cp { width: 6.4em; }
.hero-kadry-i-place-tab th { padding-right: .6em; color: var(--tusz); }
.hero-kadry-i-place-tab tr:first-child th, .hero-kadry-i-place-tab tr:first-child td { border-top: 0; }
.hero-kadry-i-place-pod th, .hero-kadry-i-place-pod td { color: var(--tusz-2); font-weight: 650; padding-top: .55em; border-top: 1.5px solid var(--tusz); }
.hero-kadry-i-place-suma th, .hero-kadry-i-place-suma td { border-top: 1.5px solid var(--tusz); font-weight: 650; }
.hero-kadry-i-place-suma .hero-kadry-i-place-kw { font-weight: 600; }
.hero-kadry-i-place-przelew { display: flex; align-items: baseline; gap: .8em; margin-top: .45em; padding-top: .4em; border-top: 1.5px dashed var(--tusz-2); }
.hero-kadry-i-place-przelew .hero-kadry-i-place-kw { margin-left: auto; }
@container hero (max-width: 329px) { .hero-kadry-i-place-pl, .hero-kadry-i-place-cp { display: none; } }
@container hero (max-width: 340px) { .hero-kadry-i-place-nazwa { display: none; } }