/* Mały Marek · „Jak to powstaje” (/jak-to-powstaje/). Uzupełnia /styl.css; klasy z przedrostkiem j-. */

.jtp {
  --papier-jtp: #F3E6CF;
  --terakota: #B5562F;
  --szalwia: #7E8F6A;
  --tusz: #3B2E25;
}

/* ——— nagłówek: tekst + pionowa ilustracja warsztatu ——— */
.j-glowa {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: clamp(28px, 5vw, 72px); align-items: start;
  padding-block: clamp(32px, 6vw, 80px) clamp(48px, 7vw, 96px);
}
.j-glowa-tekst { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }
.j-glowa h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.01em; }
.j-glowa h1 em { font-style: italic; color: var(--terakota); }
.j-glowa-tekst > p:not(.eyebrow):not(.lead) { line-height: 1.6; color: var(--atrament-2); max-width: 34rem; }

.j-spis { margin-top: 10px; }
.j-spis ol { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; border-top: 1px solid var(--linia); padding-top: 14px; }
.j-spis a {
  display: flex; gap: 10px; align-items: baseline; padding: 6px 0;
  font-family: var(--sans); font-size: 0.9375rem; color: var(--atrament-2); text-decoration: none;
}
.j-spis a:hover { color: var(--atrament); text-decoration: underline; text-decoration-color: var(--zloto-jasne); }
.j-spis span { font-family: var(--serif); color: var(--terakota); min-width: 2.4rem; }

.j-warsztat { display: flex; flex-direction: column; gap: 12px; }
.j-warsztat img {
  width: 100%; height: auto; display: block; border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .04), 0 24px 60px rgba(59, 46, 37, .22);
}
.j-warsztat figcaption { font-style: italic; font-size: var(--t-small); line-height: 1.5; color: var(--kurz); }

/* ——— etapy: oś czasu z winietami ——— */
.j-etapy { list-style: none; padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 96px); position: relative; }
.j-etapy::before {
  content: ""; position: absolute; left: calc(5rem - 1px); top: 40px; bottom: 120px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--zloto-jasne) 0 10px, transparent 10px 18px);
}
.j-etap {
  position: relative; scroll-margin-top: 24px;
  display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start;
  padding-block: clamp(28px, 4vw, 48px);
}
.j-etap + .j-etap { border-top: 1px solid var(--linia); }
.j-winieta {
  width: 10rem; height: 10rem; object-fit: cover; border-radius: 50%; display: block; position: relative;
  border: 3px solid var(--papier-jtp); box-shadow: 0 0 0 1px var(--linia), 0 10px 24px rgba(59, 46, 37, .14);
  background: var(--papier-jtp);
}
.j-tresc { display: flex; flex-direction: column; gap: 12px; max-width: 44rem; }
.j-nr { font-family: var(--sans); font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--terakota); }
.j-tresc h2 { font-size: clamp(2rem, 3.8vw, 2.8rem); line-height: 1.1; }
.j-kiedy { font-style: italic; font-size: var(--t-lead); line-height: 1.45; color: var(--atrament-2); }
.j-tresc > p:not(.j-nr):not(.j-kiedy) { line-height: 1.6; }
.j-punkty { list-style: none; display: flex; flex-direction: column; margin-top: 4px; }
.j-punkty li {
  position: relative; padding: 10px 0 10px 26px; line-height: 1.55; border-top: 1px solid var(--linia);
}
.j-punkty li::before {
  content: ""; position: absolute; left: 4px; top: 1.15em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--terakota); opacity: .75;
}
.j-akcent { font-style: italic; font-size: var(--t-lead); line-height: 1.45; color: var(--atrament); }

/* ——— pętle ——— */
.j-petle-uklad {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 44px);
}
.j-diagram-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 62rem; }
.j-diagram-pelny { font-family: var(--sans); font-size: .875rem; color: var(--kurz); }
.j-diagram { margin: 0; background: var(--papier-jtp); border-radius: 4px; box-shadow: 0 0 0 1px var(--linia), 0 18px 44px rgba(59, 46, 37, .12); overflow: hidden; }
.j-diagram-svg { display: block; width: 100%; height: auto; }
.j-petle-tekst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; max-width: 62rem; }
.j-petle-tekst p.j-akcent { grid-column: 1 / -1; }
.j-petle-tekst p { line-height: 1.6; color: var(--atrament-2); }
.j-petle-tekst p.j-akcent { color: var(--atrament); }

/* ——— moja rola ——— */
.j-rola-tekst {
  margin-top: clamp(24px, 4vw, 40px); max-width: min(44rem, 100%);
  display: flex; flex-direction: column; gap: 16px;
  border-left: 3px solid var(--terakota); padding-left: 26px;
}
.j-rola-tekst p { line-height: 1.6; color: var(--atrament-2); }
.j-rola-tekst p.j-akcent { color: var(--atrament); }
.j-podpis { font-style: italic; font-size: 1.6rem; color: var(--atrament) !important; display: flex; flex-direction: column; }
.j-podpis span { font-style: normal; font-family: var(--sans); font-size: .875rem; color: var(--kurz); }

/* ——— jeden prompt ——— */
.j-prompt { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.j-prompt .eyebrow { justify-content: center; }
.j-prompt h2 { font-size: clamp(4rem, 12vw, 8rem); line-height: .9; font-style: italic; color: var(--terakota); }
.j-prompt-tekst { max-width: 36rem; display: flex; flex-direction: column; gap: 14px; }
.j-prompt-tekst p { line-height: 1.6; color: var(--atrament-2); }
.j-koniec { margin-top: clamp(20px, 4vw, 36px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.j-koniec p { font-style: italic; color: var(--kurz); }

/* ——— responsywność ——— */
@media (max-width: 880px) {
  .j-glowa, .j-petle-uklad { grid-template-columns: minmax(0, 1fr); }
  .j-glowa-tekst { position: static; }
  .j-petle-tekst { grid-template-columns: minmax(0, 1fr); }
  .j-warsztat { max-width: 34rem; }
}
@media (max-width: 640px) {
  .j-etapy::before { left: calc(2.5rem - 1px); }
  .j-etap { grid-template-columns: 5rem minmax(0, 1fr); gap: 16px; }
  .j-winieta { width: 5rem; height: 5rem; border-width: 2px; }
  .j-spis ol { grid-template-columns: minmax(0, 1fr); }
  .j-rola-tekst { padding-left: 16px; }
}

/* przycisk „Posłuchaj” w nagłówku i odtwarzacz z /manifest/ na dole strony */
.j-wezwania { margin-top: 6px; gap: 12px 22px; }
.jtp .m-noc { margin-top: 0; }

/* Jak to szło w czasie (v2, 19.09.2026) */
.j-czas-lista { list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; display: flex; flex-direction: column; }
.j-czas-lista li { display: grid; grid-template-columns: 10rem 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(60, 40, 20, .14); }
.j-czas-lista li:first-child { border-top: 0; }
.j-czas-kiedy { font-style: italic; color: var(--terakota); }
.j-czas-lista p { margin: 0; line-height: 1.6; color: var(--atrament-2); }

/* Pytania, które dostaję najczęściej (zastępuje „jeden prompt”) */
.j-pytania-lista { max-width: 40rem; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(24px, 4vw, 36px); }
.j-pyt h3 { font-size: var(--t-lead); font-style: italic; color: var(--atrament); margin: 0 0 10px; }
.j-pyt p { line-height: 1.6; color: var(--atrament-2); margin: 0 0 10px; }
.j-pyt p:last-child { margin-bottom: 0; }
.j-pytania .j-koniec { text-align: center; }

@media (max-width: 640px) {
  .j-czas-lista li { grid-template-columns: 1fr; gap: 4px; }
}
.j-pytania .glowa { margin-bottom: clamp(24px, 4vw, 40px); }
.j-czas .glowa { margin-bottom: clamp(16px, 3vw, 28px); }