/* Hero podstrony „Terminy podatkowe i ZUS” (runda miks2): kartka kalendarza na papierze, na planszy z siatką jak w scenie „Zmiana biura”.
   Treść z rysunku SVG źródła („Każdy miesiąc”: do 15., do 20., do 25.) i ze zdania o przesuwaniu terminu podatkowego; pieczątki na dniach terminów, a „do 25.” (25.10.2026 to niedziela) przechodzi na poniedziałek 26.
   Tokeny strony głównej; od 1001 px skala okna z wysoki.css (--p). HTML jest stanem końcowym: bez JavaScriptu i przy ograniczonym ruchu widać od razu wszystkie pieczątki. */

.hero-terminy { --ht-t: 14.5px; --ht-d: 16px; --ht-h: clamp(28px, 7.4vw, 32px); --ht-kom: 31px; --ht-pr: 27px; }
.hero-terminy-plansza { position: relative; padding: clamp(8px, 2.4vw, 22px); 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-terminy-kartka { position: relative; max-width: 620px; margin-inline: auto; padding: 24px clamp(10px, 2vw, 20px) 8px; background: var(--papier); color: var(--tusz); border-radius: 2px; box-shadow: var(--cien-papieru); rotate: -.5deg; }
.hero-terminy-kartka::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 17px;   /* dziurki bloku, z którego zerwano kartkę */
  background: radial-gradient(circle at 14px 8.5px, var(--noc) 0 3.4px, transparent 3.8px) 0 0 / 28px 17px space no-repeat; }
.hero-terminy-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-terminy-tytul { font: 800 var(--ht-h)/.95 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 84; letter-spacing: .012em; color: var(--tusz); }
.hero-terminy-okres { font: 500 var(--ht-t)/1 var(--mono); color: var(--tusz-2); white-space: nowrap; }
.hero-terminy-tydzien, .hero-terminy-dni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hero-terminy-tydzien { margin: 8px 0 3px; }
.hero-terminy-tydzien li { text-align: center; font-size: var(--ht-t); font-weight: 650; line-height: 1.2; color: var(--tusz-2); }
.hero-terminy-dni { border-top: 1px solid var(--papier-2); }
.hero-terminy-dzien, .hero-terminy-pusty { position: relative; display: grid; place-items: center; height: var(--ht-kom); border-right: 1px solid var(--papier-2); border-bottom: 1px solid var(--papier-2); }
.hero-terminy-dni > :nth-child(7n + 1) { border-left: 1px solid var(--papier-2); }
.hero-terminy-ws { background: rgba(12, 24, 37, .055); }
.hero-terminy-n { position: relative; z-index: 1; font: 500 var(--ht-d)/1 var(--mono); font-variant-numeric: tabular-nums; }
.hero-terminy-pieczec { position: absolute; left: 50%; top: 50%; width: min(var(--ht-pr), 88%); aspect-ratio: 1; translate: -50% -50%; border: 2px solid var(--druk); border-radius: 50%; }
.hero-terminy-pieczec::after { content: ""; position: absolute; inset: 2.5px; border: 1.25px solid var(--druk-l); border-radius: 50%; }   /* podwójny obrys jak odcisk pieczątki */
.hero-terminy-skreslenie { position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - .75px), var(--druk-l) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)); }
.hero-terminy-wykaz { margin-top: 8px; border-top: 1px solid var(--papier-2); }
.hero-terminy-wiersz { display: grid; grid-template-columns: 3.8em minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 4px 0 5px; border-bottom: 1px solid var(--papier-2); font-size: var(--ht-t); line-height: 1.3; }
.hero-terminy-wiersz b { font: 600 var(--ht-t)/1.3 var(--mono); color: var(--druk); }
.hero-terminy-co span { white-space: nowrap; }
.hero-terminy-co span:first-child::after { content: ";"; }                                   /* pozycje jednego terminu rozdziela średnik (w pozycjach są przecinki), bez ozdobnych znaków */
.hero-terminy-uwaga { margin-top: 7px; font-size: var(--ht-t); line-height: 1.25; color: var(--tusz-2); }
.hero-terminy-podpis { margin-top: 6px; font-size: 14px; line-height: 1.2; color: var(--tx-3); }

/* ruch (tylko gdy dozwolony): pierwszą klatkę z ukrytymi pieczątkami i maskami ustawia CSS, żeby stan końcowy nie mignął przed startem;
   gdy hero.js ruszy, bierze stan na siebie (klasa -jazda) i po ruchu dodaje -gotowe; gdyby skrypt nie ruszył wcale, po 6 s wszystko pokazuje się samo */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-terminy:not(.hero-terminy-jazda, .hero-terminy-gotowe) .hero-terminy-pieczec { opacity: 0; animation: hero-terminy-awaria .01s 6s forwards; }
  html.js .hero-terminy:not(.hero-terminy-jazda, .hero-terminy-gotowe) :is(.hero-terminy-skreslenie, .hero-terminy-wiersz, .hero-terminy-uwaga) { clip-path: inset(0 100% 0 0); animation: hero-terminy-awaria-maska .01s 6s forwards; }
  html.js .hero-terminy-jazda .hero-terminy-pieczec { will-change: transform, opacity; }
}
@keyframes hero-terminy-awaria { to { opacity: 1; } }
@keyframes hero-terminy-awaria-maska { to { clip-path: inset(0 0 0 0); } }

/* najwęższe telefony (320): niższe kratki, hero zostaje w limicie wysokości */
@media (max-width: 340px) { .hero-terminy { --ht-kom: 29px; --ht-pr: 26px; } }

/* tablet: większe kratki */
@media (min-width: 641px) {
  .hero-terminy { --ht-kom: 40px; --ht-pr: 34px; --ht-h: 38px; }
  .hero-terminy-kartka { padding-top: 26px; }
}

/* komputer: skala okna; w wykazie każdy termin w jednej linii */
@media (min-width: 1001px) {
  .hero-terminy { --ht-t: calc(15 * var(--p)); --ht-d: calc(17 * var(--p)); --ht-h: calc(42 * var(--p)); --ht-kom: calc(38 * var(--p)); --ht-pr: calc(33 * var(--p)); }
  .hero-terminy-kartka { max-width: calc(560 * var(--p)); }
  .hero-terminy-plansza { padding: calc(24 * var(--p)); }
  .hero-terminy-wiersz { padding-block: calc(6 * var(--p)) calc(7 * var(--p)); column-gap: calc(16 * var(--p)); }
  .hero-terminy-uwaga, .hero-terminy-wykaz { margin-top: calc(10 * var(--p)); }
  .hero-terminy-podpis { font-size: calc(14 * var(--p)); margin-top: calc(10 * var(--p)); }
}