/* Hub profilaktyki, Fundacja Katarzyny Stachowicz Pokonaj Raka.
   Mobile first. Zero zewnetrznych zasobow, zero JS, zero ciasteczek.

   Paleta, typografia i ksztalty przeniesione ze strony oficjalnej
   fundacjakatarzynystachowicz.pl. Rozbior zrodla: STYL-zrodlo.md (2026-08-06).
   Kontrast sprawdzony pod WCAG AA. */

:root{
  /* --- kolory ze strony oficjalnej --- */
  --biel:      #FFFFFF;   /* tlo strony, jak w oryginale */
  --tlo-alt:   #F7F7F8;   /* sekcja naprzemienna, neutralna szarosc */
  --ramka:     #E3E3E6;   /* linie i obramowania */
  --tytul:     #121212;   /* naglowki, wartosc z h1 oryginalu */
  --tekst:     #414141;   /* tekst zwykly, wartosc z body oryginalu */
  --meta:      #5F5F63;   /* metadane, kontrast 6.4 na bieli */
  --roz:       #DE2A8C;   /* roz marki, dekoracja i duze liczby */
  --roz-d:     #C21F79;   /* roz tekstowy i wypelnienia, kontrast 5.15 */
  --ciemne:    #202020;   /* stopka i pasek gorny, wartosc z oryginalu */

  --promien:   5px;       /* zaokraglenie z oryginalu */

  /* Raleway, ten sam krój co na stronie oficjalnej. Serwowany z wlasnego
     katalogu fonty/, wiec zakaz zasobow zewnetrznych zostaje utrzymany.
     Decyzja Kuby 2026-08-06. Licencja OFL. Stos systemowy zostaje jako
     zapasowy na wypadek, gdyby plik sie nie zaladowal. */
  --font: "Raleway", "Avenir Next", Avenir, "Segoe UI", system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* --- Raleway, font zmienny 400-700, dwa podzbiory znakow ---
   Polskie znaki diakrytyczne siedza w latin-ext, wiec oba pliki sa potrzebne.
   font-display:swap, zeby tekst byl czytelny od pierwszej klatki. */

@font-face{
  font-family:"Raleway";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonty/raleway-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face{
  font-family:"Raleway";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonty/raleway-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--biel);
  color:var(--tekst);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }

a{ color:var(--roz-d); }

:focus-visible{
  outline:3px solid var(--roz-d);
  outline-offset:3px;
  border-radius:4px;
}

.szer{ max-width:760px; margin:0 auto; padding:0 20px; }

/* Dlugie adresy (mail fundacji, adresy stron) lamia sie zamiast rozpychac
   strone. Bez tego /o-nas/ i /dostepnosc/ przewijaly sie poziomo przy 320 px
   i przy tekscie powiekszonym do 200 %, czyli lamaly WCAG 1.4.10 Reflow. */
body{ overflow-wrap:break-word; }

/* Cel dotykowy dla linkow nawigacyjnych, ktore stoja samodzielnie, a nie
   wewnatrz zdania. Padding pionowy na elemencie liniowym nie zmienia wysokosci
   wiersza, wiec uklad zostaje bez zmian. Linki zrodel wewnatrz akapitow sa
   z tego wymogu wylaczone (wyjatek "inline" w WCAG 2.5.8). */
.powrot,
.stopka-linki a,
.stopka p a{ display:inline-block; padding:4px 0; }

.pomijacz{
  position:absolute; left:-9999px; top:0;
  background:var(--ciemne); color:var(--biel);
  padding:12px 18px; z-index:9; border-radius:0 0 var(--promien) 0;
}
.pomijacz:focus{ left:0; }

/* ---------- pierwszy ekran (link w bio) ---------- */

.ekran{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:26px 20px 14px;
  border-bottom:1px solid var(--ramka);
}

.ekran-tresc{ width:100%; max-width:560px; margin:0 auto; }

/* logo fundacji, ten sam znak co na stronie oficjalnej */
.logo{ display:block; margin-bottom:20px; }
.logo img{
  display:block;
  width:100%;
  max-width:290px;
  height:auto;
}

/* zapas typograficzny: uklad wersow jak w logo, czarna nazwa plus rozowe haslo */
.marka{ margin-bottom:16px; }

.marka-a{
  display:block;
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tytul);
  font-weight:700;
  line-height:1.3;
}

.marka-b{
  display:block;
  font-size:19px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--roz-d);
  margin-top:2px;
}

.obietnica{
  font-size:17px;
  color:var(--tekst);
  margin-bottom:24px;
  max-width:34em;
}

.kafle{ display:grid; gap:10px; }

/* Ksztalt przycisku z oryginalu: 5 px zaokraglenia, wersaliki ze swiatlem.
   Roz jest w oryginale kolorem JEDNEJ akcji, wiec rozowy jest pierwszy kafel,
   czyli telefony, a pozostale sa biale z rozowym detalem. */
.kafel{
  display:block;
  position:relative;
  background:var(--biel);
  border:1px solid var(--ramka);
  color:var(--tytul);
  text-decoration:none;
  border-radius:var(--promien);
  padding:15px 46px 15px 18px;
}

.kafel-glowny{
  background:var(--roz-d);
  border-color:var(--roz-d);
  color:var(--biel);
}

.kafel-tytul{
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.kafel-opis{
  display:block;
  font-size:14px;
  line-height:1.4;
  margin-top:5px;
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
  color:var(--meta);
}

.kafel-glowny .kafel-opis{ color:rgba(255,255,255,.92); }

.kafel::after{
  content:"";
  position:absolute;
  right:20px; top:50%;
  width:9px; height:9px;
  border-right:2.5px solid var(--roz-d);
  border-bottom:2.5px solid var(--roz-d);
  transform:translateY(-50%) rotate(-45deg);
}

.kafel-glowny::after{ border-color:var(--biel); }

.kafel:hover{ border-color:var(--roz-d); }
.kafel-glowny:hover{ background:var(--roz); border-color:var(--roz); }

.zjedz{
  text-align:center;
  font-size:13px;
  color:var(--meta);
  margin-top:18px;
}

@media (max-height:700px){
  .kafel-opis{ display:none; }
  .kafel{ padding-top:17px; padding-bottom:17px; }
  .zjedz{ display:none; }
  .logo img{ max-width:240px; }
}

/* ---------- sekcje ---------- */

.sekcja{ padding:56px 0; scroll-margin-top:0; }
.sekcja-alt{ background:var(--tlo-alt); }

.sekcja-tytul{
  font-size:28px;
  line-height:1.1;
  font-weight:700;
  color:var(--tytul);
  margin-bottom:12px;
}

.sekcja-tytul::before{
  content:"";
  display:block;
  width:44px; height:4px;
  background:var(--roz);
  margin-bottom:16px;
}

.sekcja-wstep{ color:var(--meta); max-width:36em; margin-bottom:30px; }

/* ---------- telefony ---------- */

.koszyk{
  border:1px solid var(--ramka);
  border-radius:var(--promien);
  background:var(--biel);
  padding:20px 18px;
  margin-bottom:22px;
}

.sekcja-alt .koszyk{ background:var(--biel); }

.koszyk-b{
  background:var(--tlo-alt);
  border-style:dashed;
  border-color:#C9C9CE;
}

.koszyk-etykieta{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--biel);
  background:var(--roz-d);
  border-radius:var(--promien);
  padding:4px 11px;
  margin-bottom:12px;
}

.koszyk-b .koszyk-etykieta{ background:#5A5A60; }

.koszyk-tytul{ font-size:20px; font-weight:700; line-height:1.2; color:var(--tytul); }

.koszyk-opis{
  font-size:15px;
  color:var(--meta);
  margin:6px 0 4px;
  max-width:38em;
}

.numery{ margin-top:8px; }

.numer{
  border-top:1px solid var(--ramka);
  padding:18px 0 14px;
}

.numer-nazwa{ font-size:17px; font-weight:700; line-height:1.3; color:var(--tytul); }
.numer-rola{ font-size:15px; color:var(--tekst); margin-top:4px; }

/* numer jest celem dotykowym, ma byc klikalny na telefonie */
.numer-cyfry{
  margin-top:11px;
}

.numer-cyfry a,
.numer-cyfry .pusto{
  display:inline-block;
  font-size:22px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--roz-d);
  text-decoration:none;
  padding:6px 0;
}

.numer-cyfry a:hover{ text-decoration:underline; }

.numer-meta{ font-size:14px; color:var(--meta); margin-top:4px; }

.numer-data{
  font-size:13px;
  color:var(--meta);
  margin-top:9px;
  padding-top:8px;
  border-top:1px dotted var(--ramka);
}

.numer-zrodlo{ font-size:13px; color:var(--meta); margin-top:3px; }
.numer-zrodlo a{ color:var(--roz-d); }

/* znacznik zaslepki, ma sie NIE dac pomylic z prawdziwa dana */
.pusto{
  display:inline-block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:#4A4A4E;
  background:repeating-linear-gradient(
      135deg,#EDEDF0 0 7px,#E3E3E6 7px 14px);
  border:1px dashed #B4B4BA;
  border-radius:var(--promien);
  padding:1px 8px;
  vertical-align:middle;
}

/* zaslepka w naglowku ma trzymac skale naglowka */
h1 .pusto, h2 .pusto{ font-size:inherit; padding:2px 12px; }

/* pierwszy numer bez kreski, gdy koszyk zaczyna sie od listy */
.koszyk > .numery:first-child .numer:first-child{ border-top:none; padding-top:0; }

/* ---------- poradniki ---------- */

.poradniki{ display:grid; gap:12px; }

.poradnik{
  display:block;
  border:1px solid var(--ramka);
  border-left:4px solid var(--roz);
  border-radius:var(--promien);
  background:var(--biel);
  padding:16px 18px;
  text-decoration:none;
  color:var(--tekst);
}

a.poradnik:hover{ border-color:var(--roz-d); }

.poradnik-tytul{ font-size:19px; font-weight:700; line-height:1.25; color:var(--tytul); }
.poradnik-opis{ font-size:15px; color:var(--meta); margin-top:4px; }
.poradnik-stan{ margin-top:10px; font-size:14px; }

.poradnik-gotowy{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--roz-d);
}
.poradnik-gotowy::after{ content:"\00a0\2192"; }

.drobne{ font-size:14px; color:var(--meta); margin-top:22px; }

/* ---------- akcje ---------- */

.akcje{ display:grid; gap:18px; }

.akcja{
  border:1px solid var(--ramka);
  border-radius:var(--promien);
  background:var(--biel);
  overflow:hidden;
}

/* zdjecia w oryginale sa prostokatne, bez zaokraglen */
.foto{
  aspect-ratio:16/10;
  display:flex;
  align-items:center;
  justify-content:center;
  background:repeating-linear-gradient(
      135deg,#EDEDF0 0 11px,#E3E3E6 11px 22px);
  border-bottom:1px dashed #B4B4BA;
  color:#4A4A4E;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
}

/* kafel ze zdjeciem: obrazek zastepuje zaslepke, kadr 16:10 przyciety w pliku */
.foto-zdjecie{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  background:none;
  border-bottom:1px solid var(--ramka);
}

.akcja-tytul{ font-size:19px; font-weight:700; padding:14px 18px 0; color:var(--tytul); }
.akcja-podpis{ font-size:15px; color:var(--meta); padding:5px 18px 0; }
.akcja-rok{ font-size:13px; padding:10px 18px 16px; }

/* ---------- kanaly ---------- */

.kanaly{ display:grid; gap:10px; }

.kanal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--ramka);
  border-radius:var(--promien);
  background:var(--biel);
  padding:15px 18px;
  font-size:17px;
  font-weight:700;
  text-decoration:none;
  color:var(--tytul);
}

.kanal:hover{ border-color:var(--roz-d); }

/* ---------- stopka ---------- */

.stopka{
  background:var(--ciemne);
  color:#E4E4E7;
  padding:40px 0 48px;
  font-size:15px;
}

.stopka a{ color:#F5A8D0; }

.zastrzezenie{
  border-left:4px solid var(--roz);
  padding:2px 0 2px 14px;
  margin-bottom:28px;
  font-size:16px;
}

.stopka-siatka{ display:grid; gap:24px; }

.stopka-naglowek{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#ACACAC;
  font-weight:700;
  margin-bottom:6px;
}

.stopka-naglowek-2{ margin-top:18px; }

.stopka-nazwa{ font-weight:700; margin-bottom:8px; }

.stopka-siatka p{ margin-bottom:8px; }

.kropka{ color:#8A8A8E; padding:0 4px; }

/* linki porzadkowe w stopce strony glownej: prywatnosc, dostepnosc */
.stopka-linki{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid #3A3A3E;
  font-size:15px;
}

.stopka-drobne{
  font-size:13.5px;
  color:#ACACAC;
  margin-top:24px;
  max-width:42em;
}

/* ---------- strona poradnika ---------- */

.pasek{
  border-bottom:1px solid var(--ramka);
  padding:12px 0;
  background:var(--biel);
}

.pasek .szer{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

.pasek-logo img{ display:block; width:150px; height:auto; }

.powrot{ font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap; }
.powrot::before{ content:"\2190\00a0"; }
.powrot:hover{ text-decoration:underline; }

.ostrzezenie{
  border:1px dashed #B4B4BA;
  border-radius:var(--promien);
  background:repeating-linear-gradient(
      135deg,#EDEDF0 0 11px,#E3E3E6 11px 22px);
  color:#4A4A4E;
  font-size:14px;
  font-weight:600;
  padding:12px 16px;
  margin-bottom:26px;
}

/* zszycie poradnika z bilbordem (kampania X 2026): ten sam kicker, cieńszy, bez wersalików */
.kicker-zszycie{font-weight:400;text-transform:none;letter-spacing:0}
.poradnik-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--roz-d);
  margin-bottom:10px;
}

.fakty{
  display:grid;
  gap:1px;
  background:var(--ramka);
  border:1px solid var(--ramka);
  border-radius:var(--promien);
  overflow:hidden;
  margin:0 0 32px;
}

.fakty > div{ background:var(--biel); padding:14px 16px; }

.fakty dt{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--meta);
  margin-bottom:5px;
}

.fakty dd{ margin:0; font-size:16px; color:var(--tytul); }

.pod-tytul{
  font-size:23px;
  font-weight:700;
  line-height:1.2;
  color:var(--tytul);
  margin:36px 0 14px;
}

/* Akapit w tresci poradnika. Globalny reset zdejmuje marginesy z <p>,
   wiec zwykly akapit miedzy naglowkiem a lista potrzebuje wlasnej klasy.
   Dodane 2026-08-12 przy poradniku o tomografii pluc. */
.akapit{ max-width:36em; margin:0 0 14px; }
.akapit + .lista, .akapit + .kroki{ margin-top:4px; }

.lista li{
  padding:10px 0 10px 26px;
  position:relative;
  border-bottom:1px solid var(--ramka);
}

.lista li::before{
  content:"";
  position:absolute;
  left:4px; top:19px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--roz);
}

.kroki{ counter-reset:krok; padding:0; list-style:none; margin:0; }

.kroki > li{
  counter-increment:krok;
  position:relative;
  padding:0 0 22px 48px;
  border-left:2px solid var(--ramka);
  margin-left:15px;
}

.kroki > li:last-child{ border-left-color:transparent; padding-bottom:0; }

.kroki > li::before{
  content:counter(krok);
  position:absolute;
  left:-16px; top:-2px;
  width:31px; height:31px;
  border-radius:50%;
  background:var(--roz-d);
  color:var(--biel);
  font-size:15px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.krok-tytul{ font-size:18px; font-weight:700; line-height:1.3; padding-top:3px; color:var(--tytul); }
.krok-opis{ font-size:16px; color:var(--tekst); margin-top:4px; }

.pytanie{
  border-top:1px solid var(--ramka);
  padding:16px 0;
}

.pytanie-tresc{ font-weight:700; color:var(--tytul); }
.pytanie-odp{ color:var(--tekst); margin-top:5px; }

.zrodla li{
  font-size:15px;
  color:var(--meta);
  padding:11px 0;
  border-bottom:1px solid var(--ramka);
}

.zrodlo-link{ display:inline-block; margin-left:6px; word-break:break-word; }

.metryka{
  margin-top:28px;
  padding-top:16px;
  border-top:2px solid var(--ramka);
  font-size:14px;
  color:var(--meta);
}

.kropka-2{ padding:0 5px; color:#B4B4BA; }

.strona-poradnik .sekcja-tytul{ margin-bottom:12px; }

/* uwaga redakcyjna wewnatrz poradnika */
.uwaga{
  border:1px solid var(--ramka);
  border-left:4px solid var(--roz);
  border-radius:var(--promien);
  background:var(--tlo-alt);
  padding:14px 16px;
  margin:22px 0;
  font-size:15px;
}

.uwaga-tytul{ font-weight:700; color:var(--tytul); margin-bottom:4px; }
.uwaga p + p{ margin-top:10px; }

/* ---------- szerszy ekran ---------- */

@media (min-width:640px){
  body{ font-size:18px; }
  .obietnica{ font-size:19px; }
  .sekcja{ padding:80px 0; }   /* rytm sekcji z oryginalu */
  .sekcja-tytul{ font-size:36px; line-height:1.05; }
  .logo img{ max-width:340px; }
  .marka-a{ font-size:14px; }
  .marka-b{ font-size:21px; }
  .kafle{ grid-template-columns:1fr 1fr; gap:12px; }
  .kafel{ padding:19px 44px 19px 20px; }
  .poradniki{ grid-template-columns:1fr 1fr; }
  .akcje{ grid-template-columns:1fr 1fr 1fr; }
  .kanaly{ grid-template-columns:1fr 1fr; }
  .stopka-siatka{ grid-template-columns:1fr 1fr; gap:32px; }
  .ekran{ padding:40px 20px; }
  .ekran-tresc{ max-width:700px; }
  .fakty{ grid-template-columns:1fr 1fr; }
  .pod-tytul{ font-size:26px; }
  .swieze{ padding:16px 20px; }
  .co-dalej-lista{ grid-template-columns:1fr 1fr 1fr; }
}

/* ============================================================
   Z OSTATNIEGO ODCINKA
   Pasek na pierwszym ekranie, nad kaflami. Ma byc rozpoznawalny
   jako "nowe", ale nie moze przebic kafla glownego, bo pierwszy
   ekran sluzy decyzji w 3 sekundy. Stad obramowanie zamiast
   wypelnienia i mniejsza skala niz kafle.
   ============================================================ */

.swieze{
  display:block;
  margin-bottom:18px;
  padding:14px 18px;
  background:var(--biel);
  border:2px solid var(--roz);
  border-radius:var(--promien);
  text-decoration:none;
  transition:background .15s ease;
}

.swieze:hover,
.swieze:focus-visible{ background:#FDF2F8; }

.swieze-etykieta{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--roz-d);
  margin-bottom:5px;
}

.swieze-tytul{
  display:block;
  font-size:19px;
  font-weight:700;
  line-height:1.25;
  color:var(--tytul);
}

.swieze-obietnica{
  display:block;
  margin-top:3px;
  font-size:15px;
  line-height:1.4;
  color:var(--tekst);
}

/* ============================================================
   CO DALEJ
   Stopka merytoryczna poradnika. Zadaniem jest zatrzymac czlowieka
   na stronie po przeczytaniu jednej rzeczy.
   ============================================================ */

.co-dalej{
  max-width:760px;
  margin:0 auto;
  padding:36px 20px 8px;
}

.co-dalej-tytul{
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--meta);
  margin:0 0 14px;
  padding-top:26px;
  border-top:1px solid var(--ramka);
}

.co-dalej-lista{
  display:grid;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}

.co-dalej-lista a{
  display:block;
  height:100%;
  padding:14px 16px;
  background:var(--tlo-alt);
  border:1px solid var(--ramka);
  border-radius:var(--promien);
  text-decoration:none;
  transition:border-color .15s ease;
}

.co-dalej-lista a:hover,
.co-dalej-lista a:focus-visible{ border-color:var(--roz); }

.co-dalej-nazwa{
  display:block;
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  color:var(--tytul);
}

.co-dalej-opis{
  display:block;
  margin-top:3px;
  font-size:14px;
  line-height:1.4;
  color:var(--meta);
}