/* Kafelki branż — K34, task03.33 (styl per komponent — docs/podejscie-css.md). Bez makiety — wg FeuerDS:
   Home Desktop nagłówek 2:568, kafelki 2:569; Home Mobile 2:1305 / 2:1340. Wartości px z Figmy w rem (baza 16).
   Typografia w kanonie atomów (spojnosc-designu.md): H2 Bold 32/44.8 (mobile 28/39.2) z akcentem A65
   (projekt: 32/42 + 36/48, mobile 24/32 + 32/42), nazwa H4 ExtraBold 20/28, podpis 14/19.6 (projekt: 14 w wierszu 28).
   Tablet (640–1023) bez projektu — układ mobile, jak w pozostałych sekcjach. */

.kafelki-branz {
  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 (w projekcie 128 między treścią sąsiednich sekcji) */
}

.kafelki-branz-tytul {
  margin: 0 0 var(--odstep-6);             /* 48 do kafelków */
  font-size: var(--tekst-32);
  line-height: var(--interlinia-32);
  font-weight: var(--waga-gruba);
}

/* ---- Siatka: 4 kolumny (277 przy kontenerze 1204), gutter 32; kafel „Inna branża?" na dwie kolumny ---- */

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

.kafelki-branz-dane { display: contents; }  /* edytor: kafelki z ServerSideRender w siatce obok kafla „Inna branża?" */

.kafelki-branz-kafel {
  display: flex;
  flex-direction: column;
  padding: var(--odstep-3);                /* 24 */
  background: var(--kolor-tla-wyroznionego);
  color: var(--kolor-tekstu);
  text-decoration: none;
}

.kafelki-branz-inna {                      /* przycisk otwierający layer kontaktu (w edytorze div) */
  grid-column: span 2;
  width: 100%;
  border: 0;
  background: var(--kolor-ciemny);
  color: var(--kolor-tekstu-odwrocony);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.kafelki-branz-kafel:hover {               /* hover: czerwony, tekst i ikona białe, ↗ → → */
  background: var(--kolor-marki);
  color: var(--kolor-tekstu-odwrocony);
}

/* Ikona 48 z biblioteki mediów (meta termu); w hoverze w całości biała (poświata zostaje półprzezroczysta). */
.kafelki-branz-ikona {
  display: block;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--odstep-1);          /* 8 do nazwy */
}

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

.kafelki-branz-kafel:hover .kafelki-branz-ikona img { filter: brightness(0) invert(1); }

.kafelki-branz-inna .kafelki-branz-ikona { background: url("../ikony/lista-kolko.svg") 0 0 / contain no-repeat; }

.kafelki-branz-tekst { margin-bottom: var(--odstep-2); }   /* 16 do strzałki */

.kafelki-branz-nazwa {                     /* h3 w kaflu branży, span w kaflu „Inna branża?" */
  display: block;
  margin: 0;
  font-size: var(--tekst-20);
  line-height: var(--interlinia-20);
  font-weight: var(--waga-najgrubsza);
}

.kafelki-branz-podpis {
  margin: 0;
  font-size: var(--tekst-14);
  line-height: var(--interlinia-14);
}

/* 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 (jak w kartach Aktualności), w hoverze → 32 (i-strzalka) biała; na kaflu „Inna branża?" biała. */
.kafelki-branz-strzalka {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: auto;
  color: var(--kolor-marki);
}

.kafelki-branz-inna .kafelki-branz-strzalka,
.kafelki-branz-kafel:hover .kafelki-branz-strzalka { color: inherit; }

.kafelki-branz-skos {
  width: 1.125rem;
  height: 1.125rem;
}

.kafelki-branz-prosto {
  display: none;
  width: 2rem;
  height: 2rem;
}

.kafelki-branz-kafel:hover .kafelki-branz-skos { display: none; }
.kafelki-branz-kafel:hover .kafelki-branz-prosto { display: block; }

/* ---- Mobile (Home Mobile; także tablet): kafle w kolumnie co 8, „Inna branża?" w szerokości pozostałych ---- */

@media (max-width: 1023px) {
  .kafelki-branz-tytul {
    margin-bottom: var(--odstep-5);        /* 40 (projekt: 39) */
    font-size: var(--tekst-28);
    line-height: var(--interlinia-28);
  }

  .kafelki-branz-siatka {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--odstep-1);
  }

  .kafelki-branz-inna { grid-column: auto; }
}