/*
 * css/strona.css - dodatki strony case study "Mapa projektów" (skóra portfolio, tylko tokeny z portfolio.css).
 * Schemat "jak to działa": sześć etapów na jednym rysunku z czterema krokami.
 */

/* wyróżniony akapit o pętli z asystentem AI (tło zamiast paska z boku) */
.mp-ai {
  display: grid;
  gap: var(--o-3);
  justify-items: start;
  padding: var(--o-4) var(--o-5);
  border-radius: var(--r-3);
  background: var(--akcent-tlo);
  border: 1px solid var(--akcent-linia);
}
.mp-ai p { color: var(--tekst-2); }
.mp-ai .mp-ai__tytul {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--akcent);
}

/* ---- schemat: etapy + scena (rysunek i opis) ---- */
.mp-schemat { gap: var(--o-5); }
.mp-scena { display: grid; gap: var(--o-5); align-items: start; }
.mp-rysunek { margin: 0; display: grid; gap: var(--o-3); max-width: 30rem; }
.mp-opisy .pf-schemat__opis p { max-width: 52ch; }

@media (max-width: 719px) {
  /* sześć etapów jako zwarta siatka 2 x 3 zamiast długiej listy */
  .mp-etapy { grid-template-columns: 1fr 1fr; gap: var(--o-2); }
  .mp-etapy .pf-schemat__lacznik { display: none; }
  .mp-etapy .pf-schemat__wezel { min-height: 3.25rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; }
}
@media (min-width: 960px) {
  .mp-scena { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--o-7); }
  .mp-opisy { padding-top: var(--o-6); }
}

/* ---- rysunek SVG ---- */
.mp-sv { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-tekst); }
.mp-w { transition: transform var(--t-3) var(--krzywa), opacity var(--t-2) var(--krzywa); }
.mp-w__ramka { fill: var(--powierzchnia-2); stroke: var(--linia-3); stroke-width: 1.25; transition: fill var(--t-2) var(--krzywa), stroke var(--t-2) var(--krzywa); }
.mp-w__rodzaj { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--tekst-3); }
.mp-w__nr { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--akcent); opacity: 0; transition: opacity var(--t-2) var(--krzywa); }
.mp-w__tytul { font-size: 14px; font-weight: 600; fill: var(--tekst); }
.mp-w__meta { font-size: 12px; fill: var(--tekst-2); opacity: 0; transition: opacity var(--t-2) var(--krzywa); }
.mp-t-okno, .mp-t-zapas { font-family: var(--font-mono); font-size: 11.5px; }
.mp-poziomy text { font-family: var(--font-mono); font-size: 10px; fill: var(--tekst-3); opacity: 0; transition: opacity var(--t-2) var(--krzywa); }
.mp-krawedzie { opacity: 0; transition: opacity var(--t-3) var(--krzywa); }
.mp-krawedzie path { fill: none; stroke: var(--tekst-3); stroke-width: 1.5; stroke-linecap: round; }
.mp-krawedzie .mp-kr { stroke: var(--akcent); stroke-width: 2.75; opacity: 0; transition: opacity var(--t-2) var(--krzywa); }
.mp-grot { fill: var(--tekst-3); }
.mp-grot--kr { fill: var(--akcent); }

/* układ luźny (etapy 1-2) */
.mp-w--a { transform: translate(234px, 30px); }
.mp-w--b { transform: translate(234px, 190px); }
.mp-w--c { transform: translate(16px, 190px); }
.mp-w--d { transform: translate(16px, 30px); }

/* układ po sortowaniu (etapy 3-6) */
.mp-sv:is([data-etap="kolejnosc"], [data-etap="prognoza"], [data-etap="sciezka"], [data-etap="pilka"]) .mp-w--a { transform: translate(16px, 44px); }
.mp-sv:is([data-etap="kolejnosc"], [data-etap="prognoza"], [data-etap="sciezka"], [data-etap="pilka"]) .mp-w--b { transform: translate(234px, 44px); }
.mp-sv:is([data-etap="kolejnosc"], [data-etap="prognoza"], [data-etap="sciezka"], [data-etap="pilka"]) .mp-w--c { transform: translate(125px, 166px); }
.mp-sv:is([data-etap="kolejnosc"], [data-etap="prognoza"], [data-etap="sciezka"], [data-etap="pilka"]) .mp-w--d { transform: translate(125px, 288px); }
.mp-sv:is([data-etap="kolejnosc"], [data-etap="prognoza"], [data-etap="sciezka"], [data-etap="pilka"]) .mp-krawedzie--ulozone { opacity: 1; }
.mp-sv[data-etap="zaleznosci"] .mp-krawedzie--luzem { opacity: 1; }

/* co widać na którym etapie */
.mp-sv:is([data-etap="krok"], [data-etap="zaleznosci"], [data-etap="kolejnosc"]) .mp-t-szac { opacity: 1; }
.mp-sv[data-etap="kolejnosc"] .mp-poziomy text,
.mp-sv[data-etap="kolejnosc"] .mp-w__nr { opacity: 1; }
.mp-sv[data-etap="prognoza"] .mp-t-okno { opacity: 1; }
.mp-sv[data-etap="prognoza"] .mp-w--d .mp-w__ramka { stroke: var(--uwaga); }
.mp-sv[data-etap="prognoza"] .mp-w--d .mp-t-okno { fill: var(--uwaga); font-weight: 700; }
.mp-sv[data-etap="sciezka"] .mp-t-zapas { opacity: 1; }
.mp-sv[data-etap="sciezka"] .mp-kr { opacity: 1; }
.mp-sv[data-etap="sciezka"] :is(.mp-k--b, .mp-k--c):not(.mp-kr) { opacity: 0; }
.mp-sv[data-etap="sciezka"] :is(.mp-w--b, .mp-w--c, .mp-w--d) .mp-w__ramka { stroke: var(--akcent); stroke-width: 2; fill: var(--akcent-tlo); }
.mp-sv[data-etap="sciezka"] .mp-w--a { opacity: 0.55; }
.mp-sv[data-etap="sciezka"] .mp-w--d .mp-t-zapas { fill: var(--uwaga); font-weight: 700; }
.mp-sv[data-etap="pilka"] .mp-t-pilka { opacity: 1; }
.mp-sv[data-etap="pilka"] .mp-w--a .mp-w__ramka { stroke: var(--uwaga); stroke-width: 2; fill: var(--uwaga-tlo); }
.mp-sv[data-etap="pilka"] .mp-w--b .mp-w__ramka { stroke: var(--akcent); stroke-width: 2; fill: var(--akcent-tlo); }
.mp-sv[data-etap="pilka"] :is(.mp-w--c, .mp-w--d) .mp-w__ramka { stroke-dasharray: 5 4; }
.mp-sv[data-etap="pilka"] :is(.mp-w--c, .mp-w--d) { opacity: 0.6; }
.mp-sv[data-etap="pilka"] :is(.mp-w--a, .mp-w--b) .mp-t-pilka { fill: var(--tekst); font-weight: 600; }