/* /jak-kupic - moduły intro, 1-2-3 i FAQ (2026-10-29, wg PDF klienta "jak kupić.pdf") */
:root { --jk-zielen: #14ab57; --jk-zielen-jasna: #e6f5e8; --jk-tekst: #000; --jk-szary: #5b5b5b; --jk-linia: #d9d9d9; }

.jk-link { color: var(--jk-zielen) !important; text-decoration: underline !important; text-underline-offset: .15em; font-weight: 500; }
.jk-link:hover { text-decoration-thickness: 2px !important; }

/* ---------- intro ---------- */
.jk-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding: 4rem 0 3.5rem; }
.jk-intro__tekst p { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.6; }
.jk-intro__tekst .jk-intro__powitanie { font-size: 1.6rem; font-weight: 500; line-height: 1.25; margin-bottom: 1.1rem; }
.jk-intro__akcja { margin-top: 1.75rem; }
.jk-intro__akcja .button_black { display: inline-block; min-width: 12rem; }
.jk-intro__akcja .button_black:hover { background-color: var(--jk-zielen); border-color: var(--jk-zielen); }

/* przenikanie obrazów co 4 s (js/jak-kupic.js) */
.jk-pokaz { position: relative; aspect-ratio: 1537 / 1230; width: 100%; max-width: 36rem; justify-self: center; }
.jk-pokaz__obraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease-in-out; }
.jk-pokaz__obraz.is-aktywny { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .jk-pokaz__obraz { transition: none; } }

/* ---------- wspólne nagłówki modułów ---------- */
.jk-h2 { font-size: 2.25rem; font-weight: 500; line-height: 1.2; margin: 0 0 2.25rem; }

/* ---------- 1-2-3 ---------- */
.jk-kroki-sekcja { padding: 1rem 0 3.5rem; }
.jk-kroki { list-style: none; counter-reset: jkkrok; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.jk-kroki li { counter-increment: jkkrok; position: relative; margin: 0; padding: 3.75rem 0 0; }
.jk-kroki li::before { content: "0" counter(jkkrok); position: absolute; top: 0; left: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--jk-zielen); color: #fff; font-weight: 600; font-size: .95rem; }
.jk-kroki li:not(:last-child)::after { content: ""; position: absolute; top: 1.375rem; left: 3.75rem; right: -1rem; border-top: 1.5px dashed var(--jk-linia); }
.jk-kroki h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.3; margin: 0 0 .5rem; }
.jk-kroki p { margin: 0; color: var(--jk-szary); line-height: 1.6; }

/* ---------- FAQ ---------- */
.jk-faq-sekcja { padding: 1rem 0 4rem; }
.jk-faq { border-top: 1px solid var(--jk-linia); max-width: 56rem; }
.jk-faq__poz { border-bottom: 1px solid var(--jk-linia); }
.jk-faq__poz summary { list-style: none; cursor: pointer; position: relative; padding: 1.25rem 3rem 1.25rem 0; font-weight: 500; font-size: 1.1rem; line-height: 1.4; }
.jk-faq__poz summary::-webkit-details-marker { display: none; }
.jk-faq__poz summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: .7rem; height: .7rem; margin-top: -.5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.jk-faq__poz[open] summary::after { transform: rotate(-135deg); margin-top: -.1rem; }
.jk-faq__poz summary:hover { color: var(--jk-zielen); }
.jk-faq__poz summary:focus-visible { outline: 2px solid var(--jk-zielen); outline-offset: 4px; }
.jk-faq__odp p { margin: 0; padding: 0 0 1.4rem; color: var(--jk-szary); line-height: 1.65; max-width: 48rem; }

/* ---------- karta "Potrzebujesz pomocy?" na całą szerokość (karta rejestracji usunięta) ---------- */
#w-node-_778990ed-dc11-8023-2f34-b04a2b2e660a-2b2e65e6 { grid-column: 1 / -1; }
#w-node-_778990ed-dc11-8023-2f34-b04a2b2e660a-2b2e65e6 .padding-large { max-width: 50rem; margin-left: auto; margin-right: auto; }

/* ---------- tablet / telefon ---------- */
@media screen and (max-width: 991px) {
  .jk-intro { gap: 2rem; padding-top: 3rem; }
  .jk-h2 { font-size: 2rem; }
}
@media screen and (max-width: 767px) {
  .jk-intro { grid-template-columns: 1fr; padding: 2.5rem 0 2.5rem; }
  .jk-pokaz { max-width: 26rem; }
  .jk-intro__akcja { text-align: center; }
  .jk-h2 { font-size: 1.75rem; margin-bottom: 1.75rem; }
  .jk-kroki { grid-template-columns: 1fr; gap: 1.75rem; }
  .jk-kroki li { padding: 0 0 0 4rem; min-height: 2.75rem; }
  .jk-kroki li:not(:last-child)::after { top: 3.25rem; bottom: -1.5rem; left: 1.375rem; right: auto; border-top: 0; border-left: 1.5px dashed var(--jk-linia); }
  .jk-faq__poz summary { font-size: 1rem; }
}