/* Program — blok feuer/karta-opisu-produktu (task03.17; punkt wyjścia: makieta K23 / K24, task01.37).
   Wg FeuerDS (stan 2026-09-13): odmiana 1 „Zakładki" = „Program 1" 7:6216 / mobile 7:6364 (pionowe zakładki
   etapów + panel treści; mobile akordeon), odmiana 2 „Kolumny" = „Program 2" 7:6234 / mobile 7:6382 (rząd
   kolumn). Etapy 2 / 3 / 4 / 6 — bloki wewnętrzne feuer/karta-opisu-produktu-pozycja.
   Treść etapu = bloki wewnętrzne w .tresc — typografia A40 treści redakcyjnej (typografia.css motywu), nie
   16/24 co 12 z ramek (decyzja użytkownika 2026-09-25, rejestr spojnosc-designu.md).
   Zakładki / akordeon: js/zakladki.js (tryb domyślny). Etap = jeden element z zakładką i panelem (tak samo
   w edytorze, gdzie etap jest blokiem): desktop — etapy leżą jeden na drugim jako podsiatki całej siatki
   odmiany (zakładka w wierszu swojego etapu, panel obok wszystkich zakładek); poniżej 1024 px zwykły przepływ
   — zakładka → jej panel → następna zakładka (akordeon bez przestawiania kolejności).
   Tablet (640–1023) bez projektu — układ mobile. Wartości px z Figmy zapisane w rem (baza 16). */

.program {
  position: relative;
  isolation: isolate;                     /* znak w tle (z-index -1) nad tłem sekcji, pod treścią */
  overflow: hidden;                       /* znak ucięty dolną krawędzią sekcji jak w ramkach */
  max-width: 90rem;                       /* stop skali z task01.06 — jak inne sekcje */
  margin-inline: auto;
  /* Padding 64/64 — ujednolicenie jak w „Kluczowych informacjach" (ramki desktop 128/128,
     mobile 84/84). Pytanie 32 do projektantki (docs/pytania-otwarte.md), rejestr spojnosc-designu.md. */
  padding-block: var(--odstep-8);
}

/* Znak z logo w tle — „Logo Big" 7:28630 (ikony/logo-duze.svg, kolor #f5f7fb z projektu):
   896×510 od x 426 ramki 1440; w ramkach 152 pod górą H2 (obie odmiany) → 64 + 152 = 216 od góry
   sekcji. Tylko desktop (ramki mobile bez znaku). */
.program::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 26.625rem;                        /* 426 px */
  top: 13.5rem;                           /* 216 px */
  width: 56rem;                           /* 896 px */
  height: 31.875rem;                      /* 510 px */
  background: url("../ikony/logo-duze.svg") 0 0 / contain no-repeat;
}

.program-tytul {
  margin: 0 0 var(--odstep-4);            /* H2 32/44.8 ExtraBold; 32 do etapów */
  font-size: var(--tekst-32);
  line-height: var(--interlinia-32);
  font-weight: var(--waga-najgrubsza);
}

/* ---- Wspólne: nadtytuł „Etap N" i tytuł etapu (obie odmiany) ---- */

.program-etap {
  display: block;
  font-size: var(--tekst-14);
  line-height: 1.375rem;                  /* 14/22 (Figma) */
  font-weight: var(--waga-zwykla);
}

.program-etap-tytul {
  display: block;
  margin: 0;
  font-size: var(--tekst-20);
  line-height: var(--interlinia-20);      /* 20/28 Bold */
  font-weight: var(--waga-gruba);
}

/* ---- Odmiana 1: zakładki 380 (4 kolumny siatki) + panel 792 (8 kolumn) — ramka 7:6216 ----
   Siatka 12 kolumn jak .siatka (siatka.css — bez tej klasy: kolejność arkuszy motywu i bloku nie jest
   pewna, a układ mobile ją nadpisuje). Wiersze: po jednym na zakładkę (maks. 6 etapów; puste mają 0)
   i ostatni elastyczny — panel obejmuje wszystkie, więc nadmiar jego wysokości trafia do ostatniego,
   a zakładki zostają przy swojej treści i stykają się. */

.program-etapy {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto) 1fr;
  column-gap: var(--odstep-4);            /* gutter siatki 32 */
}

/* Etap = podsiatka całej siatki odmiany; etapy leżą jeden na drugim — klik przechodzi przez etap
   do zakładki / panelu pod spodem (widoczny panel jest jeden, zakładki w osobnych wierszach). */
.program-pozycja {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.program .program-etapy > .program-pozycja { pointer-events: none; }   /* ponad pointer-events: auto bloku w edytorze (0,2,0) */

.program-pozycja > * { pointer-events: auto; }

.program-zakladka {
  grid-column: 1 / span 4;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 5.3125rem;                  /* 85 px przy tytule jednowierszowym; dwuwierszowy podnosi zakładkę */
  margin: 0;
  padding: var(--odstep-2);               /* 16 wszędzie */
  border: 0;
  border-bottom: 1px solid var(--kolor-linii);   /* Figma #ccd0da → token linii (decyzja 2026-09-15) */
  background: none;
  color: var(--kolor-tekstu);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.program-pozycja:nth-child(2) > .program-zakladka { grid-row: 2; }
.program-pozycja:nth-child(3) > .program-zakladka { grid-row: 3; }
.program-pozycja:nth-child(4) > .program-zakladka { grid-row: 4; }
.program-pozycja:nth-child(5) > .program-zakladka { grid-row: 5; }
.program-pozycja:nth-child(6) > .program-zakladka { grid-row: 6; }

.program-zakladka[aria-selected="true"] {
  padding-bottom: 0.8125rem;              /* 13 + linia 4 = 17 jak 16 + 1 — obie zakładki tej samej wysokości */
  border-bottom: 4px solid var(--kolor-marki);
}

/* Panel: treść zaczyna się 16 pod górą zakładek (Figma). */
.program-panel {
  grid-column: 5 / -1;
  grid-row: 1 / -1;
  padding-top: var(--odstep-2);
}

/* Edytor: pola zakładki edytowane w miejscu. */
.program-zakladka [contenteditable] { cursor: text; }

/* ---- Odmiana 2: rząd kolumn — ramka 7:6234 ----
   Kolumny równe z gutterem siatki: przy 2 / 3 / 4 / 6 etapach szerokości kol-6 / kol-4 / kol-3 / kol-2. */

.program-rzad {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--odstep-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.program-kolumna {
  display: flex;
  flex-direction: column;
}

.program-kolumna .program-etap { margin-bottom: 0.5rem; }   /* 8 do ramki tytułu (Figma: 26 + 8) */

/* Tytuł + 12, treść, padding dolny 24 + linia marki; flex: 1 — pozycje rzędu jednej wysokości,
   linie w jednej linii (jak w „Dla kogo"). */
.program-kolumna-tresc {
  flex: 1;
  padding-bottom: var(--odstep-3);
  border-bottom: 1px solid var(--kolor-marki);
}

.program-kolumna .program-etap-tytul { margin-bottom: 0.75rem; }

/* Listy treści jak poza rzędem — w elemencie listy (li kolumny) przeglądarka daje liście kółko zamiast kropki. */
.program-kolumna .tresc ul { list-style-type: disc; }
.program-kolumna .tresc li ul { list-style-type: circle; }

/* ---- Tablet i mobile (ramki 7:6364 / 7:6382) ---- */

@media (max-width: 1023px) {
  .program::before { display: none; }

  .program-tytul {
    font-size: var(--tekst-28);           /* 28/39.2 ExtraBold */
    line-height: var(--interlinia-28);
  }

  /* Akordeon: zakładka → jej panel → następna zakładka, zakładki stykają się. */
  .program-etapy,
  .program-pozycja { display: block; }

  /* Panel 27 pod aktywną zakładką, 32 nad kolejnymi (ramka 7:6364); zakładka bezpośrednio
     po panelu ma także linię górną (Figma: „Etap II" góra + dół). */
  .program-panel { padding: 1.6875rem 0 var(--odstep-4); }
  .program-pozycja:has(> [aria-selected="true"]) + .program-pozycja > .program-zakladka { border-top: 1px solid var(--kolor-linii); }

  .program-rzad { grid-auto-flow: row; }   /* kolumny jedna pod drugą, odstęp = gutter 32 */
}