/* nl-info.css — panel informacyjny o urządzeniu przy nazwie w cenniku laseroterapii.
   Osobny komponent, NIE nl-dymek: tamten jest hover-only, tekstowy i buduje treść
   z atrybutu title w JS, więc nie uniesie zdjęcia, struktury ani obsługi dotyku.

   Treść panelu jest statyczna w HTML — JS steruje wyłącznie widocznością, pozycją
   i ARIA na dotyku. Bez JS panel nadal działa na hover i na fokusie klawiatury.

   Wyłącznie tokeny, zero literałów hex — dzięki temu tryb ciemny działa sam.
   --nl-ease pochodzi z nl-sekcja-instytucjonalna.css, więc zawsze z fallbackiem. */

.nl-info{ position:relative; display:inline; }

.nl-info-cel{
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:help;
  text-decoration:underline dotted; text-underline-offset:3px;
  text-decoration-color:var(--nl-zloto-tekst);
}
.nl-info-cel:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:3px; border-radius:3px; }

.nl-info-panel{
  position:absolute; left:0; right:auto; top:calc(100% + 10px); z-index:320;
  width:min(560px, 92vw);
  /* Pas bezpieczenstwa: panel nie moze byc szerszy od okna nawet wtedy, gdy
     pozycjonowanie zawiedzie. Taniej niz polegac wylacznie na skrypcie. */
  max-width:calc(100vw - 16px);
  /* Panel niesie teraz parametry techniczne i wskazania, więc bywa wysoki. Limit
     wysokości z własnym przewijaniem jest tańszy niż skracanie treści: panel nigdy
     nie wyjdzie poza ekran, a wskaźnik wjeżdżający w panel trzyma go otwartym. */
  max-height:min(66vh, 540px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--nl-tlo-karta); color:var(--nl-tekst-2);
  border:1px solid var(--nl-linia); border-radius:16px; padding:16px 18px;
  box-shadow:0 14px 44px rgba(0,0,0,.4);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity 200ms var(--nl-ease, cubic-bezier(0.23,1,0.32,1)),
             transform 200ms var(--nl-ease, cubic-bezier(0.23,1,0.32,1)),
             visibility 200ms var(--nl-ease, cubic-bezier(0.23,1,0.32,1));
}
/* W pionie JS przerzuca panel nad wyzwalacz tą klasą, gdy pod nim brakuje miejsca.
   W poziomie nie ma klasy: skrypt wylicza `left` w pikselach, bo przy wąskim oknie
   panel bywa za szeroki dla obu kotwic naraz i trzeba go po prostu wepchnąć w okno. */
.nl-info--gora .nl-info-panel{ top:auto; bottom:calc(100% + 10px); }

/* Klasa --zamkniety pozwala zamknac panel klawiszem Esc, NIE zdejmujac fokusu
   z wyzwalacza. Bez niej fokus wracajacy na przycisk natychmiast otwieralby panel
   z powrotem przez :focus-within, wiec Esc musialby blurowac — a wtedy uzytkownik
   klawiatury gubi miejsce w dokumencie. JS zdejmuje te klase przy opuszczeniu
   elementu, wiec wyciszenie dotyczy tylko jednego nacisniecia Esc. */
/* Ujawnianie na wskazniku MUSI byc zamkniete w @media (hover:hover). Media query nie
   podnosi swoistosci, wiec dopoki te dwa selektory stały poza nim, wygrywały ze
   zdejmujacymi je regulami w (hover:none): `:not(.nl-info--zamkniety)` daje im cztery
   klasy przeciw trzem. Skutkiem bylo to, ze na telefonie dotkniecie nazwy odslanialo
   panel w wersji wskaznikowej, zakotwiczonej przy slowie, zamiast otworzyc arkusz na
   dole. Panel wychodzil wtedy poza prawa krawedz, bo skrypt na dotyku celowo nie
   pozycjonuje. Zglosil to wlasciciel 1.09.2026, ze zrzutami z iPhone'a. */
@media (hover:hover){
  .nl-info:hover:not(.nl-info--zamkniety) .nl-info-panel,
  .nl-info:focus-within:not(.nl-info--zamkniety) .nl-info-panel{
    opacity:1; visibility:visible; transform:none;
  }
}
.nl-info--otwarty .nl-info-panel{ opacity:1; visibility:visible; transform:none; }

.nl-info-foto, .nl-info-foto-ph{
  display:block; width:100%; border-radius:12px; margin:0 0 10px;
  border:1px solid var(--nl-linia);
}
.nl-info-foto{ height:auto; }
.nl-info-foto-ph{ display:none; }
/* Ramka zdjęcia pokazuje się dopiero wtedy, gdy jest co pokazać. Do czasu wgrania
   własnych fotografii urządzeń panel bez zdjęcia jest po prostu niższy, bez pustego
   prostokąta. Przywrócenie podglądu miejsca: aspect-ratio:3/2; background:var(--nl-tlo-2). */

/* Znak firmowy producenta nad nazwą urządzenia. Zastępuje logo, którego nie wolno
   nam reprodukować: nazwa złożona wersalikami w złocie identyfikuje wytwórcę tak
   samo, a nie jest cudzym utworem graficznym. Producent zniknął z tabeli parametrów,
   bo stoi już tutaj. */
.nl-info-marka{
  display:block; margin:0 0 3px;
  font-size:var(--nl-t-drobne); letter-spacing:.14em; text-transform:uppercase;
  color:var(--nl-zloto-etyk, var(--nl-zloto-orn));
}
.nl-info-nazwa{
  display:block; font-family:var(--nl-font-naglowek); color:var(--nl-naglowek);
  font-size:1.05rem; margin:0 0 8px;
}
/* Parametry: siatka etykieta/wartość zbudowana ze <span>, nie z <dl>/<dt>/<dd>.
   Powód jest twardy, nie stylistyczny: panel siedzi wewnątrz akapitu <p>, a <dl>
   jest treścią blokową — przeglądarka wyrzuca ją wtedy poza akapit ORAZ poza sam
   panel, zostawiając go pustym i rozbijając zdanie na dwa akapity. Sprawdzone
   parserem. <span> to treść frazowa, więc zagnieżdżenie jest poprawne. */
.nl-info-param{
  margin:0; display:grid; grid-template-columns:152px 1fr; gap:5px 18px;
  font-size:var(--nl-t-drobne);
}
.nl-info-dt{ color:var(--nl-tekst-pom); }
.nl-info-dd{ margin:0; color:var(--nl-tekst-2); }

.nl-info-opis{
  display:block; margin:10px 0 0; font-size:var(--nl-t-drobne);
  color:var(--nl-tekst-2); line-height:1.5;
}
.nl-info-zrodlo{
  display:block; margin:8px 0 0; padding:8px 0 0; border-top:1px solid var(--nl-linia);
  font-size:var(--nl-t-drobne); color:var(--nl-tekst-pom); line-height:1.45;
}

/* Karuzela zdjęć. Bez JS to zwykły pasek z przewijaniem i przyciąganiem — działa
   palcem i klawiaturą. JS dokłada tylko strzałki dla wskaźnika, stąd klasa --js. */
.nl-info-karuzela{ display:block; position:relative; margin:0 0 10px; }
.nl-info-tor{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;
  border-radius:12px;
}
.nl-info-tor::-webkit-scrollbar{ display:none; }
.nl-info-tor:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:3px; }
.nl-info-slajd{ flex:0 0 100%; scroll-snap-align:center; display:block; }
.nl-info-slajd .nl-info-foto{ margin:0; }
.nl-info-podpis{
  display:block; margin:6px 0 0; text-align:center;
  font-size:var(--nl-t-drobne); color:var(--nl-tekst-pom);
}
.nl-info-strzalka{ display:none; }
.nl-info-karuzela--js .nl-info-strzalka{
  display:grid; place-items:center; position:absolute; top:calc(50% - 26px);
  width:34px; height:34px; padding:0; border-radius:999px;
  border:1px solid var(--nl-linia); background:var(--nl-tlo-karta);
  color:var(--nl-tekst); font:inherit; font-size:20px; line-height:1; cursor:pointer;
}
.nl-info-strzalka--wstecz{ left:6px; }
.nl-info-strzalka--dalej{ right:6px; }
.nl-info-strzalka:disabled{ opacity:.32; cursor:default; }
.nl-info-strzalka:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:2px; }

.nl-info-zamknij{ display:none; }

/* Dotyk: ujawnianie przez hover ORAZ focus-within wyłączone. Bez wyłączenia
   focus-within tap zafokusowałby przycisk i panel wyskoczyłby w ciasnej pozycji
   inline. Na dotyku otwiera wyłącznie JS, a panel staje się dolnym arkuszem. */
/* ── Wskaźnik: układ poziomy ─────────────────────────────────────────────────
   Panel z parametrami i wskazaniami czytany jako pionowa kolumna robi się wysoki
   i wymusza przewijanie w dymku, co jest niewygodne. W poziomie zdjęcie idzie na
   pełną wysokość po lewej, dane po prawej, a panel mieści się bez przewijania.
   Kolumna tekstu ma własne odstępy, bo panel traci padding na rzecz zdjęcia
   dochodzącego do krawędzi. Panel bez zdjęcia wraca do jednej kolumny przez :has. */
@media (hover:hover){
  .nl-info-panel{
    width:min(900px, 92vw);
    max-height:min(74vh, 620px);
    padding:0; overflow:hidden;
    display:grid; grid-template-columns:320px minmax(0, 1fr);
    align-content:start;
  }
  .nl-info-panel:not(:has(.nl-info-foto)){
    grid-template-columns:minmax(0, 1fr);
    width:min(880px, 92vw);
  }
  /* Bez zdjęcia wszystko idzie jedną kolumną w kolejności z dokumentu. Trzeba też
     skasować przypisania wierszy z układu ze zdjęciem, inaczej znak firmowy i nazwa
     lądują w tej samej komórce i nachodzą na siebie. */
  .nl-info-panel:not(:has(.nl-info-foto)) > *{ grid-column:1; grid-row:auto; }
  /* Długie wartości biorą cały wiersz zamiast tłoczyć się w połowie szerokości. */
  .nl-info-panel:not(:has(.nl-info-foto)) .nl-info-dt.nl-info-para--szeroki{ grid-column:1; }
  .nl-info-panel:not(:has(.nl-info-foto)) .nl-info-dd.nl-info-para--szeroki{ grid-column:2 / -1; }
  .nl-info-panel:not(:has(.nl-info-foto)) .nl-info-param{
    grid-template-columns:150px minmax(0,1fr) 150px minmax(0,1fr);
    column-gap:22px;
  }
  .nl-info-marka{ grid-row:1; padding:18px 22px 0; }
  .nl-info-marka + .nl-info-nazwa{ padding-top:0; }

  .nl-info-panel > .nl-info-foto,
  .nl-info-karuzela{
    grid-column:1; grid-row:1 / span 5;
    margin:0; height:100%; min-height:0;
    border:0; border-right:1px solid var(--nl-linia); border-radius:0;
  }
  .nl-info-panel > .nl-info-foto{ object-fit:cover; }
  .nl-info-tor{ height:100%; border-radius:0; }
  .nl-info-slajd{ height:100%; display:flex; flex-direction:column; }
  .nl-info-slajd .nl-info-foto{
    flex:1 1 auto; min-height:0; height:100%; object-fit:cover; border-radius:0;
  }
  .nl-info-slajd .nl-info-podpis{ flex:0 0 auto; padding:0 8px 10px; }

  .nl-info-nazwa{ grid-column:2; grid-row:1; padding:18px 22px 0; margin:0 0 10px; }
  .nl-info-param{ grid-column:2; grid-row:2; padding:0 22px; }
  .nl-info-opis{ grid-column:2; grid-row:3; padding:0 22px; margin:12px 0 0; }
  .nl-info-zrodlo{
    grid-column:2; grid-row:4; margin:14px 22px 0; padding:9px 0 16px;
  }
  .nl-info-zamknij{ grid-column:2; grid-row:5; }
}

@media (hover:none){
  /* Arkusz dolny to inny komponent niż dymek na wskaźniku, nie jego zmniejszenie.
     Na telefonie panel ma odpowiedzieć na jedno pytanie, czym jest to urządzenie,
     a nie wyłożyć całą specyfikację. Dlatego: zdjęcie w stałych proporcjach zamiast
     pełnej wysokości, zdanie wyjaśniające PRZED tabelką parametrów, tylko wiersze
     rdzenia, bez stopki źródłowej i bez strzałek karuzeli. Reszta danych zostaje
     w dokumencie i wraca na szerokim ekranie. */
  .nl-info--otwarty .nl-info-panel{
    position:fixed; left:12px; right:12px; bottom:12px; top:auto;
    width:auto; max-width:none; margin:0 auto;
    max-height:min(76vh, 600px); overflow-y:auto;
    display:flex; flex-direction:column;
    padding:0 16px 12px; border-radius:20px;
    opacity:1; visibility:visible; transform:none;
  }
  .nl-info--gora .nl-info-panel{ bottom:12px; }

  /* Przyciemnienie tła. Bez niego arkusz czyta się jak karta wisząca nad treścią,
     a z nim jak warstwa, spod której cennik czeka. Robi to pseudoelement panelu,
     a nie osobny węzeł, bo treść paneli ma zostać statyczna w dokumencie. Panel ma
     z-index i pozycję, więc tworzy własny kontekst nakładania: -1 chowa tło pod
     panelem, ale nadal nad stroną. */
  .nl-info--otwarty .nl-info-panel::before{
    content:''; position:fixed; inset:0; z-index:-1;
    background:rgba(0,0,0,.5);
    animation:nl-info-tlo 200ms var(--nl-ease, cubic-bezier(0.23,1,0.32,1));
  }
  @keyframes nl-info-tlo{ from{ opacity:0 } to{ opacity:1 } }
  @media (prefers-reduced-motion:reduce){
    .nl-info--otwarty .nl-info-panel::before{ animation:none; }
  }

  /* Kolejność czytania na telefonie: zdjęcie, nazwa, jedno zdanie po ludzku,
     dopiero potem liczby. Na wskaźniku zostaje kolejność z dokumentu. */
  .nl-info--otwarty .nl-info-karuzela,
  .nl-info--otwarty .nl-info-panel > .nl-info-foto{ order:1; }
  .nl-info--otwarty .nl-info-marka{ order:2; padding-top:14px; }
  .nl-info--otwarty .nl-info-nazwa{ order:3; }
  .nl-info--otwarty .nl-info-opis{ order:4; }
  .nl-info--otwarty .nl-info-param{ order:5; }
  .nl-info--otwarty .nl-info-zamknij{ order:6; }

  .nl-info--otwarty .nl-info-panel > .nl-info-foto,
  .nl-info--otwarty .nl-info-karuzela{
    margin:0 -16px 14px; width:calc(100% + 32px);
    border:0; border-bottom:1px solid var(--nl-linia); border-radius:20px 20px 0 0;
  }
  .nl-info--otwarty .nl-info-tor{ border-radius:20px 20px 0 0; }
  /* Zdjęcia mają różne proporcje (od 1,5:1 do niemal kwadratu). Bez wspólnego kadru
     jeden panel zaczyna się od paska, drugi od połowy ekranu zdjęcia. */
  .nl-info--otwarty .nl-info-foto{ aspect-ratio:2 / 1; object-fit:cover; height:auto; }
  .nl-info--otwarty .nl-info-nazwa{ margin:0 0 6px; font-size:1.15rem; }
  .nl-info--otwarty .nl-info-opis{ margin:0 0 14px; }
  .nl-info--otwarty .nl-info-param{ grid-template-columns:112px 1fr; gap:7px 14px; }

  /* Mniej danych, o które prosił właściciel. Wiersze spoza rdzenia oraz stopka
     źródłowa znikają z arkusza, ale zostają w dokumencie i na szerokim ekranie. */
  .nl-info--otwarty .nl-info-para--wiecej,
  .nl-info--otwarty .nl-info-zrodlo{ display:none; }

  .nl-info-karuzela--js .nl-info-strzalka{ display:none; }
  .nl-info--otwarty .nl-info-podpis{ margin:5px 0 0; padding-bottom:7px; }
  .nl-info--otwarty .nl-info-zamknij{
    display:block; position:sticky; bottom:0; margin:18px 0 0; width:100%;
    border-radius:999px; background:var(--nl-cta-tlo); color:var(--nl-cta-tekst);
    border:0; font:inherit; font-weight:600; padding:12px 26px; cursor:pointer;
    box-shadow:0 0 0 12px var(--nl-tlo-karta);
  }
}

@media (prefers-reduced-motion:reduce){
  .nl-info-panel{ transition:none; transform:none; }
}