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

body {
  font-family: 'Andika', sans-serif;
  background: #3f48cc;
}

/* ===== HEADER ===== */
.header {
  background: #fff200;
  box-shadow: 0 0 16px rgba(0,0,0,.5);
}

.nav {
  max-width: 1100px;
  margin: auto;
  padding: 10px;
}

.nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 100px;
}

#menu-toggle {
  font-size: 34px;
  cursor: pointer;
  display: none;
}

.menu {
  display: flex;
  align-items: center;
  gap: 15px;
  list-style: none;
}

.menu a {
  text-decoration: none;
  color: blue;
  padding: 10px 15px;
}

.kontakt {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  color: blue;
  font-weight: bold;
}

.kontakt i {
  font-size: 18px;
}

.flags img {
	display: none;
  width: 30px;
}

/* ===== HERO ===== */
.hero {
  height: 80vh;
  background: url("fotki/zdjecie glowne.jpg") center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 40px;
}

.hero h1 {
  background: rgba(240,240,70,.8);
  padding: 15px 25px;
  font-size: 42px;
  color: blue;
}

/* ===== CONTENT ===== */
.content {
  max-width: 1100px;
  margin: auto;
  padding: 40px 15px;
}

.tiles {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.tile {
  flex: 1 1 480px;
  position: relative;
}

.tile iframe {
  width: 100%;
  height: 280px;
}

.tile-desc {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(60,60,60,.6);
  color: white;
  padding: 10px;
}

/* ===== LINKI DO FILMÓW YOUTUBE ===== */
.video-link {
  display: block;
  height: 280px;
  background: #000;
  text-decoration: none;
  position: relative;
}

.video-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
  background: linear-gradient(
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.5)
  );
  transition: background 0.3s;
}

.video-link:hover .video-placeholder {
  background: rgba(0,0,0,0.7);
}
/* ===== OKOLICA – WARTO ODWIEDZIĆ ===== */
.okolica {
  margin-top: 40px;
  position: relative;
}

.okolica a {
  position: relative;
  display: block;
}

.okolica img {
  width: 100%;
  display: block;
}

/* pasek jak stary .opis */
.okolica span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(60,60,60,0.5);
  color: white;
  padding: 12px 26px;
  font-size: 22px;
  transition: all 0.3s ease;
}

/* hover jak wcześniej */
.okolica a:hover span {
  background-color: rgb(60,60,60);
  color: red;
}

/* ===== FOOTER ===== */
footer {
  background: #fff200;
}

.footer-grid {
  max-width: 1100px;
  margin: auto;
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.phone {
  color: blue;
  font-weight: bold;
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  from { color: blue; }
  to { color: red; }
}
/* ===== MAPA STOPKA – WYZNACZ TRASĘ ===== */
.mapa-stopka {
  position: relative;
  max-width: 400px;   /* szerokość kafelka mapy */
  margin: 0 auto;     /* wycentrowanie w stopce */
}

.mapa-stopka a {
  display: block;
  position: relative;
  text-align: center;
}

.mapa-stopka img {
  width: 100%;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.mapa-stopka span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(240,242,70,0.9);
  color: blue;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mapa-stopka a:hover span {
  background-color: blue;
  color: yellow;
  transform: translate(-50%, -50%) scale(1.05);
}
#grupa
{position:absolute;
width: 320px;
height: 200px;
top: 120px;
right: 350px;
}


/* ===== HEADER – MENU PO PRAWEJ (DESKTOP) ===== */
@media (min-width: 769px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-top {
    display: flex;
    align-items: center;
  }

  .menu {
    display: flex;
    margin-left: auto;
  }
}
/* ===== HEADER – WIĘKSZY ROZMIAR (DESKTOP) ===== */
@media (min-width: 769px) {

  /* logo */
  .logo img {
    height: 120px; /* było 100px */
  }

  /* menu */
  .menu a {
    font-size: 18px; /* było domyślne */
    padding: 14px 20px;
	white-space: nowrap;
  }

  /* cały header */
  .header {
    padding: 10px 0;
  }

  /* wyrównanie pionowe */
  .nav {
    min-height: 120px;
  }
}
.content {
  max-width: 940px;
  background: #80baee;
  padding: 40px;
  margin: 40px auto;
  border-radius: 8px;
}
.content h2 {
  font-style: italic;
  text-align: center;
  margin-top: 30px;
}

.content hr {
  width: 120px;
  margin: 10px auto 25px;
  border: 2px solid #333;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  #menu-toggle { display: block; }
.logo img {
  height: 50px;
}
  .menu {
    display: none;
    flex-direction: column;
    background: #fff200;
  }

  .nav.open .menu {
    display: flex;
  }

  .hero h1 {
    font-size: 28px;
  }
}
/* ===== RESPONSYWNE WIDEO ===== */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== TABELA ODLEGŁOŚCI – O NAS ===== */
#odleglosc {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px; /* odstęp między wierszami */
  margin: 30px auto;
  text-align: center;
}

#odleglosc th,
#odleglosc td {
  padding: 12px 18px;     /* większe odstępy wewnątrz komórek */
  line-height: 1.6;      /* luźniejszy tekst */
  font-size: 16px;
}

#odleglosc th {
  font-weight: bold;
}

#odleglosc tr {
  background: rgba(255, 255, 255, 0.25);
}

#odleglosc tr:first-child {
  background: transparent;
}

#odleglosc tr:nth-child(even):not(:first-child) {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 6px;
}
/* ===== RESPONSYWNA TABELA – O NAS ===== */
.table-wrap {
  overflow-x: auto;
  margin: 30px 0;
}

#odleglosc {
  min-width: 720px; /* zapobiega zgniataniu */
  border-collapse: separate;
  border-spacing: 0 10px;
  text-align: center;
}

#odleglosc th,
#odleglosc td {
  padding: 14px 20px;
  line-height: 1.6;
  font-size: 16px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #odleglosc {
    min-width: 650px;
  }
}
/* ===== KARTKA Z TREŚCIĄ ===== */
/* tylko na cennik i o nas */
body.cennik .kartka,
body.onas .kartka {
  max-width: 940px;
  margin: 40px auto;
  background: #bcddff;
  padding: 40px 50px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  color: #222;
}

/* nagłówki w kartce */
.kartka h1,
.kartka h2 {
  text-align: center;
  font-style: italic;
  margin-top: 20px;
}

.kartka hr {
  width: 140px;
  margin: 10px auto 30px;
  border: 2px solid #444;
}

/* tekst */
.kartka p {
  line-height: 1.7;
  font-size: 16px;
  margin-bottom: 16px;
}

/* mobile */
@media (max-width: 768px) {
  .kartka {
    padding: 25px 20px;
    margin: 20px 10px;
  }
}
/* CENNIK – pogrubienie nazw */
.kartka table td:first-child {
  font-weight: bold;
}


/* Cennik – równo i symetrycznie */
.cennik-table {
  width: 100%;
  max-width: 720px;
  margin: 25px auto;
  border-collapse: collapse;
  table-layout: fixed; /* kolumny o stałej szerokości */
}

.cennik-table td {
  padding: 10px 8px;
  font-size: 16px;
}

.cennik-table td:first-child {
  text-align: left;
  width: 70%;
}

.cennik-table td.cena {
  text-align: right;
  width: 30%;
  white-space: nowrap; /* nie łamie cen na dwie linie */
  font-weight: bold;
}
/* Flexboxowy cennik – nazwy i ceny blisko siebie */
.cennik-row {
  display: flex;
  justify-content: space-between; /* nazwy po lewej, ceny po prawej */
  padding: 8px 0;
}

.cennik-row .item {
  font-weight: bold;
  flex-grow: 1; /* zajmuje całą dostępną przestrzeń po lewej */
  margin-right: 20px; /* mały odstęp do ceny */
}

.cennik-row .price {
  text-align: right;
  flex-shrink: 0; /* nie kurczy się */
  width: 120px;   /* stała szerokość kolumny cen, gwarantuje wyrównanie */
  white-space: nowrap; /* cena w jednej linii */
}
/* Linie w cenniku – centrowane względem kartki */
.kartka hr {
  display: block;             /* potrzebne, żeby działało margin auto */
  width: 150px;               /* długość kreski */
  margin: 30px auto;          /* centrowanie poziome względem .kartka */
  border: none;               
  border-top: 2px solid #444; /* grubość i kolor kreski */
}
.cennik-table {
display: flex;
  justify-content: center;
}
/* Druga kolumna (ceny) normalna – wyłącza pogrubienie */
.cennik-table td.cena {
    font-weight: normal;
}

/* Promocja – responsywnie przesunięta na prawo */
@media (max-width: 768px) {
    #grupa {
        position: fixed;   /* przyklejony do okna */
        top: 80px;         /* odległość od góry, dopasuj według potrzeb */
        right: 20px;       /* od prawej krawędzi */
        width: 150px;      /* zmniejszona szerokość na mobile */
        height: auto;      /* wysokość dopasuje się do proporcji obrazka */
        z-index: 999;      /* żeby był nad resztą treści */
    }

    #grupa img {
        width: 100%;       /* dopasowanie obrazka do kontenera */
        height: auto;
    }
}
body.home .content {
    background: none;   /* usuwa kolor “kartki” */
    padding: 0;         /* usuwa padding */
    box-shadow: none;   /* usuwa cień */
    border-radius: 0;   /* usuwa zaokrąglenia */
}
/* ===== UKŁAD FILMÓW I OKOLICY – INDEX ===== */
.tiles {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;     /* w mobile filmy pod sobą */
  justify-content: center;
  margin-bottom: 40px; /* odstęp pod filmami */
}

.tile {
  flex: 1 1 480px;     /* minimalna szerokość 480px, rośnie jeśli jest miejsce */
  max-width: 48%;       /* dwa obok siebie na desktopie */
  position: relative;
}

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tile-desc {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(60,60,60,0.6);
  color: white;
  padding: 10px;
  font-size: 16px;
  text-align: center;
}

/* OKOLICA POD FILMAMI */
.okolica {
  margin-top: 20px;
}

.okolica a {
  display: block;
  text-align: center;
  position: relative;
}

.okolica img {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: block;
}

.okolica span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(60,60,60,0.5);
  color: white;
  padding: 12px 26px;
  font-size: 22px;
  transition: all 0.3s ease;
}

.okolica a:hover span {
  background-color: rgb(60,60,60);
  color: red;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 768px) {
  .tile {
    max-width: 100%; /* filmy jeden pod drugim */
  }
  .tiles {
    gap: 15px;
  }
}