@charset "UTF-8";
/* ==========================================================================
   Zrozum i Zdaj - arkusz stylow
   --------------------------------------------------------------------------
   Uklad: mobile-first. Breakpointy: 600 / 900 / 1200 px.
   Kolory, odstepy i promienie siedza w custom properties w :root - podmiana
   marki sprowadza sie do zmiany kilku wartosci w sekcji 1.
   ========================================================================== */

/* ==========================================================================
   1. Zmienne
   ========================================================================== */

:root {
  /* --- Kolory bazowe (wyciagniete z logo) --- */
  --granat: #001F5D;          /* tekst, naglowki, tla ciemnych sekcji */
  --granat-jasny: #12326F;
  --fiolet: #764C9E;          /* akcent brandowy z logo */
  --niebieski: #2F5FA8;       /* linki */

  /* --- Akcent CTA: ciepły bursztyn.
     Kontrast granatowego tekstu na bursztynie = 7.6:1 (WCAG AAA). --- */
  --akcent: #F5A524;
  --akcent-ciemny: #B45309;   /* dla tekstu akcentowego na bieli: 5.0:1 */
  --akcent-hover: #E29416;

  /* --- Tla i powierzchnie --- */
  --tlo: #FFFFFF;
  --tlo-alt: #F6F7FB;         /* bardzo jasny szary dla sekcji naprzemiennych */
  --tlo-karta: #FFFFFF;
  --obramowanie: #E2E6F0;
  --obramowanie-mocna: #C7CEDF;

  /* --- Tekst --- */
  --tekst: #001F5D;
  --tekst-drugi: #4A5578;     /* 7.34:1 na bieli */
  --tekst-na-ciemnym: #E9EDF7;
  --tekst-na-ciemnym-drugi: #B4C0DC;

  /* --- Kolory przedmiotowe: przypisane na stale, uzywane konsekwentnie
     w kartach, ikonach i badge'ach --- */
  --mat: #2F5FA8;
  --mat-ciemny: #1D4C90;
  --mat-tlo: #EAF1FB;
  --chem: #0E7C6B;
  --chem-ciemny: #0B6558;
  --chem-tlo: #E6F5F1;
  --fiz: #764C9E;
  --fiz-ciemny: #653F8C;
  --fiz-tlo: #F1EBF8;

  /* --- Typografia --- */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Skala plynna: clamp(min, preferowane, max). Piec stopni, bez wyjatkow. */
  --t-xs: 0.8125rem;                                  /* 13px - etykiety */
  --t-sm: 0.9375rem;                                  /* 15px - drobny tekst */
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16-17px - tekst */
  --t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);/* 17-19px - lead */
  --t-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --t-h2: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --t-h1: clamp(2rem, 1.6rem + 2.2vw, 3.25rem);

  --lh-ciasny: 1.15;
  --lh-naglowek: 1.25;
  --lh-tekst: 1.65;

  /* Komfortowa dlugosc wiersza: 65-75 znakow */
  --miara: 68ch;
  --miara-waska: 58ch;

  /* --- Odstepy: skala 4px --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Pion sekcji: rosnie z szerokoscia ekranu */
  --sekcja-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* --- Forma --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pelny: 999px;

  --cien-sm: 0 1px 2px rgba(0, 31, 93, 0.05), 0 1px 3px rgba(0, 31, 93, 0.06);
  --cien-md: 0 4px 6px -1px rgba(0, 31, 93, 0.07), 0 2px 4px -2px rgba(0, 31, 93, 0.05);
  --cien-lg: 0 12px 24px -8px rgba(0, 31, 93, 0.12), 0 4px 8px -4px rgba(0, 31, 93, 0.06);

  --szer-max: 1200px;
  --szer-tekst: 760px;

  --przejscie: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Reset i podstawy
   ========================================================================== */

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

/* Atrybut `hidden` musi wygrywac z wlasnymi wartosciami display.
   Bez tego karta z `display:flex` pozostaje widoczna mimo ustawienia
   hidden przez skrypt filtrowania. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* zeby kotwice nie chowaly sie pod headerem */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-tekst);
  color: var(--tekst);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  font-weight: 800;
  line-height: var(--lh-naglowek);
  letter-spacing: -0.02em;
  text-wrap: balance;   /* zapobiega sierotom w naglowkach tam, gdzie wspierane */
}

h1 { font-size: var(--t-h1); line-height: var(--lh-ciasny); letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; }
h4 { font-size: var(--t-h4); font-weight: 700; }

p { margin: 0 0 var(--s-4); max-width: var(--miara); }

a { color: var(--niebieski); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--granat); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; max-width: var(--miara); }
li { margin-bottom: var(--s-2); }

img { max-width: 100%; height: auto; display: block; }

strong { font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--obramowanie); margin: var(--s-6) 0; }

/* Focus widoczny na wszystkim, co klikalne - wymog dostepnosci */
:focus-visible {
  outline: 3px solid var(--akcent-ciemny);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Tresc tylko dla czytnikow ekranu */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Pulapka na roboty w formularzach. W odroznieniu od .sr-only ma byc
   niewidoczna takze dla czytnikow ekranu (pole nosi aria-hidden), bo czlowiek
   nie ma go wypelniac. Roboty czytaja HTML, nie CSS, wiec wpisza tam cos. */
.pole-ukryte {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* Link pomijajacy nawigacje */
.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: 200;
  background: var(--granat); color: #fff;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: top var(--przejscie);
}
.skip-link:focus { top: var(--s-3); color: #fff; }

/* ==========================================================================
   3. Layout
   ========================================================================== */

.kontener {
  width: 100%;
  max-width: var(--szer-max);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 600px) { .kontener { padding-inline: var(--s-5); } }

.sekcja { padding-block: var(--sekcja-y); }
.sekcja--alt { background: var(--tlo-alt); }
.sekcja--ciemna { background: var(--granat); color: var(--tekst-na-ciemnym); }
.sekcja--ciemna h2, .sekcja--ciemna h3 { color: #fff; }
.sekcja--ciemna p { color: var(--tekst-na-ciemnym); }

.sekcja-naglowek { margin-bottom: var(--s-6); max-width: var(--miara); }
.sekcja-naglowek p { color: var(--tekst-drugi); font-size: var(--t-lead); margin-bottom: 0; }
.sekcja--ciemna .sekcja-naglowek p { color: var(--tekst-na-ciemnym-drugi); }

.etykieta {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akcent-ciemny);
  margin-bottom: var(--s-3);
}
.sekcja--ciemna .etykieta { color: var(--akcent); }

.siatka { display: grid; gap: var(--s-4); }
@media (min-width: 600px) {
  .siatka--2 { grid-template-columns: repeat(2, 1fr); }
  .siatka--3 { grid-template-columns: repeat(2, 1fr); }
  .siatka--4 { grid-template-columns: repeat(2, 1fr); }
  .siatka { gap: var(--s-5); }
}
@media (min-width: 900px) {
  .siatka--3 { grid-template-columns: repeat(3, 1fr); }
  .siatka--4 { grid-template-columns: repeat(4, 1fr); }
}

.kolumna-tekstu { max-width: var(--szer-tekst); }

/* ==========================================================================
   4. Naglowek strony i nawigacja
   ========================================================================== */

.naglowek-strony {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--obramowanie);
}

.naglowek-wnetrze {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.25rem;
}

.logo { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex-shrink: 0; }
.logo img { width: 40px; height: 40px; }
.logo-tekst {
  font-weight: 800; font-size: 1.0625rem; color: var(--granat);
  letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap;
}

.nawigacja { display: none; }
.nawigacja ul { display: flex; align-items: center; gap: var(--s-1); list-style: none; margin: 0; padding: 0; max-width: none; }
.nawigacja li { margin: 0; }
.nawigacja a {
  display: block; padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--tekst); text-decoration: none;
  border-radius: var(--r-sm);
  transition: background var(--przejscie), color var(--przejscie);
}
.nawigacja a:hover { background: var(--tlo-alt); }
.nawigacja a[aria-current="page"] {
  color: var(--akcent-ciemny);
  background: var(--tlo-alt);
}

.naglowek-akcje { display: flex; align-items: center; gap: var(--s-2); }

/* Przycisk menu mobilnego.
   Reguła z media query siedzi PONIŻEJ tej definicji - inaczej, przy tej samej
   specyficzności, wygrałaby deklaracja późniejsza i przycisk zostałby widoczny
   także na desktopie. */
.przelacznik-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--obramowanie);
  border-radius: var(--r-sm); cursor: pointer; color: var(--granat);
}
.przelacznik-menu svg { width: 22px; height: 22px; }
.przelacznik-menu .ikona-zamknij { display: none; }
.przelacznik-menu[aria-expanded="true"] .ikona-menu { display: none; }
.przelacznik-menu[aria-expanded="true"] .ikona-zamknij { display: block; }

@media (min-width: 1080px) {
  .nawigacja { display: block; }
  .przelacznik-menu { display: none; }
}

/* Panel menu mobilnego */
.menu-mobilne {
  display: none;
  border-top: 1px solid var(--obramowanie);
  background: var(--tlo);
  padding-block: var(--s-4);
  max-height: calc(100vh - 4.25rem);
  overflow-y: auto;
}
.menu-mobilne.otwarte { display: block; }
.menu-mobilne ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.menu-mobilne li { margin: 0; }
.menu-mobilne a {
  display: block; padding: var(--s-3) var(--s-2);
  font-size: 1.0625rem; font-weight: 600;
  color: var(--tekst); text-decoration: none;
  border-bottom: 1px solid var(--obramowanie);
}
.menu-mobilne a[aria-current="page"] { color: var(--akcent-ciemny); }
.menu-mobilne .przycisk { margin-top: var(--s-4); width: 100%; }
@media (min-width: 1080px) { .menu-mobilne { display: none !important; } }

/* ==========================================================================
   5. Przyciski
   ========================================================================== */

.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.8125rem var(--s-5);
  font-family: inherit; font-size: var(--t-sm); font-weight: 700;
  line-height: 1.2; text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--r-pelny);
  cursor: pointer;
  transition: background var(--przejscie), border-color var(--przejscie),
              color var(--przejscie), transform var(--przejscie);
}
.przycisk:hover { transform: translateY(-1px); }
.przycisk:active { transform: translateY(0); }

/* Glowne CTA: bursztyn + granatowy tekst (kontrast 7.6:1) */
.przycisk--glowny { background: var(--akcent); color: var(--granat); }
.przycisk--glowny:hover { background: var(--akcent-hover); color: var(--granat); }

.przycisk--drugi {
  background: transparent; color: var(--granat); border-color: var(--obramowanie-mocna);
}
.przycisk--drugi:hover { background: var(--tlo-alt); border-color: var(--granat); color: var(--granat); }

.przycisk--ciemny { background: var(--granat); color: #fff; }
.przycisk--ciemny:hover { background: var(--granat-jasny); color: #fff; }

.przycisk--na-ciemnym { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.przycisk--na-ciemnym:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: #fff; }

.przycisk--pelny { width: 100%; }
.przycisk--maly { padding: 0.5rem var(--s-4); font-size: var(--t-xs); }

.przyciski-rzad { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Link ze strzalka */
.link-strzalka {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--t-sm); text-decoration: none;
  color: var(--niebieski);
}
.link-strzalka svg { width: 16px; height: 16px; transition: transform var(--przejscie); }
.link-strzalka:hover svg { transform: translateX(3px); }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero { padding-block: var(--s-7) var(--sekcja-y); overflow: hidden; }
.hero-siatka { display: grid; gap: var(--s-6); align-items: center; }
.hero h1 { margin-bottom: var(--s-4); }
.hero-lead {
  font-size: var(--t-lead); color: var(--tekst-drugi);
  max-width: var(--miara-waska); margin-bottom: var(--s-5);
}
.hero-obraz { position: relative; }
.hero-obraz img {
  width: 100%; border-radius: var(--r-xl);
  box-shadow: var(--cien-lg);
}

/* Plakietka z liczba przy zdjeciu */
.hero-plakietka {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--cien-md);
}
.hero-plakietka strong { display: block; font-size: 1.375rem; line-height: 1.1; }
.hero-plakietka span { font-size: var(--t-xs); color: var(--tekst-drugi); }

@media (min-width: 900px) {
  .hero-siatka { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-7); }
  .hero { padding-block: var(--s-8) var(--sekcja-y); }
}

/* Naglowek podstrony */
.naglowek-podstrony { padding-block: var(--s-7) var(--s-6); background: var(--tlo-alt); }
.naglowek-podstrony h1 { max-width: 20ch; }
.naglowek-podstrony .lead {
  font-size: var(--t-lead); color: var(--tekst-drugi); max-width: var(--miara); margin-bottom: 0;
}
.naglowek-podstrony--z-obrazem .siatka { align-items: center; }
.naglowek-podstrony img { border-radius: var(--r-lg); box-shadow: var(--cien-md); }

/* Okruszki */
.okruszki { margin-bottom: var(--s-4); font-size: var(--t-xs); color: var(--tekst-drugi); }
.okruszki ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.okruszki li { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.okruszki li + li::before { content: "/"; color: var(--obramowanie-mocna); }
.okruszki a { color: var(--tekst-drugi); }

/* ==========================================================================
   7. Pasek zaufania (liczby)
   ========================================================================== */

.liczby { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.liczba {
  padding: var(--s-4);
  border: 1px solid var(--obramowanie);
  border-radius: var(--r-md);
  background: var(--tlo-karta);
}
.liczba strong {
  display: block; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--granat); margin-bottom: var(--s-1);
}
.liczba span { font-size: var(--t-sm); color: var(--tekst-drugi); }
@media (min-width: 900px) { .liczby { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   8. Karty
   ========================================================================== */

.karta {
  display: flex; flex-direction: column;
  background: var(--tlo-karta);
  border: 1px solid var(--obramowanie);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: box-shadow var(--przejscie), transform var(--przejscie),
              border-color var(--przejscie);
}
.karta h3 { margin-bottom: var(--s-2); }
.karta p { color: var(--tekst-drugi); margin-bottom: var(--s-4); }
.karta > :last-child { margin-bottom: 0; margin-top: auto; }

.karta--klikalna:hover {
  box-shadow: var(--cien-lg);
  transform: translateY(-2px);
  border-color: var(--obramowanie-mocna);
}

/* Kafle wyboru sciezki - najwazniejszy element nawigacyjny na stronie glownej */
.kafel-sciezki {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 15rem;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--granat);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--przejscie), box-shadow var(--przejscie);
}
.kafel-sciezki::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, rgba(118, 76, 158, 0.55), transparent 60%);
  pointer-events: none;
}
.kafel-sciezki--matura::after {
  background: radial-gradient(120% 80% at 100% 0%, rgba(47, 95, 168, 0.6), transparent 60%);
}
.kafel-sciezki > * { position: relative; z-index: 1; }
.kafel-sciezki:hover { transform: translateY(-3px); box-shadow: var(--cien-lg); color: #fff; }
.kafel-sciezki h3 { color: #fff; font-size: var(--t-h2); font-weight: 800; margin-bottom: var(--s-3); }
.kafel-sciezki p { color: var(--tekst-na-ciemnym-drugi); margin-bottom: var(--s-5); flex-grow: 1; }
.kafel-sciezki .kafel-cta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: var(--t-sm); color: var(--akcent);
}
.kafel-sciezki .kafel-cta svg { width: 16px; height: 16px; transition: transform var(--przejscie); }
.kafel-sciezki:hover .kafel-cta svg { transform: translateX(4px); }
.kafel-ikona { width: 40px; height: 40px; margin-bottom: var(--s-4); color: var(--akcent); }

/* ==========================================================================
   9. Kolory przedmiotowe
   ========================================================================== */

.przedmiot-matematyka { --p-kolor: var(--mat); --p-ciemny: var(--mat-ciemny); --p-tlo: var(--mat-tlo); }
.przedmiot-chemia     { --p-kolor: var(--chem); --p-ciemny: var(--chem-ciemny); --p-tlo: var(--chem-tlo); }
.przedmiot-fizyka     { --p-kolor: var(--fiz); --p-ciemny: var(--fiz-ciemny); --p-tlo: var(--fiz-tlo); }

/* Karta przedmiotu */
.karta-przedmiotu {
  border-top: 4px solid var(--p-kolor);
  text-decoration: none;
  color: inherit;
}
.karta-przedmiotu:hover { color: inherit; }
.karta-przedmiotu .ikona-przedmiotu {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--p-tlo); color: var(--p-ciemny);
  margin-bottom: var(--s-4);
}
.karta-przedmiotu .ikona-przedmiotu svg { width: 26px; height: 26px; }
.karta-przedmiotu h3 { color: var(--p-ciemny); }

/* Badge przedmiotu / poziomu / typu */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 0.25rem 0.625rem;
  font-size: var(--t-xs); font-weight: 700; line-height: 1.4;
  border-radius: var(--r-pelny);
  background: var(--tlo-alt); color: var(--tekst-drugi);
  white-space: nowrap;
}
.badge--przedmiot { background: var(--p-tlo); color: var(--p-ciemny); }
.badge--akcent { background: #FDF0D5; color: var(--akcent-ciemny); }
.badge-rzad { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }

/* ==========================================================================
   10. Karta kursu
   ========================================================================== */

.karta-kursu { border-top: 4px solid var(--p-kolor); }
/* Poziom naglowka zalezy od kontekstu (h2 w katalogu, h3 w sekcjach),
   ale rozmiar ma byc ten sam - stad jawne nadpisanie obu. */
.karta-kursu h2, .karta-kursu h3 { font-size: var(--t-h4); margin-bottom: var(--s-3); }
.karta-kursu h2 a, .karta-kursu h3 a { color: inherit; text-decoration: none; }
.karta-kursu h2 a:hover, .karta-kursu h3 a:hover { color: var(--p-ciemny); text-decoration: underline; }
.karta-kursu .opis { font-size: var(--t-sm); }

/* margin-top:auto dociska metadane i przyciski do dolu karty, dzieki czemu
   ceny w jednym rzedzie sa na tej samej wysokosci mimo roznej dlugosci opisow. */
.kurs-meta {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-top: var(--s-4); margin-top: auto;
  border-top: 1px solid var(--obramowanie);
  font-size: var(--t-sm);
}
.karta-kursu .opis { margin-bottom: var(--s-4); }
.kurs-meta-wiersz { display: flex; align-items: center; gap: var(--s-2); color: var(--tekst-drugi); }
.kurs-meta-wiersz svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--tekst-drugi); }
.kurs-cena { font-size: 1.25rem; font-weight: 800; color: var(--granat); letter-spacing: -0.02em; }
.kurs-cena small { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--tekst-drugi); letter-spacing: 0; }
/* Odbiera auto-margines dziedziczony z `.karta > :last-child` - w karcie kursu
   za dociskanie do dolu odpowiada juz .kurs-meta. */
.karta-kursu .przyciski-rzad { margin-top: var(--s-4); }
.karta-kursu > :last-child { margin-top: var(--s-4); }

/* ==========================================================================
   11. Kroki procesu
   ========================================================================== */

.kroki { counter-reset: krok; display: grid; gap: var(--s-5); }
.krok { position: relative; padding-left: 3.5rem; }
.krok-numer {
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--r-pelny);
  background: var(--granat); color: #fff;
  font-size: var(--t-sm); font-weight: 800;
}
.krok h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.krok p { color: var(--tekst-drugi); margin-bottom: 0; }
@media (min-width: 900px) {
  .kroki { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
  .krok { padding-left: 0; padding-top: 3.5rem; }
  .krok-numer { top: 0; }
}

/* ==========================================================================
   12. Opinie
   ========================================================================== */

.cytat {
  display: flex; flex-direction: column;
  background: var(--tlo-karta);
  border: 1px solid var(--obramowanie);
  border-left: 4px solid var(--akcent);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.cytat blockquote { margin: 0 0 var(--s-4); font-size: var(--t-base); }
.cytat blockquote p { margin-bottom: 0; color: var(--tekst); }
.cytat figcaption { margin-top: auto; font-size: var(--t-sm); color: var(--tekst-drugi); }
.cytat figcaption strong { display: block; color: var(--tekst); }

/* Karuzela na mobile, siatka na desktopie */
.karuzela-opinii {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 85%);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--s-4);
  padding-bottom: var(--s-4);
  margin-inline: calc(var(--s-4) * -1);
  padding-inline: var(--s-4);
  scrollbar-width: thin;
}
.karuzela-opinii > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .karuzela-opinii {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}
.karuzela-sterowanie { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
@media (min-width: 900px) { .karuzela-sterowanie { display: none; } }
.karuzela-przycisk {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--obramowanie-mocna); border-radius: var(--r-pelny);
  background: var(--tlo); color: var(--granat); cursor: pointer;
}
.karuzela-przycisk:hover { background: var(--tlo-alt); }
.karuzela-przycisk svg { width: 18px; height: 18px; }

/* ==========================================================================
   13. Akordeon (FAQ, program kursu)
   ========================================================================== */

.akordeon { border: 1px solid var(--obramowanie); border-radius: var(--r-md); overflow: hidden; background: var(--tlo-karta); }
.akordeon + .akordeon { margin-top: var(--s-3); }
.akordeon-przycisk {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  width: 100%; padding: var(--s-4) var(--s-5);
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--t-base); font-weight: 700; text-align: left;
  color: var(--tekst); line-height: 1.4;
}
.akordeon-przycisk:hover { background: var(--tlo-alt); }
.akordeon-ikona {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 0.15rem;
  color: var(--tekst-drugi);
  transition: transform var(--przejscie);
}
.akordeon-przycisk[aria-expanded="true"] .akordeon-ikona { transform: rotate(45deg); }
.akordeon-tresc { padding: 0 var(--s-5) var(--s-5); }
.akordeon-tresc[hidden] { display: none; }
.akordeon-tresc p:last-child, .akordeon-tresc ul:last-child { margin-bottom: 0; }
.akordeon-tresc p { color: var(--tekst-drugi); }

/* ==========================================================================
   14. Listy z ikonami
   ========================================================================== */

.lista-check { list-style: none; padding: 0; }
.lista-check li {
  position: relative; padding-left: 1.875rem; margin-bottom: var(--s-3);
}
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 1.125rem; height: 1.125rem;
  border-radius: var(--r-pelny);
  background: var(--akcent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001F5D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}
.lista-check--przedmiot li::before { background-color: var(--p-kolor); }

.lista-kropki { list-style: none; padding: 0; }
.lista-kropki li { position: relative; padding-left: 1.25rem; margin-bottom: var(--s-2); }
.lista-kropki li::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.7em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--p-kolor, var(--akcent));
}

/* ==========================================================================
   15. Tabele (cennik, harmonogram)
   ========================================================================== */

.tabela-otoczka { overflow-x: auto; margin-bottom: var(--s-5); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
caption { text-align: left; font-weight: 700; padding-bottom: var(--s-3); color: var(--tekst-drugi); }
th, td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--obramowanie); }
th { font-weight: 700; color: var(--granat); background: var(--tlo-alt); white-space: nowrap; }
td:last-child { font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

.tabela-karta { border: 1px solid var(--obramowanie); border-radius: var(--r-md); overflow: hidden; background: var(--tlo-karta); }

/* Harmonogram */
.harmonogram { list-style: none; padding: 0; }
.harmonogram li {
  display: grid; gap: var(--s-1);
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 2px solid var(--obramowanie);
  position: relative; margin-bottom: 0;
}
.harmonogram li::before {
  content: ""; position: absolute; left: -0.4375rem; top: 1.55rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tlo); border: 3px solid var(--akcent);
}
.harmonogram .termin {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--akcent-ciemny);
}
.harmonogram .wydarzenie { font-weight: 700; }
.harmonogram .uwaga { font-size: var(--t-sm); color: var(--tekst-drugi); }

/* ==========================================================================
   16. Filtry katalogu
   ========================================================================== */

.filtry {
  display: grid; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--tlo-alt);
  border: 1px solid var(--obramowanie);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
}
.filtr-grupa fieldset { border: 0; margin: 0; padding: 0; }
.filtr-grupa legend {
  padding: 0 0 var(--s-3);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-drugi);
}
.filtr-chipy { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  padding: 0.5rem var(--s-4);
  font-family: inherit; font-size: var(--t-sm); font-weight: 600;
  background: var(--tlo); color: var(--tekst);
  border: 1px solid var(--obramowanie-mocna); border-radius: var(--r-pelny);
  cursor: pointer;
  transition: background var(--przejscie), color var(--przejscie), border-color var(--przejscie);
}
.chip:hover { border-color: var(--granat); }
.chip[aria-pressed="true"] {
  background: var(--granat); color: #fff; border-color: var(--granat);
}
.filtr-podsumowanie {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--tekst-drugi);
}
.filtr-pusty {
  padding: var(--s-6); text-align: center;
  border: 1px dashed var(--obramowanie-mocna); border-radius: var(--r-lg);
  color: var(--tekst-drugi);
}
.filtr-pusty p { margin-inline: auto; }
@media (min-width: 900px) { .filtry { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

/* ==========================================================================
   17. Strona kursu
   ========================================================================== */

.kurs-uklad { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .kurs-uklad { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s-7); align-items: start; }
  .kurs-panel { position: sticky; top: 5.5rem; }
}

.kurs-panel {
  border: 1px solid var(--obramowanie);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  background: var(--tlo-karta);
  box-shadow: var(--cien-md);
}
.kurs-panel .kurs-cena { font-size: 2rem; margin-bottom: var(--s-4); }
.kurs-panel dl { margin: 0 0 var(--s-5); display: grid; gap: var(--s-3); }
.kurs-panel dt { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tekst-drugi); }
.kurs-panel dd { margin: 0; font-size: var(--t-sm); }

/* Sticky pasek zakupu na mobile */
.pasek-zakupu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--obramowanie);
  box-shadow: 0 -4px 16px rgba(0, 31, 93, 0.08);
}
.pasek-zakupu .kurs-cena { font-size: 1.125rem; margin: 0; }
.pasek-zakupu .przycisk { flex-shrink: 0; }
@media (min-width: 1000px) { .pasek-zakupu { display: none; } }
@media (max-width: 999px) { body:has(.pasek-zakupu) .stopka { padding-bottom: 6rem; } }

/* ==========================================================================
   18. Blog
   ========================================================================== */

.karta-wpisu { text-decoration: none; color: inherit; }
.karta-wpisu:hover { color: inherit; }
.karta-wpisu h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.wpis-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-size: var(--t-xs); color: var(--tekst-drugi); margin-bottom: var(--s-3);
}
.wpis-meta time { white-space: nowrap; }

/* Pojedynczy wpis */
.wpis-uklad { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .wpis-uklad { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .spis-tresci { position: sticky; top: 5.5rem; }
}

.spis-tresci {
  padding: var(--s-4);
  background: var(--tlo-alt);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
}
.spis-tresci h2 {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tekst-drugi); margin-bottom: var(--s-3);
}
.spis-tresci ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.spis-tresci li { margin-bottom: var(--s-2); }
.spis-tresci a { color: var(--tekst); text-decoration: none; }
.spis-tresci a:hover { color: var(--niebieski); text-decoration: underline; }

.tresc-wpisu { max-width: var(--szer-tekst); }
.tresc-wpisu h2 { margin-top: var(--s-7); }
.tresc-wpisu h2:first-child { margin-top: 0; }
.tresc-wpisu h3 { margin-top: var(--s-5); }
.tresc-wpisu p, .tresc-wpisu li { font-size: var(--t-lead); }
.tresc-wpisu ol li, .tresc-wpisu ul li { margin-bottom: var(--s-3); }

/* Wzory matematyczne i chemiczne */
.wzor {
  font-size: 1.0625em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wzor sub, .wzor sup { font-size: 0.7em; }
.wzor-blok {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  margin: var(--s-5) 0;
  padding: var(--s-5) var(--s-4);
  background: var(--tlo-alt);
  border-radius: var(--r-md);
  border-left: 3px solid var(--fiolet);
  overflow-x: auto;
}
.wzor-blok .wzor { font-size: 1.375rem; font-weight: 600; }
.wzor-opis { font-size: var(--t-sm); color: var(--tekst-drugi); text-align: center; }
/* MathML renderuje ulamki i pierwiastki natywnie, bez zadnej biblioteki.
   Domyslnie sklada je drobniej niz otaczajacy tekst, stad podbicie rozmiaru. */
math { font-size: 1.15em; }
.wzor-blok math { font-size: 1.25em; }
math mfrac { padding-inline: 0.15em; }

/* CTA na koncu wpisu */
.cta-wpisu {
  margin-top: var(--s-7);
  padding: var(--s-5);
  background: var(--granat);
  color: var(--tekst-na-ciemnym);
  border-radius: var(--r-lg);
}
.cta-wpisu h2 { color: #fff; font-size: var(--t-h3); margin-top: 0; }
.cta-wpisu p { color: var(--tekst-na-ciemnym-drugi); }

/* ==========================================================================
   19. Formularze
   ========================================================================== */

.pole { margin-bottom: var(--s-4); }
.pole label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--t-sm); font-weight: 700;
}
.pole .wymagane { color: var(--akcent-ciemny); }
.pole input, .pole textarea, .pole select {
  width: 100%;
  padding: 0.75rem var(--s-4);
  font-family: inherit; font-size: var(--t-base); color: var(--tekst);
  background: var(--tlo);
  border: 1px solid var(--obramowanie-mocna);
  border-radius: var(--r-sm);
  transition: border-color var(--przejscie), box-shadow var(--przejscie);
}
.pole input:focus, .pole textarea:focus, .pole select:focus {
  border-color: var(--granat);
  box-shadow: 0 0 0 3px rgba(0, 31, 93, 0.12);
}
.pole textarea { min-height: 9rem; resize: vertical; }
.pole-podpowiedz { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--tekst-drugi); }

.pole-zgoda { display: flex; gap: var(--s-3); align-items: flex-start; margin-bottom: var(--s-5); }
.pole-zgoda input {
  width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex-shrink: 0;
  accent-color: var(--granat);
}
.pole-zgoda label { font-size: var(--t-xs); font-weight: 400; color: var(--tekst-drugi); line-height: 1.5; margin: 0; }

.formularz-karta {
  padding: var(--s-5);
  background: var(--tlo-karta);
  border: 1px solid var(--obramowanie);
  border-radius: var(--r-lg);
}
@media (min-width: 600px) { .formularz-karta { padding: var(--s-6); } }

/* Newsletter */
.newsletter { background: var(--granat); color: var(--tekst-na-ciemnym); }
.newsletter h2 { color: #fff; }
.newsletter p { color: var(--tekst-na-ciemnym-drugi); }
.newsletter-formularz { display: grid; gap: var(--s-3); }
.newsletter-formularz input {
  padding: 0.8125rem var(--s-4);
  font-family: inherit; font-size: var(--t-base);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--r-pelny);
  background: rgba(255,255,255,0.1); color: #fff;
}
.newsletter-formularz input::placeholder { color: rgba(233,237,247,0.65); }
.newsletter-formularz input:focus { background: rgba(255,255,255,0.16); border-color: #fff; }
.newsletter-zgoda { font-size: var(--t-xs); color: var(--tekst-na-ciemnym-drugi); }
.newsletter-zgoda a { color: var(--akcent); }
@media (min-width: 600px) {
  .newsletter-formularz { grid-template-columns: 1fr auto; }
}

/* ==========================================================================
   20. Stopka
   ========================================================================== */

.stopka {
  background: var(--granat);
  color: var(--tekst-na-ciemnym-drugi);
  padding-block: var(--s-7) var(--s-5);
  font-size: var(--t-sm);
}
.stopka-siatka { display: grid; gap: var(--s-6); margin-bottom: var(--s-6); }
@media (min-width: 700px) { .stopka-siatka { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-5); } }

.stopka h2 {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; margin-bottom: var(--s-4);
}
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { margin-bottom: var(--s-2); }
.stopka a { color: var(--tekst-na-ciemnym-drugi); text-decoration: none; }
.stopka a:hover { color: #fff; text-decoration: underline; }
.stopka p { color: var(--tekst-na-ciemnym-drugi); }

.stopka-marka .logo-tekst { color: #fff; }
/* Logo klientki ma ciemne linie na bieli, wiec na granatowej stopce dostaje
   wlasne biale tlo. Wysokosc stala, szerokosc z proporcji - inaczej obraz
   65x36 zostalby zdeformowany do kwadratu. */
.stopka-marka img {
  width: auto; height: 44px;
  background: #fff; border-radius: var(--r-sm);
  padding: var(--s-2);
}
.stopka-marka .logo-tekst { font-size: 1.125rem; }

.stopka-social { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.stopka-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.2); border-radius: var(--r-pelny);
  color: var(--tekst-na-ciemnym);
}
.stopka-social a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.stopka-social svg { width: 18px; height: 18px; }

.stopka-dol {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: var(--t-xs);
}

/* ==========================================================================
   21. Strona 404 i strony tekstowe
   ========================================================================== */

.strona-404 { text-align: center; padding-block: var(--s-9); }
.strona-404 .kod {
  font-size: clamp(4rem, 3rem + 8vw, 8rem); font-weight: 800;
  line-height: 1; letter-spacing: -0.05em; color: var(--akcent);
  margin-bottom: var(--s-4);
}
.strona-404 p { margin-inline: auto; }
.strona-404 .przyciski-rzad { justify-content: center; }

.strona-tekstowa { max-width: var(--szer-tekst); }
.strona-tekstowa h2 { margin-top: var(--s-6); font-size: var(--t-h3); }
.strona-tekstowa h3 { margin-top: var(--s-5); font-size: var(--t-h4); }
.strona-tekstowa ol, .strona-tekstowa ul { margin-bottom: var(--s-4); }

/* ==========================================================================
   22. Elementy pomocnicze
   ========================================================================== */

.uwaga {
  padding: var(--s-4);
  background: #FDF6E7;
  border-left: 3px solid var(--akcent);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
}
.uwaga p:last-child { margin-bottom: 0; }

.obraz-ramka { border-radius: var(--r-lg); box-shadow: var(--cien-md); overflow: hidden; }
.obraz-ramka img { width: 100%; }

/* Pas panoramiczny: kadr 3:2 przycinany do szerokiego paska. Uzywany tam,
   gdzie zdjecie ma byc akcentem, a nie glownym elementem sekcji. */
.obraz-panorama img {
  width: 100%;
  aspect-ratio: 2.6 / 1;
  object-fit: cover;
  object-position: center 42%;
}
@media (max-width: 599px) {
  .obraz-panorama img { aspect-ratio: 3 / 2; }
}

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

/* ==========================================================================
   23. Animacje
   ========================================================================== */

/* Pojawianie sie przy scrollu - klasa dodawana przez JS.
   Bez JS elementy sa po prostu widoczne (progressive enhancement). */
.js .odslon {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.js .odslon.widoczny { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .odslon { opacity: 1; transform: none; }
  .przycisk:hover { transform: none; }
  .karta--klikalna:hover, .kafel-sciezki:hover { transform: none; }
}