/* ---------------------------------------------------------------------
   medicalphysiology.eu — wspólny arkusz podstron
   Wczytywany przez każdą podstronę serwisu:
       <link rel="stylesheet" href="/assets/mp.css">
   Zawiera: paletę, typografię, pasek górny, przełącznik języka,
   nagłówek strony, stopkę i notę o prawach autorskich.
   Rzeczy charakterystyczne dla jednej podstrony (kafle, wykresy, listy)
   zostają w jej własnym bloku <style>.
   --------------------------------------------------------------------- */

:root{
  --bg:#0B181F;
  --bg-2:#0E1F27;
  --line:#1D3A45;
  --fg:#E9F2F3;
  --fg-soft:#8FACB5;
  --ecg:#4FC98A;
  --pleth:#58C0D6;
  --resp:#D9A560;
  --maxw:1180px;
  --gap:clamp(1.1rem,3.5vw,2.4rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(.98rem,.3vw + .92rem,1.04rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--ecg);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gap);width:100%}

/* --- pasek górny --------------------------------------------------- */
.top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.4rem 0 1rem}
.top.ruled{border-bottom:1px solid var(--line)}
.wordmark{margin-right:auto;text-decoration:none;font-weight:600;font-size:.98rem;letter-spacing:.01em}
.wordmark span{color:var(--fg-soft);font-weight:400}

.nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.nav a{font-size:.88rem;color:var(--fg-soft);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--fg);border-bottom-color:var(--ecg)}

.back{color:var(--ecg);text-decoration:none;font-weight:600;font-size:.84rem;
      border-bottom:1px solid transparent;padding-bottom:1px}
.back:hover{border-bottom-color:var(--ecg)}

/* --- przełącznik języka -------------------------------------------- */
.lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.lang button{
  font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.06em;
  border:0;background:transparent;color:var(--fg-soft);
  padding:.26rem .6rem;cursor:pointer;line-height:1.4;
}
.lang button[aria-pressed="true"]{background:var(--ecg);color:#07131A}

/* --- nagłówek podstrony -------------------------------------------- */
.head{padding:clamp(2rem,5vw,3.4rem) 0 clamp(1.6rem,3vw,2.4rem)}
h1{
  font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.1;
  letter-spacing:-.015em;margin:0 0 .7rem;
}
.lede{margin:0;color:var(--fg-soft);max-width:58ch}

/* --- treść ---------------------------------------------------------- */
h2{font-family:"Newsreader",Georgia,serif;font-weight:300;
   font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 1.4rem}
.prose{max-width:60ch;color:var(--fg-soft)}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}
.mark{color:var(--fg);box-shadow:inset 0 -1px 0 0 rgba(79,201,138,.55)}

/* pasmo treści: nagłówek w lewej kolumnie, treść w prawej */
.band{padding:clamp(2.6rem,7vw,4.6rem) 0}
.band + .band{border-top:1px solid var(--line)}
@media (min-width:900px){
  .band{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem)}
  .band h2{margin-bottom:0}
}

/* plakietka typu / stanu */
.chip{
  display:inline-block;margin-left:.5rem;vertical-align:.1em;
  font-size:.64rem;font-weight:600;letter-spacing:.09em;
  color:var(--ecg);border:1px solid rgba(79,201,138,.4);border-radius:2px;
  padding:.08rem .42rem;
}

/* --- stopka i nota o prawach autorskich ----------------------------- */
footer{
  border-top:1px solid var(--line);background:var(--bg-2);
  padding:1.6rem 0 2.2rem;font-size:.82rem;color:var(--fg-soft);
}
.foot-grid{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:space-between}

/* wariant dla stron, w których treść ma dociskać stopkę do dołu okna */
.sticky-foot{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.sticky-foot footer{margin-top:auto}

/* wąski pasek z samą notą — dla stron bez widocznej stopki */
.copy{
  border-top:1px solid var(--line);background:var(--bg-2);
  font-size:.78rem;color:var(--fg-soft);padding:.9rem 0 1.1rem;
}

/* --- ruch ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
}