/* ===========================
   Reset i podstawowe ustawienia
   =========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===========================
   Body i layout całej strony
   =========================== */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  background-color: #000; /* czarne tło fallback */
  background-image: url('../images/background2560x1394horizontal.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: sans-serif;
  color: #333;
  line-height: 1.4;
  min-height: 100vh;
}

/* ===========================
   Obrazy i media
   =========================== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===========================
   Nagłówek (header) i logo
   =========================== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.6);
  padding: 1rem;
}
.logo {
  max-height: 60px;
}

/* ===========================
   Menu główne (nav)
   =========================== */
.main-menu ul {
  display: flex;
  list-style: none;
  gap: 0.5rem;
  overflow-x: auto;
  white-space: nowrap;
}
.main-menu a {
  display: block;
  padding: 0.75rem 1rem;
  background: #2F6309;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
}
.main-menu a:hover,
.main-menu a:focus {
  background: #255107;
}
.main-menu a.active {
  background: #255107;
}

/* ===========================
   Główna zawartość (content)
   =========================== */
.content {
  max-width: 900px;
  margin: 2rem auto;
  padding: 1rem;
  background: transparent; /* tło przezroczyste, pokazuje obraz z body */
  /* border-radius: 8px; */ /* możesz zostawić lub usunąć */
}

/* ===========================
   Kontener kalendarza (desktop)
   =========================== */
.calendar {
  width: 100%;      /* wypełnia .content */
  margin: 2rem auto;
}
.calendar iframe {
  width: 100%;
  height: 600px;
  border: none;
}

/* ===========================
   Sekcja Cennika (cennik.html)
   =========================== */
.pricing {
  max-width: 900px;
  margin: 2rem auto;
  padding: 1rem;
  background: transparent; /* tło przezroczyste jak w kontakcie */
  /* border-radius: 8px; */ /* możesz zostawić lub usunąć */
}
.pricing h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #fff; /* dopasuj kolor na ciemnym tle */
}
.pricing p,
.pricing ul,
.pricing li {
  color: #fff; /* tekst biały dla czytelności */
}
.pricing ul {
  list-style: disc inside;
  margin: 1rem 0;
  padding-left: 1rem;
}
.pricing a {
  color: #ff0;
  text-decoration: none;
}
.pricing a:hover {
  text-decoration: underline;
}

/* ===========================
   Galeria (sale prób)
   =========================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.room,
.room h1,
.room h2,
.room p,
.equipment,
.equipment li {
  color: #fff;
}

/* ===========================
   Strona Kontakt
   =========================== */
main.contact-page {
  flex: 1;
  padding: 2rem 1rem;
  background: transparent;
  color: #fff;
}
main.contact-page h1 {
  margin-bottom: 1rem;
}
main.contact-page address {
  font-style: normal;
  line-height: 1.6;
}
main.contact-page a {
  color: #ff0;
  text-decoration: none;
}
main.contact-page a:hover {
  text-decoration: underline;
}

/* ===========================
   Stopka (footer)
   =========================== */
footer.site-footer {
  margin-top: auto;
  text-align: center;
  padding: 2rem 1rem;
  background: rgba(0, 0, 0, 0.8);
  color: #eee;
}
footer.site-footer a {
  color: #ff0;
  text-decoration: none;
}
footer.site-footer a:hover {
  text-decoration: underline;
}

/* ===========================
   Mapa (iframe) w stopce
   =========================== */
.map iframe {
  width: 100%;
  max-width: 800px;
  height: 400px;
  border: 0;
  margin: 1rem auto 0;
  display: block;
}

/* ===========================
   Responsywność – mobile portrait
   =========================== */
@media (max-width: 480px) {
  .site-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .logo {
    margin-bottom: 1rem;
  }
  .main-menu ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    margin-top: 1rem;
  }
  .main-menu a {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
  }
  /* pełny bleed kalendarza w pionie */
  .content {
    padding: 0;
    margin: 0;
    max-width: none;
  }
  .calendar {
    width: 100vw;
    margin: 0;
    margin-left: calc(50% - 50vw);
  }
  .calendar iframe {
    height: 80vh;
  }
}

/* ===========================
   Responsywność – mobile landscape
   =========================== */
@media (orientation: landscape) and (max-width: 767px) {
  .calendar {
    /* szerokość ekranu minus 2rem na marginesy */
    width: calc(100vw - 2rem);
    margin: 2rem auto;
  }
  .calendar iframe {
    height: 80vh; /* lub inna wysokość, która Ci pasuje */
  }
}

/* ===========================
   Responsywność – desktop
   =========================== */
@media (min-width: 768px) {
  .calendar {
    width: 90vw;
    max-width: 1200px;

    /* centrowanie względem całego okna */
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    margin: 2rem 0;  /* tylko margines góra/dół */
  }
  .calendar iframe {
    /* dostosuj wysokość; 80vh zwykle wystarczy */
    height: 100vh;
  }
}

/* ===========================
   Logo wyśrodkowane na desktopie
   =========================== */
@media (min-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: center;       /* centruje logo i menu */
    padding: 2rem 1rem;        /* możesz zwiększyć padding */
  }
  .site-header .logo-link {
    margin-bottom: 1rem;       /* odstęp pod logo */
  }
  .site-header .main-menu {
    width: 100%;               /* menu rozciąga się na całą szerokość */
    text-align: center;        /* centruje listę w środku */
  }
  .site-header .main-menu ul {
    justify-content: center;   /* flex centrowanie elementów menu */
  }
}

/* ===========================
   Kontakt wyśrodkowany na desktopie
   =========================== */
@media (min-width: 768px) {
  /* Wyśrodkowanie treści strony kontaktowej */
  main.contact-page {
    max-width: 600px;      /* albo inna szerokość, która Ci odpowiada */
    margin: 2rem auto;     /* górny/dolny odstęp i automatyczne wyrównanie na środek */
    padding: 1rem;         /* ew. dodatkowy wewnętrzny odstęp */
    text-align: center;    /* jeśli chcesz, żeby tekst też był wyśrodkowany */
  }
}