/* NL CLINIC — sekcja instytucjonalna: praca, RODO, regulaminy.
   Arkusz trzyma wyłącznie to, czego nie da się zapisać stylem lokalnym:
   ruch, stany interakcji i ich wyłączenie przy prefers-reduced-motion.
   Wygląd (układ, kolory, typografia) siedzi w stylach lokalnych stron,
   więc treść jest poprawna także przed wczytaniem tego pliku i bez JS.
   Wartości ruchu zgodne z docs/DESIGN-SYSTEM.md, wariant B. */

:root{
  --nl-ease:cubic-bezier(0.23,1,0.32,1);
  --nl-czas-odslona:700ms;
  --nl-czas-media:960ms;
  --nl-czas-ui:240ms;
  --nl-czas-linia:760ms;
  --nl-kaskada:95ms;
  --nl-dystans:26px;
}

/* --- Odsłona sekcji. Stan początkowy nakłada skrypt (klasa nl-ruch-start),
       nigdy arkusz, żeby bez JS wszystko było widoczne. --- */
.nl-ruch-start{ opacity:0; transform:translateY(var(--nl-dystans)); }
.nl-ruch-in{
  opacity:1; transform:none;
  transition:opacity var(--nl-czas-odslona) var(--nl-ease),
             transform var(--nl-czas-odslona) var(--nl-ease);
}
.nl-ruch-media.nl-ruch-start{ opacity:0; transform:scale(1.05); }
.nl-ruch-media.nl-ruch-in{
  transition:opacity var(--nl-czas-media) var(--nl-ease),
             transform var(--nl-czas-media) var(--nl-ease);
}

/* --- Złota linia pod nagłówkiem sekcji: rysuje się od lewej. --- */
.nl-linia{ display:block; height:1px; background:var(--nl-zloto-orn); transform-origin:left center; }
.nl-linia.nl-ruch-start{ opacity:1; transform:scaleX(0); }
.nl-linia.nl-ruch-in{
  transform:scaleX(1);
  transition:transform var(--nl-czas-linia) var(--nl-ease) 140ms;
}

/* --- Spis dokumentów: wiersz jako cel dotykowy, bez cienia i bez ramki. --- */
.nl-spis-poz{ min-height:44px; transition:background-color var(--nl-czas-ui) var(--nl-ease); }
.nl-spis-poz .nl-spis-tytul{ transition:color var(--nl-czas-ui) var(--nl-ease); }
@media (hover:hover){
  .nl-spis-poz:hover{ background-color:var(--nl-tlo-2); }
  .nl-spis-poz:hover .nl-spis-tytul{ color:var(--nl-link-hover); }
}
.nl-spis-poz:focus-visible{ background-color:var(--nl-tlo-2); }

/* --- Pola formularza: zmiana koloru krawędzi bez skoku układu. --- */
.nl-pole{ transition:border-color var(--nl-czas-ui) var(--nl-ease); }
.nl-pole:focus{ outline:none; border-color:var(--nl-zloto-tekst); box-shadow:inset 0 0 0 1px var(--nl-zloto-tekst); }
.nl-pole:focus-visible{ outline:2px solid var(--nl-zloto-orn); outline-offset:2px; }

/* --- Rozwijane bloki zakresu obowiązków. --- */
.nl-rozwin > summary{ list-style:none; cursor:pointer; min-height:44px; }
.nl-rozwin > summary::-webkit-details-marker{ display:none; }
.nl-rozwin > summary .nl-znak{ transition:transform var(--nl-czas-ui) var(--nl-ease); }
.nl-rozwin[open] > summary .nl-znak{ transform:rotate(45deg); }
.nl-rozwin[open] > .nl-rozwin-tresc{ animation:nl-wejscie var(--nl-czas-ui) var(--nl-ease) both; }
@keyframes nl-wejscie{ from{ opacity:0; } to{ opacity:1; } }

/* --- Przycisk. Pigułka i łuk to zatwierdzone odstępstwo systemu (2026-08-10);
       łuk rusza wyłącznie na hover i focus. --- */
@keyframes nl-obieg{ to{ rotate:360deg; } }
.nl-btn{
  --tlo:var(--nl-cta-tlo); --tlo-hover:var(--nl-cta-tlo-hover); --tekst:var(--nl-cta-tekst);
  --ring:rgba(191,155,98,.85); --ring-hover:rgba(176,141,87,.32);
  --luk:var(--nl-luk); --luk-grubosc:1.5px; --obieg-czas:1.6s;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:12px; padding:17px 38px; min-height:52px; border:0; cursor:pointer; isolation:isolate;
  background:var(--tlo); color:var(--tekst); border-radius:100px;
  font-family:inherit; font-size:.95rem; font-weight:500; letter-spacing:.015em;
  text-decoration:none; overflow:hidden;
  transition:background-color 420ms var(--nl-ease), color 420ms var(--nl-ease),
             box-shadow 420ms var(--nl-ease), transform 160ms var(--nl-ease);
}
.nl-btn::after{
  content:''; position:absolute; inset:5px; border:1px solid var(--ring);
  border-radius:100px; pointer-events:none; z-index:2;
  transition:border-color 420ms var(--nl-ease);
}
.nl-btn::before{
  content:''; position:absolute; inset:5px; border-radius:100px; z-index:1; opacity:0;
  background:conic-gradient(from 0deg, transparent 0deg, transparent 296deg, color-mix(in srgb, var(--luk) 45%, transparent) 322deg, var(--luk) 348deg, transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - var(--luk-grubosc)), #000 calc(100% - var(--luk-grubosc)));
          mask:radial-gradient(farthest-side, transparent calc(100% - var(--luk-grubosc)), #000 calc(100% - var(--luk-grubosc)));
  transition:opacity 220ms var(--nl-ease);
}
.nl-btn:focus-visible{ outline:2px solid var(--nl-zloto-orn); outline-offset:3px; }
.nl-btn:hover, .nl-btn:focus-visible{ background-color:var(--tlo-hover); }
.nl-btn:hover::before, .nl-btn:focus-visible::before{ opacity:1; animation:nl-obieg var(--obieg-czas) linear infinite; }
.nl-btn:hover::after, .nl-btn:focus-visible::after{ border-color:var(--ring-hover); }
.nl-btn:active{ transform:scale(.97); }
.nl-btn--jasny{
  --tlo:transparent; --tlo-hover:var(--nl-tlo-2); --tekst:var(--nl-cta2-tekst);
  --ring:var(--nl-cta2-obram); --ring-hover:var(--nl-ring-hover); --luk:var(--nl-cta-tlo);
  box-shadow:inset 0 0 0 1px var(--nl-linia);
}
.nl-btn--jasny:hover, .nl-btn--jasny:focus-visible{ color:var(--nl-link-hover); box-shadow:inset 0 0 0 1px transparent; }
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .nl-btn::before{ background:conic-gradient(from 0deg, transparent 0deg, transparent 310deg, var(--luk) 348deg, transparent 360deg); }
}

/* --- Zgoda na wyłączenie ruchu. Zostaje kolor i opacity, znika przesunięcie. --- */
@media (prefers-reduced-motion:reduce){
  .nl-ruch-start, .nl-ruch-media.nl-ruch-start{ opacity:1; transform:none; }
  .nl-ruch-in{ transition:none; }
  .nl-linia.nl-ruch-start{ transform:scaleX(1); }
  .nl-linia.nl-ruch-in{ transition:none; }
  .nl-btn, .nl-btn::after, .nl-btn::before, .nl-pole, .nl-spis-poz,
  .nl-spis-poz .nl-spis-tytul, .nl-rozwin > summary .nl-znak{
    transition-duration:.01ms !important; animation:none !important;
  }
  .nl-btn:hover::before, .nl-btn:focus-visible::before{ opacity:0; }
  .nl-btn:hover::after, .nl-btn:focus-visible::after{ border-color:var(--luk); }
  .nl-btn:active{ transform:none; }
  .nl-rozwin[open] > .nl-rozwin-tresc{ animation:none; }
}


/* --- Tabela cennika: ścieżki kolumn trzyma lista, nie wiersz.
       Wcześniej każdy wiersz miał własne repeat(auto-fit, ...), więc kolumny
       liczyły się z liczby komórek danego wiersza i ceny rozjeżdżały się
       względem główki. Teraz szablon jest na <ul>, a <li> go dziedziczy. --- */

/* Pasek sekcji cennika. Na szerokim ekranie zwykłe zawijanie. Na wąskim siedemnaście
   odnośników łamało się na sześć wierszy i zajmowało 334 px z 812, czyli czterdzieści
   jeden procent ekranu, zanim pacjentka zobaczyła pierwszą cenę. Dlatego poniżej 760 px
   jest to jeden pasek przewijany w poziomie, z przyciąganiem i wygaszeniem na prawej
   krawędzi, które pokazuje, że lista biegnie dalej. Nic nie znika, zmienia się oś. */
.nl-cen-sekcje{
  max-width:1080px; display:flex; flex-wrap:wrap; gap:10px 22px;
  font-size:15px; line-height:1.5; padding:20px 0;
  border-top:1px solid var(--nl-linia-zlota); border-bottom:1px solid var(--nl-linia);
}
@media (max-width:760px){
  .nl-cen-sekcje{
    flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:12px 0;
    scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .nl-cen-sekcje::-webkit-scrollbar{ display:none; }
  .nl-cen-sekcje > a{
    flex:0 0 auto; scroll-snap-align:start;
    padding:8px 14px; border-radius:999px; text-decoration:none;
    border:1px solid var(--nl-linia); color:var(--nl-tekst-2); white-space:nowrap;
  }
  .nl-cen-sekcje > a:focus-visible{ outline:2px solid var(--nl-fokus); outline-offset:2px; }
}

/* Pole wyszukiwania cennika stoi na swoim miejscu od pierwszego malowania.
   W HTML blok ma display:none, a nl-cennik-szukaj.js odsłaniał go dopiero po
   wyrenderowaniu strony, więc pasek sekcji i pierwsze ceny skakały w dół o 60 px
   na komputerze i o 120 px na telefonie (pomiar 29.09: od 0,02 do 0,05 CLS na
   każdym cenniku z wyszukiwarką). Zapytanie (scripting) zna odpowiedź przed
   malowaniem: przy działającym JavaScripcie pole jest od razu, bez JavaScriptu
   nadal się nie pokazuje, więc martwej kontrolki nie ma. !important, bo display:none
   siedzi w atrybucie style. Przeglądarki bez tego zapytania (Chrome i Edge przed 120,
   Safari przed 17, Firefox przed 113) dostają pole jak dotąd, ze skryptu. */
@media (scripting:enabled){
  [data-szukaj-blok]{ display:flex !important; }
  /* Cennik medycyny estetycznej (PL i EN) ma pod paskiem sekcji pozostawiony
     fragment nagłówka: host przełącznika motywu i numer telefonu. Na komputerze
     nl-tryb.js wstawia tam przełącznik wysoki na 46 px (przyciski 44 px i ramka)
     i dopiero wtedy cennik zjeżdżał w dół. Rezerwujemy tę samą wysokość, więc
     wygląd po wczytaniu się nie zmienia. Na telefonie host jest ukryty
     (data-hide="mobile"), a na innych cennikach po pasku sekcji hosta nie ma. */
  [data-skok] ~ [data-tryb-host]{ min-height:46px; }
}

.nl-cen { margin:0; padding:0; list-style:none; }
.nl-cen-2 { grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
.nl-cen-3 { grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,2fr); }
.nl-cen-4 { grid-template-columns:minmax(0,3fr) minmax(0,2fr) minmax(0,2fr) minmax(0,2fr); }
.nl-cen > li {
  display:grid; grid-template-columns:inherit; gap:4px 24px;
  align-items:baseline; padding:13px 0; border-top:1px solid var(--nl-linia);
  font-size:16.5px; line-height:1.6;
}
.nl-cen > li:last-child { border-bottom:1px solid var(--nl-linia); }
.nl-cen > li.nl-cen-glowka {
  padding:11px 0; border-top:1px solid var(--nl-linia-zlota);
  font-size:13.5px; letter-spacing:.03em; color:var(--nl-tekst-pom);
}
.nl-cena { font-weight:600; font-variant-numeric:tabular-nums; }
.nl-opis { color:var(--nl-tekst-pom); }
.nl-pod { display:block; font-size:14px; font-weight:400; color:var(--nl-tekst-pom); }
/* .nl-pod to podpis pod ceną. Domyślnie widoczny zawsze, bo zwykle niesie treść,
   której nie ma w główce („cztery zabiegi”, „sześć zabiegów”).
   .nl-pod-mob to podpis dopisany wyłącznie na wąski ekran, dublujący główkę
   („pojedynczy zabieg”, „pakiet”) — tylko on znika na desktopie. */
@media (min-width:641px){ .nl-cena .nl-pod-mob { display:none; } }
@media (max-width:640px){
  .nl-cen-2, .nl-cen-3, .nl-cen-4 { grid-template-columns:minmax(0,1fr); }
  .nl-cen > li { gap:2px; padding:14px 0; }
  .nl-cen > li.nl-cen-glowka { display:none; }
  .nl-cena .nl-pod-mob { margin-top:-2px; }
}