/* 04 Prawo podatkowe — kadry grafik i scena otwarcia telefonu (C2 145 04, wartości 1:1).
   Scena otwarcia (< 64em): prototyp liczy ją w JS z szerokości w i wysokości okna vh (MC):
     c = clamp((800 − vh) / 133, 0, 1) — przy niskim oknie scena się zmniejsza; L(a, b) = a + (b − a)·c
     H   = L(min(300, max(210, .66w)), min(270, max(196, .6w)))      wysokość pasa akwareli
     top = −44 · c · clamp((w − 320) / 40, 0, 1)                      przesunięcie pasa
     pad = L(.7, .62) · H + top − 16                                 odstęp etykiety i H1 od góry sceny
     tło: szerokość 1,3w, x = round(.115w), y = round(pad − top − 24 − .0594w − .481w)
     maska: poziomo L(8, 14)% → L(46, 50)%, pionowo 12% → v1 = min(92%, pad − top − 16) → max(v1 + 16%, L(84, 80)%)
     odstępy: ścieżka L(14, 8), hasło L(14, 10), lead L(18, 14), adresaci L(10, 8), CTA L(22, 18)
   Tu te same wzory: c z arytmetyki typowanej (dzielenie długości), dostępnej w nowych przeglądarkach; bez niej
   c = 0 (układ zaprojektowany 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-H: 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-H) - 16px);
  --mh-h: round(var(--mh-H), 1px);
  --mh-top: round(var(--mh-t), 1px);
  --mh-pad: round(calc(var(--mh-txt) + var(--mh-t)), 1px);
  --mh-s: round(130cqi, 1px);
  --mh-bgx: round(11.5cqi, 1px);
  --mh-bgy: round(calc(var(--mh-txt) - 24px - 54.0367cqi), 1px);
  --mh-v1: min(92%, calc(var(--mh-txt) - 16px));
  --mh-mask: linear-gradient(90deg, transparent 0, transparent calc(8% + 6% * var(--c)), #000 calc(46% + 4% * var(--c))),
    linear-gradient(180deg, transparent 0, #000 12%, #000 var(--mh-v1), transparent max(calc(var(--mh-v1) + 16%), calc(84% - 4% * var(--c))));
  --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);
  /* komputer: kadr akwareli i maska pionowa */
  --hero-pos: 6% 52%;
  --hero-m1: 58%;
  --hero-m2: 97%;
}

/* Przerywnik: telefon — pas round(clamp(304, .82w, 330)), obraz w górnych 56% (auto 165%, 100% 74%);
   komputer — warstwa od 32% szerokości, obraz auto 182%, 50% 39%. */
.c2-sp-pas {
  --pas-h-m: round(clamp(304px, 82cqi, 330px), 1px);
  --pas-ih-m: round(calc(var(--pas-h-m) * .56), 1px);
  --pas-mask-m: linear-gradient(180deg, #000 0, #000 44%, rgba(0, 0, 0, .45) 70%, transparent 100%), linear-gradient(90deg, transparent 0, #000 22%);
  --pas-pb-m: 22px;
}
.c2-sp-pas { --pas-lw: 100cqi; --pas-lh: var(--pas-ih-m); --pas-k: 1.65; --pas-x: 1; --pas-y: .74; }
@media (min-width: 64em) { .c2-sp-pas { --pas-l: 32%; --pas-lw: 68cqi; --pas-lh: 320px; --pas-k: 1.82; --pas-x: .5; --pas-y: .39; } }
@media (min-width: 80em) { .c2-sp-pas { --pas-lh: 360px; } }
/* tło auto K% (wysokości warstwy), X% Y%: ramka obrazu przycięta do warstwy, skala z wysokości (cover), przesunięcie object-position */
.c2 .c2-sp-pas__img img {
  --dh: calc(var(--pas-lh) * var(--pas-k));
  --dw: calc(var(--dh) * 1.5);
  --ox: calc((var(--pas-lw) - var(--dw)) * var(--pas-x));
  left: max(0px, var(--ox));
  width: calc(min(var(--pas-lw), var(--ox) + var(--dw)) - max(0px, var(--ox)));
  top: calc((var(--pas-lh) - var(--dh)) * var(--pas-y));
  height: var(--dh);
  object-fit: cover;
  object-position: calc(var(--ox) - max(0px, var(--ox))) 0;
}

/* Powiązane: miniatury 81E/t (02 — 62% 58% / 170%, 06 — 50% 55% / 150%) */
.c2-sp-rel__thumb--02 { --rel-x: 62%; --rel-y: .58; --rel-s: 1.7; --rel-ar: .75; }
.c2-sp-rel__thumb--06 { --rel-x: 50%; --rel-y: .55; --rel-s: 1.5; --rel-ar: 1; }