@charset "UTF-8";

/* ==========================================================================
   AKADEMIA SMARTSIDE — arkusz stylów
   --------------------------------------------------------------------------
   Spis treści:
     1. Zmienne brandowe        ← TU zmieniasz kolory i czcionki całej strony
     2. Reset i podstawy
     3. Typografia
     4. Układ i kontenery
     5. Dostępność (skip link, focus)
     6. Nagłówek i nawigacja
     7. Sekcja powitalna (hero)
     8. Sekcje treści
     9. Karty
    10. Przyciski
    11. Formularze (przygotowane pod Etap 3)
    12. Stopka
    13. Pomocnicze
    14. Widok mobilny
    15. Ograniczenie animacji
   ========================================================================== */


/* ==========================================================================
   1. ZMIENNE BRANDOWE
   --------------------------------------------------------------------------
   Kolory pobrane z żywej strony smartside.pl (motyw TheGem), żeby Akademia
   wyglądała jak część tej samej marki.

   ⚠ ZASADA DOSTĘPNOŚCI, KTÓREJ NIE WOLNO ZŁAMAĆ:
      Firmowy żółty (#FCB813) na białym tle daje kontrast 1.75:1 — czyli
      jest NIECZYTELNY i łamie WCAG AA (wymagane 4.5:1).
      Dlatego żółty służy WYŁĄCZNIE jako:
        • tło przycisku z ciemnym napisem  (kontrast 9.7:1 — bardzo dobry),
        • akcent na ciemnym tle            (kontrast 8.9:1 — bardzo dobry),
        • element graficzny bez tekstu.
      Do tekstu akcentowanego na jasnym tle jest --c-accent-ink (6.65:1).
   ========================================================================== */

:root {
    /* --- Kolory marki ---------------------------------------------------- */
    --c-accent:        #FCB813;  /* firmowy żółty — tła przycisków i akcenty   */
    --c-accent-hover:  #DEB630;  /* ten sam żółty, przygaszony — stan :hover   */
    --c-accent-ink:    #7A5600;  /* ciemny bursztyn — TEKST akcentowany, 6.65:1 */

    --c-ink:           #1D1D1B;  /* czerń firmowa — tekst główny, 16.9:1       */
    --c-navy:          #212331;  /* granat — nagłówek, hero, stopka            */
    --c-navy-soft:     #2C2F40;  /* granat rozjaśniony — obramowania na ciemnym */

    /* --- Kolory pomocnicze ----------------------------------------------- */
    --c-muted:         #5F727F;  /* podpisy i metadane na jasnym tle, 5.0:1    */
    --c-muted-light:   #D6DDE2;  /* tekst drugorzędny na ciemnym tle, 11.3:1   */
    --c-surface:       #F5F6F7;  /* tło sekcji przeplatanych                   */
    --c-border:        #DFE5E8;  /* obramowania kart i pól formularza          */
    --c-white:         #FFFFFF;

    /* --- Komunikaty ------------------------------------------------------ */
    --c-danger:        #C62828;  /* błędy walidacji, 5.6:1 na białym           */
    --c-danger-bg:     #FDECEA;
    --c-success:       #1B5E20;
    --c-success-bg:    #E8F5E9;

    /* --- Typografia ------------------------------------------------------ */
    --font-heading: "Montserrat", "Trebuchet MS", system-ui, sans-serif;
    --font-body:    "Source Sans 3", "Source Sans Pro", system-ui, "Segoe UI", sans-serif;

    --fs-base: 1.0625rem;   /* 17px — czytelniejsze od domyślnych 16px         */
    --lh-base: 1.7;

    /* --- Wymiary --------------------------------------------------------- */
    --container: 1200px;
    --container-narrow: 760px;   /* dla bloków tekstu — komfortowa długość wiersza */
    --radius: 6px;
    --radius-lg: 10px;

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    /* --- Cienie i przejścia ---------------------------------------------- */
    --shadow-sm: 0 1px 3px rgba(29, 29, 27, .08);
    --shadow-md: 0 8px 24px rgba(29, 29, 27, .12);
    --transition: 160ms ease;

    /* Kolor obwódki fokusu — nadpisywany w sekcjach na ciemnym tle */
    --c-focus: var(--c-ink);
}


/* ==========================================================================
   2. RESET I PODSTAWY
   ========================================================================== */

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

html {
    /* Płynne przewijanie do kotwic, ale z zapasem na przyklejony nagłówek */
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-ink);
    background: var(--c-white);
    /* Zapewnia przyklejenie stopki do dołu przy krótkiej treści */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

ul, ol { padding-left: 1.25rem; }

hr {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: var(--space-md) 0;
}


/* ==========================================================================
   3. TYPOGRAFIA
   --------------------------------------------------------------------------
   Rozmiary skalują się płynnie z szerokością okna (clamp), więc nie potrzeba
   osobnych reguł dla telefonu i monitora.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0 0 var(--space-sm);
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 var(--space-sm); }

a {
    color: var(--c-accent-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color var(--transition);
}
a:hover { color: var(--c-ink); }

strong { font-weight: 600; }

/* Wyróżniona zajawka pod nagłówkiem sekcji */
.lead {
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--c-muted);
    max-width: var(--container-narrow);
}

/* Nadtytuł — mała etykieta nad nagłówkiem sekcji */
.eyebrow {
    display: block;
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-accent-ink);
    margin-bottom: var(--space-xs);
}
/* Na ciemnym tle nadtytuł może być pełnym żółtym — kontrast 8.9:1 */
.section--dark .eyebrow,
.hero .eyebrow { color: var(--c-accent); }


/* ==========================================================================
   4. UKŁAD I KONTENERY
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-sm);
}

.container--narrow { max-width: var(--container-narrow); }

/* Główna treść rozpycha się, żeby stopka trzymała się dołu strony */
main { flex: 1 0 auto; }

/* Uniwersalna siatka — kolumny same się układają, bez klas typu col-md-4 */
.grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}


/* ==========================================================================
   5. DOSTĘPNOŚĆ
   ========================================================================== */

/* Link „przejdź do treści" — widoczny dopiero po naciśnięciu Tab */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-sm);
    z-index: 999;
    padding: .75rem 1.25rem;
    background: var(--c-accent);
    color: var(--c-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: top var(--transition);
}
.skip-link:focus { top: 0; }

/* Wyraźna obwódka fokusu — warunek nawigacji klawiaturą (WCAG 2.4.7).
   Używamy :focus-visible, żeby nie pokazywać obwódki przy kliknięciu myszą. */
:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Treść czytana przez czytniki ekranu, niewidoczna wizualnie */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   6. NAGŁÓWEK I NAWIGACJA
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--c-navy);
    /* Na ciemnym tle obwódka fokusu musi być jasna, inaczej zniknie */
    --c-focus: var(--c-accent);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 4.5rem;
}

/* --- Logo / nazwa serwisu -------------------------------------------- */
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.1;
    color: var(--c-white);
    text-decoration: none;
    white-space: nowrap;
}
.brand:hover { color: var(--c-white); }
.brand__accent { color: var(--c-accent); }
.brand__sub {
    display: block;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-muted-light);
}

/* --- Menu ------------------------------------------------------------- */
.nav__list {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__link {
    display: block;
    padding: .65rem .9rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .875rem;
    color: var(--c-white);
    text-decoration: none;
    border-radius: var(--radius);
    transition: color var(--transition), background var(--transition);
}
.nav__link:hover {
    color: var(--c-accent);
    background: rgba(255, 255, 255, .06);
}

/* Podświetlenie bieżącej podstrony — dodatkowo aria-current w HTML,
   żeby informacja docierała też do czytników ekranu */
.nav__link[aria-current="page"] {
    color: var(--c-accent);
    box-shadow: inset 0 -3px 0 var(--c-accent);
}

/* --- Grupa po prawej: wejście do panelu + hamburger -------------------- */
/*
   Trzyma oba elementy razem, żeby przy zwiniętym menu „Zaloguj się" nie
   wylądowało po drugiej stronie ekranu niż przycisk menu. Na desktopie
   hamburger jest ukryty i grupa zawiera już tylko przycisk panelu.
*/
.header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* Przycisk „hamburger" — ukryty na desktopie, patrz sekcja 14 */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--c-navy-soft);
    border-radius: var(--radius);
    color: var(--c-accent);
    cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: "";
    position: absolute;
    left: 0;
}
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after  { top:  7px; }

/* Krzyżyk po rozwinięciu menu */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Pasek zalogowanego kursanta -------------------------------------- */
/*
   Panel kursanta wczytuje WYŁĄCZNIE ten arkusz — `admin.css` należy do panelu
   właściciela i kursant go nie dostaje. Wcześniej ten pasek korzystał z klas
   `.admin-bar__user` i `.inline-form` zdefiniowanych tylko tam, więc na żywo
   nie miał żadnych stylów: nazwa i linki sklejały się w jedną linię tekstu,
   a przycisk „Wyloguj" spadał pod nie. Stąd własne klasy tutaj — nazwa panelu
   kursanta ma być samowystarczalna, a nie pożyczać z cudzego arkusza.
*/
.panel-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem 1rem;
    font-size: .9rem;
    color: var(--c-muted-light);
}

.panel-nav a {
    color: var(--c-muted-light);
    text-decoration: none;
    white-space: nowrap;
}
.panel-nav a:hover { color: var(--c-accent); }

/* Formularz wylogowania to element paska, nie osobny blok pod nim */
.panel-nav form { display: flex; margin: 0; }

/* Imię kursanta — etykieta, nie odnośnik; nie ma go po co podkreślać */
.panel-nav__who {
    font-weight: 600;
    color: var(--c-white);
    white-space: nowrap;
}


/* ==========================================================================
   7. SEKCJA POWITALNA (HERO)
   ========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--c-navy);
    color: var(--c-white);
    padding-block: clamp(3.5rem, 8vw, 7rem);
    --c-focus: var(--c-accent);
}

/* Delikatna poświata w barwie marki — czysto dekoracyjna */
.hero::after {
    content: "";
    position: absolute;
    top: -30%;
    right: -12%;
    width: 46rem;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(252, 184, 19, .16) 0%, transparent 62%);
    pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; max-width: 46rem; }

.hero h1 { color: var(--c-white); }

/* Wyróżnienie fragmentu nagłówka kolorem marki (na ciemnym tle — bezpieczne) */
.hero h1 em {
    font-style: normal;
    color: var(--c-accent);
}

.hero__lead {
    font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem);
    font-weight: 300;
    color: var(--c-muted-light);
    margin-bottom: var(--space-md);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}


/* ==========================================================================
   8. SEKCJE TREŚCI
   ========================================================================== */

.section { padding-block: clamp(3rem, 6vw, var(--space-xl)); }

.section--surface { background: var(--c-surface); }

.section--dark {
    background: var(--c-navy);
    color: var(--c-white);
    --c-focus: var(--c-accent);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-white); }
.section--dark .lead { color: var(--c-muted-light); }

.section__head { margin-bottom: var(--space-md); }

/* Krótka kreska w kolorze marki pod nagłówkiem sekcji */
.section__head h2::after {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-top: .9rem;
    background: var(--c-accent);
    border-radius: 2px;
}


/* ==========================================================================
   9. KARTY
   ========================================================================== */

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-md) 1.75rem;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

/* Podniesienie karty tylko tam, gdzie prowadzi do podstrony */
.card--link:hover,
.card--link:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.card h3 { margin-bottom: .6rem; }

.card p {
    color: var(--c-muted);
    margin-bottom: var(--space-sm);
}

/* Ostatni element karty dosuwa się do dołu — dzięki temu przyciski
   w sąsiadujących kartach są równo, mimo różnej długości opisów */
.card > :last-child { margin-top: auto; margin-bottom: 0; }

/* Numer/ikona w rogu karty wyróżnika */
.card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-sm);
    background: var(--c-accent);
    color: var(--c-ink);          /* ciemny napis na żółtym — kontrast 9.7:1 */
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: var(--radius);
}

/* Karta obszaru szkoleń — akcent w postaci paska u góry */
.card--topline { border-top: 4px solid var(--c-accent); }

/* Lista cech wewnątrz karty */
.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 var(--space-sm);
    padding: 0;
    list-style: none;
}
.card__meta li {
    padding: .2rem .6rem;
    font-size: .82rem;
    color: var(--c-muted);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 999px;
}


/* ==========================================================================
   10. PRZYCISKI
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* min-height 48px — wygodny cel dotyku na telefonie (WCAG 2.5.5) */
    min-height: 3rem;
    padding: .75rem 1.6rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }

/* Główne wezwanie do działania: żółte tło + ciemny napis */
.btn--primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-ink);
}
.btn--primary:hover {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
    color: var(--c-ink);
}

/* Wariant drugorzędny na ciemnym tle */
.btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
    color: var(--c-white);
}
.btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--c-white);
    color: var(--c-white);
}

/* Kilka przycisków obok siebie — zawijają się na wąskim ekranie zamiast
   wychodzić poza kartę. `admin.css` nadpisuje to wariantem bez zawijania,
   bo w wierszu tabeli przyciski mają zostać w jednej linii. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Mniejszy przycisk — w pasku nagłówka panelu i wszędzie tam, gdzie pełny
   rozmiar przytłacza otoczenie. Ta sama definicja jest w `admin.css`; tutaj
   musi być własna, bo panel kursanta tamtego arkusza nie wczytuje i bez niej
   „Wyloguj" rósł do rozmiaru głównego wezwania do działania. */
.btn--sm {
    min-height: 2.25rem;
    padding: .35rem .8rem;
    font-size: .8rem;
}

/* Wariant drugorzędny na jasnym tle */
.btn--outline {
    background: transparent;
    border-color: var(--c-ink);
    color: var(--c-ink);
}
.btn--outline:hover {
    background: var(--c-ink);
    color: var(--c-white);
}

/* Link ze strzałką — lżejszy od przycisku */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .875rem;
    color: var(--c-accent-ink);
    text-decoration: none;
}
.link-arrow::after {
    content: "→";
    transition: transform var(--transition);
}
.link-arrow:hover { color: var(--c-ink); }
.link-arrow:hover::after { transform: translateX(3px); }


/* ==========================================================================
   11. FORMULARZE  (używane od Etapu 3)
   ========================================================================== */

.form-group { margin-bottom: var(--space-sm); }

.form-group label {
    display: block;
    margin-bottom: .35rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .85rem;
}

/* Gwiazdka przy polach wymaganych — dublowana atrybutem `required` w HTML */
.form-group label .req { color: var(--c-danger); }

.form-control {
    width: 100%;
    min-height: 3rem;
    padding: .7rem .9rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--c-ink);
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:hover { border-color: var(--c-muted); }
.form-control:focus {
    border-color: var(--c-ink);
    box-shadow: 0 0 0 3px rgba(252, 184, 19, .35);
    outline: none;
}

/*
 * Wysokość pola tekstowego wynika z atrybutu `rows`, a nie z arkusza.
 * Wcześniej `min-height: 9rem` nadpisywało `rows="2"` — pole na jedno zdanie
 * rozpychało się na pół ekranu i formularz wyglądał jak zestaw wielkich dziur.
 * Zostaje minimum na dwie linijki, resztę ustala widok.
 */
textarea.form-control { min-height: 4.5rem; resize: vertical; }

/* Stan błędu: kolor + tekst komunikatu. Nigdy sam kolor — informacja
   nie może być przekazywana wyłącznie barwą (WCAG 1.4.1). */
.has-error .form-control { border-color: var(--c-danger); }
.help-block {
    display: block;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--c-danger);
}

.alert {
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
    border-radius: var(--radius);
    border-left: 4px solid;
}
.alert-success { background: var(--c-success-bg); border-color: var(--c-success); color: var(--c-success); }
.alert-danger  { background: var(--c-danger-bg);  border-color: var(--c-danger);  color: var(--c-danger); }

/* Pole-pułapka na roboty spamujące — musi być niewidoczne dla ludzi,
   ale bez `display:none`, bo część botów to wykrywa */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ==========================================================================
   12. STOPKA
   ========================================================================== */

.site-footer {
    flex-shrink: 0;
    background: var(--c-navy);
    color: var(--c-muted-light);
    padding-block: var(--space-lg) var(--space-md);
    --c-focus: var(--c-accent);
}

/*
 * Nagłówki kolumn stopki to ETYKIETY, nie nagłówki dokumentu.
 * Wcześniej były znacznikiem <h2> — czyli w konspekcie strony stały równo
 * z tytułami szkoleń na listingu. Wygląd bez zmian, semantyka naprawiona:
 * konspekt czyta się teraz jak spis treści, a nie jak lista przypadkowa.
 */
.site-footer .footer-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--c-white);
    margin: 0 0 .8rem;
}

.site-footer a {
    color: var(--c-muted-light);
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--c-accent);
    text-decoration: underline;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer li { margin-bottom: .4rem; }

.footer-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* Wiersz prawny — polityka prywatności i ustawienia cookies */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--c-navy-soft);
    font-size: .85rem;
}

/* Przycisk otwierający ustawienia cookies ma wyglądać jak sąsiedni odnośnik —
   ale MUSI zostać przyciskiem: uruchamia akcję, nie prowadzi pod adres. */
.footer-legal__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--c-muted-light);
    text-decoration: none;
    cursor: pointer;
}
.footer-legal__link:hover {
    color: var(--c-accent);
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    font-size: .85rem;
}


/* ==========================================================================
   12b. PODSTRONY OFERTY I KADRY
   --------------------------------------------------------------------------
   Komponenty używane przez /szkolenia i /kadra — treść pochodzi z bazy,
   więc każdy z nich musi wyglądać poprawnie także przy pustych polach.
   ========================================================================== */

/* --- Skrócona wersja sekcji powitalnej na podstronach ------------------- */
.hero--compact { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* --- Ścieżka nawigacji -------------------------------------------------- */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--space-sm);
    font-size: .85rem;
    color: var(--c-muted-light);
}
.breadcrumbs a { color: var(--c-muted-light); }
.breadcrumbs a:hover { color: var(--c-accent); }

/* --- Rozwinięty opis obszaru na stronie kategorii ----------------------- */
/* Węższa kolumna niż siatka kafelków — dłuższy tekst czyta się w ~70 znakach,
   a nie na całej szerokości ekranu. */
.kategoria-intro {
    max-width: var(--container-narrow);
    margin-top: var(--space-md);
}
.kategoria-intro p:last-child { margin-bottom: 0; }

/* --- Filtr kategorii ---------------------------------------------------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: var(--space-sm);
}

.filter-chip {
    display: inline-block;
    /* 44 px wysokości — wygodny cel dotyku na telefonie */
    padding: .6rem 1.05rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .82rem;
    color: var(--c-ink);
    text-decoration: none;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    transition: background var(--transition), border-color var(--transition);
}
.filter-chip:hover {
    background: var(--c-surface);
    border-color: var(--c-muted);
    color: var(--c-ink);
}

/* Stan aktywny niesiony nie tylko kolorem, ale i atrybutem aria-current */
.filter-chip--on {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-ink);
}
.filter-chip--on:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

/* --- Pasek faktów o szkoleniu ------------------------------------------ */
.fact-grid {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    margin: 0;
}

.fact dt {
    font-family: var(--font-heading);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.fact dd {
    margin: .2rem 0 0;
    font-size: 1.05rem;
}

/* --- Układ dwukolumnowy: treść + kolumna boczna ------------------------- */
.two-col {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .two-col { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    /* Kolumna boczna wędruje z użytkownikiem przy długim programie */
    align-self: start;
    position: sticky;
    top: 6rem;
}

/* Przy krótkim ekranie przyklejanie przeszkadza */
@media (max-width: 899px) {
    .sidebar { position: static; }
}

.card--cta { border-top: 4px solid var(--c-accent); }

/* --- Lista punktów programu -------------------------------------------- */
.program-list {
    margin: 0 0 var(--space-md);
    padding: 0;
    list-style: none;
}
.program-list li {
    position: relative;
    padding: .55rem 0 .55rem 1.9rem;
    border-bottom: 1px solid var(--c-border);
}
.program-list li:last-child { border-bottom: 0; }
.program-list li::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: 1.15rem;
    width: .5rem;
    height: .5rem;
    background: var(--c-accent);
    border-radius: 2px;
}

/* --- Grafika w treści --------------------------------------------------- */
.content-image {
    width: 100%;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
}

/* --- Sylwetka trenera --------------------------------------------------- */
.person__photo {
    width: 100%;
    max-width: 12rem;
    aspect-ratio: 1;
    object-fit: cover;
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-lg);
}

/* Zastępnik zdjęcia — inicjały na firmowym żółtym, ciemny tekst = 9.7:1 */
.person__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: var(--space-sm);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--c-ink);
    background: var(--c-accent);
    border-radius: var(--radius-lg);
}

.person__role {
    margin-bottom: var(--space-xs);
    font-weight: 600;
    color: var(--c-accent-ink);
}

/* --- Podpowiedź / tekst drugorzędny ------------------------------------ */
.field-hint {
    display: block;
    margin-top: .25rem;
    font-size: .82rem;
    color: var(--c-muted);
}


/* ==========================================================================
   12c. REFERENCJE KLIENTÓW
   --------------------------------------------------------------------------
   Kafelek referencji jest znacznikiem `figure` z `blockquote` w środku, więc
   trzeba wyzerować domyślne marginesy przeglądarki. Cudzysłów rysujemy jako
   element dekoracyjny (`::before` z `aria-hidden` po stronie znacznika),
   nie jako tekst — czytnik ekranu nie ma czego czytać, a widz widzi cytat.
   ========================================================================== */

.testimonial {
    margin: 0;                    /* figure ma domyślny margines poziomy 40px */
}

.testimonial__quote {
    position: relative;
    margin: 0 0 var(--space-sm);
    padding-top: 2.25rem;
    border: 0;
}

/* Duży cudzysłów w kolorze marki — czysta dekoracja */
.testimonial__quote::before {
    content: "\201E";             /* polski cudzysłów otwierający, u dołu wiersza */
    position: absolute;
    top: -.85rem;
    left: 0;
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
    color: var(--c-accent);
    pointer-events: none;
}

.testimonial__quote p {
    margin: 0;
    color: var(--c-ink);          /* cytat to treść główna, nie metadana */
    font-size: 1.02rem;
}

/* --- Podpis pod cytatem -------------------------------------------------- */
.testimonial__author {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--c-border);
}

.testimonial__who {
    display: flex;
    flex-direction: column;
    /* Podpis bywa długi (nazwa instytucji) — musi się łamać, nie rozpychać */
    min-width: 0;
}
.testimonial__who .field-hint { margin-top: 0; }

/* Logo klienta — dopasowane do wysokości, nigdy rozciągane */
.testimonial__logo {
    flex: 0 0 auto;
    width: auto;
    max-width: 5.5rem;
    max-height: 2.75rem;
    object-fit: contain;
}

/* Zastępnik logo — inicjały na firmowym żółtym, ciemny tekst = 9.7:1 */
.testimonial__initials {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    color: var(--c-ink);
    background: var(--c-accent);
    border-radius: var(--radius);
}

.testimonial__doc { margin: var(--space-sm) 0 0; }

/* Referencje na ciemnej sekcji strony głównej — karta zostaje jasna,
   więc kontrast tekstu w środku nie zmienia się ani o jotę */
.section--dark .testimonial { color: var(--c-ink); }


/* ==========================================================================
   13. POMOCNICZE
   ========================================================================== */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-md { margin-bottom: var(--space-md); }

/* Wyśrodkowany blok tekstu w sekcji */
.stack-center {
    max-width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
}
.stack-center .lead { margin-inline: auto; }
.stack-center h2::after { margin-inline: auto; }


/* ==========================================================================
   14. WIDOK MOBILNY
   ========================================================================== */

@media (max-width: 860px) {

    .nav-toggle { display: inline-flex; }

    /* Menu zwija się do listy rozwijanej pod nagłówkiem */
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--c-navy);
        border-top: 1px solid var(--c-navy-soft);
        box-shadow: var(--shadow-md);
        /* Domyślnie schowane; skrypt zmienia atrybut data-open */
        display: none;
    }
    .nav[data-open="true"] { display: block; }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-xs) var(--space-sm) var(--space-sm);
    }

    .nav__link {
        padding: .9rem .5rem;
        border-bottom: 1px solid var(--c-navy-soft);
        border-radius: 0;
    }
    .nav__list li:last-child .nav__link { border-bottom: 0; }
    .nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--c-accent); }

    .site-header__inner { position: relative; }

    .hero__actions .btn { width: 100%; }
}

/* Bardzo wąskie ekrany — skracamy podpis pod logo */
@media (max-width: 400px) {
    .brand { font-size: 1.05rem; }
    .brand__sub { display: none; }
}


/* ==========================================================================
   15. OGRANICZENIE ANIMACJI
   --------------------------------------------------------------------------
   Respektujemy systemowe ustawienie „ogranicz ruch" (WCAG 2.3.3).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ==========================================================================
   WYDRUK
   ========================================================================== */

@media print {
    .site-header, .site-footer, .skip-link, .hero__actions { display: none; }
    body { color: #000; background: #fff; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}


/* ==========================================================================
   16. PANEL KURSANTA I KURSY ONLINE
   --------------------------------------------------------------------------
   Układ: wąski spis treści po lewej, treść lekcji po prawej. Na telefonie
   spis wskakuje nad treść, bo to on odpowiada na pytanie „gdzie jestem".
   Wszystkie kolory pochodzą ze zmiennych z sekcji 1 — nic nowego.
   ========================================================================== */

/* --- Pasek z tytułem kursu ---------------------------------------------- */
.course-hero {
    background: var(--c-navy);
    color: var(--c-white);
    padding-block: var(--space-md);
    --c-focus: var(--c-accent);
}
.course-hero__title {
    margin: 0;
    color: var(--c-white);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}

/* --- Układ dwukolumnowy -------------------------------------------------- */
.course-layout {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
    align-items: start;
    padding-block: var(--space-md) var(--space-lg);
}

@media (min-width: 1000px) {
    .course-layout { grid-template-columns: 21rem minmax(0, 1fr); }
    .course-side { position: sticky; top: 5.5rem; }
}

/* --- Spis treści --------------------------------------------------------- */
.course-side {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.course-side__body { padding: var(--space-sm) 1.25rem 1.25rem; }

.course-side__progress-label {
    margin-bottom: .4rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .85rem;
}

.course-side__module {
    margin: var(--space-md) 0 .5rem;
    font-size: 1rem;
}
.course-side__module:first-of-type { margin-top: var(--space-sm); }

/* --- Zakładki (Postęp / Opis) -------------------------------------------- */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--c-border);
}

.tabs__item {
    flex: 1;
    padding: .95rem .75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .85rem;
    text-align: center;
    text-decoration: none;
    color: var(--c-muted);
    background: var(--c-surface);
    border-bottom: 3px solid transparent;
}
.tabs__item:hover { color: var(--c-ink); }

.tabs__item--on {
    color: var(--c-ink);
    background: var(--c-white);
    border-bottom-color: var(--c-accent);
}

/* --- Pasek postępu ------------------------------------------------------- */
.progress {
    height: .5rem;
    margin-bottom: .75rem;
    background: var(--c-border);
    border-radius: 999px;
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    background: var(--c-accent);
    border-radius: 999px;
    transition: width var(--transition);
}

/* --- Lista lekcji -------------------------------------------------------- */
.toc { margin: 0; padding: 0; list-style: none; }

.toc__item a {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem .25rem;
    font-size: .92rem;
    color: var(--c-muted);
    text-decoration: none;
    border-radius: var(--radius);
}
.toc__item a:hover { color: var(--c-ink); background: var(--c-surface); }

/* Znacznik stanu lekcji. Sam kolor nie niesie informacji — w HTML obok
   każdej pozycji stoi ukryty tekst „ukończona / bieżąca / nieukończona". */
.toc__mark {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .25rem;
    border: 2px solid var(--c-border);
    border-radius: 50%;
}

.toc__item--done a { color: var(--c-ink); }
.toc__item--done .toc__mark {
    background: var(--c-accent);
    border-color: var(--c-accent);
    /* Ptaszek rysowany obramowaniem — bez pliku graficznego */
    position: relative;
}
.toc__item--done .toc__mark::after {
    content: "";
    position: absolute;
    left: .28rem;
    top: .06rem;
    width: .25rem;
    height: .5rem;
    border: solid var(--c-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.toc__item--current a { color: var(--c-ink); font-weight: 600; }
.toc__item--current .toc__mark {
    border-color: var(--c-accent);
    box-shadow: inset 0 0 0 3px var(--c-accent);
}

/* --- Treść lekcji -------------------------------------------------------- */
.course-main {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
}

.course-main__module {
    margin-bottom: .25rem;
    font-size: .85rem;
    color: var(--c-muted);
}

.course-main__title {
    margin-bottom: var(--space-md);
    font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
}

.lesson-body > :last-child { margin-bottom: 0; }
.lesson-body h2 { font-size: 1.3rem; margin-top: var(--space-md); }
.lesson-body h3 { font-size: 1.1rem; margin-top: var(--space-sm); }
.lesson-body img { border-radius: var(--radius); margin-block: var(--space-sm); }

/* --- Kafelki w treści lekcji --------------------------------------------- */
.tile-grid {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    margin: var(--space-md) 0;
    padding: 0;
    list-style: none;
}

.tile {
    padding: 1.1rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-accent);
    border-radius: var(--radius);
}
.tile__title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
}
.tile__desc {
    display: block;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--c-muted);
}

/* --- Film ---------------------------------------------------------------- */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-md);
    background: var(--c-navy);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Nawigacja między lekcjami ------------------------------------------- */
.lesson-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--c-border);
}
.lesson-nav form { margin: 0; }

/* --- Quiz ---------------------------------------------------------------- */
.quiz-question {
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm) 1.25rem 1.25rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}
.quiz-question legend {
    padding-inline: .4rem;
    font-weight: 600;
}
.quiz-question__no {
    display: block;
    font-family: var(--font-heading);
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-muted);
}

/* Wynik pytania po sprawdzeniu — kolor plus etykieta tekstowa przy odpowiedzi */
.quiz-question--ok { border-color: var(--c-success); background: var(--c-success-bg); }
.quiz-question--fail { border-color: var(--c-danger); background: var(--c-danger-bg); }

.quiz-question__explain {
    margin: .75rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--c-border);
    font-size: .9rem;
}

.quiz-answer {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .45rem .4rem;
    border-radius: var(--radius);
}
.quiz-answer input {
    width: 1.15rem;
    height: 1.15rem;
    margin: .25rem 0 0;
    flex-shrink: 0;
    accent-color: var(--c-accent);
}
.quiz-answer label { cursor: pointer; }

.quiz-answer--correct { background: var(--c-success-bg); }
.quiz-answer--wrong { background: var(--c-danger-bg); }

.quiz-answer__tag {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .45rem;
    font-size: .75rem;
    font-weight: 600;
    background: var(--c-white);
    border: 1px solid currentColor;
    border-radius: 999px;
}
.quiz-answer--correct .quiz-answer__tag { color: var(--c-success); }
.quiz-answer--wrong .quiz-answer__tag { color: var(--c-danger); }

.quiz-result {
    margin-bottom: var(--space-md);
    padding: var(--space-sm) 1.25rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid;
}
.quiz-result--ok { background: var(--c-success-bg); border-color: var(--c-success); }
.quiz-result--fail { background: var(--c-danger-bg); border-color: var(--c-danger); }

.quiz-result__score {
    margin-bottom: .3rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
}
.quiz-result__score span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--c-muted);
}

/* Podpis użytkownika w nagłówku panelu chowamy na wąskim ekranie */
@media (max-width: 560px) {
    .hide-narrow { display: none; }
}


/* ==========================================================================
   17. OBRAZKI W LEKCJI I MIEJSCA NA ZRZUTY
   ========================================================================== */

/* Obrazek wstawiony w treść lekcji Markdownem */
.lesson-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-block: var(--space-md);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

/*
   Ramka „tu ma być zrzut ekranu".
   Celowo rzuca się w oczy — to zadanie do odhaczenia, a nie element designu.
   Widzi ją także kursant: ukryta zniknęłaby z pola widzenia i lekcja
   zostałaby opublikowana z dziurą.
*/
.screen-todo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin: var(--space-md) 0;
    padding: var(--space-md) var(--space-sm);
    text-align: center;
    background: repeating-linear-gradient(
        45deg,
        var(--c-surface),
        var(--c-surface) 10px,
        #FFFDF5 10px,
        #FFFDF5 20px
    );
    border: 2px dashed var(--c-accent);
    border-radius: var(--radius-lg);
}

.screen-todo__label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* Ciemny bursztyn — żółty na jasnym tle byłby nieczytelny (1.75:1) */
    color: var(--c-accent-ink);
}

.screen-todo figcaption {
    max-width: 44ch;
    font-size: .92rem;
    color: var(--c-muted);
}


/* ==========================================================================
   18. ZNACZNIKI STANU I IDENTYFIKATORY
   --------------------------------------------------------------------------
   Używane w panelu właściciela ORAZ w panelu kursanta, więc mieszkają tutaj,
   a nie w admin.css — kursant tamtego arkusza nie wczytuje.

   Zasada: kolor nigdy nie jest jedynym nośnikiem informacji. Obok zawsze
   stoi tekst („Widoczne" / „Ukryte"), bo tego wymaga WCAG 1.4.1.
   ========================================================================== */

.pill {
    display: inline-block;
    padding: .15rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid;
}

.pill--on  { color: var(--c-success); background: var(--c-success-bg); border-color: var(--c-success); }
.pill--off { color: var(--c-muted);   background: var(--c-surface);    border-color: var(--c-border); }

/* Identyfikator kursu — wyróżniony, ale nie krzyczy */
.pill--code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--c-ink);
    background: var(--c-accent);
    border-color: var(--c-accent);
    vertical-align: middle;
}

/* Konto założone, ale czekające na ustawienie hasła przez kursanta.
   Trzeci stan obok „aktywne" i „zablokowane" — nie jest błędem, więc nie jest
   czerwony, ale wymaga działania, więc nie jest też szary jak stan wyłączony. */
.pill--wait {
    color: var(--c-accent-ink);
    background: #FFF8E6;
    border-color: var(--c-accent);
}

/* Znacznik lekcji z niewypełnionymi miejscami na zrzuty */
.pill--todo {
    color: var(--c-accent-ink);
    background: #FFF8E6;
    border-color: var(--c-accent);
}


/* ==========================================================================
   19. ZGODA NA COOKIES
   --------------------------------------------------------------------------
   Okno pojawia się TYLKO wtedy, gdy w konfiguracji jest jakiś skrypt śledzący
   do zablokowania (patrz components/CookieConsent.php). Przy samych ciasteczkach
   niezbędnych nie ma o co pytać i te style po prostu nikomu się nie wyświetlą.

   Element <dialog> daje pułapkę na fokus i warstwę modalną bez ani jednej
   linijki JS — dlatego nie budujemy okna z <div>-ów.
   ========================================================================== */

.cc {
    width: min(560px, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: var(--c-ink);
    background: var(--c-white);
}

.cc::backdrop {
    background: rgba(29, 29, 27, .6);
}

.cc__inner { padding: var(--space-md); }

.cc__title {
    margin: 0 0 var(--space-xs);
    font-size: 1.25rem;
}

.cc__text {
    margin: 0 0 var(--space-sm);
    font-size: .95rem;
}

.cc__list {
    margin: 0 0 var(--space-md);
    padding: 0;
    list-style: none;
}

.cc__item {
    padding: .6rem .8rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.cc__item + .cc__item { margin-top: .5rem; }

.cc__item label {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .92rem;
    cursor: pointer;
}

/* Wyłączone pole „niezbędne" nie udaje klikalnego */
.cc__item input:disabled + span { cursor: default; }

.cc__item input {
    flex-shrink: 0;
    margin-top: .25rem;
}

.cc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: flex-end;
}

/* Na wąskim ekranie przyciski na całą szerokość — trafienie kciukiem */
@media (max-width: 480px) {
    .cc__actions { flex-direction: column-reverse; }
    .cc__actions .btn { width: 100%; text-align: center; }
}


/* Cel lekcji — obietnica „co po niej będziesz umiał”, nad treścią.
   Wyróżniony paskiem, ale bez krzyku: to kontekst, nie ostrzeżenie. */
.lesson-goal {
    margin-bottom: var(--space-md);
    padding: .85rem 1.1rem;
    font-size: 1.02rem;
    color: var(--c-ink);
    background: var(--c-surface);
    border-left: 4px solid var(--c-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}


/* Licznik przy filtrze — ile pozycji kryje się pod daną kategorią.
   Sam filtr (`.filter-chip`) definiuje sekcja 12b. */
.filter-chip__count {
    display: inline-block;
    min-width: 1.35rem;
    margin-left: .3rem;
    padding: 0 .3rem;
    font-size: .75rem;
    font-weight: 400;
    text-align: center;
    color: var(--c-muted);
    background: var(--c-surface);
    border-radius: 999px;
}
.filter-chip--on .filter-chip__count {
    color: var(--c-ink);
    background: rgba(255, 255, 255, .55);
}