/* Strona kategorii oferty (K39, blok szablonowy feuer/kategoria — task03.50; styl per komponent — docs/podejscie-css.md).
   Bez makiety — wg FeuerDS „Szkolenia podstawowe 9" 5324:5469: pod top visualem listingu (task03.49) z lewej drzewo
   kategorii (3 kolumny siatki 12, panel 5324:5532), z prawej (9 kolumn) kafle podkategorii po 3 w rzędzie
   (css/kafle-kategorii.css), pod nimi karty produktów przypiętych bezpośrednio do kategorii po 3 w rzędzie (karta
   i grupa: css/kafle-produktowe.css), 80 między nimi i do sekcji kontaktowej (decyzja użytkownika — task03.50).
   Poniżej 1024 px bez drzewa; kafle w jednej kolumnie, karty wg reguły „Jedna karta produktu" (tablet 2, telefon 1).
   Wartości px z Figmy w rem (baza 16). */

.strona-kategorii { display: block; }

/* 80 do sekcji kontaktowej; 64 pod blokami dopisanymi w sekcji kategorii — bezpośrednio pod top visualem
   listingu bez odstępu (css/sekcje-otwierajace.css). */
.kategoria-listing { padding-block: var(--odstep-8) var(--odstep-10); }

.kategoria-pozycje > * + * { margin-top: var(--odstep-10); }   /* kafle → karty produktów 80 */

/* ---- Drzewo kategorii (5324:5532): biały panel 277, padding 24 / 16; „Kategoria" 20/24 Bold, 24 do listy;
   kategorie 16/24 Bold co 16, strzałka 16 przy prawej krawędzi (› — link, ˅ / ˄ — rozwijanie podkategorii w miejscu);
   kategoria bieżącej strony — czerwona, linia 1 pod nią (16 niżej),
   jej podkategorie 16/24 Regular co 12, wcięcie 8 z obu stron (długa nazwa łamie się w kolumnie), lista 16 pod linią
   i 24 nad kolejną kategorią. ---- */

.drzewo-kategorii {
  padding: var(--odstep-3) var(--odstep-2);
  background: var(--kolor-tla);

  & :where(ul) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & a {
    color: var(--kolor-tekstu);
    text-decoration: none;
  }
}

.drzewo-kategorii-tytul {
  margin: 0 0 var(--odstep-3);
  font-size: var(--tekst-20);
  line-height: 1.5rem;
  font-weight: var(--waga-gruba);
}

.drzewo-kategorii > ul > li + li { margin-top: var(--odstep-2); }

/* Wiersz kategorii: nazwa (link) + przycisk rozwijania przy prawej krawędzi (strzałka na środku wysokości nazwy). */
.drzewo-kategorii-wiersz {
  display: flex;
  align-items: center;
  gap: 0.6875rem;                           /* 11 */
}

.drzewo-kategorii-kategoria {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6875rem;
  font-size: var(--tekst-16);
  line-height: 1.5rem;
  font-weight: var(--waga-gruba);

  & .ikona { color: var(--kolor-tekstu); }
  & svg { rotate: 90deg; }                  /* › — kategoria bez podkategorii: sam link */
}

.drzewo-kategorii a:hover { color: var(--kolor-marki); }   /* hover = kolor marki (spojnosc-designu.md, „Zasady") */

.drzewo-kategorii-przelacznik {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kolor-tekstu);
  cursor: pointer;

  & svg { rotate: 180deg; }                 /* ˅ — zwinięta */
  &[aria-expanded="true"] svg { rotate: none; }   /* ˄ — rozwinięta */
  &:hover { color: var(--kolor-marki); }
}

/* Kategoria bieżącej strony — czerwona, linia pod nią (16 niżej). */
.biezaca > .drzewo-kategorii-wiersz {
  padding-bottom: var(--odstep-2);
  border-bottom: 1px solid var(--kolor-marki);

  & .drzewo-kategorii-kategoria { color: var(--kolor-marki); }
}

.drzewo-kategorii-podkategorie {
  display: grid;
  gap: 0.75rem;                             /* 12 */
  margin-top: var(--odstep-2);              /* 16 pod wierszem (linią) */
  padding: 0 var(--odstep-1) var(--odstep-1);   /* wcięcie 8; 8 + 16 (odstęp kategorii) = 24 do kolejnej */
  font-size: var(--tekst-16);
  line-height: 1.5rem;

  & a:hover { text-decoration: underline; }   /* projekt: podkategoria w hoverze czerwona, podkreślona */
  & a[aria-current] { color: var(--kolor-marki); }
}

.drzewo-kategorii-wiersz:has([aria-expanded="false"]) + .drzewo-kategorii-podkategorie { display: none; }

/* ---- Desktop: drzewo 3 kolumny, grupy 9 kolumn, karty po 3 ---- */

@media (min-width: 1024px) {
  .kategoria-listing > .kontener {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--odstep-4);            /* gutter 32 */
    align-items: start;
  }

  /* Nagłówek pierwszej grupy i komunikat w miejscu kart (stan pusty, brak wyników wyszukiwarki) leżą na zdjęciu top
     visualu — białe (projekt); poniżej 1024 px treść zaczyna się pod zdjęciem. */
  .top-listingu.tlo-ciemne + .kategoria-listing :is(.grupa-produktow:first-child .grupa-produktow-tytul, .brak-produktow) {
    --kolor-tekstu: var(--kolor-tekstu-odwrocony);   /* także link akcji stanu pustego */
    color: var(--kolor-tekstu);
  }

  .drzewo-kategorii { grid-column: span 3; }
  .kategoria-pozycje { grid-column: span 9; }
  .kategoria-pozycje .grupa-produktow-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Poniżej 1024 px: bez drzewa (nawigacja przez menu i link „Wstecz") ---- */

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

  /* Treść zaczyna się pod zdjęciem top visualu — pierwsza grupa 32 niżej (decyzja użytkownika — task03.50). */
  .strona-kategorii > .top-listingu.tlo-ciemne + .kategoria-listing { padding-top: var(--odstep-4); }
}