/* ==========================================================================
   pricing.css – „Cennik stron internetowych" + 3 kafelki (Figma y 3010–4090)
   Wnętrze kafelka liczone przez --k  (telefon/tablet: 1px, desktop: --u),
   dzięki czemu jeden zestaw reguł obsługuje wszystkie rozdzielczości.
   ========================================================================== */

.pricing { --k: 1px; isolation: isolate; padding: 64px 20px 88px; overflow: clip; scroll-margin-top: 24px; }
.pricing__bg { position: absolute; inset: 0; z-index: -2; }
.pricing__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pricing__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0), #000); }
.pricing__lead { max-width: 34em; margin: 20px auto 0; }
.pricing .line-h { margin-top: 18px; }

.pricing__tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 420px; margin: 48px auto 0; }

/* ---------- kafelek ---------- */
.tile {
  position: relative; background: #000; border-radius: calc(15 * var(--k));
  padding: calc(11 * var(--k)) calc(28 * var(--k)) calc(44 * var(--k)) calc(26 * var(--k));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46), 0 4px 4px rgba(25, 25, 25, .25);   /* jasna krawędź + cień z Figmy */
}
.tile__icon { position: absolute; left: calc(28 * var(--k)); top: calc(25 * var(--k)); width: calc(20 * var(--k)); height: calc(20 * var(--k)); }
.tile__name {
  display: flex; align-items: center; min-height: calc(48 * var(--k)); max-width: calc(219 * var(--k)); margin-left: calc(33 * var(--k));
  font-weight: 600; font-size: max(13px, calc(15 * var(--k))); line-height: 1; letter-spacing: var(--ls-semi); text-transform: uppercase;
}
.tile__price { margin-top: calc(23.5 * var(--k)); font-weight: 600; font-size: max(28px, calc(36 * var(--k))); line-height: 1; letter-spacing: var(--ls-semi); white-space: nowrap; }
.tile__note { margin-top: calc(11.5 * var(--k)); color: var(--font-6); font-size: max(11px, calc(12 * var(--k))); line-height: 1; }
.tile__note--bold { font-weight: 700; }   /* w Figmie kafelki 2 i 3 mają Bold */
.tile__btn { width: 100%; height: calc(56 * var(--k)); min-height: 48px; border-radius: calc(12 * var(--k)); font-size: max(14px, calc(15 * var(--k))); line-height: 1; }
.tile__btn--1 { margin-top: calc(32 * var(--k)); }
.tile__btn--2 { margin-top: calc(15 * var(--k)); }
.tile__list-title { margin-top: calc(26 * var(--k)); font-weight: 600; font-size: max(13px, calc(14 * var(--k))); line-height: 1; letter-spacing: var(--ls-semi); }
.tile__list { display: grid; gap: calc(11 * var(--k)); margin-top: calc(11 * var(--k)); }

.feat { position: relative; display: flex; align-items: center; min-height: calc(23 * var(--k)); padding-left: calc(36 * var(--k)); }
.feat span { max-width: calc((var(--tw) + 8) * var(--k)); color: var(--font-4); font-size: max(12px, calc(13 * var(--k))); line-height: 1.1; }
.feat__dot { position: absolute; left: 0; top: 0; width: calc(23 * var(--k)); height: calc(23 * var(--k)); border-radius: 50%; background: var(--green); }  /* TYMCZASOWO: Ellipse 4 */
.feat.has-check .feat__dot::after {      /* TYMCZASOWO: ptaszek (Figma: „icon" 16.3×12) */
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(16.3 * var(--k)); height: calc(12.025 * var(--k));
  transform: translate(-50%, -50%); background: url("../assets/svg/check.svg") center / contain no-repeat;
}

/* obiekty 3D w kafelkach (PNG z obrotem wbudowanym w plik) */
.tile__obj { position: absolute; max-width: none; height: auto; pointer-events: none; }
.tile__obj--1 { right: calc(7 * var(--k));  top: calc(11 * var(--k)); width: calc(125 * var(--k)); }
.tile__obj--2 { right: calc(10 * var(--k)); top: calc(19 * var(--k)); width: calc(142 * var(--k)); }
.tile__obj--3 { right: calc(28 * var(--k)); top: calc(35 * var(--k)); width: calc(111 * var(--k)); }

/* ---------- tablet ---------- */
@media (min-width: 700px) {
  .pricing { padding: 88px 40px 120px; }
  .pricing__lead { font-size: 17px; margin-top: 24px; }
  .pricing .line-h { margin-top: 22px; }
  .pricing__tiles { max-width: 440px; margin-top: 64px; }
}
@media (min-width: 1000px) {
  .pricing__tiles { max-width: 1180px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 72px; }
  .tile--1 { margin-top: 53px; }
  .tile--3 { margin-top: 43px; }
  .tile { padding-inline: 22px 24px; }
  .tile__obj--1 { right: 4px; }
  .tile__obj--2 { right: 6px; }
  .tile__obj--3 { right: 20px; }
}

/* ---------- desktop (Figma 1728) ---------- */
@media (min-width: 1280px) {
  .pricing { --h: 1080; --k: var(--u); padding: 0; overflow: visible; scroll-margin-top: calc(90 * var(--u)); }
  .pricing__bg { inset: auto; left: 50%; top: 0; width: calc(1728 * var(--u)); height: calc(1080 * var(--u)); transform: translateX(-50%); }
  .pricing__fade { left: 50%; right: auto; width: calc(1728 * var(--u)); transform: translateX(-50%); height: calc(226 * var(--u)); }
  .pricing__lead { margin: 0; max-width: none; font-size: calc(20 * var(--u)); line-height: 1; letter-spacing: calc(.4 * var(--u)); }
  .pricing .line-h { width: calc(var(--w) * var(--u)); margin: 0; height: calc(3 * var(--u)); }
  .pricing__title { font-size: calc(48 * var(--u)); letter-spacing: calc(.96 * var(--u)); line-height: 1; white-space: nowrap; }
  .pricing__tiles { display: block; max-width: none; margin: 0; }
  .tile { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(390 * var(--u)); height: calc(var(--h) * var(--u)); padding: calc(11 * var(--u)) calc(28 * var(--u)) 0 calc(26 * var(--u)); margin: 0; }
  .tile--1, .tile--3 { margin-top: 0; }
  .feat { height: calc(23 * var(--u)); }
  .tile__obj--1 { right: calc(7 * var(--u)); }
  .tile__obj--2 { right: calc(10 * var(--u)); }
  .tile__obj--3 { right: calc(28 * var(--u)); }
}

/* telefon: cena i obiekt nie mogą się nakładać */
@media (max-width: 699px) {
  .tile__price { font-size: 30px; }
  .tile__obj--1 { width: 100px; }
  .tile__obj--2 { width: 108px; }
  .tile__obj--3 { width: 90px; right: 20px; }
}