/* =========================================================================
   Blog — dokładka do assets/styl.css.

   WAŻNE: używamy WYŁĄCZNIE tokenów zdefiniowanych w styl.css
   (--arkusz, --tekst, --linia, --p-*, --f-*). Pierwsza wersja tego pliku
   miała własne nazwy (--tlo-karta, --ramka, --akcent), których portal nie
   definiuje — przeglądarka brała więc jasne wartości zapasowe i w trybie
   ciemnym wychodził biały tekst na białej karcie. Nie wprowadzać tu nowych
   nazw zmiennych; jeśli czegoś brakuje, dodać token w styl.css.
   ========================================================================= */

/* kolumna do czytania — szerokość dobrana na ~70 znaków w wierszu */
.waski { max-width: 46rem; }

/* ============================================================ SPIS === */

.lista-wpisow { display: grid; gap: 1.3rem; margin-top: 2.2rem; }

.kafel-wpis {
  padding: 1.5rem 1.6rem;
  background: var(--arkusz);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  box-shadow: var(--cien-1);
  transition: border-color .18s, transform .18s;
}
.kafel-wpis:hover { border-color: var(--linia-2); transform: translateY(-2px); }
.kafel-wpis h2,
.kafel-wpis h3 {
  font-family: var(--f-tytul);
  margin: .35rem 0 .5rem;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--tekst);
}
.kafel-wpis h2 a, .kafel-wpis h3 a { text-decoration: none; color: inherit; }
.kafel-wpis h2 a:hover, .kafel-wpis h3 a:hover { text-decoration: underline; }
.kafel-wpis p { margin: 0 0 .5rem; color: var(--tekst-2); }
.kafel-data {
  margin: 0; font-size: .8rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tekst-3);
}
.wiecej { font-weight: 700; text-decoration: none; color: var(--tekst); }
.wiecej:hover { text-decoration: underline; }

/* ======================================================== ARTYKUŁ === */

.wpis { padding: 2.2rem 0 3rem; }

.okruszki { font-size: .85rem; color: var(--tekst-3); margin-bottom: 1.1rem; }
.okruszki a { text-decoration: none; color: var(--tekst-2); }
.okruszki a:hover { text-decoration: underline; color: var(--tekst); }

.wpis h1 {
  font-family: var(--f-tytul);
  font-size: var(--t-h1, clamp(1.8rem, 4.2vw, 2.7rem));
  line-height: 1.13; margin: 0 0 .6rem; color: var(--tekst);
}
.wpis-meta {
  margin: 0 0 1.5rem; font-size: .84rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tekst-3);
}
.wpis-lead {
  font-size: 1.14rem; font-weight: 600; line-height: 1.6; color: var(--tekst);
  padding-left: 1.05rem; border-left: 3px solid var(--kolor, var(--tekst-3));
  margin: 0 0 2.2rem;
}

.wpis-tresc { font-size: var(--t-tekst); line-height: 1.75; color: var(--tekst); }
.wpis-tresc h2 {
  font-family: var(--f-tytul); margin: 2.6rem 0 .8rem;
  font-size: var(--t-h3); line-height: 1.25; color: var(--tekst);
}
.wpis-tresc h3 {
  font-family: var(--f-tytul); margin: 1.9rem 0 .55rem;
  font-size: 1.12rem; color: var(--tekst);
}
.wpis-tresc p { margin: 0 0 1.15rem; }
.wpis-tresc ul, .wpis-tresc ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.wpis-tresc li { margin: .4rem 0; }
.wpis-tresc a { color: var(--tekst); text-decoration: underline; text-underline-offset: .18em; }
.wpis-tresc a:hover { text-decoration-thickness: 2px; }
.wpis-tresc strong, .wpis-tresc b { color: var(--tekst); }

/* wtrącenia w kodzie — u nas to przykłady słów obcych, nie kod */
.wpis-tresc code {
  font-family: var(--f-tekst); font-weight: 600; font-size: .95em;
  background: var(--arkusz-2); border: 1px solid var(--linia);
  border-radius: 7px; padding: .06em .38em;
}

.wpis-tresc blockquote {
  margin: 1.5rem 0; padding: 1rem 1.25rem;
  background: var(--arkusz-2);
  border-left: 3px solid var(--linia-2);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  color: var(--tekst-2); font-style: italic;
}
.wpis-tresc blockquote p:last-child { margin-bottom: 0; }
.wpis-tresc hr { border: 0; border-top: 1px solid var(--linia); margin: 2.2rem 0; }

/* --------------------------------------------------------- tabele --- */

.tabelka {
  overflow-x: auto; margin: 1.6rem 0;
  border: 1px solid var(--linia); border-radius: var(--r-s);
  background: var(--arkusz);
}
.tabelka table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.tabelka th, .tabelka td {
  padding: .7rem .9rem; text-align: left;
  border-bottom: 1px solid var(--linia); color: var(--tekst);
}
.tabelka th {
  font-family: var(--f-tytul); font-weight: 700; font-size: .84rem;
  letter-spacing: .03em; text-transform: uppercase;
  background: var(--arkusz-2); color: var(--tekst-2);
}
.tabelka tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------- zajawka produktów --- */

.wpis-cta {
  margin-top: 2.8rem; padding: 1.7rem 1.8rem;
  background: var(--arkusz); border: 1px solid var(--linia);
  border-radius: var(--r); box-shadow: var(--cien-1);
}
.wpis-cta h2 { font-family: var(--f-tytul); margin: 0 0 .6rem; font-size: var(--t-h3); color: var(--tekst); }
.wpis-cta p { margin: 0 0 .9rem; color: var(--tekst-2); }
.wpis-cta-linki { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }

@media (max-width: 640px) {
  .wpis-lead { font-size: 1.05rem; }
}

/* ================================================ UKŁAD NA KOMPUTERZE === */
/* Kolumna tekstu zostaje wąska (czyta się ją najlepiej przy ~70 znakach),
   ale wolne miejsce na dużym ekranie przestaje być pustką: po lewej stoi
   spis treści, a grafika i tabele mogą wyjść poza kolumnę. */

.wpis-naglowek { max-width: 46rem; }
.wpis-kolumna { max-width: 46rem; min-width: 0; }

.wpis-uklad { display: block; }

@media (min-width: 1080px) {
  .wpis-uklad {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .wpis-spis { position: sticky; top: 6.2rem; }
  /* bez spisu (krótki tekst) kolumna ma zostać na swoim miejscu */
  .wpis-uklad > .wpis-kolumna:only-child { grid-column: 2; }
}

.wpis-spis {
  margin: 0 0 2rem;
  padding: 1.1rem 1.2rem;
  background: var(--arkusz-2);
  border: 1px solid var(--linia);
  border-radius: var(--r-s);
  font-size: .92rem;
}
.wpis-spis-glowa {
  margin: 0 0 .6rem; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tekst-3); font-weight: 700;
}
.wpis-spis ol { margin: 0; padding-left: 1.1rem; }
.wpis-spis li { margin: .38rem 0; }
.wpis-spis a { color: var(--tekst-2); text-decoration: none; }
.wpis-spis a:hover { color: var(--tekst); text-decoration: underline; }

/* nagłówki mają kotwice — zostawiamy miejsce, żeby pasek u góry ich nie zasłaniał */
.wpis-tresc h2 { scroll-margin-top: 6.5rem; }

/* -------------------------------------------------- grafika nagłówkowa --- */

.wpis-grafika {
  margin: 1.8rem 0 2.4rem;
  max-width: 68rem;
}
.wpis-grafika svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--r);
}

/* na wąskim ekranie rysunek robi się zbyt drobny, więc go przycinamy */
@media (max-width: 720px) {
  .wpis-grafika svg { border-radius: var(--r-s); }
}

/* Tabela na dużym ekranie może wyjść poza kolumnę tekstu — liczby czyta się
   wtedy bez ściskania kolumn. */
@media (min-width: 1080px) {
  .wpis-tresc .tabelka { width: calc(100% + 8rem); max-width: 60rem; }
}

/* ================================================== STRONY DOCELOWE === */
/* Bloki używane tylko na stronach pod frazy (kurs-*.html, fiszki-*.html). */

.liczby-strony {
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.liczby-strony li {
  margin: 0; padding: .9rem 1rem;
  background: var(--arkusz-2); border: 1px solid var(--linia);
  border-radius: var(--r-s);
}
.liczby-strony b {
  display: block; font-family: var(--f-tytul); font-size: 1.45rem;
  line-height: 1.1; color: var(--tekst);
}
.liczby-strony span { font-size: .85rem; color: var(--tekst-2); }

.cena-blok {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  margin: 1.8rem 0 .6rem; padding: 1.3rem 1.5rem;
  background: var(--arkusz); border: 1px solid var(--linia);
  border-radius: var(--r); box-shadow: var(--cien-1);
}
.cena-blok .btn { margin-left: auto; }

/* pytania na stronach docelowych dziedziczą wygląd ze strony głównej,
   ale tutaj stoją w kolumnie tekstu, więc bez własnej szerokości */
.wpis-tresc .pytania { max-width: none; margin-top: 1.2rem; }