/* schrony.edu.pl — styl „industrialny”: beton, stal, znak OC, pas ostrzegawczy. */

:root {
  --beton: #e4e2dd;
  --papier: #fbfaf7;
  --tusz: #1d2125;
  --tusz-2: #4b535c;
  --stal-950: #16191c;
  --stal-900: #1f2429;
  --stal-800: #2a3138;
  --stal-700: #39424b;
  --stal-500: #66707a;
  --stal-300: #aab2ba;
  --stal-200: #ccd1d5;
  --stal-100: #e7e9eb;
  --pomarancz: #e8761a;
  --pomarancz-ciemny: #a54c06;
  --blekit: #2747c9;
  --ostrzezenie: #f2b705;
  --uwaga-tlo: #fbf4dc;

  --font-tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-tech: Bahnschrift, "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --szer-max: 1240px;
  --menu: 17rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--beton);
  color: var(--tusz);
  font: 1.0625rem/1.65 var(--font-tekst);
}

img { max-width: 100%; height: auto; }

a { color: var(--pomarancz-ciemny); text-underline-offset: .15em; }
a:hover { color: var(--tusz); }
:focus-visible { outline: 3px solid var(--ostrzezenie); outline-offset: 2px; }

.pomin {
  position: absolute; left: -999px; top: 0;
  background: var(--ostrzezenie); color: var(--stal-950);
  padding: .5rem 1rem; z-index: 10; font-weight: 700;
}
.pomin:focus { left: 1rem; }

/* ---------- Nagłówek ---------- */
.naglowek {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    var(--stal-800);
  border-top: 4px solid var(--stal-950);
  color: var(--stal-100);
}
.naglowek-wnetrze {
  max-width: var(--szer-max);
  margin: 0 auto;
  padding: 1.1rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marka {
  display: flex; align-items: center; gap: 1rem;
  color: inherit; text-decoration: none; min-width: 0;
}
.marka img { flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.marka-tekst { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marka-nazwa {
  font: 600 1.75rem/1.1 var(--font-tech);
  color: #eef0f2;
  letter-spacing: .01em;
}
.marka-haslo {
  font: 400 .9rem/1.3 var(--font-tech);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--stal-300);
  margin-top: .3rem;
}
.marka:hover .marka-nazwa { color: #fff; }

.pas-ostrzegawczy {
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--ostrzezenie) 0 14px, var(--stal-950) 14px 28px);
}

/* ---------- Układ ---------- */
.uklad {
  max-width: var(--szer-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--menu) minmax(0, 1fr);
  align-items: start;
}

/* ---------- Menu ---------- */
.nawigacja {
  background: var(--stal-900);
  color: var(--stal-200);
  padding: 1.25rem 0 2rem;
  min-height: 100%;
  align-self: stretch;
  border-right: 1px solid var(--stal-950);
}
.menu-sekcja {
  margin: 1.4rem 1.25rem .4rem;
  font: 600 .78rem/1.2 var(--font-tech);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--pomarancz);
}
.nawigacja ul { list-style: none; margin: 0; padding: 0; }
.nawigacja li a {
  display: block;
  padding: .42rem 1.25rem .42rem 1.05rem;
  border-left: 4px solid transparent;
  color: var(--stal-200);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.35;
}
.nawigacja li a:hover { background: var(--stal-800); color: #fff; }
.nawigacja li a[aria-current="page"] {
  background: var(--stal-700);
  border-left-color: var(--pomarancz);
  color: #fff;
  font-weight: 600;
}
.polecamy { margin-top: 1.5rem; }
.polecamy a {
  display: block;
  width: max-content;
  margin: .6rem 1.25rem;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--stal-950);
  box-shadow: 0 0 0 3px var(--stal-700);
}
.polecamy img { display: block; width: 150px; }

/* ---------- Treść ---------- */
.tresc { padding: 1.5rem 1.5rem 3rem; min-width: 0; }

.artykul {
  background: var(--papier);
  border: 1px solid var(--stal-200);
  border-top: 4px solid var(--stal-700);
  padding: 2rem clamp(1rem, 4vw, 3rem) 2.5rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 18px -12px rgba(0,0,0,.25);
}
.artykul > * { max-width: 46rem; }
.artykul > figure, .artykul > .tabela, .artykul > .spis { max-width: none; }

.artykul-naglowek { margin-bottom: 1.75rem; }
.artykul-sekcja {
  margin: 0 0 .35rem;
  font: 600 .8rem/1.2 var(--font-tech);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--stal-500);
}
h1, h2, h3 {
  font-family: var(--font-tech);
  line-height: 1.2;
  color: var(--stal-900);
  text-wrap: balance;
}
h1 {
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.35rem);
  font-weight: 700;
  padding-bottom: .7rem;
  border-bottom: 3px solid var(--stal-200);
  position: relative;
}
h1::after {
  content: "";
  position: absolute; left: 0; bottom: -3px;
  width: 4.5rem; height: 3px;
  background: var(--pomarancz);
}
h2 { font-size: 1.45rem; margin: 2.2rem 0 .8rem; }
h3 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; }

p { margin: 0 0 1rem; hyphens: auto; overflow-wrap: break-word; }
ul, ol { padding-left: 1.4rem; margin: 0 0 1rem; }
li { margin-bottom: .3rem; }
li::marker { color: var(--pomarancz); }
small { font-size: .85em; color: var(--tusz-2); }
strong { font-weight: 650; }

/* Rysunki */
figure {
  margin: 1.75rem 0;
  max-width: 46rem;
}
figure > a, figure > img {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--stal-200);
  padding: .4rem;
  line-height: 0;
}
figure img { display: block; }
figure > a { position: relative; max-width: 100%; }
figure > img { max-width: 100%; }
figure > a::after {
  content: "";
  position: absolute; right: .4rem; bottom: .4rem;
  width: 1.9rem; height: 1.9rem;
  background: var(--stal-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/1.1rem no-repeat;
  opacity: .8;
  transition: opacity .15s;
}
figure > a:hover::after { opacity: 1; }
figure > a:hover { border-color: var(--stal-500); }
figure.obok { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
figure.obok figcaption { flex-basis: 100%; }
figcaption {
  margin-top: .5rem;
  padding-left: .7rem;
  border-left: 3px solid var(--stal-300);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--tusz-2);
}

/* Ramka „Warto wiedzieć” */
.uwaga {
  margin: 2rem 0;
  background: var(--uwaga-tlo);
  border: 1px solid #e3d29a;
  position: relative;
  padding: 1.6rem 1.25rem .4rem;
}
.uwaga::before {
  content: "";
  position: absolute; left: -1px; right: -1px; top: -1px;
  height: 7px;
  background: repeating-linear-gradient(-45deg, var(--ostrzezenie) 0 10px, var(--stal-900) 10px 20px);
}
.uwaga-tytul {
  margin: 0 0 .5rem;
  font: 700 .85rem/1.2 var(--font-tech);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--stal-900);
}
.uwaga-tytul::before {
  content: "!";
  display: inline-grid; place-items: center;
  width: 1.3rem; height: 1.3rem; margin-right: .5rem;
  background: var(--stal-900); color: var(--ostrzezenie);
  font-weight: 800; letter-spacing: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  padding-top: .25rem;
  vertical-align: -.15rem;
}

/* Tabele */
.tabela { overflow-x: auto; margin: 1.5rem 0; max-width: 46rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; background: #fff; }
th, td { border: 1px solid var(--stal-200); padding: .55rem .7rem; vertical-align: top; text-align: left; }
th {
  background: var(--stal-800); color: #fff;
  font: 600 .85rem/1.3 var(--font-tech);
  text-transform: uppercase; letter-spacing: .06em;
}
tbody tr:nth-child(even) td { background: var(--stal-100); }

/* Przypisy / literatura na końcu strony */
.przypisy {
  margin-top: 3rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--stal-300);
  font-size: .88rem;
  color: var(--tusz-2);
}
.przypisy h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .1em; }
.przypisy p { margin-bottom: .55rem; hyphens: none; }

/* Lista publikacji (strona Literatura) */
.publikacje { list-style: none; padding: 0; }
.publikacje li {
  padding: .9rem 1rem .9rem 3.4rem;
  margin-bottom: .6rem;
  background: #fff;
  border: 1px solid var(--stal-200);
  position: relative;
}
.publikacje li::before {
  content: "PDF";
  position: absolute; left: .75rem; top: 1rem;
  font: 700 .65rem/1 var(--font-tech);
  letter-spacing: .05em;
  color: #fff; background: var(--stal-700);
  padding: .3rem .3rem;
}
.publikacje a { font-weight: 600; }
.publikacje small { display: block; margin-top: .25rem; }

/* Strona główna */
.wstep {
  font-size: 1.15rem;
  color: var(--stal-800);
}
.dokumenty { list-style: none; padding: 0; }
.dokumenty li { margin-bottom: .5rem; }
.dokumenty a {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem;
  background: var(--stal-800); color: #fff;
  text-decoration: none; font-weight: 600;
  border-left: 4px solid var(--pomarancz);
}
.dokumenty a:hover { background: var(--stal-700); color: #fff; }
.dokumenty .format {
  font: 700 .7rem/1 var(--font-tech);
  letter-spacing: .08em;
  color: var(--stal-900); background: var(--stal-200);
  padding: .2rem .35rem;
}
.spis { margin-top: 2.75rem; }
.spis-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.spis-grupa {
  background: #fff;
  border: 1px solid var(--stal-200);
  border-top: 3px solid var(--stal-700);
  padding: .9rem 1.1rem .6rem;
}
.spis-grupa h3 {
  margin: 0 0 .5rem;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--pomarancz-ciemny);
}
.spis-grupa ul { list-style: none; padding: 0; margin: 0; }
.spis-grupa li { margin: 0; border-top: 1px solid var(--stal-100); }
.spis-grupa li:first-child { border-top: 0; }
.spis-grupa a { display: block; padding: .35rem 0; color: var(--tusz); text-decoration: none; }
.spis-grupa a:hover { color: var(--pomarancz-ciemny); text-decoration: underline; }

/* Poprzednia / następna */
.kolejne { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.kolejne a {
  flex: 0 1 48%;
  display: block;
  padding: .75rem 1rem;
  background: var(--stal-800); color: #fff; text-decoration: none;
  font-weight: 600; line-height: 1.3;
}
.kolejne a:hover { background: var(--stal-700); }
.kolejne span {
  display: block;
  font: 600 .72rem/1.2 var(--font-tech);
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--stal-300); margin-bottom: .25rem;
}
.kolejne-wstecz span::before { content: "← "; }
.kolejne-dalej { margin-left: auto; text-align: right; }
.kolejne-dalej span::after { content: " →"; }

/* Stopka */
.stopka {
  background: var(--stal-950);
  color: var(--stal-300);
  font-size: .88rem;
  border-top: 8px solid var(--stal-800);
}
.stopka-wnetrze { max-width: var(--szer-max); margin: 0 auto; padding: 1.5rem 1rem; }
.stopka p { margin: .2rem 0; }
.stopka strong { color: var(--stal-100); }
.stopka a { color: var(--ostrzezenie); }

/* Powiększenie rysunku */
.podglad {
  border: 0; padding: 0; background: transparent;
  max-width: 96vw; max-height: 96vh; overflow: visible;
}
.podglad::backdrop { background: rgba(14,16,18,.88); }
.podglad img {
  display: block;
  max-width: 96vw; max-height: 86vh;
  width: auto; height: auto;
  background: #fff; padding: .4rem;
  margin: 0 auto;
}
.podglad-podpis { color: #e9ebed; text-align: center; margin: .6rem auto 0; max-width: 60rem; font-size: .95rem; }
.podglad-zamknij {
  position: fixed; top: .75rem; right: .75rem;
  width: 2.75rem; height: 2.75rem;
  border: 2px solid var(--stal-300); background: var(--stal-900); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.podglad-zamknij:hover { border-color: var(--ostrzezenie); }

/* Przycisk menu (telefony) */
.menu-przycisk {
  display: none;
  align-items: center; gap: .55rem;
  padding: .55rem .9rem;
  background: var(--stal-900); color: #fff;
  border: 1px solid var(--stal-500);
  font: 600 .9rem/1 var(--font-tech);
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer;
}
.menu-ikona, .menu-ikona::before, .menu-ikona::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative;
}
.menu-ikona::before, .menu-ikona::after { content: ""; position: absolute; left: 0; }
.menu-ikona::before { top: -6px; }
.menu-ikona::after { top: 6px; }

/* ---------- Telefony i tablety ---------- */
@media (max-width: 900px) {
  .uklad { grid-template-columns: 1fr; }
  .js .menu-przycisk:not([hidden]) { display: inline-flex; }
  .js .nawigacja { display: none; }
  .js .nawigacja.otwarte { display: block; }
  .nawigacja { border-right: 0; padding-top: .25rem; }
  .polecamy { display: none; }
  .tresc { padding: 1rem 0 2rem; }
  .artykul { border-left: 0; border-right: 0; }
  .marka-nazwa { font-size: 1.35rem; }
  .marka-haslo { font-size: .72rem; letter-spacing: .12em; }
  .marka img { width: 44px; height: 44px; }
}
@media (max-width: 520px) {
  body { font-size: 1rem; }
  .marka-haslo { display: none; }
  .kolejne { flex-direction: column; padding: 0 1rem; }
  .kolejne a { flex-basis: auto; }
  .kolejne-dalej { text-align: left; margin-left: 0; }
}

/* ---------- Druk ---------- */
@media print {
  body { background: #fff; font-size: 11pt; }
  .naglowek, .pas-ostrzegawczy, .nawigacja, .kolejne, .stopka, .pomin, .podglad { display: none !important; }
  .uklad { display: block; }
  .tresc { padding: 0; }
  .artykul { border: 0; box-shadow: none; padding: 0; }
  figure > a::after { display: none; }
  a { color: inherit; }
}