/* ==========================================================================
   CASE STUDY - warstwa dodana pod pozycjonowanie i jezyk korzysci.
   Ladowany tylko na szablonie historii klientow (functions.php).
   Bazowe `.cs-*` (siatka, karty, filtry) siedza w main.css - tu jest to,
   co doszlo: logotypy ubezpieczycieli, strony zbiorcze i widok jednej sprawy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Logotypy i znaczniki
   -------------------------------------------------------------------------- */
/* Logotypy bez zadnego podkladu - lezą wprost na jasnym tle.
   ------------------------------------------------------------------
   Pierwsza wersja miala bialy prostokat pod kazdym znakiem, bo na granacie
   cztery z siedmiu logotypow (Allianz, Compensa, Link4, Warta) sa praktycznie
   niewidoczne - maja ciemny druk. Bialy podklad rozwiazywal objaw i wygladal
   jak naklejka.
   Wlasciwe rozwiazanie: logotypy pokazujemy **tylko na jasnym tle** - na
   kremowej karcie i w jasnym pasie marek. Z granatowych naglowkow znikly,
   bo tam nazwa ubezpieczyciela i tak stoi w tytule.
   `object-fit:contain` zostaje: znaki maja rozne proporcje i bez tego kazdy
   skalowalby sie inaczej. */
.cs-logo{
  display:block; width:auto; height:34px; max-width:130px;
  object-fit:contain; object-position:left center;
}
.cs-logo--duze{ height:46px; max-width:170px; }
.cs-logo--tekst{
  display:inline-flex; align-items:center; height:34px;
  color:var(--ink);
  font-family:var(--font-head); font-weight:800; font-size:.9rem;
}

.cs-znacznik{
  display:inline-flex; align-items:center;
  padding:.3rem .75rem; border-radius:var(--r-pill);
  border:1px solid var(--card-line); background:rgba(255,255,255,.05);
  font-family:var(--font-head); font-weight:800; font-size:.68rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--orange-2);
}
.section--light .cs-znacznik{
  background:var(--orange-soft); border-color:transparent; color:var(--orange-700);
}

/* --------------------------------------------------------------------------
   2. Karta historii - to, co doszlo do wersji z main.css
   -------------------------------------------------------------------------- */
.cs-card{ position:relative; }

/* Karta jest kremowa, bo powstala pod ciemna sekcje indeksu. Strony zbiorcze
   sa kremowe - karta zlewala sie z tlem co do odcienia i zostawala z niej sama
   ramka. Bialy kafelek na kremie to ten sam chwyt, ktorym motyw rozwiazuje to
   przy polach formularza i wyborach w kalkulatorze. */
.section--light .cs-card{
  background:#fff;
  box-shadow:0 1px 2px rgba(20,34,74,.04), 0 6px 18px rgba(20,34,74,.05);
}
.section--light .cs-card:hover{
  box-shadow:0 2px 4px rgba(20,34,74,.06), 0 12px 28px rgba(20,34,74,.09);
}

.cs-card__marka{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.9rem; }

.cs-card__title{ margin:0 0 .4rem; font-size:1.04rem; line-height:1.32; }
.cs-card__title a{ color:inherit; text-decoration:none; }
/* Cala karta klikalna, ale w DOM jest jeden link - bez pulapki "kilkanascie
   tabow na kafelek", ktora robi lista linkow w karcie. */
.cs-card__title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.cs-card:has(a:focus-visible){ outline:3px solid var(--orange-2); outline-offset:3px; }

.cs-card__czas{ color:var(--green); }
.cs-card__korzysc{ margin:.2rem 0 0; font-size:.92rem; line-height:1.55; color:var(--text); }
.cs-card__wiecej{
  margin-top:auto; padding-top:.7rem;
  font-family:var(--font-head); font-weight:700; font-size:.86rem; color:var(--orange-2);
}
.cs-card:hover .cs-card__wiecej{ text-decoration:underline; }

/* --------------------------------------------------------------------------
   3. Indeks: sprawy wedlug ubezpieczyciela
   -------------------------------------------------------------------------- */
/* Pas marek jest jasny, nie granatowy - to jedyne miejsce na indeksie, gdzie
   licza sie logotypy, a te czytaja sie wylacznie na jasnym tle. */
.cs-marki{ background:var(--cream); }
.cs-marki__tytul{
  margin:0 0 1.1rem; font-size:.78rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.cs-marki__lista{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.7rem; }
.cs-marka{
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem .9rem; border-radius:var(--r-md);
  border:1px solid var(--cream-line); background:#fff;
  text-decoration:none; min-height:var(--tap, 44px);
  transition:border-color .18s ease, transform .18s ease;
}
.cs-marka:hover{ border-color:var(--orange); transform:translateY(-2px); }
.cs-marka__ile{ font-family:var(--font-head); font-weight:700; font-size:.82rem; color:var(--ink-soft); white-space:nowrap; }

/* --------------------------------------------------------------------------
   4. Naglowek historii i strony zbiorczej
   -------------------------------------------------------------------------- */
.cs-hero{ background:var(--bg); padding-block:clamp(2rem,5vw,3.4rem) clamp(1.8rem,4vw,2.8rem); }
.cs-hero__marka{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.cs-hero h1{
  margin:0; max-width:22ch;
  font-size:clamp(1.75rem,3.4vw,2.7rem); line-height:1.14; text-wrap:balance;
}
.cs-hero__lead{ margin:1rem 0 0; max-width:62ch; }

/* `.cs-stats` przyszlo z indeksu, gdzie caly naglowek jest wysrodkowany.
   Na stronie zbiorczej naglowek stoi do lewej, wiec liczby tez - inaczej
   wisza na wlasnej osi obok tytulu. */
.cs-hero .cs-stats{ justify-content:flex-start; margin-inline:0; text-align:left; }

/* Trzy liczby: przed, po i wynik. Wynik dostaje ramke, bo to on jest
   powodem, dla ktorego ktos czyta te strone. */
.cs-liczby{
  list-style:none; margin:1.8rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:.9rem;
  max-width:46rem;
}
.cs-liczby li{
  padding:.9rem 1.05rem; border-radius:var(--r-md);
  border:1px solid var(--card-line); background:rgba(255,255,255,.04);
  display:flex; flex-direction:column; gap:.25rem;
}
.cs-liczby--wynik{ border-color:transparent !important; background:var(--grad-cta) !important; }
.cs-liczby__etykieta{ font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.cs-liczby--wynik .cs-liczby__etykieta{ color:rgba(20,34,74,.72); }
.cs-liczby__val{ font-family:var(--font-head); font-weight:900; font-size:1.4rem; line-height:1.1; color:#fff; }
.cs-liczby__val--przed{ color:var(--text-muted); text-decoration:line-through; text-decoration-thickness:2px; }
.cs-liczby__val--po{ color:var(--green); }
.cs-liczby--wynik .cs-liczby__val{ color:var(--ink); }
.cs-liczby__krotnie{ font-size:.78rem; font-weight:700; color:rgba(20,34,74,.72); }

/* --------------------------------------------------------------------------
   5. Cialo historii
   -------------------------------------------------------------------------- */
.cs-cialo{ padding-block:clamp(2.2rem,5vw,3.4rem) clamp(2.6rem,6vw,4rem); }
.cs-uklad{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,300px);
  gap:clamp(1.6rem,4vw,3rem); align-items:start;
}
.cs-glowna{ min-width:0; max-width:64ch; }
.cs-bok{ position:sticky; top:92px; display:grid; gap:1rem; }

.cs-blok{ margin-bottom:2.2rem; }
.cs-blok:last-child{ margin-bottom:0; }
.cs-blok h2{
  position:relative; margin:0 0 .8rem; padding-top:1.3rem;
  font-size:clamp(1.3rem,2.2vw,1.65rem); font-weight:800; color:var(--ink);
}
.cs-blok h2::before{
  content:""; position:absolute; top:0; left:0;
  width:40px; height:3px; border-radius:2px; background:var(--orange);
}
.cs-blok p{ margin:0; font-size:1.05rem; line-height:1.72; color:var(--ink-soft); }

/* Jezyk korzysci: liczby wytluszczone, reszta zdaniem. Punkty wyliczone
   z kwot sprawy stoja przed stalymi - najpierw konkret tej historii,
   potem to, co dotyczy kazdego klienta. */
.cs-korzysci__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.cs-korzysci__lista li{
  position:relative; padding-left:1.85rem;
  font-size:1.02rem; line-height:1.6; color:var(--ink-soft);
}
.cs-korzysci__lista li::before{
  content:""; position:absolute; left:.2rem; top:.6em;
  width:9px; height:9px; border-radius:2px; background:var(--green); transform:rotate(45deg);
}
.cs-korzysci__lista strong{ color:var(--ink); font-weight:800; }

.cs-fakty{ margin:0; display:grid; gap:0; border-top:1px solid var(--cream-line); }
.cs-fakty > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--cream-line);
}
.cs-fakty dt{ color:var(--ink-soft); font-size:.94rem; }
.cs-fakty dd{ margin:0; color:var(--ink); font-weight:700; font-size:.94rem; text-align:right; }
.cs-fakty__ubezp{ display:flex; align-items:center; justify-content:flex-end; gap:.9rem; flex-wrap:wrap; }
/* Logotyp plus nazwa: sam znak w wierszu tabeli gubi sie (PZU to kolko,
   ktore przy 24 px ma dwadziescia pikseli szerokosci), a nazwa tekstem jest
   tez tym, czego szuka wyszukiwarka. */
.cs-fakty__marka{ display:inline-flex; align-items:center; gap:.45rem; }
.cs-fakty__marka .cs-logo{ height:24px; max-width:80px; }

.cs-cytat{
  margin:0 0 2.2rem; padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--orange);
  font-size:1.1rem; line-height:1.6; color:var(--ink); font-weight:500;
}
.cs-cytat p{ margin:0 0 .5rem; }
.cs-cytat cite{ font-size:.86rem; color:var(--ink-mute); font-style:normal; }

.cs-bok__linki{ display:grid; gap:.5rem; }
.cs-bok__linki a{
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  padding:.75rem .95rem; min-height:var(--tap, 44px);
  border:1px solid var(--cream-line); border-radius:var(--r-md); background:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.88rem;
  color:var(--ink); text-decoration:none;
  transition:border-color .18s ease;
}
.cs-bok__linki a:hover{ border-color:var(--orange); }
.cs-bok__linki span{
  background:var(--orange-soft); color:var(--orange-700);
  border-radius:var(--r-pill); padding:.1rem .55rem; font-size:.78rem;
}

.cs-dalej{ background:var(--bg-2); }
.cs-dalej h2{ margin:0 0 1.6rem; }

/* --------------------------------------------------------------------------
   6. Strona zbiorcza
   -------------------------------------------------------------------------- */
.cs-hub__wstep{ max-width:64ch; margin:0 0 2.4rem; }
.cs-hub__logo{ margin:0 0 1.2rem; }
.cs-hub__wstep h2{ margin:0 0 .7rem; color:var(--ink); }
.cs-hub__wstep p{ margin:0 0 .9rem; font-size:1.05rem; line-height:1.72; color:var(--ink-soft); }

.cs-hub__poradniki{ margin-top:2.6rem; padding:1.3rem 1.5rem; background:#fff; border:1px solid var(--cream-line); border-radius:var(--r-md); }
.cs-hub__poradniki h2{ margin:0 0 .8rem; font-size:.78rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }
.cs-hub__poradniki ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.cs-hub__poradniki a{
  color:var(--ink); font-weight:600; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:.16em; text-decoration-color:var(--orange);
}
.cs-hub__poradniki a:hover{ text-decoration-color:var(--orange-700); }

/* --------------------------------------------------------------------------
   7. Motyw jasny
   -------------------------------------------------------------------------- */
[data-theme="light"] .cs-hero,
[data-theme="light"] .cs-dalej{ background:var(--bg-2); }
[data-theme="light"] .cs-hero h1{ color:var(--text-strong); }
[data-theme="light"] .cs-liczby li{ background:#fff; border-color:var(--cream-line); }
[data-theme="light"] .cs-liczby__val{ color:var(--ink); }
[data-theme="light"] .cs-liczby__val--przed{ color:var(--ink-mute); }
[data-theme="light"] .cs-liczby__val--po{ color:var(--green-700); }
[data-theme="light"] .cs-znacznik{ color:var(--orange-700); }
[data-theme="light"] .cs-card__korzysc{ color:var(--ink-soft); }

/* --------------------------------------------------------------------------
   8. Warstwa mobilna
   -------------------------------------------------------------------------- */
@media (max-width: 1080px){
  .cs-uklad{ grid-template-columns:1fr; }
  .cs-bok{ position:static; max-width:34rem; }
  .cs-glowna{ max-width:none; }
}
@media (max-width: 620px){
  .cs-liczby{ grid-template-columns:1fr; }
  .cs-hero h1{ max-width:none; }
  .cs-fakty > div{ flex-direction:column; gap:.15rem; }
  .cs-fakty dd{ text-align:left; }
  /* Pigulki marek jako karuzela - inaczej lamia sie na kilka wierszy
     i spychaja liste spraw pod zagiecie. */
  .cs-marki__lista{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    padding-inline:clamp(1rem,4vw,2rem); margin-inline:calc(-1 * clamp(1rem,4vw,2rem));
  }
  .cs-marki__lista::-webkit-scrollbar{ display:none; }
  .cs-marki__lista > li{ flex:0 0 auto; }
}

@media (prefers-reduced-motion: reduce){
  .cs-marka{ transition:none; }
  .cs-marka:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   9. Kontrast tekstow pomocniczych
   --------------------------------------------------------------------------
   Karty historii korzystaja z `--ink-mute` (#8A94AC) do etykiet, dat i podpisow.
   Na kremowej karcie daje to **2,84:1** przy wymaganych 4,5:1 - czyli caly
   drobny druk na tej podstronie byl ponizej progu czytelnosci. Reguly siedza
   w main.css i sa starsze niz ta przebudowa, ale skoro strona ma pracowac na
   pozycjonowanie, nie moze byc nieczytelna.

   `--ink-soft` (#5A6580) to 5,44:1 przy tym samym ciezarze wizualnym - roznica
   miedzy tekstem glownym a pomocniczym niesie rozmiar i waga pisma, nie
   przygaszony kolor.

   `--orange` w liczbach `.cs-stats` zostaje: to 2,1 rem waga 900, czyli tekst
   duzy w rozumieniu WCAG - obowiazuje go prog 3:1, ktory przechodzi.
   -------------------------------------------------------------------------- */
.cs-card__meta,
.cs-money__label,
.cs-money__val--before,
.cs-card__gain span,
.cs-card__quote cite,
.cs-note{ color:var(--ink-soft); }

/* Znacznik rodzaju szkody na karcie: karta jest kremowa, wiec obowiazuje
   wariant dla jasnego tla, a nie ten z granatu. Tekst granatowy, nie
   pomaranczowy - `--orange-700` na pomaranczowym tincie daje 3,8:1 przy
   wymaganych 4,5:1 dla tego stopnia pisma. Kolor niesie tlo, nie litery. */
.cs-card .cs-znacznik{
  background:var(--orange-soft); border-color:transparent; color:var(--ink);
}

/* "Zobacz przebieg sprawy" - `--orange-2` na kremie to 2,1:1. Granat plus
   podkreslenie przy najechaniu czyta sie jako odnosnik i przechodzi prog. */
.cs-card__wiecej{ color:var(--ink); }

/* Czas sprawy: `--green` na kremie to 2,2:1. Zielen zostaje tam, gdzie ma
   nosnik - na rombie listy korzysci, gdzie prog tekstowy jej nie dotyczy. */
.cs-card__czas{ color:var(--ink-soft); }

/* Kwota doplaty: 21,6 px waga 900, wiec tekst duzy w rozumieniu WCAG (prog
   3:1). `--green` daje 2,2:1 i nie przechodzi nawet tego - stad ciemniejszy
   wariant funkcyjny. */
.cs-card__gain strong{ color:var(--green-700); }

/* Licznik przy pigulce filtra - na granacie potrzebuje pelnej bieli. */
.cs-chip__cnt{ color:var(--text-strong); opacity:1; }
.cs-chip.is-active .cs-chip__cnt{
  /* Pigulka aktywna ma pomaranczowe tlo, a licznik dokladal na nie 14 procent
     czerni - granat na tym daje 3,9:1. Jasny podklad zamiast ciemnego wraca
     ponad prog i nie zmienia wagi wizualnej. */
  background:rgba(255,255,255,.55); color:var(--ink);
}

/* Nota pod lista zalezy od tla sekcji: na indeksie stoi na granacie,
   na stronie zbiorczej i w historii - na kremie. Jeden kolor nie obsluzy
   obu, stad rozdzielenie. */
.cs-note{ color:var(--text); }
.section--light .cs-note{ color:var(--ink-soft); }

/* --------------------------------------------------------------------------
   10. Biale na jasnym - ta sama dziura w kaskadzie, co w blogu
   --------------------------------------------------------------------------
   `main.css` maluje `strong` i `h1` na bialo, a `.section--light` przestawia
   tylko h2-h4. Kwota doplaty w tabeli faktow (`<dd><strong>`) wychodzila przez
   to bialo na kremie - 1,07:1, czyli niewidoczna.

   Selektor celuje w `.cs-glowna`, nie w cale `.cs-cialo`: w tej samej sekcji
   siedzi ciemna karta CTA z numerem telefonu. Szersza regula pomalowala go
   granatem na granacie - ten sam blad, tylko w druga strone.
   -------------------------------------------------------------------------- */
.cs-glowna :is(strong,b),
.cs-hub__wstep :is(strong,b),
.cs-hub__poradniki :is(strong,b){ color:var(--ink); }

/* Kafelek wyniku: etykiety na pomaranczowym gradiencie mialy granat z 72
   procentami krycia - 3,45:1 przy wymaganych 4,5:1 dla tego stopnia pisma.
   Pelne krycie daje 5,1:1 i nic nie traci wizualnie. */
.cs-liczby--wynik .cs-liczby__etykieta,
.cs-liczby__krotnie{ color:var(--ink); }
.cs-liczby--wynik .cs-liczby__etykieta{ opacity:.8; }

/* --------------------------------------------------------------------------
   11. Import 150 historii
   -------------------------------------------------------------------------- */
.cs-rodzaje{ background:var(--bg-2); }
.cs-rodzaje .cs-marki__tytul{ color:var(--text-muted); }
.cs-wiecej{
  margin:1.6rem 0 0; text-align:center;
  font-size:.94rem; color:var(--text);
}
[data-theme="light"] .cs-rodzaje{ background:var(--bg-2); }
[data-theme="light"] .cs-wiecej{ color:var(--ink-soft); }
/* Blok "W skrocie" przyszedl z bloga (blog.css), ktory na tej podstronie
   sie nie laduje - stad kopia najwazniejszych regul. */
.cs-glowna .artykul__skrot{
  position:relative; background:#fff;
  border:1px solid var(--cream-line); border-left:4px solid var(--orange);
  border-radius:var(--r-md); padding:1.25rem 1.4rem 1.35rem; margin:0 0 2.2rem;
  box-shadow:0 10px 30px rgba(20,34,74,.07);
}
.cs-glowna .artykul__skrot-tytul{
  margin:0 0 .8rem; font-family:var(--font-head); font-weight:800;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.cs-glowna .artykul__skrot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.62rem; }
.cs-glowna .artykul__skrot li{
  position:relative; padding-left:1.6rem;
  font-size:1rem; line-height:1.6; color:var(--ink); font-weight:500;
}
.cs-glowna .artykul__skrot li::before{
  content:""; position:absolute; left:.15rem; top:.55em;
  width:8px; height:8px; border-radius:2px; background:var(--orange); transform:rotate(45deg);
}