/* ---------- Nawigacja sekcji lektury ----------
   Jeden markup (<details>) obsluguje dwa uklady:
   desktop = poziomy pasek zakladek, mobile = lista rozwijana.
   Na desktopie <details> jest "rozbrojony": summary schowany, a lista
   pokazana niezaleznie od atrybutu open. */
.lecture-tabs{
  display: block;
  margin: 0 0 4px;
}
/* <details> bez atrybutu 'open' ukrywa wszystko poza <summary> - i robi to
   na poziomie, ktorego display na dziecku nie przebija. Wymuszamy wiec
   widocznosc samej listy, zeby na desktopie byla zwyklym paskiem zakladek. */
.lecture-tabs > .lecture-tabs__list{
  display: flex !important;
  content-visibility: visible;
}
/* Rezerwuje miejsce po menu dopiero, gdy jest ono przypiete (patrz @media). */
.lecture-tabs__slot{ display: none; }
.lecture-tabs__summary{
  display: none;
}
.lecture-tabs__list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

/* Pigulki obok siebie: aktywna wypelniona, reszta obrysowana.
   Wypelnienie (a nie sama kreska pod spodem) od razu mowi, gdzie jestem. */
.lecture-tabs__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.2;
  color: #5b6472;
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #e3e5e9;
  border-radius: 999px;
  transition: color .15s ease, background-color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
.lecture-tabs__item:hover{
  color: var(--primary, #FF6A59);
  border-color: var(--primary, #FF6A59);
  background: var(--rgba-primary-1, rgba(255,106,89,.08));
}

.lecture-tabs__item.is-active{
  color: #fff;
  font-weight: 600;
  background: var(--primary, #FF6A59);
  border-color: var(--primary, #FF6A59);
  box-shadow: 0 2px 8px rgba(255,106,89,.28);
  pointer-events: none;
}

/* Brak wariantu: widoczny, ale nieklikalny - komplet pozycji jest wszedzie
   taki sam, zeby uklad nie skakal miedzy lekturami. */
.lecture-tabs__item.is-disabled{
  color: #b6bcc4;
  background: #f6f7f9;
  border-color: #eceef1;
  border-style: dashed;
  cursor: not-allowed;
  pointer-events: auto;   /* zeby title= dalo sie pokazac */
}
.lecture-tabs__item.is-disabled:hover{
  color: #b6bcc4;
  background: #f6f7f9;
  border-color: #eceef1;
}

/* ---------- Pigulki akcji (CTA) ----------
   Layout w CSS, a nie w utility d-flex/gap-2/flex-wrap - te maja ta sama
   specyficznosc co .quick-links i nadpisywalyby siatke mobilna. */
.quick-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.quick-links a{ text-decoration: none; }

/* Jedno glowne dzialanie prowadzi wzrok; reszta to zwykle linki. */
.quick-links .btn-primary-cta{
  padding: 9px 18px;
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary, #FF6A59);
  border: 1px solid var(--primary, #FF6A59);
  border-radius: 10px;
  transition: filter .15s ease, box-shadow .15s ease;
}
.quick-links .btn-primary-cta:hover{
  color: #fff;
  filter: brightness(.94);
  box-shadow: 0 4px 12px rgba(255,106,89,.28);
}
.quick-links .link-cta{
  font-size: .9rem;
  font-weight: 500;
  color: var(--primary, #FF6A59);
  border-bottom: 1px solid transparent;
}
.quick-links .link-cta:hover{
  color: var(--primary, #FF6A59);
  border-bottom-color: currentColor;
}

/* ---------- Panel "W skrocie" (kolumna boczna) ---------- */
.facts-panel .facts-links{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e3e5e9;
}
.facts-panel .facts-links a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  color: var(--title, #374557);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
}
.facts-panel .facts-links a:hover{ color: var(--primary, #FF6A59); }
.facts-panel .facts-links .count{
  flex: none;
  min-width: 26px;
  padding: 1px 8px;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  color: var(--primary, #FF6A59);
  background: var(--rgba-primary-1, rgba(255,106,89,.12));
  border-radius: 20px;
}

/* Wersja mobilna spisu tresci (zwijana) */
.toc-mobile{ display: none; }
@media (max-width: 991.98px) {
  .toc-mobile:not([hidden]) { display: block; }
}
.toc-mobile summary{
  cursor: pointer;
  font-size: .8rem;
  font-weight: 700;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.toc-mobile summary::marker{ color: var(--primary, #FF6A59); }

/* Zwezenie strumienia tekstu do ~68 znakow w linii.
   Tresc z CMS wchodzi jako bezposrednie dzieci <article>. */
.card-fonts article > p,
.card-fonts article > ul,
.card-fonts article > ol,
.card-fonts article > h3,
.card-fonts article > h4,
.card-fonts article > blockquote{
  max-width: 68ch;
}

/* ---------- Blok koncowy: CTA + nawigacja miedzy lekturami ---------- */
.article-cta{
  max-width: 68ch;
  margin-top: 40px;
  padding: 20px 24px;
  background: #f4f5f9;
  border: 1px solid #e3e5e9;
  border-radius: 12px;
}
.article-cta__title{
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--title, #374557);
  margin-bottom: 4px;
}
.article-cta__text{
  font-size: .92rem;
  color: #6c757d;
  margin-bottom: 14px;
}

.lecture-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 68ch;
  margin-top: 24px;
}
.lecture-nav a{
  flex: 1 1 240px;
  display: block;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lecture-nav a:hover{
  border-color: var(--primary, #FF6A59);
  box-shadow: 0 4px 12px rgba(23,28,38,.08);
}
.lecture-nav .nav-dir{
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 2px;
}
.lecture-nav .nav-title{
  color: var(--title, #374557);
  font-weight: 600;
  line-height: 1.35;
}
.lecture-nav .nav-next{ text-align: right; }

/* ---------- Fiszki w siatce z kolumna boczna ---------- */
/* Karta centruje sie wzgledem lewej kolumny, nie calej karty strony. */
.article-grid .flashcard,
.article-grid .flashcard-progress{
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Responsywnosc ---------- */

@media (max-width: 575.98px){
  .lecture-nav .nav-next{ text-align: left; }

  /* Padding doliczal sie do szerokosci (brak box-sizing), wiec ramki
     wystawaly poza karte na waskim ekranie. */
  .article-cta{
    box-sizing: border-box;
    padding: 16px 14px;
  }

  /* flex-basis 240px przy ~300px w srodku karty wymusza dwa ciasne
     kafelki - na telefonie maja isc jeden pod drugim. */
  .lecture-nav a{ flex: 1 1 100%; }

  /* Nazwa sekcji stoi juz w summary listy rozwijanej tuz ponizej - podtytul
     powtarzalby ja co do slowa. Zostaje w DOM (SEO, czytniki ekranu),
     znika tylko wizualnie. */
  .question_sub,
  .flashcards-subtitle{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* --- Menu sekcji przypiete do gory ---
     position:sticky wymaga, by ZADEN przodek nie mial overflow innego niz
     visible ani narzuconej wysokosci - w tym motywie takich przodkow jest
     kilkanascie (#main-wrapper, .card{height:calc()}, html{overflow-x}),
     a kazda naprawa odslaniala kolejnego. Dlatego menu jest 'fixed':
     pozycjonuje sie wzgledem okna i ignoruje cale drzewo przodkow.
     Przelaczanie robi JS, dokladajac .is-pinned po przewinieciu za pierwotne
     miejsce menu; .lecture-tabs__slot trzyma wtedy wysokosc, zeby tresc
     nie podskoczyla. */

  /* Nawigacja sekcji: lista rozwijana zamiast paska.
     Cztery etykiety nie mieszcza sie w jednym rzedzie (~470px przy ~300px
     dostepnych), a siatka 2x2 rozpadala sie wizualnie na luzne kreski.
     <details> zajmuje jedna linie i pokazuje, w ktorej sekcji jestem. */
  .lecture-tabs{
    margin-bottom: 16px;
    background: #fff;   /* nieprzezroczyste - tresc nie przeswituje pod spodem */
    border: 1px solid #e3e5e9;
    border-radius: 10px;
  }
  /* W stanie przyklejonym delikatny cien oddziela menu od tresci. */
  .lecture-tabs:not([open]){
    box-shadow: 0 2px 8px rgba(23,28,38,.06);
  }
  .lecture-tabs[open]{
    border-color: #d7dade;
    box-shadow: 0 4px 14px rgba(23,28,38,.07);
  }
  .lecture-tabs__summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 6px 12px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--title, #374557);
    cursor: pointer;
    list-style: none;      /* chowa domyslny trojkat */
  }
  .lecture-tabs__summary::-webkit-details-marker{ display: none; }
  .lecture-tabs__summary::after{
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid #9aa0a8;
    border-bottom: 2px solid #9aa0a8;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
  }
  .lecture-tabs[open] .lecture-tabs__summary::after{
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  .lecture-tabs__current{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Na mobile lista nalezy do rozwijanego menu: widoczna dopiero po otwarciu.
     !important przebija wymuszenie z wersji desktopowej. */
  .lecture-tabs > .lecture-tabs__list{
    display: none !important;
  }
  .lecture-tabs[open] > .lecture-tabs__list{
    display: block !important;
    border-top: 1px solid #eceef1;
    border-bottom: 0;
    padding: 4px 0;
  }
  /* W liscie rozwijanej pozycje sa plaskimi wierszami, nie pigulkami -
     zdejmujemy obrys, zaokraglenie i tlo z wersji desktopowej. */
  .lecture-tabs__item{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 38px;
    padding: 6px 12px;
    font-size: .88rem;
    white-space: normal;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .lecture-tabs__item:hover{
    background: none;
    border: 0;
  }
  .lecture-tabs__item.is-active{
    color: var(--primary, #FF6A59);
    background: var(--rgba-primary-1, rgba(255,106,89,.10));
    box-shadow: none;
  }
  .lecture-tabs__item.is-disabled,
  .lecture-tabs__item.is-disabled:hover{
    background: none;
    border: 0;
  }

  /* Slot rezerwuje miejsce po wyjeciu menu z ukladu - bez tego tresc
     podskakuje o jego wysokosc w momencie przypiecia. */
  .lecture-tabs__slot.is-active{ display: block; }


  .lecture-tabs.is-pinned{
    position: fixed;
    /* Zatrzymuje sie POD paskiem strony, nie przy krawedzi okna.
       Wysokosc paska mierzy JS i podaje ja w --tabs-offset, bo motyw zmienia
       ja na kilku progach (6.25rem / 5.5rem / 5rem). */
    top: var(--tabs-offset, 8px);
    /* Menu jest na czas przypiecia przenoszone do <body> (patrz JS), wiec
       porownuje sie juz bezposrednio z paskiem strony, a nie jest uwiezione
       w kontekscie warstw .content-body{z-index:0}.
       Mobilny pasek .m_nav-header ma position:fixed i z-index:1000, wiec
       menu musi byc PONIZEJ tej wartosci - inaczej przy rownych warstwach
       wygrywa pozniejszy w DOM i menu przykrywa logo z hamburgerem. */
    z-index: 999;
    margin-bottom: 0;
    box-shadow: 0 4px 14px rgba(23,28,38,.12);
  }

  /* CTA: glowny przycisk pelnej szerokosci, link pod nim. */
  .quick-links{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .quick-links .btn-primary-cta{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    text-align: center;
  }
  .quick-links .link-cta{
    align-self: flex-start;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* Event plans: numbered steps, scoped to this section only. */
.lecture-reading .lecture-events ol {
  list-style: decimal outside;
  padding-inline-start: 0;
  margin: 0 0 24px;
}
.lecture-reading .lecture-events ol > li {
  display: list-item;
  list-style-type: decimal;
  position: relative;
  padding: 14px 16px 14px 62px;
  margin: 0 0 10px;
  min-height: 60px;
  box-sizing: border-box;
  border: 1px solid #e3eaf1;
  border-radius: 10px;
  background: #f5f8fb;
  color: #374557;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.lecture-reading .lecture-events ol > li::marker {
  content: '';
}
.lecture-reading .lecture-events ol > li::before {
  content: counter(list-item);
  position: absolute;
  inset-inline-start: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #264c6a;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lecture-reading .lecture-events ol > li:last-child { margin-bottom: 0; }
.lecture-reading .lecture-events li > p { margin: 0; }
.lecture-reading .lecture-events li > p + p { margin-top: 8px; }
.lecture-reading .lecture-events li > ol { margin-top: 8px; margin-bottom: 0; }
@media (max-width: 575.98px) {
  .lecture-reading .lecture-events ol > li { padding: 12px 12px 12px 50px; min-height: 52px; }
  .lecture-reading .lecture-events ol > li::before { inset-inline-start: 10px; top: 13px; width: 28px; height: 28px; font-size: 13px; }
}

/* Detailed summary: compact header and quiet reading navigation. */
.page-titles.lecture-reading-breadcrumb {
  padding: 0; margin: 0 auto 18px; background: transparent;
  box-shadow: none; border: 0; max-width: 1200px;
}
.lecture-reading-breadcrumb .breadcrumb { font-size: 13px; flex-wrap: wrap; }
.card.lecture-reading { max-width: 1200px; margin-inline: auto; border: 1px solid #dbe4ee; border-radius: 16px; box-shadow: 0 4px 18px #203e5510; }
.lecture-reading > .card-body { padding: 28px; }
.lecture-reading header h1 { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; color: #203e55; margin: 0 0 14px; }
.lecture-reading__subtitle { display: block; font-size: .65em; font-weight: 500; margin-top: 8px; color: #50677f; }
.lecture-reading .date-added { color: #50677f; font-size: 13px; }
.lecture-reading header .lecture { font-size: 14px; margin-bottom: 8px; }
.lecture-tabs--reading .lecture-tabs__item { border-radius: 8px; color: #284b69; border-color: #dbe4ee; background: #f5f8fb; }
.lecture-tabs--reading .lecture-tabs__item.is-active { color: #fff; background: #264c6a; border-color: #264c6a; box-shadow: none; }
.lecture-tabs--reading .lecture-tabs__item:not(.is-disabled):hover { border-color: #264c6a; }
.lecture-tabs--reading .lecture-tabs__item.is-disabled { color: #7a8795; background: #f6f7f9; }
.lecture-tabs--reading .lecture-tabs__summary { color: #264c6a; background: #f0f5fa; }
.lecture-reading article h3, .lecture-reading article h4 { scroll-margin-top: 150px; }
.lecture-reading .toc-mobile summary { font-size: 14px; text-transform: none; letter-spacing: 0; color: #264c6a; padding: 5px 0; }
.lecture-reading--flashcards .flashcard { margin-top: 16px; border-color: #dbe4ee; box-shadow: 0 4px 18px #203e5510; }
.lecture-reading--flashcards .controls { flex-wrap: wrap; }
.lecture-reading--flashcards .controls .button { color: #264c6a; border-color: #264c6a; }
.lecture-reading--flashcards .controls .button-primary,
.lecture-reading--flashcards .controls .button:hover { background: #264c6a; color: #fff; }
.lecture-reading--flashcards .flashcard-progress .bar span { background: #264c6a; }
.lecture-reading--flashcards .flashcard .face-label { color: #50677f; }
@media (max-width: 575.98px) {
  .page-titles.lecture-reading-breadcrumb { margin-bottom: 14px; }
  .lecture-reading > .card-body { padding: 18px 16px; }
  .lecture-reading .article-grid { gap: 24px; }
  .lecture-tabs--reading .lecture-tabs__summary { min-height: 44px; }
}