/* dobre.audio — powiększenie miniaturek podkategorii na stronie kategorii
   (kafelki "Podkategoria + ikonka" widoczne np. na /1391-gitary: "Gitary
   klasyczne i akustyczne", "Gitary elektryczne i basowe"). Sprawdzone
   na żywo, wrzesień 2026.

   Diagnoza (pierwsza część zgłoszenia — rozmiar kafelka): natywna klasa
   motywu Hummingbird ".subcategory__thumbnail" (theme-<hash>.css) ma na
   sztywno wpisany bardzo mały rozmiar:
     - do 575px szerokości ekranu: 2.5rem x 2.5rem (40x40px)
     - od 576px szerokości ekranu: 3rem x 3rem (48x48px)

   Druga część zgłoszenia (biały "frame" wokół zdjęcia w kafelku "Gitary
   klasyczne i akustyczne") — sprawdzone na żywo bezpośrednio na pliku
   źródłowym (bez CSS/motywu w drodze): to NIE była sprawa PrestaShop ani
   CSS, tylko zawartość samego wgranego pliku 180x180 — poprzednia
   grafika (mała, kreskówkowa ikonka gitary) była mała względem białego
   kwadratu. Użytkownik wgrał nowe, właściwe zdjęcie bezpośrednio w BO —
   to nie wymagało żadnej zmiany w kodzie. Uwaga na przyszłość: gitara to
   wąski, pionowy kształt, więc nawet dobrze przycięte zdjęcie naturalnie
   zostawi wąskie białe pasy po bokach w kwadratowej ramce (sprawdzone na
   nowym pliku: w pionie wypełnia ramkę niemal całkowicie, w poziomie
   zostają marginesy z natury kształtu instrumentu) — zaakceptowane przez
   użytkownika, zostajemy przy kwadratowym kafelku.

   Trzecia rzecz odkryta PO powiększeniu (nie była częścią pierwotnego
   zgłoszenia, ale bez tej poprawki miniaturka wychodzi jako pionowy,
   wąski prostokąt zamiast kwadratu): kafelek podkategorii
   (".subcategory__link--with-image") to wewnątrz flex (zdjęcie + tekst
   obok siebie), a sam kafelek siedzi w gridzie o SZTYWNEJ szerokości
   kolumny (".subcategory__list--with-images", grid-template-columns z
   udziałami "1fr" bez minimalnej szerokości) — szerokość kolumny NIE
   rośnie wraz z zawartością. Domyślnie obrazek jako element flex ma
   "flex-shrink: 1" (może się kurczyć), więc gdy w kolumnie zabrakło
   miejsca na powiększone zdjęcie + tekst, flexbox ścieśniał SZEROKOŚĆ
   zdjęcia (bo to jedyny wymiar, który flex-shrink kontroluje w wierszu),
   zostawiając ustawioną na sztywno wysokość — stąd wizualny efekt
   "pionowego okienka" zamiast kwadratu. Naprawione przez wyłączenie
   kurczenia się zdjęcia w poziomie (flex-shrink: 0).

   Czwarta rzecz — osobne zgłoszenie (kategoria "Domowe audio" i inne z
   dłuższymi/wielosylabowymi nazwami podkategorii, np. "Wzmacniacze",
   "Bluetooth"): przy poprzednim układzie "zdjęcie obok tekstu" na wąska
   kolumna tekstu (~58-60px, bo większość szerokości sztywnej kolumny
   gridu zajmowało teraz powiększone zdjęcie + odstępy) powodowała łamanie
   długich, pojedynczych słów W ŚRODKU wyrazu, niezależnie od zmniejszania
   fontu. Sprawdzone też: "hyphens:auto" + lang="pl" NIE dzieli poprawnie
   polskich słów w tym środowisku (dalej łamało w przypadkowych miejscach,
   nie na sylabach) — odrzucone jako rozwiązanie. Zamiast tego układ
   kafelka zmieniony ze "zdjęcie | tekst obok siebie" (flex-direction: row)
   na "zdjęcie na górze, tekst pod spodem, na całą szerokość karty"
   (flex-direction: column) — zweryfikowane osobnym skryptem mierzącym
   dokładne granice linii tekstu: przy takim układzie WSZYSTKIE nazwy
   kategorii łamią się tylko na granicach słów/spacji, zero łamań w
   środku wyrazu.

   Po zmianie układu na "kolumnowy" zgłoszenie: stara, sztywna szerokość
   kolumny gridu (ok. 231.5px, dobrana pod poprzedni układ "obok siebie")
   zostawiała dużo pustej przestrzeni dookoła teraz węższego (98px),
   wyśrodkowanego zdjęcia — kafelki "pływały" w zbyt szerokich kolumnach.
   Naprawione zmianą siatki z kilku sztywnych kolumn na
   "repeat(auto-fill, minmax(140px, 1fr))" (kolumny ciasno dopasowane do
   zawartości, więcej kolumn w rzędzie) + zmniejszony padding kafelka
   (0.5rem zamiast poprzedniego, dużo większego). Przetestowane na żywo
   (Chrome, podgląd na /27-glosniki i /56-mikrofony) i zaakceptowane przez
   użytkownika.

   Rozmiar miniatury: 72x72px do 575px szerokości ekranu (mobile), 98x98px
   od 576px wzwyż (ten sam przełom co oryginalne, natywne reguły motywu) —
   na życzenie użytkownika, żeby na wąskich ekranach miniaturka nie
   zajmowała proporcjonalnie za dużo miejsca.

   Dotyczy KAŻDEJ kategorii, której podkategorie mają wgrane zdjęcie w BO.

   Ładowane globalnie przez hookDisplayHeader() w dobre_audio_assets.php
   (ten sam wzorzec co pozostałe pliki CSS w tym module) — NIE edytujemy
   plików motywu Hummingbird bezpośrednio. */

.subcategory__thumbnail {
  width: 72px;
  height: 72px;
}

@media (min-width: 576px) {
  .subcategory__thumbnail {
    width: 98px;
    height: 98px;
  }
}

.subcategory__link--with-image picture {
  flex-shrink: 0;
}

/* Układ kolumnowy: zdjęcie na górze, nazwa kategorii pod spodem,
   wyśrodkowane — eliminuje łamanie długich nazw w środku wyrazu. */
.subcategory__link--with-image {
  flex-direction: column;
  text-align: center;
  gap: 0.375rem;
  padding: 0.5rem;
}

.subcategory__link--with-image span {
  font-size: 13px;
}

/* Węższe, elastyczne kolumny siatki — dopasowane do węższej (kolumnowej)
   karty, zamiast starych sztywnych kolumn dobranych pod układ "obok
   siebie", które zostawiały zbyt dużo pustej przestrzeni wokół karty. */
.subcategory__list--with-images {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}