/* Wpisy blogowe i słownik wzorów – bloki nawigacyjne, linkowanie wewnętrzne i elementy artykułów */

/* logo w nagłówku: zachowaj proporcje (atrybut height="65" rozciągał obrazek) */
header .logo img, nav .logo2 img { height: auto; }
:root {
  --w-fiolet: #590de5;
  --w-fiolet-ciemny: #35008b;
  --w-fiolet-jasny: #dfe1ff;
  --w-lawenda: #b9afff;
  --w-czerwony: #cd1100;
  --w-tekst: #000;
  --w-tlo: #fff;
  --w-szary: #f4f4f6;
  --w-linia: #000;
}

/* ---------- okruszki ---------- */
.okruszki { position: relative; z-index: 2; margin: 2rem 0 1rem; font-size: 1.3rem; line-height: 1.5; }
.wpis { position: relative; z-index: 1; }
.okruszki ol { margin: 0; padding: .3rem .8rem; border: 0; display: inline-flex; flex-wrap: wrap; gap: .4rem; background: rgba(255, 255, 255, .9); border-radius: 4px; }
.okruszki li { display: inline; list-style: none; width: auto; padding: 0; margin: 0; border: 0; opacity: 1; visibility: visible; transform: none; line-height: 1.5; background: none; }
.okruszki li + li::before { content: "›"; margin-right: .4rem; color: #555; }
.okruszki a { color: var(--w-fiolet); text-decoration: underline; text-underline-offset: 2px; }
.okruszki a:hover { color: var(--w-fiolet-ciemny); }
.okruszki [aria-current] { color: #555; }

/* ---------- sekcja „Powiązane” i CTA ---------- */
.wpis-dodatki { margin: 3rem 0 2rem; }
.wpis-dodatki h2.wpis-dodatki__tytul { font-family: "JetBrains Mono", monospace; font-size: 2rem; text-align: left; border: 0; padding: 0 0 1rem; margin: 0; letter-spacing: 0; }
.wpis-powiazane { list-style: none; margin: 0 0 2.5rem; padding: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 1rem; }
.wpis-powiazane li { list-style: none; display: block; width: auto; margin: 0; padding: 0; border: 0; opacity: 1; visibility: visible; transform: none; background: none; line-height: 1.4; }
.wpis-powiazane a { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1.2rem 1.4rem; border: 1px solid var(--w-linia); border-radius: 6px; background: var(--w-tlo); color: var(--w-tekst); font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.wpis-powiazane a:hover, .wpis-powiazane a:focus-visible { background: var(--w-fiolet-jasny); border-color: var(--w-fiolet); }
.wpis-powiazane .typ { font-size: 1.1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--w-fiolet); }

.wpis-cta { border: 2px solid var(--w-linia); border-radius: 8px; padding: 2rem; background: var(--w-szary); }
.wpis-cta p { margin: 0 0 1.2rem; font-size: 1.5rem; line-height: 1.6; }
.wpis-cta .wpis-cta__tytul { font-size: 1.8rem; font-weight: 700; }
.wpis-cta__przyciski { display: flex; flex-wrap: wrap; gap: 1rem; }
.wpis-cta__btn { display: inline-block; padding: 1rem 1.8rem; border: 2px solid var(--w-linia); border-radius: 6px; background: var(--w-tekst); color: var(--w-tlo) !important; font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.wpis-cta__btn:hover, .wpis-cta__btn:focus-visible { background: var(--w-fiolet); border-color: var(--w-fiolet); }
.wpis-cta__btn--jasny { background: var(--w-tlo); color: var(--w-tekst) !important; }
.wpis-cta__btn--jasny:hover, .wpis-cta__btn--jasny:focus-visible { background: var(--w-fiolet-jasny); color: var(--w-tekst) !important; }

/* ---------- pasek skrótów nad stopką ---------- */
.stopka-linki { border-top: 1px solid var(--w-linia); padding: 2rem 8%; font-size: 1.4rem; }
.stopka-linki p { margin: 0 0 .8rem; font-weight: 700; font-size: 1.4rem; }
.stopka-linki ul { list-style: none; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.stopka-linki li { list-style: none; display: inline; width: auto; padding: 0; margin: 0; border: 0; opacity: 1; visibility: visible; transform: none; background: none; line-height: 1.6; }
.stopka-linki a { color: var(--w-fiolet); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- huby: słownik wzorów i tutoriale ---------- */
.hub-wstep { font-size: 1.6rem; line-height: 1.7; max-width: 80rem; }
.hub-grupa { margin: 3rem 0; }
.hub-grupa h2 { font-family: "JetBrains Mono", monospace; font-size: 2rem; text-align: left; border-bottom: 1px solid var(--w-linia); padding: 0 0 .8rem; margin: 0 0 .6rem; letter-spacing: 0; }
.hub-grupa > p { margin: 0 0 1.2rem; font-size: 1.4rem; color: #333; }
.hub-lista { list-style: none; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); gap: .6rem 2rem; }
.hub-lista li { list-style: none; display: block; width: auto; margin: 0; padding: .4rem 0; border: 0; opacity: 1; visibility: visible; transform: none; background: none; line-height: 1.5; font-size: 1.5rem; }
.hub-lista a { color: var(--w-tekst); text-decoration: underline; text-decoration-color: var(--w-lawenda); text-underline-offset: 3px; }
.hub-lista a:hover { color: var(--w-fiolet); text-decoration-color: var(--w-fiolet); }

/* ---------- elementy artykułu (nowe wpisy i hasła) ---------- */
.wpis { max-width: 88rem; }
.wpis h1 { font-size: 3.4rem; line-height: 1.25; margin: 1rem 0 1.5rem; }
.wpis h2 { font-family: "Poppins", sans-serif; font-size: 2.4rem; text-align: left; border: 0; padding: 2.5rem 0 1rem; letter-spacing: .5px; }
.wpis h3 { font-size: 1.8rem; margin: 2rem 0 .8rem; }
.wpis p, .wpis li { font-size: 1.6rem; line-height: 1.75; }
.wpis ul.punkty, .wpis ol.kroki { margin: 1rem 0 2rem 2.4rem; padding: 0; border: 0; }
.wpis ul.punkty li, .wpis ol.kroki li { display: list-item; width: auto; padding: .2rem 0; margin: 0; border: 0; opacity: 1; visibility: visible; transform: none; background: none; }
.wpis ul.punkty li { list-style: disc; }
.wpis ol.kroki li { list-style: decimal; }
.wpis a { color: var(--w-fiolet); text-decoration: underline; text-underline-offset: 2px; }
.wpis a:hover { color: var(--w-fiolet-ciemny); }
.wpis .lead { font-size: 1.8rem; line-height: 1.7; }

.w-skrocie { border-left: 5px solid var(--w-fiolet); background: var(--w-fiolet-jasny); padding: 1.4rem 1.8rem; margin: 2rem 0; border-radius: 0 6px 6px 0; }
.w-skrocie p { margin: 0; }
.w-skrocie strong:first-child { display: block; margin-bottom: .4rem; }

.wzor { border: 1px solid var(--w-linia); border-radius: 6px; padding: 1.6rem; margin: 1.6rem 0; overflow-x: auto; background: var(--w-tlo); }
.symbole { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.6rem; margin: 1rem 0 2rem; font-size: 1.5rem; line-height: 1.6; }
.symbole dt { font-weight: 700; }
.symbole dd { margin: 0; }

.tabela-przewijana { overflow-x: auto; margin: 1.6rem 0; }
table.krok { border-collapse: collapse; min-width: 32rem; font-size: 1.5rem; }
table.krok caption { caption-side: top; text-align: left; font-weight: 700; padding: 0 0 .6rem; font-size: 1.4rem; }
table.krok th, table.krok td { border: 1px solid var(--w-linia); padding: .6rem 1.2rem; text-align: center; white-space: nowrap; }
table.krok th { background: var(--w-fiolet-jasny); }
table.krok tr.suma td { font-weight: 700; background: var(--w-szary); }

figure.rys { margin: 2.4rem 0; }
figure.rys img { position: static; display: block; width: 100%; max-width: 72rem; height: auto; top: auto; left: auto; transform: none; border: 1px solid #ddd; border-radius: 6px; }
figure.rys figcaption { font-size: 1.35rem; line-height: 1.6; color: #333; margin-top: .8rem; max-width: 72rem; }

pre.kod-r { background: #111; color: #f2f2f2; border-radius: 6px; padding: 1.6rem; overflow-x: auto; font-family: "JetBrains Mono", monospace; font-size: 1.35rem; line-height: 1.6; margin: 1.6rem 0; white-space: pre; }
pre.kod-r code { font-family: inherit; color: inherit; background: none; }
pre.kod-r, pre.wynik-r, .wpis code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
pre.kod-r .k { color: #9d8bff; }
pre.wynik-r { background: var(--w-szary); border: 1px dashed #999; border-radius: 6px; padding: 1.2rem 1.6rem; overflow-x: auto; font-size: 1.3rem; line-height: 1.5; margin: -.6rem 0 1.6rem; white-space: pre; }

.apa { border: 2px dashed var(--w-fiolet); border-radius: 6px; padding: 1.4rem 1.8rem; margin: 1.6rem 0; }
.apa p { margin: 0; }
.uwaga { border-left: 5px solid var(--w-czerwony); background: #fff4f2; padding: 1.2rem 1.6rem; margin: 1.6rem 0; border-radius: 0 6px 6px 0; }

.bibliografia ol { margin: 1rem 0 2rem 2.4rem; padding: 0; border: 0; }
.bibliografia li { display: list-item; list-style: decimal; width: auto; padding: .3rem 0; margin: 0; border: 0; opacity: 1; visibility: visible; transform: none; background: none; font-size: 1.4rem; line-height: 1.6; }

@media (max-width: 56.25em) {
  .wpis h1 { font-size: 2.6rem; }
  .wpis h2 { font-size: 2rem; }
  .wpis p, .wpis li { font-size: 1.5rem; }
  .symbole { grid-template-columns: 1fr; gap: .2rem; }
  .symbole dd { margin-bottom: .8rem; }
  .stopka-linki { padding: 2rem 4%; }
}