body {
  margin: 0;
  font-family: Georgia, Calibri, serif;
  background: #f2f2f2;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
}

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 {text-align: justify; line-height: 150%; font-size: clamp(0.9rem, 2vw, 1.1rem);}

/* STANDARDOWE ODNOŚNIKI */
a {
  color: #000;
  text-shadow: 2px 2px 5px #666;
  text-decoration: none;
  transition: color 0.4s ease;
}
a:hover {
  color: #ff6600;
}
a.visited { color: #666; }

/* wydzielone jedno pole o szerokości 60% strony */
/*<div class="opisy"></div>*/
.opisy {
    width: 60%;
    margin: 0 auto; /* centruje w poziomie */
}

/* wydzielone dwóch pól o szerokości odpowiednio 20% i 40% strony */
/* html
<div class="wrapper2050">
    <div class="box20">Pole 20%</div>
    <div class="box40">Pole 50%</div>
</div>
*/
.wrapper {
    display: flex;
    justify-content: center; /* wyśrodkowanie całego układu */
    gap: 50px; /* odstęp między polami – opcjonalnie */
    margin-top: 5px; /* estetyczny odstęp od góry */
}
.box20 {
    width: 20%;
    /*background: #f2f2f2;*/
    padding: 5px;
}
.box25 {
    width: 25%;
    /*background: #ddd;*/
    padding: 5px;
}
.box30 {
    width: 30%;
    /*background: #ddd;*/
    padding: 5px;
}
.box35 {
    width: 35%;
    /*background: #ddd;*/
    padding: 5px;
}
.box40 {
    width: 40%;
    /*background: #ddd;*/
    padding: 5px;
}
.box45 {
    width: 45%;
    /*background: #ddd;*/
    padding: 5px;
}
.box50 {
    width: 50%;
    /*background: #ddd;*/
    padding: 5px;
}

/* wygląd plików graficznych */
.fotka {
  border-radius: 10px; /* 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: 1.2em;
    line-height: 1.3;
    /*font-weight: bold;*/
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    text-align: center;
    width: 90%;
}

/* ODNOŚNIKI Z CHMURKĄ GRAFICZNĄ */
    a.chmurka {
      position: relative;
      color: #000;
      text-decoration: none;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    a.chmurka span {
      display: none;
      position: absolute;
      top: 0;
      left: 100%;
      margin-left: 10px;
      background: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      opacity: 0.70; /* przeźroczystość chmurki */
    }

    a.chmurka:hover {
      color: #ff6600; /* Nowy kolor tekstu po najechaniu */
    }

    a.chmurka:hover span {
      display: inline-block;
    }

    a.chmurka span img {
      width: 200px;
      height: 150px;
      object-fit: cover;
      display: block;
    }

    img {
      border: none;
    }

    a.chmurka:visited {
      color: #444;
      box-shadow: 0 2px 6px #050;
      }

/* POZOSTAŁE */
.tytul {
  /*font-size: 1.2em;*/
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  font-weight: bold;
  font-style: italic;
  color: #000;
  text-shadow: 2px 2px 5px #777;
  text-align: left;
  margin-left: 15%;
  margin-right: 15%;
  margin-bottom: 10px;
  }

.tytul-1{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color:#2f3d2f;
    text-shadow: 2px 2px 5px #777;
    font-weight:600;
    margin-bottom: 20px;
}
.tytul-1::before,
.tytul-1::after{
    content:"";
    width:120px;
    height:3px;
    background:linear-gradient(to right,#3b7a57,#7aa66c);
}

.podtytul {
  font-size: clamp(0.7rem, 2vw, 1.0rem);
  font-weight: bold;
  font-style: italic;
  color: #555;
  text-shadow: 2px 2px 5px #777;
  text-align: right;
  margin-top: 5px;
  margin-left: 15%;
  margin-right: 15%;
  }

.zrodlo {
  text-align: right;   /* wyrównanie do prawej */
  font-size: clamp(0.8rem, 2vw, 1.0rem);      /* wielkość czcionki */
  font-style: italic;  /* kursywa */
  color: #777;         /* kolor tekstu */
}

.grupa {
  font-family: "Georgia", serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: darkgreen;
  font-style: italic;          /* pochylona */
  text-shadow: 2px 2px 4px #555; /* ciemny cień */
  margin-left: 20px;           /* lewy margines 20px */
}

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

/* ------------------- PRZESUWAJĄCE SIĘ ZDJĘCIA -------------------- */
.slider{
    width:100%;
    overflow:hidden;
    position:relative;
    padding:20px 0;
    background:#f2f2f2;
}

.slider-track{
    display:flex;
    width:max-content;
    animation:scroll 30s linear infinite;
}

.slider:hover .slider-track{
    animation-play-state:paused;
}

.slider img{
    width:300px;
    height:225px;
    object-fit:cover;
    margin:0 12px;
    border-radius:12px;
    box-shadow:0 6px 15px rgba(0,0,0,.25);
    flex-shrink:0;
}

@keyframes scroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* --- PRZYCISK TOP --- */
#btnTop {
  position: fixed;      /* zawsze w rogu okna */
  bottom: 2rem;
  right: 3rem;
  font-size: 2rem;
  background: transparent; /* brak tła */
  border: none;           /* brak obramowania */
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;          /* nad innymi elementami */
  transition: opacity 0.5s ease;
}

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

/* 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;
}

/* ETAPY - DROGOWSKAZ */

.etapy{
    display:inline-flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    padding:10px 20px;
    background:linear-gradient(135deg,#2e7d32,#66bb6a);
    border:2px solid #ffffff;
    border-radius:20px;
    color:#fff;
    font:700 25px Georgia,sans-serif;
    letter-spacing:2px;
    box-shadow:0 6px 18px rgba(0,0,0,.35);

}

/* ETAPY - POŁYSK */

.etapy::before{
    content:"";
    position:absolute;
    top:-50%;
    left:-35%;
    width:18%;
    height:220%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );
    transform:rotate(25deg);
    animation:shine 5s linear infinite;
}

/* ETAPY - NUMER ETAPU */
.etapy span{
    margin-left:12px;
    background:#fff;
    color:#2e7d32;
    padding:4px 16px;
    border-radius:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* ETAPY - ANIMACJA POŁYSKU */
@keyframes shine{
    0%{
        left:-30%;
    }
    15%{
        left:130%;
    }
    100%{
        left:130%;
    }
}

/* TABLICA BAZOWA */

.tablica{
    --kolor:#0057b8;
    --tlo1:#ffffff;
    --tlo2:#f3f3f3;
    --tekst:#0057b8;
    position:relative;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:8px 20px;
    min-width:150px; /*stała szerokość tablicy */
    min-height:58px; /* wysokość tablicy */
    color:var(--tekst);
    font-family:Verdana, Arial, sans-serif;
    font-size:32px;
    font-weight:bold;
    letter-spacing:2px;
    /* Brak wymuszania wielkich liter */
    text-transform:none;
    background:linear-gradient(
        180deg,
        var(--tlo1) 0%,
        var(--tlo2) 100%
    );
    border:6px solid var(--kolor);
    border-radius:5px;
    box-shadow:
        0 8px 18px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.95);
    text-shadow:
        0 1px 0 rgba(255,255,255,.7);
    overflow:hidden;
}

/* Połysk */
.tablica::before{
    content:"";
    position:absolute;
    top:-25%;
    left:-120%;
    width:45%;
    height:150%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0),
        rgba(180,220,255,.30),
        rgba(255,255,255,.95),
        rgba(180,220,255,.30),
        rgba(255,255,255,0),
        transparent
    );
    transform:skewX(-25deg);
    filter:blur(2px);
    animation:shine 6s ease-in-out infinite;
}

@keyframes shine{
    0%{
        left:-120%;
    }
    20%{
        left:120%;
    }
    100%{
        left:120%;
    }
}

/* WARIANTY KOLORYSTYCZNE */

/* Biała tablica */
.tablica-biala{
    --kolor:#0057b8;
    --tekst:#0057b8;
    --tlo1:#ffffff;
    --tlo2:#f3f3f3;
}
/* Zielona */
.tablica-zielona{
    --kolor:#ffffff;
    --tekst:#ffffff;
    --tlo1:#1da244;
    --tlo2:#157c34;
}
/* Niebieska */
.tablica-niebieska{
    --kolor:#ffffff;
    --tekst:#ffffff;
    --tlo1:#0b6dd6;
    --tlo2:#084d9d;
}
/* Brązowa (turystyczna) */
.tablica-brazowa{
    --kolor:#ffffff;
    --tekst:#ffffff;
    --tlo1:#8c5b22;
    --tlo2:#5d3910;
}
/* Czerwona */
.tablica-czerwona{
    --kolor:#ffffff;
    --tekst:#ffffff;
    --tlo1:#d92f2f;
    --tlo2:#a81616;
}
/* Żółta */
.tablica-zolta{
    --kolor:#000000;
    --tekst:#000000;
    --tlo1:#ffd600;
    --tlo2:#e0ba00;
}

/* TABLICE - koniec */

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