/* ===========================================================================
   TRYB ZWIEDZANIA — pełnoekranowa nakładka <dialog>
   Ma być czarna sala kinowa: zero ozdobników, wszystko ustępuje zdjęciu.
   =========================================================================== */

.tura {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  background: #060607;
  color: var(--atrament);
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Wejście i wyjście animowane bez JS: @starting-style ustala stan startowy,
   allow-discrete pozwala animować samo `display` i warstwę `overlay`. */
.tura {
  opacity: 0;
  scale: 0.985;
  transition:
    opacity var(--d-3) var(--e-out),
    scale var(--d-3) var(--e-out),
    display var(--d-3) allow-discrete,
    overlay var(--d-3) allow-discrete;
}

.tura[open] { opacity: 1; scale: 1; }

@starting-style {
  .tura[open] { opacity: 0; scale: 0.985; }
}

.tura::backdrop {
  background: rgba(4, 4, 5, 0.94);
  backdrop-filter: blur(6px);
}

/* Atrybut `hidden` z HTML-a musi wygrać z `display: grid/block` ustawionym
   w klasach niżej — inaczej ukryty ekran ładowania zostaje na wierzchu. */
.tura [hidden],
.lupa [hidden] { display: none; }

/* --- Warstwy obrazu ------------------------------------------------------ */
.tura__plotno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Zastępczy pokaz zdjęć (brak WebGL / ograniczony ruch) */
.tura__slajdy {
  position: absolute;
  inset: 0;

  & img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s var(--e-soft), transform 8s linear;
    transform: scale(1.04);
  }

  & img.jest { opacity: 1; transform: scale(1.10); }
}

/* Delikatna winieta — zbiera wzrok do środka i pomaga czytać podpisy. */
/* Zdjęcia bywają skrajnie jasne (zaśnieżony dach, biała łazienka), więc
   pod nazwą pomieszczenia i podpisem musi leżeć własna, mocna podstawa.
   Gradient eliptyczny w lewym dolnym rogu robi to punktowo, nie gasząc
   środka kadru. */
.tura__winieta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 42% at 6% 100%, rgba(0, 0, 0, 0.88) 0%,
                    rgba(0, 0, 0, 0.45) 45%, transparent 78%),
    linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.30) 22%,
                    transparent 42%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.66) 0%, transparent 16%),
    radial-gradient(122% 92% at 50% 45%, transparent 54%, rgba(0, 0, 0, 0.5) 100%);
}

/* --- Górny pasek --------------------------------------------------------- */
.tura__gora {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: clamp(var(--s-4), 3vw, var(--s-7)) clamp(var(--s-4), 4vw, var(--s-9));
}

.tura__etykieta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-mikro);
  letter-spacing: var(--ls-etyk-s);
  text-transform: uppercase;
  color: var(--atrament-3);

  &::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--mosiadz);
  }
}

.tura__obiekt { color: var(--atrament); }

.tura__zamknij {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linia);
  color: var(--atrament-2);
  transition: border-color var(--d-1), color var(--d-1), background var(--d-1);

  &:hover {
    border-color: var(--mosiadz);
    color: var(--mosiadz);
    background: var(--mosiadz-mgla);
  }
}

/* --- Dolny pasek --------------------------------------------------------- */
.tura__dol {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: clamp(var(--s-5), 4vw, var(--s-9)) clamp(var(--s-4), 4vw, var(--s-9));
}

.tura__pokoj {
  font-family: var(--f-tytul);
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--atrament);
}

.tura__podpis {
  margin-block-start: var(--s-2);
  max-width: 44ch;
  font-size: var(--t-sm);
  color: var(--atrament-3);
}

/* Podpisy zmieniają się razem z pomieszczeniem — miękkie wejście. */
.tura__pokoj, .tura__podpis {
  animation: podpisWchodzi var(--d-4) var(--e-out) both;
}

@keyframes podpisWchodzi {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Sterowanie ---------------------------------------------------------- */
.tura__sterowanie {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.tura__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linia);
  color: var(--atrament-2);
  transition: border-color var(--d-1), color var(--d-1), background var(--d-1);

  &:hover {
    border-color: var(--mosiadz);
    color: var(--mosiadz);
    background: var(--mosiadz-mgla);
  }
}

/* Ikona pauzy / odtwarzania rysowana czystym CSS. */
.tura__btn--pauza::before {
  content: '';
  display: block;
}

.tura__btn--pauza[data-stan='gra']::before {
  width: 10px;
  height: 13px;
  border-inline: 3px solid currentColor;
}

.tura__btn--pauza[data-stan='pauza']::before {
  width: 0;
  height: 0;
  margin-inline-start: 3px;
  border-block: 7px solid transparent;
  border-inline-start: 11px solid currentColor;
}

/* --- Kropki postępu ------------------------------------------------------ */
.tura__kropki {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--s-2);
  list-style: none;

  & li { flex: 1 1 0; }

  & button {
    display: block;
    width: 100%;
    height: 2px;
    padding: 10px 0;
    background: none;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      inset-block-start: 10px;
      height: 1px;
      background: var(--linia-mocna);
      transition: background var(--d-2) var(--e-soft), height var(--d-2) var(--e-soft);
    }
  }

  & li.aktywna button::after {
    background: var(--mosiadz);
    height: 2px;
  }

  & button:hover::after { background: var(--atrament-2); }
}

/* --- Komunikat ładowania ------------------------------------------------- */
.tura__ladowanie {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-5);
  font-size: var(--t-mikro);
  letter-spacing: var(--ls-etyk-s);
  text-transform: uppercase;
  color: var(--atrament-3);
  background: #060607;

  & span {
    width: 46px;
    height: 46px;
    border: 1px solid var(--linia);
    border-block-start-color: var(--mosiadz);
    border-radius: 50%;
    animation: obrot 1.1s linear infinite;
  }
}

@keyframes obrot { to { transform: rotate(1turn); } }

/* --- Telefon ------------------------------------------------------------- */
@media (width < 720px) {
  .tura__dol {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  .tura__sterowanie { justify-content: flex-start; }
  .tura__podpis { max-width: none; }
}

/* --- Skrót klawiszowy w rogu (tylko na dużych ekranach) ------------------ */
.tura__skroty {
  position: absolute;
  inset-block-end: clamp(var(--s-5), 4vw, var(--s-9));
  inset-inline-end: clamp(var(--s-4), 4vw, var(--s-9));
  font-size: 10px;
  letter-spacing: var(--ls-etyk);
  text-transform: uppercase;
  color: var(--atrament-4);
  pointer-events: none;
}

@media (width < 1100px) { .tura__skroty { display: none; } }

/* ===========================================================================
   LUPA — pełnoekranowy podgląd zdjęcia z galerii
   =========================================================================== */

.lupa {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: clamp(var(--s-5), 5vw, var(--s-10));
  border: 0;
  background: rgba(6, 6, 7, 0.97);
  color: var(--atrament);
  display: grid;
  place-items: center;
  opacity: 0;
  transition:
    opacity var(--d-2) var(--e-out),
    display var(--d-2) allow-discrete,
    overlay var(--d-2) allow-discrete;
}

.lupa[open] { opacity: 1; }

@starting-style { .lupa[open] { opacity: 0; } }

.lupa::backdrop { background: rgba(6, 6, 7, 0.9); }

.lupa__ramka {
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  max-width: min(1500px, 100%);

  & img {
    max-width: 100%;
    max-height: 78svh;
    width: auto;
    object-fit: contain;
    animation: lupaWchodzi var(--d-3) var(--e-out) both;
  }

  & figcaption {
    font-size: var(--t-mikro);
    letter-spacing: var(--ls-etyk);
    text-transform: uppercase;
    color: var(--atrament-3);
    text-align: center;
  }
}

@keyframes lupaWchodzi {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.lupa__zamknij {
  position: absolute;
  inset-block-start: clamp(var(--s-4), 3vw, var(--s-7));
  inset-inline-end: clamp(var(--s-4), 3vw, var(--s-7));
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linia);
  color: var(--atrament-2);
  transition: border-color var(--d-1), color var(--d-1);

  &:hover { border-color: var(--mosiadz); color: var(--mosiadz); }
}

.lupa__nawig {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--atrament-3);
  transition: color var(--d-1);

  &:hover { color: var(--mosiadz); }
}

.lupa__nawig--w-lewo  { inset-inline-start: clamp(var(--s-2), 2vw, var(--s-6)); }
.lupa__nawig--w-prawo { inset-inline-end:   clamp(var(--s-2), 2vw, var(--s-6)); }

.lupa__licznik {
  position: absolute;
  inset-block-end: clamp(var(--s-4), 3vw, var(--s-7));
  inset-inline-start: 50%;
  translate: -50% 0;
  font-size: var(--t-mikro);
  letter-spacing: var(--ls-etyk-s);
  color: var(--atrament-4);
  font-variant-numeric: tabular-nums;
}