/* Wspólne style MojaKorba - ładowane przez wszystkie strony.
   Miejsce na style, które mają działać globalnie; per-stronowe zostają
   w assets/mobirise/css/<strona>.css */

/* Aktywna pozycja w menu.
   Uwaga: bootstrapowe .text-white ma !important, a .text-primary z motywu
   nic nie nadpisuje - stąd własna klasa i wyższa specyficzność. */
.navbar-nav .nav-link.active-page,
.navbar-nav .nav-link.active-page:hover,
.navbar-nav .nav-link.active-page:focus {
  color: #fc5130 !important;
}

/* Menu jest przyklejone do góry (navbar-fixed-top), więc skok do kotwicy
   chowałby nagłówek pod nim. scroll-margin-top odsuwa cel skoku. */
[id^="content2-2026"] {
  scroll-margin-top: 9rem;
}

/* Zdjęcia w blokach treści.
   Atrybuty width/height w HTML rezerwują miejsce i zapobiegają skakaniu
   layoutu przy wczytywaniu, ale bez height:auto szerokość skaluje się do
   kolumny, a wysokość zostaje na wartości z atrybutu i obraz się zwęża. */
.content2 img {
  height: auto;
}

/* ================= Przycisk kontaktowy ================= */
/* Adres wstawia skrypt (site.js). W HTML ten element jest pusty, więc
   dopóki JS nie zadziała, nie zajmuje miejsca ani nie robi odstępu. */
.mk-poczta-adres:not(:empty) {
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* ================= Pasek statystyk wyjazdu ================= */
.mk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 1rem;
  margin: 2rem 0 0.5rem;
  padding: 1.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.mk-stat { text-align: center; }
.mk-stat-value {
  display: block;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  font-weight: 700;
  color: #fc5130;
  font-variant-numeric: tabular-nums;
}
.mk-stat-unit {
  font-size: 0.45em;
  margin-left: 0.15em;
  opacity: 0.85;
}
.mk-stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Kolor ustawiamy jawnie. Dziedziczony jest czarny, a sekcja ma czarne
     tło, więc podpisy byłyby niewidoczne. */
  color: rgba(255, 255, 255, 0.7);
}

/* ================= Spis miejscówek ================= */
.mk-toc {
  position: fixed;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  z-index: 1020;
}
.mk-toc-list {
  list-style: none;
  margin: 0;
  padding: 0.65rem 0.5rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 10px;
}
.mk-toc-list a {
  display: block;
  padding: 0.3rem 0.7rem 0.3rem 1.5rem;
  position: relative;
  font-size: 0.82rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.mk-toc-list a::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.18s ease, transform 0.18s ease;
}
.mk-toc-list a:hover { color: #fff; }
.mk-toc-list a.aktywna { color: #fc5130; }
.mk-toc-list a.aktywna::before { background: #fc5130; transform: scale(1.5); }
.mk-toc-toggle { display: none; }

/* Na wąskich ekranach spis chowa się pod przyciskiem, żeby nie zasłaniał treści. */
@media (max-width: 991px) {
  .mk-toc { right: 0.75rem; }
  /* Pigułka z napisem zamiast trzech kresek. Ikona hamburgera myliła się
     z menu nawigacji, które na telefonie jest widoczne w tym samym czasie. */
  .mk-toc-toggle {
    display: block;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
  }
  .mk-toc.otwarty .mk-toc-toggle {
    border-color: #fc5130;
    color: #fc5130;
  }
  .mk-toc-list {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
  }
  .mk-toc.otwarty .mk-toc-list { display: block; }
}

/* ================= Powiększanie zdjęć ================= */
.mk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.93);
  padding: 3.5rem 1rem;
}
.mk-lightbox.widoczny { display: flex; }
.mk-lb-scena {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mk-lb-scena img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
}
.mk-lb-scena figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}
.mk-lightbox button {
  position: absolute;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.mk-lightbox button:hover,
.mk-lightbox button:focus { opacity: 1; }
.mk-lb-zamknij { top: 1rem; right: 1.25rem; font-size: 2.5rem; }
.mk-lb-prev, .mk-lb-next { top: 50%; transform: translateY(-50%); font-size: 3.5rem; padding: 0 1rem; }
.mk-lb-prev { left: 0.25rem; }
.mk-lb-next { right: 0.25rem; }
@media (max-width: 575px) {
  .mk-lb-prev, .mk-lb-next { font-size: 2.5rem; padding: 0 0.5rem; }
}

/* --- Osadzone mapy Komoot --- */
.mk-embed {
  margin: 1.5rem 0 0.5rem;
  width: 100%;
  max-width: 100%;
}
.mk-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 700px;
  border: 0;
}
.mk-embed-caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.7;
}
@media (max-width: 768px) {
  .mk-embed iframe { height: 520px; }
}

/* --- Galeria zdjęć --- */
.mk-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 1.5rem;
}
.mk-gallery figure { margin: 0; }
.mk-gallery img {
  width: 100%;
  /* height:auto jest konieczne - atrybut height="..." w HTML działa jako
     podpowiedź prezentacyjna i bez tego wygrywa z aspect-ratio */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.mk-gallery figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.35;
  opacity: 0.75;
}