/* =========================================================
   PTPN — bazowy plik CSS
   Wszystkie kolory i typografia jako zmienne (custom properties)
   w sekcji :root — zmiana kierunku wizualnego (Koncepcja 1/2/3)
   sprowadza się do podmiany wartości w tej jednej sekcji.
   ========================================================= */

:root {
  /* --- Kolory marki (domyślnie: Koncepcja 1 — Klasyczna elegancja) --- */
  --color-navy:        #16324f;   /* główny granat — nagłówki, tło nawigacji */
  --color-navy-dark:   #0f2438;   /* ciemniejszy wariant, np. tło hero */
  --color-teal:        #3f7a89;   /* akcent turkusowy — linki, drugorzędne CTA */
  --color-accent:      #a56a3a;   /* sepia/złoto z logo PTPN — główne CTA */
  --color-accent-dark: #7a4a2a;

  /* --- Neutralne / tło --- */
  --color-bg:          #f7f4ee;   /* ciepła kremowa biel */
  --color-surface:     #ffffff;
  --color-border:      #e0dcd0;
  --color-text:        #1a1a1a;
  --color-text-muted:  #5f5e5a;
  --color-text-inverse:#f0e6d8;

  /* --- Typografia --- */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-meta: 0.75rem;   /* metadane: daty, liczniki, drobne etykiety — mniejsze niż zwykły drugorzędny tekst */

  /* --- Odstępy / promienie --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
}

/* --------------------------------------------------------
   Alternatywne palety — do podmiany z --root gdy wybierzecie
   inny kierunek. Wystarczy skopiować blok do :root albo
   dodać atrybut np. <body data-theme="minimal">.
   -------------------------------------------------------- */

/* Koncepcja 2 — Nowoczesny minimalizm */
body[data-theme="minimal"] {
  --color-bg: #ffffff;
  --color-accent: #3f7a89;
  --font-heading: var(--font-body);
}

/* Koncepcja 3 — Mocne, instytucjonalne hero */
body[data-theme="institutional"] {
  --color-accent: #c08a4f;
  --color-bg: #f7f4ee;
}

/* =========================================================
   Reset / bazowe
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}
/* "Sticky footer": na krótkich stronach stopka trzyma się dołu ekranu
   (main rośnie i wypełnia wolne miejsce); na długich stronach zachowuje
   się normalnie i przewija się razem z treścią. Dotyczy tylko stron
   publicznych z includes/site_header.php — panel ma własny układ
   (.panel-shell) i sam ustawia min-height: 100vh. */
body > main { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--font-heading); color: var(--color-navy); margin: 0 0 var(--space-2); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
a { color: var(--color-teal); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* =========================================================
   Nawigacja
   ========================================================= */
.site-header {
  background: var(--color-navy);
  padding: 14px 0;
  position: relative;
}
.site-header .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  position: relative;
  padding-top: 4px;
  padding-bottom: 4px;
}
/* Logo — tak jak zdjecia po prawej (.header-photos) — nachodzi w dol,
   polowa na granacie, polowa ponizej paska. Wyjete z przeplywu flex, wiec
   nie wplywa na pozycje nazwy/menu; te maja wlasny staly wcieciowy odstep
   (LOGO_WCIECIE) zeby zaczynac sie w tym samym miejscu co dawniej. */
.site-header .logo-ptpn-wrap {
  position: absolute;
  left: var(--space-3);
  top: 100%;
  transform: translateY(-97%);
  z-index: 20;
  display: block;
}
.site-header .logo-ptpn-plakietka {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.site-header .logo-ptpn {
  height: 90px;
  width: auto;
  display: block;
}

/* Dwa wiersze: nazwa u gory, menu pod nazwa (nie pod logo — logo jest
   teraz osobnym, plywajacym elementem opisanym wyzej). LOGO_WCIECIE = 64px
   wysokosci logo * proporcje (~0.58) + padding plakietki (24px) + odstep
   (10px) ≈ 71px — tyle samo wciecia dostaja nazwa i menu, zeby zaczynaly
   sie w tym samym miejscu, "za" logo. */
.site-header .brand-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 90px;
}
.site-header .brand {
  display: flex;
  align-items: center;
  color: var(--color-text-inverse);
  font-size: 2rem;
}
.site-header .brand-rok-zalozenia {
  margin: -14px 0 0 250px;
  font-size: var(--fs-small);
  color: #cdd8e3;
  letter-spacing: 0.02em;
}
.site-header nav {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.site-header nav a {
  color: #cdd8e3;
  font-size: var(--fs-small);
}
.site-header nav a:hover { color: #fff; }

/* --- Dropdown (menu rozwijane publicznej nawigacji) ---
   Na komputerze rozwija je najechanie myszką (:hover/:focus-within).
   Na telefonie/tablecie (brak hover) sluzy do tego przycisk .nav-toggle,
   ktory dokleja klase .open do .nav-item — patrz js/nav.js. */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  padding: 0;
  border: none;
  background: transparent;
  color: #cdd8e3;
  font-size: 0.7rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.nav-toggle:hover,
.nav-toggle:focus-visible { background: rgba(255,255,255,0.12); }
.nav-item.open .nav-toggle span { transform: rotate(180deg); }
.nav-toggle span { display: inline-block; transition: transform 0.15s ease; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-width: 260px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 30;
  padding: 6px 0;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown { display: block; }
.nav-dropdown a {
  display: block;
  padding: 8px 16px;
  color: var(--color-navy);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--color-bg); text-decoration: none; }
/* Wyższa specyficzność niż ".site-header nav a" (kolor jasnego menu górnego
   poziomu) — bez tego ta reguła by go nie przebiła, mimo że jest bardziej
   trafna dla linków w rozwijanym menu. */
.site-header .nav-dropdown a { color: var(--color-navy); }
.site-header .nav-dropdown a:hover { color: var(--color-navy); }
/* Urzadzenia dotykowe nie maja hover, wiec pokazujemy strzalke do
   recznego rozwijania podmenu — na komputerze jest zbedna (dziala hover),
   wiec zostaje ukryta. */
@media (hover: none) {
  .nav-toggle { display: inline-flex; }
}

/* =========================================================
   Przyciski
   ========================================================= */
.btn {
  display: inline-block;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: var(--fs-small);
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); text-decoration: none; }
.btn-secondary { background: var(--color-teal); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--color-navy); color: var(--color-navy); }
.btn-danger { background: #a53a3a; color: #fff; }

/* =========================================================
   Karty
   ========================================================= */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-card);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.card .eyebrow {
  font-size: 0.75rem;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  padding: var(--space-4) 0;
  text-align: center;
}
.hero p.lead {
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto var(--space-2);
}

/* =========================================================
   Formularze (logowanie, panel redaktora)
   ========================================================= */
.form-box {
  max-width: 380px;
  margin: var(--space-4) auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.form-group { margin-bottom: var(--space-2); }
.form-group label {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="file"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-family: inherit;
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-error {
  background: #fbeaea;
  color: #8a2c2c;
  border: 1px solid #eecccc;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: var(--fs-small);
  margin-bottom: var(--space-2);
}
.form-success {
  background: #eaf4ea;
  color: #2c5f2c;
  border: 1px solid #cfe6cf;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: var(--fs-small);
  margin-bottom: var(--space-2);
}

/* =========================================================
   Panel administracyjny (redaktor)
   ========================================================= */
.panel-shell { display: flex; min-height: 100vh; }
.panel-sidebar {
  width: 220px;
  background: var(--color-navy-dark);
  color: #cdd8e3;
  padding: var(--space-3) var(--space-2);
  flex-shrink: 0;
}
.panel-sidebar a {
  display: block;
  color: #cdd8e3;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  margin-bottom: 4px;
}
.panel-sidebar a:hover,
.panel-sidebar a.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
}
.panel-main { flex: 1; padding: var(--space-3); }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
table.data-table th, table.data-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-small);
}
table.data-table th { background: var(--color-navy); color: #fff; font-weight: normal; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
}
.badge-published { background: #eaf4ea; color: #2c5f2c; }
.badge-draft { background: #f0eee6; color: #7a7568; }

.hero-photos {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
}
.hero-photos img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.hero-photos img:first-child { margin-right: -36px; z-index: 1; }
.hero-photos img:last-child { z-index: 2; }

/* Zdjecia w kolkach zaczepione o prawy kraniec paska nawigacji, tak by
   nachodzily w polowie na granatowy pasek, a w polowie zwisaly ponizej
   niego (na tlo hero). Na waskich ekranach menu sie zawija, wiec tam
   wracaja do normalnego ukladu pod paskiem (patrz media query nizej). */
.header-photos {
  position: absolute;
  right: -20px;  /* "kawalek za" napisem Wydawnictwo PTPN - dostroj wg gustu */
  top: 100%;
  transform: translateY(-65%);
  display: flex;
  z-index: 20;
}
.header-photos img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.header-photos img:first-child { margin-right: -44px; z-index: 1; }
.header-photos img:last-child { z-index: 2; }

.site-footer {
  background: var(--color-navy-dark, var(--color-navy));
  color: #cdd8e3;
  margin-top: var(--space-4);
  padding: var(--space-3) 0;
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--fs-small);
}
.social-icons { display: flex; gap: 10px; }
.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #cdd8e3;
}
.social-icons a:hover { background: rgba(255,255,255,0.22); text-decoration: none; }
.social-icons svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 960px) {
  .panel-shell { flex-direction: column; }
  .panel-sidebar { width: 100%; }
  .site-header nav { gap: var(--space-2); }
  .hero-photos img { width: 110px; height: 110px; }
  .hero-photos img:first-child { margin-right: -26px; }
  .header-photos {
    position: static;
    transform: none;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .site-header .logo-ptpn-wrap {
    position: static;
    transform: none;
    display: inline-flex;
    margin-bottom: 8px;
  }
  .site-header .brand-nav {
    padding-left: 0;
  }
  .nav-dropdown {
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 2 * var(--space-3));
  }
}

/* =========================================================
   Sekcje strony głównej (aktualności / ogłoszenia / pliki)
   ========================================================= */
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--space-4) 0 var(--space-2);
}
.section-heading a.see-all { font-size: var(--fs-small); }

.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.doc-list li:last-child { border-bottom: none; }
.doc-list .doc-title { font-size: var(--fs-body); color: var(--color-text); }
.doc-meta { font-size: var(--fs-meta); color: var(--color-text-muted); }

.offer-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  background: var(--color-border);
}
.offer-card .price { color: var(--color-accent); font-size: var(--fs-small); margin: 4px 0 0; }

.stub-notice {
  background: #fff8e6;
  border: 1px solid #f0e0b0;
  color: #7a5c1e;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--fs-small);
  margin-bottom: var(--space-3);
}

.pull-quote {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg);
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-navy);
  font-style: italic;
}
.pull-quote footer {
  margin-top: 8px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  background: none;
  padding: 0;
}

.image-placeholder {
  background: var(--color-border);
  border: 1px dashed #b8b2a0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--space-2);
  margin: var(--space-3) 0;
}

article.page-content h2 { margin-top: var(--space-4); }
article.page-content p { line-height: 1.65; margin-bottom: var(--space-2); }

/* Prosta lista linkow na stronach-spisach (np. "Projekty zakonczone") —
   kazdy wpis w karcie-liscie, podwpisy (np. podstrony Kongresu) lekko
   wciete i bez wlasnego punktora, zeby bylo widac hierarchie. */
.link-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.link-list li { border-bottom: 1px solid var(--color-border); }
.link-list li a {
  display: block;
  padding: 10px 4px;
  font-size: var(--fs-body, 1rem);
}

/* Samodzielne zdjecia w tresci stron statycznych — wysrodkowane, nie przyklejone do lewej.
   max-width zapobiega temu, zeby zdjecia zapisane w duzej rozdzielczosci (np. skan plakatu
   1000+ px) wyswietlaly sie w swoim naturalnym rozmiarze obok maleńkich miniaturek 200px —
   kazde zdjecie jest skalowane do tej samej, rozsadnej szerokosci maksymalnej. */
.page-content > img,
.page-content p > img:only-child {
  display: block;
  max-width: min(100%, 560px);
  height: auto;
  margin: var(--space-3) auto;
}

.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-2); }
.filter-pills a {
  font-size: var(--fs-small);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.filter-pills a.active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.filter-pills a:hover { text-decoration: none; border-color: var(--color-navy); }

/* =========================================================
   Strona Kontakt: mapa + karty dzialow + blok danych do faktury
   ========================================================= */
.map-embed {
  position: relative;
  width: 100%;
  max-width: 700px;
  padding-top: 45%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: var(--space-2) 0 var(--space-4);
}
.map-embed iframe {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border: 0;
}

.contact-card h3 {
  margin-bottom: var(--space-1);
}
.contact-card address {
  font-style: normal;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}
.contact-card .osoba {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  margin-top: 10px;
  font-size: var(--fs-small);
}
.contact-card .osoba .funkcja {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-meta);
  display: block;
  margin-bottom: 2px;
}
.contact-card .osoba a { color: var(--color-teal); }

.billing-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-4);
  max-width: 500px;
}
.billing-box h3 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-h3);
}
.billing-box dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--space-2);
  margin: 0;
  font-size: var(--fs-small);
}
.billing-box dt { color: var(--color-text-muted); }
.billing-box dd { margin: 0; color: var(--color-text); }

/* =========================================================
   Widok pojedynczej aktualności (tresc zmigrowana z WordPressa —
   moze zawierac obrazki, galerie, podpisy i osadzone filmy)
   ========================================================= */
.tresc-wpisu { line-height: 1.65; margin-top: var(--space-2); }
/* Poprawka tresci zaimportowanej z WordPressa: część linków i fragmentów
   tekstu ma na sztywno zapisany bardzo jasny kolor (biały / jasnobłękitny),
   który na starej, ciemnej motywce był czytelny, ale na nowym jasnym tle jest
   praktycznie niewidoczny (widoczny dopiero po zaznaczeniu tekstu). Nadpisujemy
   go kolorem tekstu/linków nowej strony niezaleznie od koloru zapisanego w tresci. */
.tresc-wpisu [style*="color: #ffffff"],
.tresc-wpisu [style*="color: #ccffff"],
.tresc-wpisu [style*="color: #00ffff"],
.tresc-wpisu [style*="color: #33cccc"] {
  color: inherit !important;
}
.tresc-wpisu a[style*="color: #ffffff"],
.tresc-wpisu a[style*="color: #ccffff"],
.tresc-wpisu a[style*="color: #00ffff"],
.tresc-wpisu a[style*="color: #33cccc"] {
  color: var(--color-teal) !important;
}
.tresc-wpisu p { margin: 0 0 var(--space-2); }
.tresc-wpisu h4 { font-family: var(--font-heading); color: var(--color-navy); margin: var(--space-3) 0 var(--space-1); }
.tresc-wpisu ul, .tresc-wpisu ol { margin: 0 0 var(--space-2); padding-left: 1.25rem; }
.tresc-wpisu img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

.tresc-wpisu .galeria-zdjec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-2) 0;
}
.tresc-wpisu .galeria-zdjec img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.tresc-wpisu .zdjecie-z-podpisem {
  margin: var(--space-2) 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  text-align: center;
}
.tresc-wpisu .zdjecie-z-podpisem img { border-radius: var(--radius-sm); }

.tresc-wpisu .wideo-embed {
  margin: var(--space-2) 0;
  max-width: 100%;
}
.tresc-wpisu .wideo-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: var(--radius-sm);
  border: none;
}

/* Link "Czytaj wiecej" pod podgladem tresci w karcie listy aktualnosci */
.card p:last-child { margin-bottom: 0; }
.card p:last-child a { font-size: var(--fs-small); }

/* =========================================================
   Strony "O PTPN" — władze, struktura, historia, prezesi,
   członkowie honorowi, zbiory artystyczne, statut
   ========================================================= */

/* --- Osoby (Prezydium Zarządu, Komisja Rewizyjna) --- */
.osoby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
}
.osoba-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-card);
}
.osoba-card .funkcja {
  display: block;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--fs-meta);
  margin-bottom: 4px;
}
.osoba-card .imie-nazwisko {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-navy);
  margin-bottom: 4px;
}
.osoba-card a { color: var(--color-teal); font-size: var(--fs-small); }
.sekcja-osob h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin: var(--space-4) 0 0;
}
.sekcja-osob .lead-info {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  margin: 0 0 var(--space-1);
}

/* --- Struktura: wydziały i komisje --- */
.wydzialy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.wydzial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-card);
}
.wydzial-card .nr-wydzialu {
  display: block;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-meta);
  margin-bottom: 4px;
}
.wydzial-card h3 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin: 0 0 var(--space-1);
  font-size: var(--fs-h3);
}
.wydzial-card ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.wydzial-card li { margin-bottom: 3px; }
.wydzial-card a { color: var(--color-teal); }

/* --- Działalność: liczby w pigułce --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.stat-tile .liczba {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  color: var(--color-accent);
  line-height: 1.1;
}
.stat-tile .opis {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* --- Statut: karta dokumentu do pobrania --- */
.dokument-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
  max-width: 480px;
  margin-top: var(--space-2);
}
.dokument-card .ikona-pdf {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: var(--fs-small);
}
.dokument-card .tresc-dokumentu { flex: 1 1 auto; }
.dokument-card h3 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin: 0 0 4px;
  font-size: var(--fs-h3);
}
.dokument-card p { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: var(--fs-small); }

/* --- Historia: epoki i galeria zdjęć historycznych --- */
.epoka-naglowek {
  text-align: center;
  font-family: var(--font-heading);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-small);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 6px 0;
  margin: var(--space-4) 0 var(--space-2);
}

/* Galeria/podpisy uzywane takze poza .tresc-wpisu, np. na stronach statycznych */
.page-content .galeria-zdjec {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}
.page-content .galeria-zdjec img {
  width: 210px;
  height: 210px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.page-content .galeria-zdjec.miniatury img { width: 96px; height: 96px; }

.page-content figure.zdjecie-z-podpisem,
.page-content figure.galeria-obraz {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.page-content figure.galeria-obraz img { display: block; width: 100%; height: 220px; object-fit: cover; }
.page-content figure.galeria-obraz figcaption {
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Pojedyncze zdjęcie z podpisem (np. obraz + informacja o autorze) —
   w odróżnieniu od siatki galerii ma węższą, wyśrodkowaną kartę zamiast
   rozciągania się na całą szerokość treści. */
.page-content figure.zdjecie-z-podpisem {
  max-width: 480px;
  margin: var(--space-3) auto !important;
  padding: var(--space-2);
  text-align: center;
}
.page-content figure.zdjecie-z-podpisem img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--space-1);
  border-radius: var(--radius-sm);
}
.page-content figure.zdjecie-z-podpisem figcaption {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.galeria-obrazow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.galeria-obrazow-grid figure.galeria-obraz > a { display: block; cursor: zoom-in; }

/* --- Lightbox: powiększenie zdjęcia z galerii w wyskakującym okienku ---
   Znacznik jest jeden, wspólny dla całej strony (patrz includes/site_footer.php);
   otwiera go js/lightbox.js po kliknięciu w dowolne zdjęcie galerii. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: rgba(15, 23, 32, 0.92);
  padding: var(--space-3);
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lightbox-podpis {
  color: #fff;
  font-size: var(--fs-small);
  text-align: center;
  max-width: 700px;
  margin: 0;
}
.lightbox-zamknij {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-zamknij:hover { background: rgba(255,255,255,0.22); }

/* --- Prezesi PTPN: rozwijane biogramy --- */
.prezesi-lista { margin-top: var(--space-2); }
.prezes-pozycja {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-1);
  overflow: hidden;
}
.prezes-pozycja summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-2);
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: var(--fs-h3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.prezes-pozycja summary::-webkit-details-marker { display: none; }
.prezes-pozycja summary .lata {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.prezes-pozycja summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.prezes-pozycja[open] summary::after { content: '−'; }
.prezes-pozycja .biogram {
  padding: 0 var(--space-2) var(--space-2);
  border-top: 1px solid var(--color-border);
}
.prezes-pozycja .biogram p { max-width: none; }
.prezes-pozycja .zrodlo {
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  font-style: italic;
}

/* --- Członkowie Honorowi: zwarta lista wielokolumnowa --- */
.honorowi-lista {
  columns: 3 220px;
  column-gap: var(--space-3);
  margin-top: var(--space-3);
}
.honorowi-lista .osoba-honorowa {
  break-inside: avoid;
  padding: 3px 0;
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--color-border);
}
.honorowi-lista .osoba-honorowa b, .honorowi-lista .osoba-honorowa strong { color: var(--color-navy); }

/* =========================================================
   Strony "Nasze projekty"
   ========================================================= */

/* --- Cytat/wyróżnik w treści projektu --- */
.projekt-cytat {
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-navy);
  font-style: italic;
}

/* --- Filary/etapy: karty z rokiem --- */
.filary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.filar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-card);
}
.filar-card .rok {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-accent);
  line-height: 1.1;
  margin-bottom: 4px;
}
.filar-card h3 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin: 0 0 4px;
  font-size: var(--fs-h3);
}
.filar-card p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* --- Postacie/osoby powiązane z projektem (portret + podpis) --- */
.postacie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
  max-width: 640px;
}
.postac-karta { text-align: center; }
.postac-karta img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: 6px;
}
.postac-karta span {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-navy);
  font-weight: 600;
}

/* --- Lista znaczków (np. powiaty, kategorie) --- */
.znaczki-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-2) 0;
}
.znaczek {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: var(--fs-small);
  color: var(--color-navy);
}

/* --- Filmy (np. seria odcinków na YouTube) --- */
.wideo-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.wideo-karta {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  box-shadow: var(--shadow-card);
  color: var(--color-navy);
  font-size: var(--fs-small);
  font-weight: 600;
}
.wideo-karta:hover { border-color: var(--color-accent); text-decoration: none; }
.wideo-karta .ikona-play {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* --- Rząd przycisków (pobierz/zgłoszenie/regulamin itp.) --- */
.btn-rzad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0;
}

/* --- Wspólna nawigacja podstron jednego projektu (np. klaster Kongresu) --- */
.projekt-podnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.projekt-podnav a {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: var(--fs-small);
  color: var(--color-navy);
}
.projekt-podnav a:hover { border-color: var(--color-accent); text-decoration: none; }
.projekt-podnav a.aktywna {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-text-inverse);
}

/* --- Edycje konkursu: rozwijane sekcje (ten sam wzorzec co biogramy prezesów) --- */
.edycje-konkursu { margin-top: var(--space-2); }
.edycja-pozycja {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-1);
  overflow: hidden;
}
.edycja-pozycja summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-2);
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: var(--fs-h3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.edycja-pozycja summary::-webkit-details-marker { display: none; }
.edycja-pozycja summary .rok-edycji {
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.edycja-pozycja summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.edycja-pozycja[open] summary::after { content: '−'; }
.edycja-pozycja .edycja-tresc {
  padding: 0 var(--space-2) var(--space-2);
  border-top: 1px solid var(--color-border);
}
.edycja-pozycja .edycja-tresc p { max-width: none; }
.edycja-pozycja .edycja-tresc h4 {
  font-family: var(--font-heading);
  color: var(--color-navy);
  margin: var(--space-2) 0 4px;
}
/* Zdjecia plakatow/partnerow w tresci edycji konkursu — zapisane w bardzo
   roznych rozdzielczosciach (od ~210px do ponad 1000px), wiec bez wspolnego
   ograniczenia szerokosci wyswietlaly sie w swoim naturalnym, niespojnym
   rozmiarze. Ograniczamy kazde do tej samej, rozsadnej szerokosci
   maksymalnej i wysrodkowujemy, niezaleznie od tego czy obrazek jest
   samodzielny czy opakowany w link do lightboxa. */
.edycja-pozycja .edycja-tresc > img,
.edycja-pozycja .edycja-tresc p > img,
.edycja-pozycja .edycja-tresc > a,
.edycja-pozycja .edycja-tresc p > a {
  display: block;
  max-width: min(100%, 420px);
  margin: var(--space-2) auto;
}
.edycja-pozycja .edycja-tresc > a img,
.edycja-pozycja .edycja-tresc p > a img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.edycja-pozycja .edycja-tresc > img,
.edycja-pozycja .edycja-tresc p > img {
  height: auto;
  border-radius: var(--radius-sm);
}
/* Uwaga: miniaturki w .galeria-zdjec (siatka .page-content .galeria-zdjec,
   display:flex) NIE sa objete powyzszym ograniczeniem szerokosci pojedynczego
   zdjecia, bo selektory powyzej celuja tylko w bezposrednie dzieci .edycja-tresc
   / <p> — linki miniaturek sa zagniezdzone w .galeria-zdjec, wiec zachowuja
   swoj wlasny, rzedowy uklad. */

/* --- Rząd logotypów (np. organizatorzy/partnerzy projektu) --- */
.logotypy-rzad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.logotypy-rzad img {
  max-height: 140px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.honorowi-lista .osoba-honorowa .lata { color: var(--color-text-muted); font-size: var(--fs-meta); }
@media (max-width: 720px) {
  .honorowi-lista { columns: 1; }
}

/* =========================================================
   Kalendarz Wydarzeń
   ========================================================= */
.kalendarz-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  margin-top: var(--space-2);
}
.kalendarz-naglowek {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.kalendarz-tytul {
  font-family: var(--font-heading);
  color: var(--color-navy);
  font-size: var(--fs-h3);
  min-width: 180px;
  text-align: center;
}
.kalendarz-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-navy);
  font-size: 1.1rem;
}
.kalendarz-nav:hover { background: var(--color-border); text-decoration: none; }

.kalendarz-dni-tygodnia,
.kalendarz-tydzien {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.kalendarz-dni-tygodnia {
  margin-bottom: 4px;
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kalendarz-dzien {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 42px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  color: var(--color-text);
}
.kalendarz-dzien.poza-miesiacem { color: var(--color-text-muted); opacity: 0.4; }
.kalendarz-dzien.dzisiaj { box-shadow: inset 0 0 0 2px var(--color-navy); font-weight: 600; }
.kalendarz-dzien-numer { padding: 4px; }
.kalendarz-dzien.ma-wydarzenia {
  background: var(--color-accent);
  cursor: pointer;
}
.kalendarz-dzien-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.kalendarz-dzien-link:hover { background: var(--color-accent-dark); text-decoration: none; }
.kalendarz-kropka {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  margin-top: 2px;
}

/* Dymek z lista wydarzen danego dnia — pokazuje sie po najechaniu myszka
   na caly dzien (nie tylko na link), zeby nie znikal przy malym ruchu kursora. */
.kalendarz-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  background: var(--color-navy);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: max-content;
  max-width: 240px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  font-size: var(--fs-meta);
  text-align: left;
}
.kalendarz-dzien.ma-wydarzenia:hover .kalendarz-tooltip,
.kalendarz-dzien.ma-wydarzenia:focus-within .kalendarz-tooltip {
  display: block;
}
.kalendarz-tooltip-pozycja { padding: 2px 0; }
.kalendarz-tooltip-pozycja strong { color: var(--color-text-inverse); margin-right: 4px; }

@media (max-width: 720px) {
  .kalendarz-dzien { min-height: 34px; font-size: var(--fs-meta); }
  .kalendarz-tooltip { max-width: 180px; font-size: 0.7rem; }
}

.kalendarz-zakres-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg);
  border-radius: var(--radius-md);
}
.kalendarz-zakres-form input[type="date"] {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
}

.wydarzenia-lista { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.wydarzenie-pozycja {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}
.wydarzenie-data {
  display: inline-block;
  color: var(--color-accent);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}