/* ============================================================
   06 — sekcje treściowe: tekst, role, zasady, obszary, lista negatywna
   ============================================================ */

/* --- moduł tekstowy ----------------------------------------- */
/* Treść pisana w panelu jako markdown — nie ma klas, więc stylujemy elementy. */

/* Selektor celuje w akapity treści, nie w <p>, które filtr markdown
   wstawia do środka nagłówka — inaczej nagłówek gubi swój rozmiar. */
.ai-sekcja__tresc { margin-top: var(--ai-s5); }
.ai-sekcja__tresc > p {
  font-size: var(--ai-size-lead);
  line-height: 1.6;
}

/* --- dla kogo ----------------------------------------------- */

.ai-role__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ai-s2);
}
.ai-role__pozycja {
  padding: 14px 16px;
  background: var(--ai-card-alt);
  border: 1px solid var(--ai-line-strong);
  border-radius: var(--ai-r-md);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ai-heading);
}

/* --- cztery zasady ------------------------------------------ */
/* Numeracja jest tu informacją, nie ozdobą: to zamknięty zbiór reguł,
   do których odwołujemy się w rozmowie z prelegentami („zasada 01"). */

.ai-zasady__lista {
  display: grid;
  gap: 20px;
}
.ai-zasady__pozycja {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 20px;
  padding: var(--ai-s4);
  background: var(--ai-card);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-r-lg);
}
.ai-zasady__numer {
  /* Numer sekcji krojem nagłówkowym. `tabular-nums` zostawia cyfrom jednakową
     szerokość, więc „01" i „04" zajmują tyle samo miejsca. */
  font-family: var(--ai-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--ai-magenta);
}
.ai-zasady__tresc h3 {
  margin: 0 0 10px;
  font-family: var(--ai-font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.ai-zasady__tresc p { margin: 0; }

/* --- sześć obszarów ----------------------------------------- */

.ai-obszary__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ai-obszary__pozycja {
  padding: var(--ai-s4);
  background: var(--ai-card);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-r-lg);
}
.ai-obszary__pozycja h3 { margin: 0 0 var(--ai-s2); }
.ai-obszary__pozycja p {
  margin: 0;
  font-size: var(--ai-size-small);
}

/* --- czego nie będzie --------------------------------------- */
/* Znak × jest elementem graficznym, więc może być w magencie. */

.ai-lista-negatywna__lista {
  list-style: none;
  margin: var(--ai-s6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ai-s3);
}
.ai-lista-negatywna__pozycja {
  position: relative;
  margin: 0;
  padding-left: 36px;
  line-height: 1.6;
}
.ai-lista-negatywna__pozycja::before {
  content: "×";
  position: absolute;
  left: 0;
  top: -.25em;
  font-family: var(--ai-font-body);
  font-size: 2.125rem;
  font-weight: 300;
  line-height: 1;
  color: var(--ai-magenta);
}

@media (max-width: 900px) {
  .ai-role__lista,
  .ai-obszary__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .ai-role__lista,
  .ai-obszary__lista { grid-template-columns: 1fr; }
  .ai-zasady__pozycja { grid-template-columns: 1fr; gap: var(--ai-s2); }
}