/* sections/course_schedule.php — terminarz kursu.
   Wszystkie kolory, promienie, cienie i czasy przejść pochodzą z tokenów
   --ds-* (assets/css/design-system.css). Jedyne wpisane z ręki wartości to
   rozmiary geometrii tej sekcji (siatka 4px) i pierścień inset kafla daty
   rgba(19,26,43,.06) — ten sam, którym design system obwodzi .icon-tile.

   Rozmiary tekstu w większości niosą klasy design systemu (.text-heading-1,
   .text-eyebrow, .text-body-sm, .text-caption). Font-size ustawiamy tylko
   tam, gdzie projekt sekcji świadomie schodzi z siatki DS (nazwa grupy 15.5px,
   alert 14px, wiersz lekcji) — patrz CLAUDE.md → "Klasy CSS", akapit
   o nadpisaniach lokalnych.

   Akordeon miesięcy ma własny chrom: Bootstrapowy .accordion wymaga JS i innej
   struktury niż natywne <details>, a design system nie ma jeszcze atomu
   akordeonu (ten sam powód co w course_content.css).

   Mobile-first: baza 360–430px, desktop od 1024px. */

/* Tło pełnej szerokości: ciepły kanwas siedzi na <section>, a treść trzyma
   .container-ms (bez płyty .slab, więc bez promienia i bocznych marginesów).
   Włosowe krawędzie odcinają ciepłe tło od białych sąsiadów. */
.csch-section {
  background-color: var(--ds-color-canvas-warm);
  border-block: 1px solid var(--ds-color-hairline);
  padding: 32px 0 34px;
}

.csch {
  display: grid;
  grid-template-columns: 1fr;
}

/* Na mobile aside znika jako pudełko — jego dzieci wchodzą wprost do siatki
   sekcji, dzięki czemu CTA ląduje POD terminarzem, a nie nad nim. */
.csch-aside { display: contents; }
.csch-intro { order: 1; }
.csch-schedule { order: 2; }
.csch-cta { order: 3; margin-top: 22px; }

.csch-eyebrow { color: var(--ds-color-primary-ink); margin: 0; }
.csch-title { margin: 8px 0 10px; }
.csch-lead { margin: 0 0 14px; color: var(--ds-color-ink-secondary); }

/* ── Alert o przejściu między grupami ── jedyny zielony element sekcji ── */
.csch-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-color-success-tint);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-color-ink-secondary);
}
.csch-note-mark {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  border-radius: var(--ds-radius-full);
  display: grid;
  place-items: center;
  background-color: var(--ds-color-canvas);
  color: var(--ds-color-success-ink);
}
.csch-note-mark .csch-ico { width: 13px; height: 13px; }

/* ── Karty wyboru grupy ── natywne radio + label, radio ukryte wizualnie ── */
.csch-groups { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; }
.csch-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background-color: var(--ds-color-canvas);
  box-shadow: var(--ds-shadow-sm);
  /* outline zamiast border: obwódka nie dokłada się do szerokości karty, więc
     przejście 1px → 2px przy zaznaczeniu nie przesuwa treści w środku. */
  outline: 1px solid var(--ds-color-hairline);
  outline-offset: -1.5px;
  cursor: pointer;
  transition: background-color var(--ds-duration-base) var(--ds-ease-out-soft),
              box-shadow var(--ds-duration-base) var(--ds-ease-out-soft);
}
.csch-group-input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Stan zaznaczenia idzie dwoma drogami: :has() dla przeglądarek, które je
   znają, i atrybut data-checked ustawiany przez JS — fallback dla starszych
   silników (CLAUDE.md → "Stabilność"). */
.csch-group[data-checked="true"],
.csch-group:has(.csch-group-input:checked) {
  background-color: var(--ds-color-primary-tint);
  box-shadow: none;
  outline: 2px solid var(--ds-color-primary);
}
.csch-group:has(.csch-group-input:focus-visible) { box-shadow: var(--ds-shadow-ring-focus); }

.csch-group-check {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--ds-radius-full);
  display: grid;
  place-items: center;
  background-color: var(--ds-color-canvas);
  box-shadow: inset 0 0 0 1.5px var(--ds-color-hairline-cool);
  color: var(--ds-color-on-primary);
}
.csch-group-check .csch-ico { opacity: 0; transition: opacity var(--ds-duration-fast) var(--ds-ease-out-soft); }
.csch-group[data-checked="true"] .csch-group-check,
.csch-group:has(.csch-group-input:checked) .csch-group-check {
  background-color: var(--ds-color-primary);
  box-shadow: inset 0 0 0 1.5px var(--ds-color-primary);
}
.csch-group[data-checked="true"] .csch-group-check .csch-ico,
.csch-group:has(.csch-group-input:checked) .csch-group-check .csch-ico { opacity: 1; }

.csch-group-text { flex: 1; min-width: 0; }
.csch-group-name {
  display: block;
  font-family: var(--ds-font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-color-ink);
}
.csch-group-when { display: block; margin-top: 1px; font-size: 14px; color: var(--ds-color-ink-secondary); }
.csch-group-start { flex: none; text-align: right; }
.csch-group-start-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-color-ink-muted);
}
.csch-group-start-value {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ds-color-ink);
}

/* ── Nagłówek listy terminów ── */
.csch-schedule-head { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.csch-schedule-title { margin: 0; color: var(--ds-color-ink-secondary); }
.csch-schedule-head::after { content: ""; flex: 1; height: 1px; background-color: var(--ds-color-hairline); }
/* Podpowiedź o klikaniu jest bez sensu na telefonie (nie ma kursora) — wraca
   dopiero na desktopie. */
.csch-hint { display: none; margin: 0; color: var(--ds-color-ink-muted); }

/* ── Akordeon miesięcy ── */
.csch-months { display: flex; flex-direction: column; gap: 10px; }
.csch-months[hidden] { display: none; }

.csch-month {
  border: 1px solid var(--ds-color-hairline);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-color-canvas);
  overflow: hidden;
  transition: background-color var(--ds-duration-base) var(--ds-ease-out-soft);
}
.csch-month[open] { background-color: var(--ds-color-canvas-warm); }
.csch-month-trig {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--ds-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ds-color-ink);
}
.csch-month-trig::-webkit-details-marker { display: none; }
.csch-month-trig::marker { content: ""; }
.csch-month-trig:focus-visible { outline: 2px solid var(--ds-color-primary); outline-offset: -4px; border-radius: var(--ds-radius-md); }
.csch-month-label { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csch-month-dot { width: 8px; height: 8px; flex: none; border-radius: var(--ds-radius-full); background-color: var(--subj, var(--ds-color-primary)); }
.csch-month-meta { display: flex; align-items: center; gap: 10px; flex: none; color: var(--ds-color-primary); }
/* Licznik lekcji jest mniejszy niż domyślny .badge-count — w wierszu miesiąca
   stoi obok nazwy, nie samodzielnie. */
.csch-month-count { padding: 4px 9px; }
.csch-chev { flex: none; transition: transform var(--ds-duration-base) var(--ds-ease-out-soft); }
.csch-month[open] .csch-chev { transform: rotate(180deg); }

/* Panel rozwija się siatką 0fr → 1fr, więc animuje się sama wysokość ścieżki
   grida (bez skoków layoutu i bez animowania height). */
.csch-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ds-ease-out-soft); }
.csch-month[open] .csch-panel { grid-template-rows: 1fr; }
.csch-panel > div { overflow: hidden; }

.csch-lessons { list-style: none; margin: 0; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.csch-lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ds-color-hairline);
  border-radius: 14px;
  background-color: var(--ds-color-canvas);
}
.csch-date {
  width: 46px;
  flex: none;
  padding: 6px 0;
  text-align: center;
  border-radius: 10px;
  background-color: var(--subj-tint, var(--ds-color-primary-tint));
  color: var(--subj-deep, var(--ds-color-primary-ink));
  /* Jasny tint rozpływa się na białej karcie — pierścień inset go obrysowuje,
     tak samo jak w .icon-tile z design systemu. */
  box-shadow: inset 0 0 0 1px rgba(19, 26, 43, 0.06);
}
.csch-date-day { display: block; font-family: var(--ds-font-display); font-size: 16px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.csch-date-mon { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.csch-lesson-body { flex: 1; min-width: 0; }
.csch-lesson-name { display: block; font-family: var(--ds-font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--ds-color-ink); }
.csch-lesson-title { display: block; margin-top: 1px; font-size: 13px; color: var(--ds-color-ink-muted); }

.csch-cta-foot { margin: 10px 0 0; text-align: center; color: var(--ds-color-ink-muted); }

/* ── Desktop od 1024px ──────────────────────────────────────────────────
   Lewa kolumna 400px z decyzją (przyklejona przy scrollu), prawa z terminami
   w jednej kolumnie — wybór grupy i CTA zostają w kadrze podczas czytania
   terminów. */
@media (min-width: 1024px) {
  .csch-section { padding: 56px 0; }
  .csch {
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
  /* 24px odstępu od góry kadru, ale liczone od dołu przyklejonego nagłówka
     strony (.hdr-main ma 68px od 1024px) — inaczej H2 kolumny decyzji chowa
     się pod paskiem nawigacji przy scrollu. */
  .csch-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(68px + 24px); }
  .csch-intro, .csch-schedule, .csch-cta { order: 0; }
  .csch-cta { margin-top: 0; }
  /* .btn-block z design systemu wraca od 1024px do naturalnej szerokości —
     tutaj CTA ma wypełnić całą kolumnę decyzji, więc zostaje na pełnej. */
  .csch-cta-btn.btn-block { display: block; width: 100%; }
  .csch-title { margin: 0 0 10px; }
  .csch-lead { font-size: 15.5px; line-height: 1.6; margin-bottom: 16px; }
  .csch-note { gap: 12px; padding: 14px 16px; margin-bottom: 16px; font-size: 15px; }
  .csch-note-mark { width: 24px; height: 24px; }
  .csch-note-mark .csch-ico { width: 14px; height: 14px; }
  .csch-group { padding: 16px; gap: 14px; }
  .csch-group-name { font-size: 16px; }
  .csch-group-when { font-size: 14px; margin-top: 2px; }
  .csch-group-start-value { font-size: 14px; }
  .csch-schedule-head { margin: 0 0 16px; justify-content: space-between; }
  .csch-schedule-head::after { content: none; }
  .csch-hint { display: block; }
  .csch-months { gap: 12px; }
  .csch-lesson { gap: 14px; padding: 10px 14px; }
  .csch-date { width: 48px; }
  .csch-date-day { font-size: 17px; }
  .csch-lesson-name { font-size: 15px; }
  .csch-lesson-title { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .csch *, .csch *::before, .csch *::after { transition-duration: 0.01ms !important; }
}