/*
 * css/strona.css - dodatki strony case study panelu postów (skóra portfolio, tylko tokeny z portfolio.css).
 * Pętla statusów jako klikalny SVG (węzły <g data-wezel>, obsługa w demo.js) i schemat architektury.
 */

.cs-widoki { margin-top: var(--o-4); color: var(--tekst-2); }
.cs-widoki strong { color: var(--tekst); font-weight: var(--waga-srednia); }

/* ---- pętla statusów ---- */

.cs-petla { margin-top: var(--o-5); display: grid; gap: var(--o-5); }
.cs-petla__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cs-petla__svg--pionowo { display: none; max-width: 22rem; }
.cs-petla__linie line, .cs-petla__linie path { fill: none; stroke: var(--linia-3); stroke-width: 2; }
.cs-petla__grot { fill: var(--linia-3); }
.cs-petla__podpisy text { font-family: var(--font-mono); font-size: 12px; fill: var(--tekst-3); }
.cs-petla__gosc { font-size: 14px; fill: var(--tekst-3); }

.cs-petla__wezel { cursor: pointer; outline: none; }
.cs-petla__wezel rect { fill: var(--powierzchnia); stroke: var(--linia-2); stroke-width: 1.5; transition: fill var(--t-1) var(--krzywa), stroke var(--t-1) var(--krzywa); }
.cs-petla__wezel:hover rect { fill: var(--powierzchnia-2); stroke: var(--linia-3); }
.cs-petla__wezel[aria-pressed="true"] rect { fill: var(--akcent-tlo); stroke: var(--akcent-linia); stroke-width: 2; }
.cs-petla__wezel:focus-visible rect { stroke: var(--akcent); stroke-width: 3; }
.cs-petla__nazwa { font-family: var(--font-tekst); font-size: 16px; letter-spacing: -0.01em; font-weight: 650; fill: var(--tekst); }
.cs-petla__nazwa--mala { font-size: 15px; }
.cs-petla__kto { font-family: var(--font-mono); font-size: 12.5px; fill: var(--tekst-3); }
.cs-petla__wezel[aria-pressed="true"] .cs-petla__kto { fill: var(--akcent); }

.cs-kropka { stroke: none; }
.cs-kropka--szkic { fill: var(--tekst-3); }
.cs-kropka--akceptacja { fill: var(--uwaga); }
.cs-kropka--poprawa { fill: var(--blad); }
.cs-kropka--ok { fill: var(--ok); }
.cs-kropka--opublikowany { fill: var(--akcent); }

.cs-petla__opisy { max-width: var(--szer-tekst); }
.cs-petla__opisy h3 { display: flex; align-items: baseline; gap: var(--o-3); flex-wrap: wrap; }
.cs-petla__opisy h3 small { font-family: var(--font-mono); font-size: var(--fs-mini); font-weight: var(--waga-tekst); color: var(--akcent); }

@media (max-width: 759px) {
  .cs-petla__svg--poziomo { display: none; }
  .cs-petla__svg--pionowo { display: block; }
}

/* ---- architektura: jedna linia, cztery przystanki ---- */

.cs-arch { margin-top: var(--o-7); }
.cs-arch__tytul { font-size: var(--fs-h4); margin-bottom: var(--o-4); }
.cs-arch__lista { position: relative; display: grid; gap: var(--o-5); margin: 0; padding: 0; list-style: none; }
.cs-arch__lista::before { content: ''; position: absolute; left: 1.125rem; top: 1.25rem; bottom: 1.25rem; width: 1px; background: var(--linia-3); }
.cs-arch__lista li { position: relative; display: grid; align-content: start; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--o-4); row-gap: 0.125rem; }
.cs-arch__znak { grid-row: span 2; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-2); background: var(--tlo); border: 1px solid var(--linia-2); color: var(--tekst-2); }
.cs-arch__lista strong { font-weight: var(--waga-mocna); color: var(--tekst); }
.cs-arch__lista li > span:last-child { color: var(--tekst-2); font-size: var(--fs-mala); }

@media (min-width: 760px) {
  .cs-arch__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o-5); }
  .cs-arch__lista::before { left: 1.125rem; right: 12%; top: 1.125rem; bottom: auto; width: auto; height: 1px; }
  .cs-arch__lista li { grid-template-columns: minmax(0, 1fr); row-gap: var(--o-2); }
  .cs-arch__znak { grid-row: auto; }
}

/* wartość "05.2026" jest szersza niż kolumna 8rem z fundamentu */
@media (min-width: 720px) { #efekt .pf-fakty li { grid-template-columns: 10.5rem 1fr; } }

.cs-testy { margin-top: var(--o-4); color: var(--tekst-2); }