/* =========================================================
   NASTROJE NATURY — style podstrony Panoramy 360°
   (uzupełnienie style.css)
   ========================================================= */

/* ── HERO PODSTRONY ──────────────────────────────────── */
.subhero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* zapas na pasek menu, żeby treść nigdy pod niego nie wjechała */
  padding-top: calc(var(--nav-h) + 48px);
}

.subhero-media { position: absolute; inset: 0; z-index: 0; }

.subhero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.03) brightness(0.97);
}

.subhero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(6,8,10,0.86) 0%,
      rgba(6,8,10,0.60) 28%,
      rgba(6,8,10,0.24) 56%,
      rgba(6,8,10,0.06) 82%),
    linear-gradient(to top,
      rgba(6,8,10,0.92) 0%,
      rgba(6,8,10,0.45) 26%,
      rgba(6,8,10,0.06) 52%,
      rgba(6,8,10,0) 66%),
    linear-gradient(to bottom, rgba(6,8,10,0.66) 0%, rgba(6,8,10,0.10) 14%, rgba(6,8,10,0) 24%);
}

.subhero-content {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 6vw 9vh;
}

.subhero h1 {
  font-size: clamp(38px, 6.4vw, 84px);
  margin: 8px 0 18px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.9), 0 0 60px rgba(0,0,0,0.5);
}

.subhero .lead {
  color: #F2EEE7;
  text-shadow: 0 1px 16px rgba(0,0,0,0.9);
}

.subhero .eyebrow { text-shadow: 0 1px 14px rgba(0,0,0,0.9); }

/* ── UKŁAD: MAPA + LISTA ─────────────────────────────── */
.pano-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  margin-top: 56px;
  align-items: start;
}

.map-panel {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  border: 1px solid var(--gold-soft);
  background: var(--bg-2);
  align-self: start;
}

#map {
  width: 100%;
  height: min(74vh, 700px);
  background: #0d1114;
  z-index: 1;
}

.map-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 15px 18px;
  border-top: 1px solid var(--gold-soft);
  font-size: 13px;
  color: var(--cream-dim);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.04em;
}

.map-legend b { color: var(--gold-text); font-weight: 400; }

.map-reset {
  background: none;
  border: 1px solid var(--gold-line);
  color: var(--cream-dim);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 15px;
  cursor: pointer;
  transition: color 0.4s var(--spring), border-color 0.4s var(--spring);
}

.map-reset:hover { color: var(--gold-text); border-color: var(--gold-text); }

/* ── LISTA PANORAM ───────────────────────────────────── */
.pano-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pano-card {
  position: relative;
  border: 1px solid rgba(201,165,90,0.12);
  background: var(--bg-2);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.5s var(--spring), transform 0.5s var(--spring);
  text-align: left;
  padding: 0;
  color: inherit;
  font: inherit;
  display: block;
  width: 100%;
}

.pano-card:hover,
.pano-card:focus-visible,
.pano-card.is-active {
  border-color: var(--gold-line);
  transform: translateY(-3px);
  outline: none;
}

.pano-card.is-active { border-color: var(--gold); }

.pano-card-thumb {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.pano-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.95) brightness(0.98);
  transition: transform 0.9s var(--spring), filter 0.6s var(--spring);
}

.pano-card:hover .pano-card-thumb img { transform: scale(1.05); filter: saturate(1.05) brightness(1.08); }

.pano-card-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: rgba(6,8,10,0.82);
  border: 1px solid var(--gold-soft);
  padding: 4px 8px;
  backdrop-filter: blur(6px);
}

.pano-card-body { padding: 14px 16px 16px; }

.pano-card-body h3 {
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: 5px;
}

.pano-card-body p {
  font-size: 13.5px;
  color: var(--cream-muted);
  line-height: 1.55;
  min-height: 1.5em;
}

/* ── POPUP LEAFLET ───────────────────────────────────── */
.leaflet-container { font-family: 'Plus Jakarta Sans', sans-serif; background: #0b0f13; }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgba(10, 13, 16, 0.96);
  color: var(--cream);
  border: 1px solid var(--gold-line);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

.leaflet-popup-content { margin: 0; width: 232px !important; }
.leaflet-popup-close-button { color: var(--cream-dim) !important; }
.leaflet-popup-close-button:hover { color: var(--gold-text) !important; }

.map-popup img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  filter: saturate(1) brightness(1);
}

.map-popup-body { padding: 12px 14px 14px; }

.map-popup-body h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 5px;
}

.map-popup-body p {
  font-size: 13px;
  color: var(--cream-dim);
  margin-bottom: 10px;
  line-height: 1.5;
}

.map-popup-body button {
  width: 100%;
  background: var(--gold);
  border: none;
  color: #0A0704;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px;
  cursor: pointer;
  transition: background 0.4s var(--spring);
}

.map-popup-body button:hover { background: #d8b877; }

/* ── MARKER ──────────────────────────────────────────── */
.pano-marker {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid rgba(6,8,10,0.9);
  box-shadow: 0 0 0 4px rgba(201,165,90,0.22), 0 4px 12px rgba(0,0,0,0.6);
  transition: transform 0.4s var(--spring), box-shadow 0.4s var(--spring);
}

.pano-marker-wrap:hover .pano-marker,
.pano-marker-wrap.is-active .pano-marker {
  transform: scale(1.35);
  box-shadow: 0 0 0 8px rgba(201,165,90,0.28), 0 6px 18px rgba(0,0,0,0.7);
}

.leaflet-control-attribution {
  background: rgba(6,8,10,0.7) !important;
  color: rgba(237,232,223,0.7) !important;
  font-size: 11px !important;
}
.leaflet-control-attribution a { color: rgba(220,190,126,0.95) !important; }

.leaflet-bar a {
  background: rgba(10,13,16,0.92) !important;
  color: var(--cream) !important;
  border-color: rgba(201,165,90,0.2) !important;
}
.leaflet-bar a:hover { background: rgba(201,165,90,0.2) !important; color: var(--gold-text) !important; }

/* ── WIDOK PANORAMY (modal) ──────────────────────────── */
.pano-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(4,5,6,0.98);
}

.pano-modal.is-open { display: block; }

#pano-viewer { position: absolute; inset: 0; }

.pano-modal-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(to bottom, rgba(6,8,10,0.85), transparent);
  pointer-events: none;
}

.pano-modal-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(0,0,0,0.9);
}

.pano-modal-title small {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #E4DFD6;
  text-shadow: 0 1px 12px rgba(0,0,0,0.9);
  margin-top: 3px;
}

.pano-modal-actions { display: flex; gap: 10px; pointer-events: auto; }

.pano-icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: rgba(6,8,10,0.7);
  color: var(--cream);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}

.pano-icon-btn:hover { border-color: var(--gold); background: rgba(201,165,90,0.12); color: var(--gold); }

.pano-modal-nav {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: rgba(6,8,10,0.68);
  border: 1px solid var(--gold-soft);
  backdrop-filter: blur(10px);
}

.pano-modal-nav span {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--cream-dim);
  min-width: 62px;
  text-align: center;
}

.pano-modal-nav span b { color: var(--gold-text); font-weight: 400; }

.pano-modal-nav button {
  width: 36px; height: 36px;
  border: 1px solid var(--gold-line);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  border-radius: 50%;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.pano-modal-nav button:hover { border-color: var(--gold); color: var(--gold); background: rgba(201,165,90,0.1); }

.pnlm-container { background: #06080A !important; }
.pnlm-load-box { background: rgba(6,8,10,0.9) !important; color: var(--cream) !important; }

/* ── RESPONSYWNOŚĆ ───────────────────────────────────── */
@media (max-width: 1080px) {
  .pano-layout { grid-template-columns: 1fr; }
  .map-panel { position: static; }
  #map { height: 56vh; }
}

@media (max-width: 620px) {
  .pano-list { grid-template-columns: 1fr; }
  #map { height: 48vh; }
}

/* ── KOREKTA KONTROLEK PANNELLUM (żeby nie zasłaniały tytułu) ── */
.pano-modal .pnlm-controls-container {
  top: 84px !important;
  left: 16px !important;
}

.pano-modal .pnlm-compass { bottom: 84px !important; left: 16px !important; }

@media (max-width: 620px) {
  .pano-modal-title { font-size: 11px; }
  .pano-modal .pnlm-compass { bottom: 92px !important; }
}

/* ── KOMUNIKAT PRZY OTWARCIU Z DYSKU (file://) ─────────── */
.file-note {
  margin-top: 26px;
  padding: 18px 22px;
  border: 1px solid rgba(201,165,90,0.4);
  background: rgba(201,165,90,0.09);
  color: #F2EEE7;
  font-size: 14.5px;
  line-height: 1.65;
}

.file-note b {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: var(--gold-text);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.file-note code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 13.5px;
  background: rgba(6,8,10,0.6);
  border: 1px solid rgba(201,165,90,0.22);
  padding: 2px 7px;
  white-space: nowrap;
}

.pano-file-msg {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vw;
  text-align: center;
}

.pano-file-msg div {
  max-width: 46ch;
  border: 1px solid rgba(201,165,90,0.4);
  background: rgba(10,13,16,0.94);
  padding: 34px 32px;
}

.pano-file-msg h3 {
  font-size: 20px;
  color: var(--gold-text);
  margin-bottom: 14px;
}

.pano-file-msg p {
  color: #E4DFD6;
  font-size: 15px;
  line-height: 1.7;
}

.pano-file-msg code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 13.5px;
  background: rgba(6,8,10,0.75);
  border: 1px solid rgba(201,165,90,0.25);
  padding: 2px 7px;
  display: inline-block;
  margin-top: 4px;
}


/* ── HERO PODSTRONY NA MAŁYCH EKRANACH ───────────────── */
@media (max-width: 860px) {
  .subhero {
    min-height: 68svh;
    padding-top: calc(var(--nav-h) + 32px);
  }
  .subhero-content { padding-bottom: 7vh; }
}


/* =========================================================
   WARSTWA KAFLI MAPY
   ---------------------------------------------------------
   Kafle pochodzą z OpenStreetMap (bez klucza API). Ciemny,
   ciepły ton uzyskujemy filtrem CSS, a nie gotowym stylem
   dostawcy — dzięki temu mapa pasuje do strony i nie zależy
   od żadnego konta ani limitu.
   ========================================================= */

/* Ciemna: odwrócenie jasności + korekta barw, tak by lasy zostały
   zielone, woda modra, a drogi ciepło-ochrowe jak złoto na stronie. */
.tiles-dark {
  filter: invert(1) hue-rotate(180deg)
          brightness(1.12) contrast(0.88)
          saturate(0.6) sepia(0.30);
}

/* Jasna/Teren: bez odwracania — tylko ocieplenie i przygaszenie,
   żeby jasna mapa nie raziła na ciemnym tle strony. */
.tiles-soft {
  filter: sepia(0.5) saturate(0.68) brightness(0.9) contrast(1.03);
}

/* Delikatna winieta — zszywa mapę z tłem strony, bez zaciemniania środka.
   (Uwaga: .map-panel ma już position: sticky, więc nie nadpisujemy go tutaj —
   element pozycjonowany sam w sobie jest układem odniesienia dla ::after.) */
.map-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 70px 8px rgba(6, 8, 10, 0.32);
}

/* ── PRZEŁĄCZNIK WARSTW ──────────────────────────────── */
.leaflet-control-layers {
  background: rgba(10, 13, 16, 0.94) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
  color: var(--cream-dim);
}

.leaflet-control-layers-toggle {
  background-color: rgba(10, 13, 16, 0.94) !important;
  filter: invert(1) brightness(1.6) saturate(0);
}

.leaflet-control-layers-expanded {
  padding: 12px 14px !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.leaflet-control-layers-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--cream-dim);
  transition: color 0.3s var(--spring);
}

.leaflet-control-layers-list label:hover { color: var(--gold-text); }
.leaflet-control-layers-selector { accent-color: var(--gold); margin: 0; }
.leaflet-control-layers-separator { border-top-color: var(--gold-soft) !important; }

/* Domknięcie wyglądu przełącznika — jedna zwarta ramka, bez resztek */
.leaflet-control-layers-expanded .leaflet-control-layers-toggle { display: none !important; }
.leaflet-control-layers-list { margin: 0; }
.leaflet-control-layers form { margin: 0; padding: 0; }
.leaflet-control-layers-base { line-height: 1.2; }


/* =========================================================
   IKONY WBUDOWANE W PANNELLUM (zoom, kompas)
   ---------------------------------------------------------
   Domyślne grafiki pannellum to CZARNE symbole na białym tle.
   Po przyciemnieniu tła robiły się niewidoczne — czarne koło
   na czarnym. Podmieniamy je na własne, w kolorach strony:
   kremowe „+" i „-" oraz igłę kompasu ze złotą północą.
   ========================================================= */

.pano-modal .pnlm-controls,
.pano-modal .pnlm-control {
  background-color: rgba(10, 13, 16, 0.82) !important;
  border: 1px solid rgba(201, 165, 90, 0.34) !important;
  backdrop-filter: blur(8px);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pano-modal .pnlm-controls:hover,
.pano-modal .pnlm-control:hover {
  background-color: rgba(201, 165, 90, 0.20) !important;
  border-color: rgba(201, 165, 90, 0.70) !important;
}

/* Przyciski powiększania */
.pano-modal .pnlm-zoom-controls {
  width: 38px !important;
  height: 76px !important;
  border-radius: 0 !important;
}

.pano-modal .pnlm-zoom-in,
.pano-modal .pnlm-zoom-out {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20fill%3D%22%23EDE8DF%22%20d%3D%22M12%206.5h2v5.5h5.5v2H14v5.5h-2V14H6.5v-2H12z%22%2F%3E%3C%2Fsvg%3E') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  border-radius: 0 !important;
}

.pano-modal .pnlm-zoom-out {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20fill%3D%22%23EDE8DF%22%20d%3D%22M6.5%2012h13v2h-13z%22%2F%3E%3C%2Fsvg%3E') !important;
  border-top: 1px solid rgba(201, 165, 90, 0.28) !important;
}

/* Kompas */
.pano-modal .pnlm-compass {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%2223%22%20fill%3D%22none%22%20stroke%3D%22rgba%28201%2C165%2C90%2C.35%29%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M25%207%2021.2%2025h7.6z%22%20fill%3D%22%23C9A55A%22%2F%3E%3Cpath%20d%3D%22M25%2043%2021.2%2025h7.6z%22%20fill%3D%22rgba%28237%2C232%2C223%2C.5%29%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2225%22%20r%3D%222.2%22%20fill%3D%22%23EDE8DF%22%2F%3E%3C%2Fsvg%3E') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 56px 56px !important;
  border: 1px solid rgba(201, 165, 90, 0.34) !important;
}