/* Kafle kategorii — K37, task03.48 (styl per komponent — docs/podejscie-css.md). Bez makiety — wg FeuerDS:
   „Oferta Feuer 7" 5324:5930, kafle 5597:6016 — kafel 380×408: zdjęcie 380×220, treść 24 / 16 z odstępami 16
   (ikona 48, nazwa, strzałka 32), tło --kolor-tla-wyroznionego. Wartości px z Figmy w rem (baza 16).
   Mobile (decyzja użytkownika) i tablet (bez projektu — jak w pozostałych sekcjach): jedna kolumna na pełną
   szerokość kontenera. Hover: nazwa w kolorze marki (reguła „Hover bez projektu w DS" — spojnosc-designu.md). */

.kafle-kategorii {
  max-width: 90rem;                        /* stop skali z task01.06 — jak inne sekcje */
  margin-inline: auto;
  padding-block: var(--odstep-8);          /* 64 / 64 jak pozostałe sekcje */
}

/* Przed Sekcją kontaktową — 128 do karty (projekt „Oferta Feuer 7"; decyzja użytkownika — task03.50). Mobile bez projektu — 64. */
@media (min-width: 1024px) {
  .kafle-kategorii:has(+ .sekcja-kontaktowa) { padding-bottom: 8rem; }
}

/* ---- Siatka: 3 kafle po 4 kolumny siatki 12 (380 przy kontenerze 1204), gutter 32 ---- */

.kafle-kategorii-siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--odstep-4);
}

.kafle-kategorii-dane { display: contents; }   /* edytor: kafle z ServerSideRender wprost w siatce */

.kafle-kategorii-brak { grid-column: 1 / -1; margin: 0; }   /* edytor: komunikat przy braku kafli */

.kafle-kategorii-kafel {
  display: flex;
  flex-direction: column;
  background: var(--kolor-tla-wyroznionego);
  color: var(--kolor-tekstu);
  text-decoration: none;
}

/* Zdjęcie termu w kadrze 380×220 (proporcja zachowana na każdej szerokości), bez maski. */
.kafle-kategorii-zdjecie {
  display: block;
  aspect-ratio: 380 / 220;
  overflow: hidden;
}

.kafle-kategorii-zdjecie img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kafle-kategorii-tresc {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--odstep-2);                    /* 16 */
  padding: var(--odstep-3) var(--odstep-2);   /* 24 / 16 */
}

/* Ikona 48 z biblioteki mediów (meta termu) — z poświatą w pliku, jak ikony branż. */
.kafle-kategorii-ikona {
  display: block;
  width: 3rem;
  height: 3rem;
}

.kafle-kategorii-ikona img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kafle-kategorii-nazwa {
  font-size: var(--tekst-26);              /* H3 Bold 26/36.4 (projekt: 24/28) — rejestr spójności */
  line-height: var(--interlinia-26);
  font-weight: var(--waga-gruba);
}

.kafle-kategorii-kafel:hover .kafle-kategorii-nazwa { color: var(--kolor-marki); }

/* Strzałka 32 u dołu kafla (kafle rzędu równej wysokości — strzałki w jednej linii): ↗ z wektorem 18 w kolorze marki. */
.kafle-kategorii-strzalka {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: auto;
  color: var(--kolor-marki);
}

.kafle-kategorii-strzalka svg {
  width: 1.125rem;
  height: 1.125rem;
}

@media (max-width: 1023px) {
  .kafle-kategorii-siatka { grid-template-columns: minmax(0, 1fr); }
}