*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body {
    margin: 0;
    font-family: Georgia, Arial, sans-serif;
    line-height: 150%;
    color: #111;
    background: #f2f2f2;
    font-size: clamp(1rem, 2vw, 1.2rem);
}

hr {
   border: 0;
   height: 1px;
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

p {
    margin: 1em 0;
    font-size: clamp(1.0em, 2.2vw, 1.1em);
    line-height: 1.5;
}

.cien {
   filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5))
}

.kronikarz {
   font-size: clamp(1rem, 2vw, 1.4rem);
   color: #000066;
   text-align: right;
   font-family: "Monotype Corsiva", "Times New Roman", serif;
}

.bkgb
{
   font-size: clamp(1.5rem, 2vw, 2.5rem);
   color: #000;
   margin-left: 20px;
   margin-right: 20px;
   text-align: center;
   font-weight: bold;
   font-family: "Monotype Corsiva", "Times New Roman", serif;
   filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

.bkgbtytul
{
   font-size: clamp(1.1rem, 2vw, 1.7rem);
   color: #111;
   margin-left: 20px;
   margin-right: 20px;
   line-height: 130%;
   text-align: center;
   font-family: "Monotype Corsiva", "Times New Roman", serif;
   filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

.bkgbpodtytul
{
   font-size: clamp(0.9rem, 2vw, 1.2rem);
   color: #111;
   margin-left: 20px;
   margin-right: 20px;
   /*line-height: 150%;*/
   text-align: center;
   font-family: "Monotype Corsiva", "Times New Roman", serif;
   filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

.temat
{
   font-size: clamp(1.2rem, 2vw, 1.8rem);
   color: #000;
   margin-left: 40%;
   margin-right: 15%;
   text-align: right;
   font-weight: bold;
   font-family: "Monotype Corsiva", "Times New Roman", serif;
   filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

.tematdata
{
   font-size: clamp(0.9rem, 2vw, 1.4rem);
   color: #000;
   margin-left: 15%;
   margin-right: 15%;
   margin-top: 10px;
   text-align: right;
   font-family: "Monotype Corsiva", "Times New Roman", serif;
   filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

/* =====================================
   STANDARDOWE ODNOŚNIKI
===================================== */

a {
  color: #000;
  text-shadow: 2px 2px 5px #666;
  text-decoration: none;
  transition: color 0.4s ease;
}
a:hover {
  color: #ff0000;
}
a.visited { color: #666; }

/* =====================================
   REKLAMA
===================================== */

.ad-box {
    position: fixed;
    left: -260px;
    bottom: 30px;

    transition: left 0.4s ease;
    z-index: 9999;
}

.ad-box.show {
    left: 10px;
}

.ad-box img {
    width: 80px;
    height: auto;
    display: block;
}

/* =====================================
   MENU HAMBURGER
===================================== */

.menu-wrapper{
    position:fixed;
    top:20px;
    right:30px;
    z-index:2000;
}

.hamburger{
    width:40px;
    cursor:pointer;
}

.hamburger span{
    display:block;
    height:4px;
    margin:7px 0;
    background:#333;
    border-radius:2px;
}

/* =====================================
   MENU
===================================== */

.side-menu{
    position:absolute;
    top:50px;
    right:0;

    width:240px;

    background:#fff;
    border-radius:10px;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

    transform:translateX(120%);
    transition:transform .3s ease;

    overflow:hidden;
}

.side-menu.open{
    transform:translateX(0);
}

.side-menu a{
    display:block;
    padding:15px 20px;
    font-size: 1.2em;
    text-decoration:none;
    color:#333;

    border-bottom:1px solid #eee;
}

.side-menu a:last-child{
    border-bottom:none;
}

.side-menu a:hover{
    background:#f5f5f5;
}

/* =====================================
   TREŚĆ
===================================== */

.container{
    max-width:1000px;
    margin:auto;

    padding-left:30px;
    padding-right:30px;
    padding-bottom:50px;
}

.two-columns{
    column-count:2;
    column-gap:60px;
}

.two-columns p{
    margin-bottom:15px;
    text-align:justify;
}

/* =====================================
   STRZAŁKA DO GÓRY
===================================== */

#btnTop {
    position: fixed;
    bottom: 2rem;
    right: 3rem;

    background: transparent;
    border: none;
    padding: 0;
    margin: 0;

    cursor: pointer;

    opacity: 0;
    pointer-events: none;

    z-index: 9999;

    transition: opacity 0.5s ease;

    /* wygląd strzałki */
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    line-height: 1;
    font-weight: normal;

    color: #333;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25);
}

#btnTop.show {
    opacity: 1;
    pointer-events: auto;
}

#btnTop:hover {
    color: #000;
}

/* =====================================
   ZDJĘCIE Z PODPISEM
===================================== */

.foto {
    width: 95%;
    margin: 1em auto;
    text-align: center;
}

.foto img {
    width: 100%;
    height: auto;
    display: block;
}

.foto figcaption {
    margin-top: 0.5em;
    font-size: 0.9em;
    font-style: italic;
    color: #555;
}

/* =====================================
   GALERIA DLA DWÓCH ZDJĘĆ W POZIOMIE Z PODPISEM
===================================== */

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* zdjęcia w dwóch kolumnach*/
  column-gap: 30px; /* większy odstęp poziomy */
  row-gap: 10px;    /* odstęp pionowy — zostaw jak jest */
  max-width: 95%;
  margin: 0 auto;
}

.galeria figure {
  margin: 5px;
  text-align: center;
}

.galeria img {
  width: 100%;
  height: auto;
  display: block;
}

.galeria figcaption {
  margin-top: 10px; /* odstęp od zdjęcia */
  font-size: clamp(0.8rem, 2vw, 1rem); /* wielkość czcionki */
  color: #555;
}

/* ?? Małe ekrany — 1 kolumna */
@media (max-width: 768px) {
  .galeria {
    grid-template-columns: 1fr;
}}

/* =====================================
   NAWIGACJA MIĘDZY STRONAMI
===================================== */

.nav-left,
.nav-right {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    text-decoration: none;
    color: #555;
    z-index: 3000;
    padding: 10px;
}

.nav-left {
    left: 0;
}

.nav-right {
    right: 0;
}

.nav-left:hover,
.nav-right:hover {
    color: #000;
}

/* =====================================
   WYGLĄD PLIKÓW GRAFICZNYCH
===================================== */

.fotka {
  border-radius: 15px; /* zaokrąglenie rogów */
  border: 1px solid #888;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); /* cień */
  margin: 0px;
  cursor: pointer;
  }

/* =====================================
   LIGHTBOX - przeglądarka plików graficznych
===================================== */

#lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
}

#lightbox img {
  max-width: auto;
  max-height: 90%;
  border-radius: 15px; /* zaokrąglone rogi dla zdjęcia */
}

#lightbox .close,
#lightbox .nav {
  position: absolute;
  color: white;
  font-size: 2em;
  cursor: pointer;
  user-select: none;
}

#lightbox .close { /* położenie X */
  top: 20px;
  right: 150px;
}

#lightbox .prev {
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
}

#lightbox .next {
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
}

/* =====================================
   GALERIA
===================================== */

div.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: 80%; /* pełna szerokość nadrzędnego elementu */
    max-width: 900px; /* maksymalna szerokość galerii */
    margin-left: auto;
    margin-right: auto; /* wyśrodkowanie */
}

/* wydarzenie */
div.gallery {
    margin: 2px;
    border: 1px solid #ccc;
    text-decoration: none;
    background-color: #f5f5f5;
    width: 270px; /* było 270px */
    height: 300px; /* było 310px */
    box-shadow: 5px 5px 10px #999;
    transition-duration: 0.4s;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px; /* zaokrąglenie rogów */
    overflow: hidden; /* opcjonalnie, żeby nic nie wychodziło poza ramkę */
}

div.gallery:hover {
    border: 1px solid #777;
    background-color: #444;
    color: #f5f5f5;
}

div.gallery img {
    width: 90%;
    height: auto;
    margin-top: 10px;
    border-radius: 8px; /* opcjonalnie */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* cień */
    border: 1px solid black; /* czarna obwódka */
}

div.desc {
    margin: 10px;
    font-size: 0.9em;
    line-height: 1.3;
    /*font-weight: bold;*/
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    text-align: center;
    width: 90%;
}

/* =====================================
   MENU Z ROCZNIKAMI
===================================== */

.pager {
    display: inline-flex;
    border: 1px solid #888;
    border-radius: 4px;
    overflow: hidden;
    font-family: Georgia, Arial, sans-serif;
}

.pager a,
.pager button {
    min-width: 60px;
    height: 34px;
    border: 0;
    border-right: 0px solid #c5c5c5;
    background: #d7d7d7; /* tlo przycisków */
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
}

.pager button {
    min-width: 80px;
    font-weight: bold;
    border-right: 0px solid #d5d5d5;
}

/* Hover tylko dla nieaktywnej pozycji */
.pager a:not(.active):hover,
.pager button:hover {
    background: #ccff00;
}

.pager a.active,
.pager a.active:hover {
    background: #777;
    color: #fff;
    font-weight: bold;
}

.pager a:last-of-type,
.pager button:last-child {
    border-right: 0;
}

/* =====================================
   TELEFONY
===================================== */

@media(max-width:768px){

    header{
        padding:12px 20px;
    }

    .logo-main{
        font-size:1.5rem;
    }

    .logo-sub{
        font-size:0.75rem;
    }

    .menu-wrapper{
        top:15px;
        right:20px;
    }

    .container{
        padding-left:20px;
        padding-right:20px;
    }

    .two-columns{
        column-count:1;
    }

    .side-menu{
        width:200px;
    }

    #backToTop{
        right:15px;
        bottom:15px;
    }
}

/* =====================================
   TYTUL
===================================== */

.tytul{
    position:relative;
    display:inline-block;
    overflow:hidden;
    padding:12px 28px;
		font-family: Monotype Corsiva,"Times New Roman",serif;
    font-size:1.5em;
    font-weight:bold;
    color:#111;
    background:rgba(90,90,90,.16);
    border:1px solid rgba(255,255,255,.75);
    border-radius:18px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.70),
        inset 0 -1px 0 rgba(0,0,0,.08),
        0 8px 24px rgba(0,0,0,.12);
}

/* Delikatny połysk u góry */
.tytul::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:45%;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.45),
        rgba(255,255,255,0)
    );

}

/* Przesuwająca się smuga światła */
.tytul::after{
    content:"";
    position:absolute;
    top:-80%;
    left:-40%;
    width:28%;
    height:260%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.90),
        rgba(255,255,255,.35),
        transparent
    );
    transform:rotate(24deg);
    animation:blysk 4s ease-in-out infinite;
}

/* Tekst nad smugą */
.tytul span{
    position:relative;
    z-index:2;
}

.tytul {
    display: flex;
    justify-content: center; /* wyśrodkowanie całego elementu */
    align-items: center;     /* wyśrodkowanie w pionie */
    text-align: center;      /* wyśrodkowanie tekstu */
    margin-left: 20%;          /* wyśrodkowanie bloku na stronie */
    margin-right: 20%;
}
/* ===================================== */

@keyframes blysk{
    0%{
        left:-45%;
    }
    45%{
        left:135%;
    }
    100%{
        left:135%;
    }
}


@media (max-width: 600px) {
    p {
        font-size: 18px;
    }
}