/* ===================== Ostatnia aktualizacja 8.09.2025 22:00 ================ */
@font-face {
  font-family: 'HutaExtraBold';
  src: url('/fonts/Huta-ExtraBold.woff2') format('woff2'),
       url('/fonts/Huta-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HutaSemiBold';
  src: url('/fonts/Huta-SemiBold.woff2') format('woff2'),
       url('/fonts/Huta-SemiBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HutaBold';
  src: url('/fonts/Huta-Bold.woff2') format('woff2'),
       url('/fonts/Huta-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Huta-Regular';
  src: url('/fonts/Huta Variable.woff2') format('woff2'),
       url('/fonts/Huta Variable.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
    font-family: 'maszynopis';
    src: url('/fonts/KingthingsTrypewriter2.woff2') format('woff2'),
        url('/fonts/KingthingsTrypewriter2.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


/* === Twoje istniejące style === */
:root{--red:#b50000;--darkred:#5d0000;--cream:#f2ead8;--ink:#111111;--gold:#d0a341;}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;color:var(--ink);background:var(--cream);font-family: 'maszynopis', Courier; font-size: 18px;   monospace;line-height:1;}
/* ================= Nagłówki ================= */
h1, h2, h3 {
  /* Dokładnie tak samo jak w @font-face */
  font-family: 'HutaExtraBold', Impact, Haettenschweiler, 'Arial Narrow Bold', Arial, sans-serif;
  letter-spacing: 1px;
  margin: 0;
}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.15;background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMyIgY3k9IjEiIHI9IjEiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIxNSIgcj0iMC42IiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxjaXJjbGUgY3g9IjMzIiBjeT0iMjgiIHI9IjAuNSIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIwLjIiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjI5IiByPSIwLjQiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PC9zdmc+');background-size:200px 200px;}

/* ======================= Aktualności - poprawa czcionki ======================= */
#aktualnosci .note {
    font-size: 18px;      /* większa czcionka dla treści aktualności */
    line-height: 1;     /* komfortowa wysokość wiersza */
}

/* === Wydarzenia (nowa sekcja w stylu prasowym) === */
  .wydarzenia-prasa {
    display: grid;
    grid-template-columns: 1fr; /* Każdy wycinek w nowej linii */
    gap: 24px;
  }
  .wycinek-gazety {
    background-color: var(--cream);
    border: 2px solid #555;
    padding: 16px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
  }
.gazeta-naglowek {
    position: relative;          /* potrzebne dla absolutnego pozycjonowania daty */
    border-bottom: 3px double #000;
    padding-bottom: 8px;
    margin-bottom: 8px;
    text-align: center;          /* tytuł wyśrodkowany */
}

.gazeta-tytul {
    font-family: HutaSemiBold, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 42px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 auto;             /* wyśrodkowanie tytułu */
}

.gazeta-data {
    font-family: 'maszynopis', 'Courier New', Courier, monospace;
    font-size: 14px;
    white-space: nowrap;
    position: absolute;          /* przesunięcie daty */
    right: 0;
    top: 0;
}


  .wycinek-gazety hr {
    border: none;
    border-top: 1px solid #000;
    margin: 8px 0 12px;
  }
  .wycinek-gazety h3 {
    text-align: center;
    font-size: 26px;
    margin: 12px 0;
    line-height: 1.2;
  }
  .wycinek-gazety p {
    font-size: 18px;
    text-align: justify;
    /* columns: 2 250px;  Magia układu gazetowego */
    column-gap: 36px;
  }
  .wycinek-zdjecie {
    width: 100%;
    max-width: 280px;
    float: left;
    margin-right: 15px;
    margin-bottom: 5px;
    border: 1px solid #000;
    padding: 4px;
    background: #fff;
    filter: grayscale(80%);
  }
  
/* Grid dla treści artykułu w wydaniach prasowych */
.gazeta-tresc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* odstęp między kolumnami */
  align-items: start;
}

/* Kontener dla zdjęcia w artykule */
.wycinek-zdjecie-container {
  display: flex;
}

/* Zdjęcie po lewej */
.wycinek-zdjecie-left {
  justify-content: flex-start;
}

/* Zdjęcie po prawej */
.wycinek-zdjecie-right {
  justify-content: flex-end;
}
/* Kontener zdjęcia w wycinku prasowym!!!! */
.wycinek-zdjecie-container {
  width: 280px;
  max-width: 100%;
  margin: 0 16px 12px 0; /* domyślnie zdjęcie po lewej */
  float: left; /* zmienimy float dla prawego zdjęcia inline */
  border: 1px solid #000;
  padding: 4px;
  background: #fff;
  filter: grayscale(80%);
}

.wycinek-zdjecie-container.right {
  float: right;
  margin: 0 0 12px 16px;
}
/* Obrazek dopasowany do ramki */
.wycinek-zdjecie-container img {
  max-width: 280px;
  width: 100%;
  border: 1px solid #000;
  padding: 4px;
  background: #fff;
  filter: grayscale(80%);
}
#lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto; /* pozwala scrollować jeśli obraz za duży */
  z-index: 1000;
}

#lightbox-content {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#lightbox-img {
  max-width: 100%;
  max-height: 80vh; /* dopasowuje obraz do wysokości ekranu */
  object-fit: contain;
}

#lightbox-close {
  position: static;        /* już nie absolute */  margin-top: 16px; padding: 10px 24px; font-size: 18px; font-weight: bold; cursor: pointer;  background: var(--red); color: #fff;
  border: 3px solid #000; border-radius: 6px;
  align-self: center;      /* wyśrodkowanie w flexboxie */
}



#lightbox-overlay.show { display: flex; }
#lightbox-overlay button {
  position: absolute;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}
#lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
#lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }


  /* Poprawka dla RWD - jedna kolumna w tekście na małych ekranach */
  @media (max-width: 680px) {
    .wycinek-gazety p {
      columns: 1;
    }
    .wycinek-zdjecie {
      float: none;
      display: block;
      margin: 0 auto 15px;
    }
  }

footer {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 20px;
}

footer .stamp {
  margin-bottom: 16px;
  font-size: 14px;
}

footer .partners h3 {
  margin: 0 0 12px;
  font-family: 'HutaSemiBold', Arial, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--gold);
}

footer .partners-logos {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

footer .partners-logos img {
  max-height: 60px;
  width: auto;
  border: 2px solid #fff;
  padding: 4px;
  background: #fff;
}

.masthead{position:relative;overflow:hidden;background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('/media/photos/masthead.jpg');background-size:cover;background-position:50% 68%;color:#fff;border-bottom:12px solid #000;text-align:center}
.masthead .inner{max-width:1200px;margin:0 auto;padding:36px 20px}
.masthead h1{font-family:HutaExtraBold, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;margin:0;font-size:80px;text-transform:uppercase}
.masthead p{margin:6px 0 0;font-style:italic;color:#ffe6d6}
/* ... Etykietka losowa ... */
.badge {
  position: absolute;
  right: 5%;
  bottom: -3%;
  transform: rotate(-5deg);
  background: #000;
  color: #fff;
  padding: 10px 16px;
  border: 4px solid #fff;
  font-weight: 700;
  box-shadow: 6px 6px 0 rgba(0,0,0,.4);
  display: inline-block;
  max-width: 220px; /* żeby łamało się na 2 linijki */
  text-align: center;
  line-height: 1.3;
}
.plakat img.plakat-zdjecie{width:100%;height:auto;margin-top:12px;border:3px solid #000;box-sizing:border-box;}

.nav{background:repeating-linear-gradient(45deg,#000,#000 10px,#222 10px,#222 20px);border-bottom:6px solid var(--red);}
.nav .inner{max-width:1200px;margin:0 auto;padding:0 12px;display:flex;gap:8px;flex-wrap:wrap}
.nav a{display:inline-block;color:#fff;padding:12px 14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;}
.nav a:hover{background:rgba(255,255,255,.08)}

main{max-width:1200px;margin:0 auto;padding:28px 16px}
section{margin:28px 0;background:#fff;border:4px solid #000;box-shadow:8px 8px 0 rgba(0,0,0,.25)}
section header{background:var(--gold);border-bottom:4px solid #000;padding:0px 14px}
section header h2 {
  font-family: 'HutaSemiBold', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  margin: 0;
  font-size: 38px;
  text-transform: uppercase;
}
section .content{padding:16px}

.misja{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.plakat{background:var(--cream);border:3px dashed #000;padding:16px;text-align:center}
.plakat .haslo{font-family:HutaBold,Impact,sans-serif;font-size:46px;text-transform:uppercase}
.plakat .podhaslo{font-style:italic}

.ticker{overflow:hidden;background:#000;color:#fff;border:3px solid #000;position:relative}
.ticker .track{display:flex;gap:40px;white-space:nowrap;will-change:transform;animation:scroll 22s linear infinite}
.ticker .item{padding:10px 0;font-weight:700}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)} }

.gazeta{columns: 2 320px; column-gap:24px}
.note{break-inside:avoid;margin:0 0 14px;font-size:15px;text-align:justify}
.note time{font-weight:700}

.galeria-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* wyśrodkowanie miniaturek */
  gap: 16px;                 /* odstęp między nimi */
}

.frame {
  flex: 0 1 280px;           /* stała szerokość miniatury */
  max-width: 100%;
  background: #fff;
  border: 4px solid #000;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.frame img,
.frame video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  filter: sepia(60%) contrast(110%);
}
/*pasek nawigacji z php*/
.nav a.active {
  background: rgba(255, 193, 7, 0.18);
  border-bottom: 4px solid #FFC107;
  color: #FFC107 !important;
}



.timeline{position:relative;padding-left:40px}
.timeline::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:4px;background:#000}
.event{position:relative;margin:10px 0 16px}
.event::before{content:"";position:absolute;left:+5px;top:12px;width:10px;height:10px;background:var(--red);border:3px solid #000;border-radius:50%}
.event h4{margin:0 0 4px;font-family:"Huta-Regular", Courier, monospace;text-transform:uppercase;padding-left:30px;font-size: 26px; font-weight: 400}
.event p{margin:0}

.cta .kartka h3{font-family:"HutaBold", "Courier New", Courier, monospace;font-size: 26px}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cta .kartka{background:var(--cream);border:3px solid #000;padding:16px}
.btn{display:inline-block;background:var(--red);color:#fff;padding:10px 16px;border:4px solid #000;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.btn:hover{filter:brightness(1.05)}

.wydarzenia-prasa{display:grid;grid-template-columns:1fr;gap:24px}

#lightbox-overlay img,
#lightbox-overlay video {
  max-width: 95vw;     /* 95% szerokości okna */
  max-height: 85vh;    /* 85% wysokości okna */
  object-fit: contain; /* proporcje zawsze zachowane */
  margin: auto;
  display: block;
  border: 8px solid #fff;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.9);
}


@media (max-width:900px){.misja{grid-template-columns:1fr}.galeria-grid{grid-template-columns:repeat(2,1fr)}.cta{grid-template-columns:1fr}}
@media (max-width: 560px) {
  .masthead .inner {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .masthead h1 {
    font-size: 52px;
  }
}


/* ======================== RWD i poprawki mobilne ======================== */
@media (max-width: 768px) {

  /* --- Masthead (nagłówek główny) --- */
  .masthead h1 {
    font-size: 52px;     /* zmniejsza rozmiar czcionki na telefonach */
    line-height: 1.1;    /* zmniejsza odstęp między wierszami */
  }

  .badge {
    margin-top: 15px;     /* delikatny odstęp od tytułu */
  }

  /* --- Tytuły sekcji --- */
  section header h2 {
    font-size: 28px;     /* zmniejszony rozmiar nagłówków sekcji */
    line-height: 1.2;    /* zmniejszony odstęp między wierszami */
  }

  /* --- Galeria: zdjęcia jedno pod drugim --- */
  .galeria-grid {
    grid-template-columns: 1fr; /* jedna kolumna na telefonach */
  }

  /* --- Tekst artykułów prasowych --- */
  .wycinek-gazety p {
    columns: 1;           /* jedna kolumna tekstu na telefonach */
  }

  .wycinek-zdjecie, 
  .wycinek-zdjecie-container {
    float: none;
    display: block;
    margin: 0 auto 12px; /* zdjęcia na środku z odstępem */
    width: 100%;
    max-width: 280px;    /* opcjonalnie, zachowuje ramkę */
  }

  /* Mniejszy odstęp między wierszami tytułów gazet */
  .gazeta-tytul {
    line-height: 1.1;       /* zmniejsza odstęp między wierszami */
  }

  /* Przesunięcie tytułu w dół względem daty */
  .gazeta-naglowek {
    padding-top: 28px;      /* dodaje przestrzeń u góry nagłówka */
    position: relative;     /* upewniamy się, że dzieci absolutnie pozycjonowane działają względem nagłówka */
  }

  /* Utrzymanie daty u góry nagłówka */
  .gazeta-data {
    top: 0;                 /* pozostawiamy datę przy górnej krawędzi nagłówka */
    right: 0;
  }
    #aktualnosci .note {
        font-size: 16px;   /* trochę mniejsza na telefonach */
        line-height: 1.5;  /* lekko skompresowana wysokość wiersza */
    }
}
@media (max-width: 600px) {
  #lightbox-overlay img,
  #lightbox-overlay video {
    max-width: 100vw;   /* pełna szerokość */
    max-height: 70vh;   /* trochę mniej wysokości – żeby zmieścił się przycisk */
  }

  #lightbox-close {
    font-size: 16px;
    padding: 8px 18px;
    margin-top: 12px;
  }
  
}



/* === Lightbox === */
#lightbox-overlay{
position:fixed;top:0;left:0;width:100%;height:100%;
background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center;
z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.35s ease;
flex-direction:column;
}
#lightbox-overlay.show{opacity:1;pointer-events:auto;}
#lightbox-overlay img{max-width:90%;max-height:90%;box-shadow:0 0 20px #000;border:4px solid #fff;transform:scale(0.8);transition:transform 0.35s ease;}
#lightbox-overlay.show img{transform:scale(1);}
#lightbox-overlay button{margin-top:12px;padding:8px 16px;font-size:16px;font-weight:700;background:var(--red);color:#fff;border:3px solid #000;cursor:pointer;}