/* PSRWN Oddział w Olsztynie – arkusz stylów strony głównej */
:root {
  /* kolory z logo PSRWN */
  --granat: #0040ad; --granat-ciemny: #002a7a; --granat-jasny: #1c5bd1;
  --zloty: #007a33; --zloty-jasny: #e6f4ea;   /* akcent: zieleń z logo */
  --czerwien: #d61c1c;
  --tlo: #f6f7fa; --karta: #fff; --tekst: #1c222b; --slaby: #5b6675; --linia: #dde2ea;
  --promien: 12px; --cien: 0 1px 2px rgba(20,40,66,.05), 0 6px 20px rgba(20,40,66,.07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--tekst); background: var(--tlo); }
a { color: var(--granat-jasny); }
a:hover { color: var(--granat-ciemny); }
h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.015em; color: var(--granat); }
h2 { font-size: 1.45rem; margin: 0 0 .8rem; color: var(--granat); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: .35rem; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
main.wrap { padding-top: 32px; padding-bottom: 56px; }
.drobne { font-size: .9rem; color: var(--slaby); }
.pomin { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px; z-index: 100; }
.pomin:focus { left: 8px; }

/* nagłówek */
.naglowek { background: var(--granat); color: #fff; }
.pasek-gorny { display: flex; align-items: center; gap: 20px; min-height: 76px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.marka { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.marka-logo { width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.marka-tekst { display: flex; flex-direction: column; line-height: 1.15; }
.marka-tekst strong { font-size: 1.15rem; letter-spacing: .02em; }
.marka-tekst small { font-size: .82rem; opacity: .85; }
.kontakt-mini { margin-left: auto; display: flex; gap: 18px; font-size: .9rem; align-items: center; }
.strefa-btn { border: 1px solid rgba(255,255,255,.55); border-radius: 8px; padding: 6px 12px; font-weight: 600; }
.strefa-btn:hover { background: rgba(255,255,255,.12); text-decoration: none !important; }
.tylko-mobile { display: none; }
.kontakt-mini a { color: #e6ecf5; text-decoration: none; }
.kontakt-mini a:hover { color: #fff; text-decoration: underline; }
.menu-przycisk { display: none; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 600; padding: 8px 14px; cursor: pointer; }
.menu { background: var(--granat-ciemny); border-top: 3px solid; border-image: linear-gradient(90deg, var(--czerwien) 0 33.3%, #fff 33.3% 66.6%, var(--zloty) 66.6%) 1; }
.menu .wrap { display: flex; flex-wrap: wrap; gap: 2px; }
.menu a { color: #dfe6f0; text-decoration: none; padding: 12px 12px; font-weight: 600; font-size: .93rem; border-bottom: 3px solid transparent; }
.menu a:hover { color: #fff; background: rgba(255,255,255,.06); }
.menu a.aktywny { color: #fff; border-bottom-color: var(--zloty); }
.menu a.strefa { color: #bfe3cc; }
@media (max-width: 900px) {
  .kontakt-mini { display: none; }
  .menu-przycisk { display: inline-block; margin-left: auto; }
  .menu { display: none; }
  .menu.otwarte { display: block; }
  .menu .wrap { flex-direction: column; padding-bottom: 8px; }
  .menu a { border-bottom: 1px solid rgba(255,255,255,.08); }
  .menu a.aktywny { border-left: 3px solid var(--zloty); }
  .tylko-mobile { display: block; }
}

/* hero */
.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: stretch; margin-bottom: 36px; }
.hero-tekst { background: var(--karta); border-radius: var(--promien); box-shadow: var(--cien); padding: 32px 36px; border-top: 5px solid; border-image: linear-gradient(90deg, var(--czerwien) 0 33.3%, var(--granat) 33.3% 66.6%, var(--zloty) 66.6%) 1; }
.hero-tekst p.lead { font-size: 1.1rem; color: #2a3340; }
.hero-box { background: var(--granat); color: #fff; border-radius: var(--promien); padding: 28px 30px; display: flex; flex-direction: column; gap: 10px; }
.hero-box h2 { color: #fff; font-size: 1.2rem; margin-bottom: 4px; }
.hero-box a { color: #fff; }
.hero-box .wiersz { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: .95rem; }
.hero-box .wiersz:last-of-type { border-bottom: 0; }
.hero-box small { opacity: .8; display: block; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }

/* przyciski */
.btn { display: inline-block; padding: 11px 20px; border-radius: 9px; font-weight: 700; text-decoration: none; border: 1px solid var(--granat); color: var(--granat); background: #fff; line-height: 1.25; }
.btn:hover { background: #eef2f8; color: var(--granat-ciemny); }
.btn-glowny { background: var(--granat); color: #fff; }
.btn-glowny:hover { background: var(--granat-ciemny); color: #fff; }
.btn-zloty { background: var(--zloty); border-color: var(--zloty); color: #fff; }
.btn-zloty:hover { filter: brightness(.94); color: #fff; }
.akcje { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* karty i siatki */
.karta { background: var(--karta); border-radius: var(--promien); box-shadow: var(--cien); padding: 26px 28px; margin-bottom: 24px; }
.karta.miekka { box-shadow: none; border: 1px solid var(--linia); background: #fbfcfe; }
.karta.zlota { background: var(--zloty-jasny); border: 1px solid #b9dcc4; box-shadow: none; }
.siatka { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.siatka-2 { display: grid; gap: 24px; grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 860px) { .siatka-2 { grid-template-columns: 1fr; } }
.sekcja { margin-bottom: 36px; }
.sekcja-naglowek { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sekcja-naglowek h2 { margin: 0; }

/* kafle skrótów */
.kafle { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 36px; }
.kafel { background: var(--karta); border-radius: var(--promien); box-shadow: var(--cien); padding: 20px 22px; text-decoration: none; color: inherit; border-left: 4px solid var(--granat); transition: transform .12s ease; }
.kafel:hover { transform: translateY(-2px); color: inherit; }
.kafel strong { display: block; color: var(--granat); font-size: 1.05rem; margin-bottom: 4px; }
.kafel span { font-size: .92rem; color: var(--slaby); }
.kafel.zloty { border-left-color: var(--zloty); }

/* aktualności */
.aktualnosc { display: grid; grid-template-columns: 92px 1fr; gap: 18px; background: var(--karta); border-radius: var(--promien); box-shadow: var(--cien); padding: 20px 22px; margin-bottom: 14px; }
.aktualnosc .data { background: #eef2f8; color: var(--granat); border-radius: 9px; text-align: center; padding: 10px 4px; align-self: start; line-height: 1.1; }
.aktualnosc .data strong { display: block; font-size: 1.6rem; }
.aktualnosc .data span { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.aktualnosc .data small { display: block; font-size: .75rem; color: var(--slaby); margin-top: 3px; }
.aktualnosc h3 { margin-bottom: 4px; }
.aktualnosc h3 a { text-decoration: none; color: var(--granat); }
.aktualnosc h3 a:hover { text-decoration: underline; }
.aktualnosc p { margin-bottom: 4px; }
.etykieta { display: inline-block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--zloty); margin-bottom: 4px; }
@media (max-width: 560px) { .aktualnosc { grid-template-columns: 1fr; } .aktualnosc .data { display: flex; gap: 8px; align-items: baseline; justify-content: center; } }

/* szkolenia z systemu */
.szkolenie-wiersz { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linia); }
.szkolenie-wiersz:last-child { border-bottom: 0; }
.szkolenie-wiersz .kiedy { font-weight: 700; color: var(--granat); }
.szkolenie-wiersz .kiedy small { display: block; font-weight: 400; color: var(--slaby); }
.szkolenie-wiersz .meta { font-size: .9rem; color: var(--slaby); }
@media (max-width: 640px) { .szkolenie-wiersz { grid-template-columns: 1fr; gap: 6px; } }

/* listy osób */
.osoby { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.osoby li { padding: 8px 0; border-bottom: 1px solid var(--linia); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.osoby li span { color: var(--slaby); font-size: .9rem; }
.osoby-zwarte { columns: 3; column-gap: 28px; list-style: none; padding: 0; margin: 0; }
.osoby-zwarte li { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid var(--linia); }
@media (max-width: 800px) { .osoby-zwarte { columns: 2; } }
@media (max-width: 500px) { .osoby-zwarte { columns: 1; } }

/* definicje, tabele, pliki */
dl.dane { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
dl.dane dt { color: var(--slaby); }
dl.dane dd { margin: 0; }
@media (max-width: 520px) { dl.dane { grid-template-columns: 1fr; gap: 0; } dl.dane dd { margin-bottom: 10px; } }
.pliki { list-style: none; padding: 0; margin: 0; }
.pliki li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linia); }
.pliki li::before { content: "⤓"; color: var(--zloty); font-weight: 700; font-size: 1.1rem; }
.pliki li a { font-weight: 600; text-decoration: none; }
.pliki li small { color: var(--slaby); margin-left: auto; white-space: nowrap; }
table.harmonogram { width: 100%; border-collapse: collapse; }
.harmonogram th, .harmonogram td { padding: 10px 10px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
.harmonogram th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slaby); }
.harmonogram td.data { white-space: nowrap; font-weight: 700; color: var(--granat); }
.harmonogram tr.minione td { color: var(--slaby); }
.uwaga { background: #fff4f4; border-left: 4px solid var(--czerwien); padding: 12px 16px; border-radius: 8px; margin-bottom: 1rem; }
.konto { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.nr-lista li { margin-bottom: .6rem; }

/* stopka */
.stopka { background: #0b1f4d; color: #d5dde8; font-size: .92rem; padding: 36px 0 20px; }
.stopka a { color: #fff; }
.stopka-siatka { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stopka strong { color: #fff; }
.stopka-dol { border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 16px; font-size: .84rem; color: #a9b8d3; }

/* wspomnienia */
.wspomnienie { display: grid; grid-template-columns: 220px 1fr; gap: 28px; background: var(--karta); border-radius: var(--promien); box-shadow: var(--cien); padding: 30px 32px; margin-bottom: 28px; }
.wspomnienie .portret { width: 100%; height: auto; display: block; border-radius: 10px; background: #eef2f8; border: 1px solid var(--linia); filter: grayscale(100%); }
.wspomnienie .portret-brak { width: 100%; aspect-ratio: 3/4; border-radius: 10px; background: linear-gradient(160deg, #eef2f8, #dde5f2); display: grid; place-items: center; color: var(--granat); font-size: 3rem; font-weight: 700; border: 1px solid var(--linia); }
.wspomnienie .lata { color: var(--slaby); font-size: 1rem; font-weight: 400; margin-left: 8px; }
.wspomnienie .motto { font-size: 1.08rem; color: #2a3340; border-left: 3px solid var(--zloty); padding-left: 14px; margin: 6px 0 18px; }
.wspomnienie .tresc p { text-align: justify; hyphens: auto; }
.wspomnienie .zrodla { font-size: .88rem; color: var(--slaby); border-top: 1px solid var(--linia); padding-top: 10px; margin-top: 8px; }
@media (max-width: 720px) { .wspomnienie { grid-template-columns: 1fr; } .wspomnienie .portret, .wspomnienie .portret-brak { max-width: 220px; } }
.czlonkowie td { padding: 9px 10px; }