/* Kursy „W przygotowaniu” na stronie glownej i ekrany zgloszen (zgloszenia_http.py).
   Kolory tylko ze zmiennych fundamentu (app-css-01); reguly celuja w klasy `zgl-*`
   i w modyfikatory kafla, zadna w goly znacznik. */

/* Sekcja pod kursami na sprzedaz — ten sam odstep co „Pozostałe kursy”. */
.zgl-sekcja {
  margin-top: 2.5rem;
  /* Linia nad sekcja, jak pod „Jak to działa” (Tom 2026-11-08). */
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.zgl-wstep {
  margin: -.5rem 0 1.25rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Kafel kursu, ktorego jeszcze nie ma (uwaga Toma 2026-11-08: sama przerywana ramka byla
   niezauwazalna): w spoczynku tlo strony zamiast bialego, bez cienia, przygaszony pasek
   z tytulem. Ciagla ramka grubosci 3 px w kolorze ramek kafli — dwa piksele dorysowane
   cieniem, zeby kafel nie zmienial rozmiaru wzgledem sasiadow.
   Po najechaniu wyglada jak najechany gotowy kurs (Tom 2026-11-08, wariant C): biale tlo,
   ramka i pasek w kolorze akcentu, podskok — reguly z app-css-11 lapia `:hover` same,
   tu tylko `:focus-within`, bo w kaflu fokus dostaje przycisk, nie caly kafel. */
.spis-kafel.zgl-kafel {
  background: var(--bg);
  border-color: var(--border);
  box-shadow: 0 0 0 2px var(--border);
}

.spis-kafel.zgl-kafel .spis-kafel-glowa {
  background: var(--bg);
}

.spis-kafel.zgl-kafel .spis-kafel-tytul {
  color: var(--muted);
}

.spis-kafel.zgl-kafel:hover,
.spis-kafel.zgl-kafel:focus-within {
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent);
  transform: translateY(-2px);
}

.spis-kafel.zgl-kafel:hover .spis-kafel-glowa,
.spis-kafel.zgl-kafel:focus-within .spis-kafel-glowa {
  background: var(--accent);
}

.spis-kafel.zgl-kafel:hover .spis-kafel-tytul,
.spis-kafel.zgl-kafel:focus-within .spis-kafel-tytul,
.spis-kafel.zgl-kafel:focus-within .spis-kafel-lekcje {
  color: #fff;
}

.zgl-glos {
  margin: 0 0 0 auto;
}

/* Wyglad i wymiary jak „Sprawdź” w kafelkach kursow (app-css-11): maly, jasny,
   ciemnieje po najechaniu na kafel. */
.zgl-przycisk {
  padding: .4rem .85rem;
  font-family: var(--sans);
  font-size: .93rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.zgl-kafel:hover .zgl-przycisk,
.zgl-kafel:focus-within .zgl-przycisk {
  color: #fff;
  background: var(--accent-dark);
}

/* „Zaproponuj inny kurs” w kafelku to odnosnik — wyglada jak przycisk obok. */
.zgl-przycisk.zgl-przycisk-odnosnik {
  margin-left: auto;
  display: inline-block;
  text-decoration: none;
}

.zgl-przycisk:hover,
.zgl-przycisk:focus-visible {
  color: #fff;
  background: var(--accent);
}

/* Ta sama wysokosc co przycisk, ktory zastepuje — linia nad dolem kafla nie skacze. */
.zgl-zapisane {
  margin-left: auto;
  padding: .4rem 0;
  font-size: .93rem;
  line-height: 1.4;
  color: var(--accent-dark);
  font-weight: 600;
}

/* Ekrany zgloszen: pole na opis kursu i odstep nad formularzem powiadomienia. */
.konto-pole.zgl-tekst {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.5;
}

.konto-sekcja-tytul.zgl-powiadom-tytul {
  margin-top: 1.75rem;
}

/* Pole-pulapka na automaty: poza ekranem, niewidoczne dla czlowieka i czytnika ekranu. */
.zgl-pulapka {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Strona „Dla firm” (dla_firm_http.py): szeroka kolumna jak „Moje konto”, oferty zwijane
   (domyslnie zwiniete), przycisk „Rozwin/Zwin” dorysowany przy tytule, tez na telefonie. */
.konto-strona:has(.firmy-oferta),
body:has(.firmy-oferta) .konto-pasek-srodek {
  max-width: 52rem;
}

.firmy-oferta {
  margin: 0 0 .75rem;
  border: 1px solid var(--border, #d6e2e2);
  border-radius: 12px;
  background: var(--surface, #fff);
}

.firmy-tytul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.firmy-tytul::-webkit-details-marker {
  display: none;
}

.firmy-tytul-tekst {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.firmy-tytul::after {
  content: "Rozwiń ▾";
  flex: none;
  padding: .3rem .75rem;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 10px;
  white-space: nowrap;
}

.firmy-oferta[open] > .firmy-tytul::after {
  content: "Zwiń ▴";
}

.firmy-tytul:hover::after,
.firmy-tytul:focus-visible::after {
  color: #fff;
  background: var(--accent);
}

.firmy-tresc {
  padding: 0 1.25rem 1.25rem;
}

.firmy-lista {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  line-height: 1.55;
}

.firmy-lista li {
  margin: 0 0 .5rem;
}

.firmy-praktyka {
  margin: 2rem 0 0;
}

.firmy-przycisk {
  margin: .75rem 0 0;
}

.firmy-przycisk .zgl-przycisk.zgl-przycisk-odnosnik {
  margin-left: 0;
}