/* NL CLINIC — blog: hub i artykuły.
   Arkusz trzyma reguły powtarzające się w każdym pliku bloga: chrom strony,
   tor tekstu artykułu, spis treści oraz komponenty listingu.
   Ruch i przyciski siedzą w nl-sekcja-instytucjonalna.css, typografia
   w nl-typografia.css. Wartości ruchu zgodne z docs/DESIGN-SYSTEM.md,
   wariant B: krzywa cubic-bezier(0.23,1,0.32,1), interakcje UI do 300 ms,
   hover wyłącznie w @media (hover:hover), scale(0.97) na :active. */

html { -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; }
body { margin:0; background:var(--nl-tlo); color:var(--nl-tekst); text-wrap:pretty; overflow-x:clip; }
* { box-sizing:border-box; }
a { color:var(--nl-link); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--nl-link-hover); text-decoration-color:var(--nl-zloto-orn); }
:focus-visible { outline:2px solid var(--nl-zloto-orn); outline-offset:3px; }
h1, h2, h3 { overflow-wrap:anywhere; min-width:0; }

/* --- Nagłówek serwisu: na wąskim ekranie pasek bordowy, na szerokim wyspa z sygnetem. --- */
[data-naglowek] { background:var(--nl-tlo-pasek); border-bottom:1px solid var(--nl-linia); }
[data-wyspa] { display:none; }
[data-only="phone"] { display:none !important; }
@media (min-width:1001px){
  [data-naglowek] { background:var(--nl-tlo-karta); border-bottom:0; }
  [data-pasek-tlo] { background:var(--nl-tlo-pasek); }
  [data-wyspa] { display:flex; }
  [data-logo-male] { display:none !important; }
  [data-sciezka] { padding-left:172px !important; }
}
@media (max-width:1000px){ [data-hide="mobile"] { display:none !important; } }
@media (max-width:760px){ [data-only="phone"] { display:flex !important; } }

/* --- Tor tekstu artykułu. Miara nałożona lokalnie stylem, tutaj tylko rytm. --- */
[data-tresc] h2 { margin:38px 0 14px; font-size:var(--nl-t-h3); line-height:var(--nl-i-h3); color:var(--nl-naglowek); scroll-margin-top:24px; }
[data-tresc] h3 { margin:26px 0 10px; font-size:var(--nl-t-h4); line-height:var(--nl-i-h4); color:var(--nl-naglowek); }
[data-tresc] p { margin:0 0 16px; font-size:17px; line-height:1.68; color:var(--nl-tekst-2); }
[data-tresc] ul, [data-tresc] ol { margin:0 0 18px; padding-left:20px; display:flex; flex-direction:column; gap:9px; font-size:17px; line-height:1.68; color:var(--nl-tekst-2); }

/* --- Spis treści wpisu. --- */
[data-spis] a { color:var(--nl-tekst-2); text-decoration:none; border-bottom:1px solid var(--nl-linia); }
[data-spis] a:hover { color:var(--nl-link-hover); border-bottom-color:var(--nl-zloto-orn); }

/* --- Układ huba: tor treści + szyna boczna. Bez tej reguły <aside> spadał pod
   wszystkie karty i CTA konsultacji lądowało na końcu strony. --- */
[data-layout="blog"] { display:grid; grid-template-columns:minmax(0,1fr); gap:48px; }
@media (min-width:1001px){
  [data-layout="blog"] { grid-template-columns:minmax(0,1fr) 300px; align-items:start; }
  [data-layout="blog"] > aside { position:sticky; top:24px; }
}

/* --- Karta wpisu na listingu: hover zmienia krawędź, nie cień. --- */
.nl-karta { display:flex; flex-direction:column; text-decoration:none; color:var(--nl-tekst); border:1px solid var(--nl-linia); background:var(--nl-tlo-karta); transition:border-color 240ms cubic-bezier(0.23,1,0.32,1); }
/* Miniatura karty: height:auto pozwala zadziałać aspect-ratio:4/3 (atrybut height obrazka
   inaczej wymusza naturalną wysokość i rozjeżdża siatkę). */
.nl-karta img { height:auto; }
.nl-karta .nl-karta-tytul { transition:color 240ms cubic-bezier(0.23,1,0.32,1); }
.nl-karta:active { transform:scale(0.99); }
@media (hover:hover){
  .nl-karta:hover { border-color:var(--nl-zloto-orn); }
  .nl-karta:hover .nl-karta-tytul { color:var(--nl-link-hover); }
}

/* --- Pasek kategorii i numery stron: cel dotykowy minimum 44 px. --- */
.nl-kat { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; text-decoration:none; font-size:15px; color:var(--nl-tekst-2); border:1px solid var(--nl-linia); background:var(--nl-tlo); transition:border-color 240ms cubic-bezier(0.23,1,0.32,1), color 240ms cubic-bezier(0.23,1,0.32,1); }
.nl-kat:active { transform:scale(0.97); }
/* Aktywna kategoria: --nl-link (bordo w jasnym, złoto w ciemnym). Dawny inline
   --nl-cta-tlo dawał w trybie ciemnym kontrast 2:1 i wskaźnik znikał. */
.nl-kat--akt { border-color:var(--nl-zloto-orn); color:var(--nl-link); font-weight:600; }

/* --- Paginacja listingu (komponent .nl-strona był w arkuszu, ale nieużywany). --- */
.nl-paginacja { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:30px 0 0; }
.nl-paginacja .nl-strona { font:inherit; font-size:15px; cursor:pointer; }
.nl-paginacja .nl-strona[disabled] { opacity:.4; cursor:default; }
.nl-strona--akt { border-color:var(--nl-zloto-orn); color:var(--nl-link); font-weight:600; }
.nl-paginacja-info { margin:26px 0 0; font-size:var(--nl-t-drobne); color:var(--nl-tekst-pom); }
.nl-strona { display:inline-flex; align-items:center; justify-content:center; min-width:46px; min-height:46px; padding:0 12px; text-decoration:none; color:var(--nl-tekst-2); border:1px solid var(--nl-linia); background:var(--nl-tlo-karta); transition:border-color 240ms cubic-bezier(0.23,1,0.32,1), color 240ms cubic-bezier(0.23,1,0.32,1); }
@media (hover:hover){
  .nl-kat:hover { border-color:var(--nl-zloto-orn); color:var(--nl-link-hover); }
  .nl-strona:hover { border-color:var(--nl-zloto-orn); color:var(--nl-link-hover); }
}

@media (prefers-reduced-motion:reduce){
  .nl-karta, .nl-karta .nl-karta-tytul, .nl-kat, .nl-strona { transition-duration:.01ms !important; }
  .nl-karta:active, .nl-kat:active { transform:none; }
}

/* --- Hero panoramiczne wpisu ("advanced picture"): kadr dynamiczny.
   Proporcje rosną z szerokością: 3:2 na telefonie, 16:7 na tablecie, 21:9 na desktopie.
   Wejście animuje wyłącznie transform, zgodnie z docs/DESIGN-SYSTEM.md. --- */
.nl-hero { display:block; }
.nl-hero-kadr { position:relative; overflow:hidden; border:1px solid var(--nl-linia); background:var(--nl-tlo-2); aspect-ratio:3/2; }
.nl-hero-kadr img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 40%; animation:nl-hero-kadrowanie 1100ms cubic-bezier(0.23,1,0.32,1) both; }
.nl-hero figcaption { margin:10px 0 0; font-size:var(--nl-t-drobne); line-height:1.55; color:var(--nl-tekst-pom); max-width:44em; }
@keyframes nl-hero-kadrowanie { from { transform:scale(1.06); } to { transform:scale(1); } }
@media (min-width:761px){ .nl-hero-kadr { aspect-ratio:16/7; } }
@media (min-width:1101px){ .nl-hero-kadr { aspect-ratio:21/9; } }
@media (prefers-reduced-motion:reduce){ .nl-hero-kadr img { animation:none; } }
/* Wariant zwarty dla wpisów, w których źródło ma tylko mały plik: kadr 3:2 na każdej
   szerokości, żeby nie skalować obrazu ponad jego rozdzielczość. */
.nl-hero--zwarty .nl-hero-kadr { aspect-ratio:3/2; }
/* Miara i wyśrodkowanie hero (dawniej wpisywane inline w każdym pliku). */
.nl-hero { max-width:1080px; margin:0 auto 34px; }

/* --- Obraz w toku treści (nie hero): jeden spójny komponent zamiast rozjechanych
   figur o 7 różnych szerokościach. Naturalne proporcje (bez kadrowania), ta sama
   ramka i miara co hero, wyśrodkowany. --- */
figure.nl-fig { margin:32px auto; max-width:44em; }
figure.nl-fig img { display:block; width:100%; height:auto; border:1px solid var(--nl-linia); background:var(--nl-tlo-2); }
figure.nl-fig figcaption { margin:10px 0 0; font-size:var(--nl-t-drobne); line-height:1.55; color:var(--nl-tekst-pom); }
/* Portret albo mały plik: nie rozdymać na całą szerokość, wyśrodkować węziej. */
figure.nl-fig--portret { max-width:min(420px, 100%); }

/* --- Sekcja badań: pozycja piśmiennictwa. Link zewnętrzny dziedziczy styl treści. --- */
.nl-badanie a { color:var(--nl-link); text-underline-offset:3px; }
@media (hover:hover){ .nl-badanie a:hover { color:var(--nl-link-hover); } }