/* daplo.eu — podstrona projektu /projekty/<slug> (17.10.2026). Bazuje na case.css (okruszki, .ch__meta, .cuk, .wskr, .cs, .kn).
   Tu: nagłówek ze schematem na całą szerokość, kroki, karty agentów, przykładowa rozmowa, szczegóły techniczne, okno powiększenia. */

/* ---------- 1. Nagłówek: tekst, schemat, fakty jeden pod drugim ---------- */
.pj .ch__g { grid-template-areas: "tekst" "obraz" "meta"; }
.pj .lead { max-width: 62ch; }
@media (min-width: 1024px) {
  .pj .ch__g { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "obraz" "meta"; row-gap: 48px; }
  .pj .ch__tekst { padding-right: 0; max-width: 960px; }
}

/* Schemat workflow: tło jak płótno n8n, przycisk powiększenia w rogu */
.pj-wf { margin: 0; }
.pj-wf__ramka { position: relative; display: block; border-radius: var(--r-m); overflow: hidden; background: #F5F5F5; border: 1px solid var(--linia); cursor: zoom-in; }
.pj-wf__ramka img { display: block; width: 100%; height: auto; }
.pj-wf__btn { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--czern); font-size: .9375rem; font-weight: 600; box-shadow: 0 2px 10px rgba(11, 13, 16, .16); transition: background-color var(--ruch-szybki) var(--krzywa), color var(--ruch-szybki) var(--krzywa); }
.pj-wf__btn .ik { width: 18px; height: 18px; }
.pj-wf__ramka:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .pj-wf__ramka:hover .pj-wf__btn { background: var(--akcja); color: #fff; } }

/* ---------- 2. Kroki „Jak to działa” ---------- */
.pj-kroki { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; max-width: 720px; }
.pj-kroki li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; }
.pj-kroki li:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 32px; bottom: -24px; border-left: 1px dashed var(--szkielet); }
.pj-kroki .h3 { margin: 0 0 6px; }
.pj-kroki p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--stal); }

/* ---------- 3. Karty agentów ---------- */
.pj-ag { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--karty-odstep); }
.pj-ag__k { display: grid; gap: 12px; align-content: start; padding: 24px; }
.pj-ag__k .h3 { margin: 4px 0 0; }
.pj-ag__k p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--stal); }
.pj-nar { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pj-nar li { padding: 3px 10px; border: 1px solid var(--linia); border-radius: 999px; font-size: .875rem; color: var(--czern); background: var(--panel); }
@container tresc (min-width: 560px) { .pj-ag { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container tresc (min-width: 900px) { .pj-ag { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 4. Przykładowa rozmowa ---------- */
.pj-czat { display: grid; gap: 28px; max-width: 720px; padding: 24px 16px; border-radius: var(--r-m); background: var(--panel); }
@media (min-width: 560px) { .pj-czat { padding: 32px; } }
.pj-czat__para { display: grid; gap: 8px; }
.pj-czat__ja, .pj-czat__on { margin: 0; max-width: 85%; padding: 10px 14px 11px; font-size: 1rem; line-height: 1.45; }
.pj-czat__ja { justify-self: end; background: var(--czern); color: #fff; border-radius: 16px 16px 4px 16px; }
.pj-czat__on { justify-self: start; background: #fff; color: var(--czern); border: 1px solid var(--linia); border-radius: 16px 16px 16px 4px; }
.pj-czat__ag { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: .8125rem; font-weight: 600; color: var(--stal); }
.pj-czat__ag .ik { width: 16px; height: 16px; }
.pj-czat__ja--glos { display: grid; gap: 6px; }
.pj-czat__glos { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.pj-czat__glos i { width: 3px; height: 40%; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.pj-czat__glos i:nth-child(3n+2) { height: 85%; }
.pj-czat__glos i:nth-child(4n+3) { height: 60%; }
.pj-czat__glos i:nth-child(5n) { height: 100%; }

/* ---------- 5. Szczegóły techniczne ---------- */
.pj-tech { margin: 0; display: grid; max-width: 720px; }
.pj-tech div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px dashed var(--szkielet); }
.pj-tech dt { font-size: .9375rem; font-weight: 500; color: var(--stal); }
.pj-tech dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
@container tresc (min-width: 560px) { .pj-tech { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.pj-fakty { margin-top: 24px; max-width: 720px; }

/* ---------- 6. Okno powiększenia schematu ---------- */
html:has(.pj-zoom[open]) { overflow: hidden; }
.pj-zoom { width: calc(100 * var(--vw)); height: calc(100 * var(--dvh)); max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #F5F5F5; color: var(--czern); }
.pj-zoom[open] { display: flex; flex-direction: column; animation: pj-zoom-wej var(--ruch-stan) var(--krzywa); }
.pj-zoom::backdrop { background: rgba(11, 13, 16, .6); }
@keyframes pj-zoom-wej { from { opacity: 0; } }
.pj-zoom__gora { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; background: #fff; border-bottom: 1px solid var(--linia); }
.pj-zoom__t { flex: 1; min-width: 0; margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-zoom__x { width: 48px; height: 48px; flex: none; margin-left: auto; display: grid; place-items: center; border: 0; border-radius: var(--r-s); background: transparent; color: var(--czern); }
@media (hover: hover) and (pointer: fine) { .pj-zoom__x:hover { background: var(--panel); } }
.pj-zoom__plotno { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; cursor: grab; }
.pj-zoom__plotno.ciagnie { cursor: grabbing; user-select: none; }
.pj-zoom__plotno:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
.pj-zoom__plotno img { display: block; max-width: none; height: auto; -webkit-user-drag: none; }   /* szerokość z atrybutu width obrazu, każdy schemat ma swoją */
.pj-zoom--fit .pj-zoom__plotno { display: grid; place-items: center; cursor: zoom-in; }
.pj-zoom--fit .pj-zoom__plotno img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 559px) { .pj-zoom__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pj-zoom__gora { justify-content: space-between; } }
@media (prefers-reduced-motion: reduce) { .pj-zoom[open] { animation: none; } .pj-wf__btn { transition: none; } }

/* ---------- 7. Lead przed i po (17.10.2026) ---------- */
.pj-lead { display: grid; gap: 16px; max-width: 880px; }
@container tresc (min-width: 640px) { .pj-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; } }
.pj-lead__k { padding: 24px; }
.pj-lead__k--po { border-color: var(--czern); }
.pj-lead__t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .9375rem; font-weight: 600; color: var(--stal); }
.pj-lead__t .ik { width: 18px; height: 18px; }
.pj-lead dl { margin: 0; display: grid; }
.pj-lead dl div { display: grid; gap: 2px; padding: 10px 0; border-top: 1px dashed var(--szkielet); }
.pj-lead dt { font-size: .875rem; color: var(--stal); }
.pj-lead dd { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.pj-lead__ocena { display: inline-flex; align-items: baseline; gap: 2px; font-size: 2rem; font-weight: 700; line-height: 1; }
.pj-lead__ocena small { font-size: 1rem; font-weight: 600; color: var(--stal); }
.pj-lead dd.pj-lead__brak { font-weight: 500; color: var(--wyl-tekst); }