/* 05 Prawo karne skarbowe — kadry grafik, scena otwarcia telefonu i układ „Twoja sytuacja” (C2 145 05, wartości 1:1).
   Scena otwarcia (< 64em) — wzory MC prototypu (szerokość w, wysokość okna vh):
     c = clamp((800 − vh) / 133, 0, 1); L(a, b) = a + (b − a)·c
     H0  = L(min(300, max(210, .66w)), min(270, max(196, .6w))); H = H0 + 60     wysokość pasa akwareli
     top = −44 · c · clamp((w − 320) / 40, 0, 1)
     txt = L(.7, .62) · H0 + 44; pad = txt + top; foot = txt − 30; avail = foot − .1H
     tło: S = max(.95w, min(1.3w, avail / .3225)), x = round(.57w − .6S), y = round(foot − .6525S)
     maska: poziomo L(0, 2)% → L(24, 28)%, pionowo 10% → min(90%, txt − 36) → min(100%, txt + 2)
   c z arytmetyki typowanej (dzielenie długości); bez niej c = 0 (układ dla okna ≥ 800 px). */
.c2-sp-hero { --c: 0; --cw: 0; }
@supports (width: calc(1px * (2px / 1px))) {
  .c2-sp-hero { --c: clamp(0, (800px - 100svh) / 133px, 1); --cw: clamp(0, (100cqi - 320px) / 40px, 1); }
}
.c2-sp-hero {
  --mh-A: min(300px, max(210px, 66cqi));
  --mh-B: min(270px, max(196px, 60cqi));
  --mh-H0: calc(var(--mh-A) + (var(--mh-B) - var(--mh-A)) * var(--c));
  --mh-t: calc(-44px * var(--c) * var(--cw));
  --mh-txt: calc((.7 - .08 * var(--c)) * var(--mh-H0) + 44px);
  --mh-foot: calc(var(--mh-txt) - 30px);
  --mh-S: max(95cqi, min(130cqi, calc((var(--mh-foot) - .1 * (var(--mh-H0) + 60px)) / .3225)));
  --mh-h: round(calc(var(--mh-H0) + 60px), 1px);
  --mh-top: round(var(--mh-t), 1px);
  --mh-pad: round(calc(var(--mh-txt) + var(--mh-t)), 1px);
  --mh-s: round(var(--mh-S), 1px);
  --mh-ar: .75;
  --mh-bgx: round(calc(57cqi - .6 * var(--mh-S)), 1px);
  --mh-bgy: round(calc(var(--mh-foot) - .6525 * var(--mh-S)), 1px);
  --mh-mask: linear-gradient(90deg, transparent 0, transparent calc(2% * var(--c)), #000 calc(24% + 4% * var(--c))),
    linear-gradient(180deg, transparent 0, #000 10%, #000 min(90%, calc(var(--mh-txt) - 36px)), transparent min(100%, calc(var(--mh-txt) + 2px)));
  --mh-crumb: round(calc(14px - 6px * var(--c)), 1px);
  --mh-hook: round(calc(14px - 4px * var(--c)), 1px);
  --mh-lead: round(calc(18px - 4px * var(--c)), 1px);
  --mh-aud: round(calc(10px - 2px * var(--c)), 1px);
  --mh-cta: round(calc(22px - 4px * var(--c)), 1px);
  --hero-pos: 60% 50%;
  --hero-m1: 74%;
  --hero-m2: 98%;
}

/* Przerywnik — kadr crop() prototypu (obraz 1448 × 1086):
   telefon: pas H = round(clamp(320, .86w, 350)), obraz w górnych 60% (bh); gH = max(bh / .4, .75w), gW = gH / .75,
            x = max(w − gW, min(0, w/2 − .61 gW)), y = max(bh − gH, min(0, bh/2 − .67 gH));
   komputer: warstwa od L = 42% (38% od 1280 px) szerokości, bw = (1 − L)w, H = 320 (360);
            gH = max(H / .54, .75 bw), x = max(bw − gW, min(0, bw/2 − .6 gW)), y = max(H − gH, min(0, H/2 − .66 gH)). */
.c2-sp-pas {
  --pas-h-m: round(clamp(320px, 86cqi, 350px), 1px);
  --pas-ih-m: round(calc(var(--pas-h-m) * .6), 1px);
  --pas-mask-m: linear-gradient(180deg, #000 0, #000 50%, rgba(0, 0, 0, .45) 76%, transparent 100%), linear-gradient(90deg, transparent 0, #000 22%);
  --pas-pb-m: 24px;
}
/* ramka obrazu przycięta do warstwy (nic poza ekranem): skala z wysokości gH (cover), przesunięcie object-position */
.c2 .c2-sp-pas__img img {
  --lw: 100cqi;
  --gh: max(calc(var(--pas-ih-m) / .4), 75cqi);
  --gw: calc(var(--gh) / .75);
  --x: round(max(calc(100cqi - var(--gw)), min(0px, calc(50cqi - .61 * var(--gw)))), 1px);
  left: max(0px, var(--x));
  width: calc(min(var(--lw), var(--x) + var(--gw)) - max(0px, var(--x)));
  height: round(var(--gh), 1px);
  top: round(max(calc(var(--pas-ih-m) - var(--gh)), min(0px, calc(var(--pas-ih-m) / 2 - .67 * var(--gh)))), 1px);
  object-fit: cover;
  object-position: calc(var(--x) - max(0px, var(--x))) 0;
}
@media (min-width: 64em) {
  .c2-sp-pas { --pas-l: 42%; --bw: 58cqi; --ph: 320px; }
  .c2 .c2-sp-pas__img img {
    --lw: var(--bw);
    --gh: max(calc(var(--ph) / .54), calc(var(--bw) * .75));
    --x: round(max(calc(var(--bw) - var(--gw)), min(0px, calc(var(--bw) / 2 - .6 * var(--gw)))), 1px);
    top: round(max(calc(var(--ph) - var(--gh)), min(0px, calc(var(--ph) / 2 - .66 * var(--gh)))), 1px);
  }
}
@media (min-width: 80em) { .c2-sp-pas { --pas-l: 38%; --bw: 62cqi; --ph: 360px; } }

/* Twoja sytuacja: 2 × 2 (odstęp wierszy 52 px ×1,12), na górze karty 22 px, opis do 580 px */
.c2-sp-etapy { --etapy-cols: 2; }
@media (min-width: 64em) {
  .c2-sp-etap, .c2-sp-etap:last-child { padding-top: calc(22px + 22 * var(--ks)); }
  .c2-sp-etap__d { max-width: calc(36.25rem + 580 * var(--kt)); }
}

/* Powiązane: miniatury 81E/t (01 — 50% 45% / 150%, 07 — 50% 50% / 150%) */
.c2-sp-rel__thumb--01 { --rel-x: 50%; --rel-y: .45; --rel-s: 1.5; --rel-ar: .666667; }
.c2-sp-rel__thumb--07 { --rel-x: 50%; --rel-y: .5; --rel-s: 1.5; --rel-ar: 1; }