/* Dla kogo — blok feuer/dla-kogo (task03.10; punkt wyjścia: makieta K11, task01.23).
   Wg FeuerDS: „Dla kogo 1" 7:6091 (3 pozycje z tytułami), „Dla kogo 2" 7:6108 i
   „Dla kogo 3" 106:1555 (4 pozycje bez tytułów), mobile 7:6130 / 7:6191.
   Liczba pozycji 2–6: rząd równych kolumn z gutterem siatki — przy 2 / 3 / 4 / 6 szerokości
   równe kolumnom kol-6 / kol-4 / kol-3 / kol-2, przy 5 poza siatką 12 (task01.04).
   Tytuł pozycji (h3) opcjonalny. Numer „01." z licznika CSS — bez znaczników.
   Tablet (640–1023) bez projektu — układ mobile. Wartości px z Figmy zapisane w rem (baza 16). */

.dla-kogo {
  max-width: 90rem;                       /* stop skali z task01.06 — jak inne sekcje */
  margin-inline: auto;
  padding-block: var(--odstep-8);         /* 64 px, desktop i mobile */
  border-bottom: 1px solid var(--kolor-linii);  /* w Figmie #ccd0da — czytane jako błąd projektu, token */
}

/* ---- Blok nagłówkowy: H2, lead, podpis ---- */

.dla-kogo-naglowek { max-width: 51.5625rem; }  /* 825 px */

.dla-kogo-tytul {
  margin: 0;
  font-size: var(--tekst-32);             /* H2 32/44.8 ExtraBold (DS H2) */
  line-height: var(--interlinia-32);
  font-weight: var(--waga-najgrubsza);
}

.dla-kogo-lead {
  margin: var(--odstep-3) 0 0;            /* 24 pod H2; 16/22.4 z body */
}

.dla-kogo-lead strong { font-weight: var(--waga-gruba); }

.dla-kogo-podpis {
  margin: var(--odstep-4) 0 0;            /* 32 pod leadem */
  font-weight: var(--waga-gruba);
}

/* ---- Pozycje ---- */

.dla-kogo-pozycje {
  display: grid;
  grid-auto-flow: column;                 /* wszystkie pozycje w jednym rzędzie, kolumny równe */
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--odstep-4);                   /* gutter siatki 32 */
  margin: var(--odstep-4) 0 0;            /* 32 pod podpisem */
  padding: 0;
  list-style: none;
  counter-reset: pozycja;
}

.dla-kogo-pozycja {
  display: flex;
  flex-direction: column;
  counter-increment: pozycja;
}

/* Numer: pole 40/24 Bold czerwone jak w Figmie (glify wystają z 24 px pola),
   48 px od góry numeru do tekstu = pole 24 + odstęp 24. */
.dla-kogo-pozycja::before {
  content: counter(pozycja, decimal-leading-zero) ".";
  margin-bottom: var(--odstep-3);
  font-size: var(--tekst-40);
  line-height: 1.5rem;
  font-weight: var(--waga-gruba);
  color: var(--kolor-marki);
}

/* Tekst pozycji: 16/24, padding dolny 24 + linia czerwona.
   flex: 1 — wszystkie pozycje rzędu jednej wysokości, linie w jednej linii (jak w Figmie). */
.dla-kogo-tresc {
  flex: 1;
  padding-bottom: var(--odstep-3);
  border-bottom: 1px solid var(--kolor-marki);
  line-height: 1.5rem;
}

.dla-kogo-tresc h3 {                      /* tytuł pozycji — opcjonalny; ten sam 16/24, Bold */
  margin: 0 0 0.75rem;                    /* 12 px do opisu */
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--waga-gruba);
}

.dla-kogo-tresc p { margin: 0; }

/* ---- Tablet i mobile: jedna kolumna (frame'y 7:6130 / 7:6191) ---- */

@media (max-width: 1023px) {
  .dla-kogo-tytul {
    font-size: var(--tekst-28);           /* 28/39.2 ExtraBold */
    line-height: var(--interlinia-28);
  }

  .dla-kogo-podpis { margin-top: var(--odstep-2); }  /* 16 */

  .dla-kogo-pozycje { grid-auto-flow: row; }         /* pozycje jedna pod drugą, odstęp = gutter 32 */
}

/* ---- Wiersze opisów wyrównane między pozycjami (task03.63) ----
   Opis z łamaniami wiersza: render dzieli go na akapity, rodzic dostaje .dla-kogo-wiersze i --rzedy
   (numer, tytuł, wiersze najdłuższego opisu). Pozycja i jej treść = subgrid przez wszystkie rzędy —
   n-ty wiersz każdej pozycji w jednym rzędzie. Tylko desktop; poniżej 1024 pozycje jedna pod drugą. */

@media (min-width: 1024px) {
  .dla-kogo-wiersze { grid-template-rows: repeat(var(--rzedy), auto); row-gap: 0; }
  .dla-kogo-wiersze .dla-kogo-pozycja { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
  .dla-kogo-wiersze .dla-kogo-tresc { display: grid; grid-row: 2 / -1; grid-template-rows: subgrid; }
  .dla-kogo-wiersze .dla-kogo-tresc h3 { grid-row: 1; }
  .dla-kogo-wiersze .dla-kogo-tresc p:first-of-type { grid-row-start: 2; }
}