/* ==========================================================================
   Farmersi 2.0 — informacje.css
   Tylko strona „Informacje” (informacje.html). Nowe 02.11.2026:
   sekcja „Wykorzystanie AI” (infografika) i tabela „Ekipa deweloperów”
   (awatary + loginy, na telefonie karty zamiast przewijanej tabeli).
   Kolory wyłącznie z tokens.css. ZŁOTO ZAREZERWOWANE DLA GRACZA — tu go nie ma.
   ========================================================================== */

/* --- Wykorzystanie AI: infografika ---------------------------------------- */
.info-ai-tekst > p {
  max-width: var(--szerokosc-waska);
}

.info-ai-tekst > p + p {
  margin-top: var(--odst-3);
}

.info-infografika {
  margin: var(--odst-5) auto 0;
  max-width: 1200px;
  text-align: center;
}

.info-infografika img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.info-infografika figcaption {
  margin: var(--odst-2) auto 0;
  max-width: var(--szerokosc-waska);
  font-family: var(--font-kursywa);
  font-style: italic;
  font-size: var(--rozmiar-s);
  color: var(--tekst-mutowany);
  line-height: 1.5;
}

/* --- Ekipa deweloperów ---------------------------------------------------- */
.info-ekipa-naglowek {
  margin: var(--odst-6) 0 var(--odst-3);
}

.tabela.tabela--ekipa {
  font-size: var(--rozmiar-s);
}

/* Globalne `.przewijalne .tabela { min-width: 34rem }` przewijałoby tabelę
   w poziomie na telefonie — tu tekst się zawija, a na wąskim ekranie są karty. */
.przewijalne .tabela--ekipa {
  min-width: 0;
}

.tabela--ekipa th:first-child {
  width: 15rem;
}

.tabela--ekipa td {
  vertical-align: middle;
  padding-block: var(--odst-3);
}

/* Globalny :hover tabeli ma złoty odcień — złoto należy do gracza. */
.tabela--ekipa tbody tr:hover {
  background: rgba(139, 90, 43, 0.06);
}

.ekipa-kto {
  display: flex;
  align-items: center;
  gap: var(--odst-3);
}

.ekipa-kto .awatar {
  --r: 64px;
  border-width: 2px;
}

/* ChatGPT: awatar z pliku assets/img/informacje/chatgpt.webp. Dopóki pliku
   nie ma, onerror w HTML dodaje .awatar--brak i zostaje puste kółko. */
.awatar.awatar--brak {
  border: 2px dashed var(--linia);
  background: var(--tlo-papier-ciemny);
  box-shadow: none;
}

.awatar--brak img {
  display: none;
}

.ekipa-nazwa {
  display: grid;
  gap: 2px;
  line-height: 1.3;
}

.ekipa-imie {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--rozmiar-m);
  color: var(--tekst);
}

.ekipa-login {
  font-size: var(--rozmiar-xs);
  color: var(--tekst-mutowany);
}

/* Login jest przyciskiem — otwiera publiczny profil (profil-gracza.js). */
.ekipa-login button {
  font: inherit;
  font-weight: 700;
  color: var(--akcent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ekipa-login button:hover,
.ekipa-login button:focus-visible {
  color: var(--akcent-czerwony);
}

.ekipa-typ {
  justify-self: start;
  margin-top: 2px;
  padding: 1px var(--odst-2);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--linia-mocna);
  color: var(--tekst-mutowany);
  background: var(--tlo-papier);
}

.ekipa-typ--czlowiek {
  border-color: var(--akcent-zielony);
  color: var(--akcent-zielony);
}

.ekipa-rola {
  line-height: 1.55;
}

/* --- Telefon: karty zamiast tabeli ---------------------------------------- */
@media (max-width: 47.99rem) {
  .tabela--ekipa,
  .tabela--ekipa tbody,
  .tabela--ekipa tr,
  .tabela--ekipa td {
    display: block;
    width: 100%;
  }

  .tabela--ekipa thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tabela--ekipa tbody {
    display: grid;
    gap: var(--odst-3);
  }

  .tabela--ekipa tbody tr,
  .tabela--ekipa tbody tr:nth-child(even) {
    background: var(--tlo-papier);
    border: 1px solid var(--linia-slaba);
    border-radius: var(--promien-m);
    box-shadow: var(--cien-1);
    padding: var(--odst-3);
  }

  .tabela--ekipa td {
    border: 0;
    padding: 0;
  }

  .tabela--ekipa td + td {
    margin-top: var(--odst-2);
  }

  .ekipa-kto .awatar {
    --r: 56px;
  }
}

/* --- Wykorzystanie AI: dwie kolumny na komputerze (02.11.2026) -----------
   Tekst z lewej, infografika z prawej. Na telefonie jedna kolumna:
   najpierw tekst, potem grafika (kolejność jak w HTML). */
@media (min-width: 960px) {
  .info-ai-uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--odst-5);
    align-items: center;
  }

  .info-ai-uklad .info-ai-tekst > p {
    max-width: none;
  }

  .info-ai-uklad .info-infografika {
    margin-top: 0;
  }
}

/* --- Cytaty szeryfa (02.11.2026) -----------------------------------------
   Spokojny blok w palecie strony: papier + brązowa kreska. Bez złota. */
.info-cytat {
  margin: var(--odst-4) 0 var(--odst-5);
  padding: var(--odst-4) var(--odst-5);
  max-width: 44rem;
  background: var(--tlo-papier);
  border-left: 4px solid var(--akcent);
  border-radius: 0 var(--promien-m) var(--promien-m) 0;
  box-shadow: var(--cien-1);
}

.info-cytat--koniec {
  margin: var(--odst-6) auto 0;
}

.info-cytat blockquote {
  margin: 0;
}

.info-cytat blockquote p {
  margin: 0;
  max-width: none;
  font-family: var(--font-kursywa);
  font-style: italic;
  font-size: var(--rozmiar-l);
  line-height: 1.5;
  color: var(--tekst);
  text-align: left;
  hyphens: manual;
}

.info-cytat blockquote p::before { content: "\201E"; }
.info-cytat blockquote p::after { content: "\201D"; }

.info-cytat figcaption {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--odst-2);
  margin-top: var(--odst-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--rozmiar-s);
  color: var(--tekst-mutowany);
}

@media (max-width: 40rem) {
  .info-cytat {
    padding: var(--odst-3) var(--odst-4);
  }

  .info-cytat blockquote p {
    font-size: var(--rozmiar-m);
  }
}

/* --- Justowanie (02.11.2026) ---------------------------------------------
   Tylko akapity ciągłego tekstu i tylko od 641 px. Na telefonie justowanie
   robi „rzeki” w wąskiej kolumnie, więc tam zostaje wyrównanie do lewej.
   Listy, komórki tabel, definicje, podpisy i krótkie linie — zawsze do lewej.
   hyphens: auto działa dzięki <html lang="pl">. */
@media (min-width: 641px) {
  .sekcja > p,
  .sekcja > .komunikat,
  .info-ai-tekst > p,
  #ekipa > p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* ==========================================================================
   O PROJEKCIE — CYTAT W PRAWEJ KOLUMNIE (02.11.2026)
   Tekst po lewej, mniejszy cytat na półprzezroczystym tle po prawej.
   ========================================================================== */
.info-projekt-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .8fr);
  gap: var(--odst-5);
  align-items: start;
}
.info-projekt-tekst > p { max-width: none; }
.info-cytat--poczatek {
  margin: 0;
  max-width: none;
  padding: .8rem 1rem;
  background: rgba(251, 246, 233, .58);
  border-left: 3px solid var(--akcent);
  border-radius: 0 var(--promien-s) var(--promien-s) 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.info-cytat blockquote p {
  font-size: .95rem;
  line-height: 1.45;
}
.info-cytat figcaption {
  margin-top: .55rem;
  font-size: .72rem;
}
.info-cytat--koniec {
  max-width: 40rem;
  padding: .8rem 1rem;
  background: rgba(251, 246, 233, .55);
  box-shadow: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
@media (max-width: 60rem) {
  .info-projekt-uklad { display: block; }
  .info-cytat--poczatek { margin-top: var(--odst-4); }
}
@media (min-width: 641px) {
  .info-projekt-tekst > p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}