/* =====================================================================
   Loriini — blocks-inwestycja.css
   Bloki stron rynku pierwotnego: 26. units (mix lokali i ceny od)
   i 27. payment (harmonogram wpłat). Ładowany PO blocks.css.

   Zasady tego pliku:
   - wyłącznie klasy .b-units* i .b-payment* (plus elementy wewnątrz nich),
   - zero hexów i własnych fontów — same tokeny z tokens.css,
   - żadna reguła nie trafia w selektor z blocks.css ani z krytycznego CSS,
   - mobile-first.

   Na serwer idzie obok blocks.css — to pierwszy wyjątek od zasady
   „wgrywamy tylko katalog kampanii". Patrz README.md.
   ===================================================================== */

/* ---------- 26. units (mix lokali) ----------------------------------- */
/* Tabela przewija się w bok na własnym kontenerze, nigdy cała strona.
   Cień przy prawej krawędzi mówi „tabela jedzie dalej" i znika po dojechaniu
   do końca: warstwa w kolorze tła (local) przesuwa się z treścią i zakrywa
   cień (scroll), który stoi przy krawędzi kontenera. */
.b-units__scroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  border-top: var(--line-w) solid var(--line-accent);
  background:
    linear-gradient(to left, var(--bg) 45%, transparent) right center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--line-strong), transparent) right center / 14px 100% no-repeat scroll;
}
.b-units__table { width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 0; }
.b-units__table th,
.b-units__table td { padding: 14px 12px; border-bottom: var(--line-w) solid var(--line); text-align: left; vertical-align: baseline; white-space: nowrap; }
.b-units__table thead th { padding-block: 12px; font: 600 .72rem/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.b-units__table tbody th,
.b-units__table tbody td { font: 400 1.125rem/1.3 var(--display); }
.b-units__table tbody th { white-space: normal; min-width: 7.5rem; }
.b-units__table .b-units__num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.b-units__table tr > :last-child { padding-right: 0; }
/* pierwsza kolumna (typ lokalu) zostaje na miejscu, gdy reszta tabeli jedzie w bok */
.b-units__table tr > :first-child { position: sticky; left: 0; z-index: 1; padding-left: 0; background: var(--bg); box-shadow: inset calc(var(--line-w) * -1) 0 0 var(--line); }
.b-units__note { margin-top: 20px; max-width: var(--measure); font-size: var(--fs-small); color: var(--fg-2); }
@media (min-width: 900px) {
  .b-units__table { min-width: 0; }
  .b-units__table th,
  .b-units__table td { padding-inline: 24px; }
  .b-units__table tr > :first-child { position: static; box-shadow: none; }
}

/* ---------- 27. payment (harmonogram wpłat) -------------------------- */
/* Oś: etap → kwota/procent → termin. Na telefonie pionowa, od 900px pozioma. */
.b-payment__list { display: grid; }
.b-payment__step { position: relative; padding: 0 0 36px 40px; }
.b-payment__step:last-child { padding-bottom: 0; }
.b-payment__step::before { content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px; border: var(--line-w) solid var(--line-accent); background: var(--bg); }
.b-payment__step::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: -3px; width: var(--line-w); background: var(--line-accent); }
.b-payment__step:last-child::after { display: none; }
.b-payment__stage { font: 600 var(--fs-eyebrow)/1.4 var(--body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-text); }
.b-payment__amount { margin-top: 10px; font: 400 var(--fs-num)/1.1 var(--display); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.b-payment__term { margin-top: 10px; max-width: 32ch; font-size: var(--fs-small); color: var(--fg-2); }
.b-payment__note { margin-top: clamp(40px, 5vw, 64px); max-width: var(--measure); padding-top: 20px; border-top: var(--line-w) solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
@media (min-width: 900px) {
  .b-payment__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; }
  .b-payment__step { padding: 40px 0 0; }
  .b-payment__step::before { top: 0; }
  .b-payment__step::after { left: 13px; right: -32px; top: 6px; bottom: auto; width: auto; height: var(--line-w); }
}