/* Reset i podstawowe style */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI', Tahoma, sans-serif; background:#f5f5f5; color:#333; }
h2 { margin-bottom:10px; }

/* Header */
header {
  display:flex; justify-content:space-between; align-items:center;
  background:#e0f0ff; padding:15px 20px; position:sticky; top:0; z-index:1000;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
header h1 { font-size:24px; }

/* --- Korekta przewijania po kliknięciu linków --- */
:root { --header-height: 60px; }
.sekcja { scroll-margin-top: var(--header-height); }

/* Hamburger */
.hamburger { display:none; cursor:pointer; z-index:1100; }
.hamburger span {
  display:block; width:30px; height:4px; background:#0077ff; margin:6px 0; transition:0.4s;
}
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); background:white; }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(6px,-6px); background:white; }

/* Menu */
.nav-menu { display:flex; gap:20px; }
@media (max-width:768px){
  .hamburger { display:block; }
  .nav-menu {
    position:fixed; top:0; right:-250px; width:250px; height:100%;
    flex-direction:column; align-items:flex-start; padding:50px 20px;
    background:#0077ff; gap:20px; transition:right 0.3s ease;
  }
  .nav-menu a { color:white; font-size:16px; font-weight:500; text-decoration:none; }
  .nav-menu.active { right:0; }
}

/* Sekcje */
.sekcja { padding:5px 10px; }
.sekcja:nth-child(even){ background:#e0f0ff; }
.sekcja:nth-child(odd){ background:#ffffff; }

/* --- Karty / Ramki (np. przepisy) --- */
.card {
  display:flex; flex-direction:row; align-items:flex-start;
  gap:20px; margin: 8px auto; background:#fff; padding:15px 20px;
  border:1px solid #ccc; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.08);
  max-width:900px; width:100%;
}
.card .tekst { flex:1; text-align:left; }
.card ul, .card ol { margin-left:0; padding-left:15px; margin-bottom:10px; }
.card img {
  width:150px; max-width:30%; height:auto; border-radius:8px; object-fit:cover;
  margin-left:auto; margin-right:5px;
}
.card h3 { margin-bottom:5px; }
.card a { display:inline-block; margin-top:10px; text-decoration:none; color:#0077ff; }
.card a:hover { text-decoration:underline; }

#ciasta.sekcja {
  padding:5px 5px; /* wcześniej 5px 10px, teraz +5px po bokach */
}

/* Małe ekrany karty */
@media (max-width:768px){
  .card { flex-direction:column; align-items:center; }
  .card img { max-width:80%; margin-top:8px; }
  .card .tekst { text-align:left; }
}

/* --- Galeria ogólna (miniaturki) --- */
.galeria {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(100px,1fr));
  gap:60px 10px; justify-items:center; margin-top:20px
  margin: 20px auto;
padding: 0 15px;
max-width: 1000px;
}
.galeria img {
  width:100%; max-width:300px; height:100%; 
  border-radius:6px;
  box-shadow:0 0 4px rgba(0,0,0,0.3); transition:transform 0.2s ease;
}
.galeria img:hover { transform:scale(1.03); }

/* --- Overlay / Lightbox --- */
.overlay {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.8); justify-content:center; align-items:center; z-index:9999;
}
.overlay img { max-width:90%; max-height:90%; border-radius:12px; box-shadow:0 0 20px rgba(0,0,0,0.5); }

/* --- Galeria Lubrańca --- */
#galeria-lubraniec {
  max-width:1100px; margin:50px auto; padding:4px 5px; box-sizing:border-box;
}
#galeria-lubraniec .galeria {
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
}
#galeria-lubraniec .galeria img {
  width:96%; height: 100%; display:block; border-radius:4px;
  box-shadow:0 4px 10px rgba(0,0,0,0.2); transition:transform 0.3s ease;
}
#galeria-lubraniec .galeria img:hover { transform:scale(1.05); }

/* --- Galeria działka (przykład innej galerii) --- */
#galeria-dzialka {
  max-width:1100px; margin:0 auto; padding:4px 5px; box-sizing:border-box;
}
#galeria-dzialka .galeria {
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
}
#galeria-dzialka .galeria img {
  width: 99%; height: 100%; border-radius:4px;
  box-shadow:0 4px 10px rgba(0,0,0,0.2); transition:transform 0.3s ease;
}
#galeria-dzialka .galeria img:hover { transform:scale(1.05); }

/* --- Aktualności tekst + galeria --- */
#aktualnosci .wiadomosci {
  background:#f5f5f5; border:1px solid #ccc; padding:10px; margin:0 auto 10px auto;
  max-width:100%; font-size:14px; line-height:1.4;
}
/* --- Aktualności lekko poszerzone --- */
#aktualnosci.sekcja {
  padding: 5px 5px; /* góra/dół 5px, lewo/prawo 15px */
}

#aktualnosci .galeria-aktualnosci figure {
  width: 33%; /* minimalnie szersze zdjęcia w galerii, 3 w rzędzie */
} 

#aktualnosci .wiadomosci p { margin:5px 0; }

#aktualnosci .galeria-aktualnosci {
  display:flex; justify-content:space-between; align-items:flex-start; gap:3px; margin-top:10px;
}
#aktualnosci .galeria-aktualnosci figure {
  width:32%; background:#fff; border:1px solid #999; padding:3px; text-align:center; box-sizing:border-box;
}
#aktualnosci .galeria-aktualnosci img {
  width:98%; height:auto; display:block; margin:0 auto; border:1px solid #777;
  transition:transform 0.2s ease;
}
#aktualnosci .galeria-aktualnosci img:hover { transform:scale(1.05); }

/* --- Responsywność galerii 3 zdjęcia w rzędzie na telefonie --- */
@media (max-width:768px){
  #galeria-lubraniec .galeria,
  #galeria-dzialka .galeria,
  #aktualnosci .galeria-aktualnosci {
    grid-template-columns:repeat(3,1fr);
  }
}

/* --- Sekcja O Lubrańcu --- */
#o-lubrancu {
  max-width: 99%;       /* sekcja nie rozciąga się w pełni, zostawiając niewielkie marginesy */
  margin: 0 auto;       /* wyśrodkowanie sekcji */
  box-sizing: border-box;
  padding: 5px;         /* lekki odstęp od krawędzi */
}

/* --- Korekta przewijania linków pod nagłówkiem --- */
:root {
  --header-height: 70px; /* dostosuj, jeśli nagłówek ma inną wysokość */
}

[id] {
  scroll-margin-top: var(--header-height);
}
/* ---  to jest CSS od galerii Lubrańca w htmlu  --- */
.galeria-lubranca {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 zdjęcia w rzędzie */
  gap: 2px; /* odstęp między zdjęciami */
  padding: 3px; /* margines wewnętrzny */
  max-width: 1100px;
  margin: 0 auto; /* wyśrodkowanie */
}

.galeria-lubranca img {
  width: 100%;
  height: 170px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.galeria-lubranca0 img:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .galeria-lubranca0 {
    grid-template-columns: repeat(3, 1fr); /* 3 zdjęcia w rzędzie na telefonie */
  }
}