/* ============================================================
   22 — materiały dla mediów
   ============================================================ */

.ai-media__wstep {
  font-size: var(--ai-size-lead);
  max-width: var(--ai-miara);
}

.ai-media__sekcja {
  margin-top: var(--ai-s7);
  padding-top: var(--ai-s5);
  border-top: 1px solid var(--ai-line);
}

.ai-media__fakty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ai-s3) var(--ai-s4);
  margin: var(--ai-s5) 0;
}

/* --- opisy do przedruku -------------------------------------- */

.ai-media__opis {
  margin: var(--ai-s4) 0;
  padding: var(--ai-s4);
  background: var(--ai-card-alt);
  border-radius: var(--ai-r-lg);
}

.ai-media__opis-glowka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ai-s2) var(--ai-s3);
  margin-bottom: var(--ai-s2);
}

.ai-media__opis-glowka h3 { margin: 0; font-size: var(--ai-size-h3); }

.ai-media__znaki {
  font-size: var(--ai-size-label);
  color: var(--ai-text-mute);
  font-variant-numeric: tabular-nums;
}

/* Przycisk kopiowania trzyma się prawej krawędzi główki — wzrok szuka go tam,
   gdzie kończy się tekst, nie zaraz za tytułem. */
.ai-media__kopiuj-gniazdo { margin-left: auto; }

.ai-media__opis-tresc > :first-child { margin-top: 0; }
.ai-media__opis-tresc > :last-child { margin-bottom: 0; }
.ai-media__opis-tresc p { max-width: var(--ai-miara); }

/* --- znaki i zdjęcia ----------------------------------------- */

.ai-media__znaki-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ai-s4);
  margin: var(--ai-s5) 0 0;
  padding: 0;
  list-style: none;
}

.ai-media__znak { margin: 0; }

/* Podgląd na tle, dla którego znak jest przeznaczony. Bez tego wersja w jasnym
   nadruku wygląda na pusty kafelek i czyta się jak usterka strony. */
.ai-media__podglad {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: var(--ai-s3);
  margin-bottom: var(--ai-s2);
  background: var(--ai-biel);
  border: 1px solid var(--ai-line-strong);
  border-radius: var(--ai-r-md);
  overflow: hidden;
}

.ai-media__podglad--ciemny { background: var(--ai-bg-ciemne); border-color: var(--ai-bg-ciemne); }
.ai-media__podglad--foto { padding: 0; min-height: 0; }

.ai-media__podglad img { max-width: 100%; max-height: 96px; height: auto; width: auto; }
.ai-media__podglad--foto img { max-height: none; width: 100%; display: block; }

.ai-media__znak-nazwa { margin: 0 0 2px; font-weight: 600; color: var(--ai-heading); }
.ai-media__znak-opis { margin: 0 0 var(--ai-s2); font-size: var(--ai-size-small); color: var(--ai-text-mute); }

/* --- kolory --------------------------------------------------- */

.ai-media__kolory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ai-s3);
  margin: var(--ai-s5) 0 0;
  padding: 0;
  list-style: none;
}

.ai-media__kolor {
  display: flex;
  align-items: center;
  gap: var(--ai-s3);
  margin: 0;
}

.ai-media__plama {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--ai-r-md);
  border: 1px solid var(--ai-line-strong);
}

.ai-media__kolor-opis { display: flex; flex-direction: column; gap: 2px; font-size: var(--ai-size-small); }
.ai-media__kolor-opis b { color: var(--ai-heading); }
.ai-media__kolor-opis code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }
.ai-media__kolor-opis span { color: var(--ai-text-mute); }

/* --- prelegenci ----------------------------------------------- */

.ai-media__prelegenci {
  columns: 2;
  column-gap: var(--ai-s5);
  margin: var(--ai-s4) 0 0;
  padding-left: var(--ai-s4);
}

.ai-media__prelegenci li { break-inside: avoid; margin-bottom: 6px; }

@media (max-width: 560px) {
  .ai-media__prelegenci { columns: 1; }
  .ai-media__opis { padding: var(--ai-s3); }
}