/* ==========================================================================
   site.css — wspólna warstwa redesignu znanaszkola.pl
   Zmiana: landing-redesign-fotografie (2026-08-20), wzorzec: canvas Claude Design.
   Ładowany PRZED inline <style> każdej strony — style per-page nadpisują tę bazę.
   Prefiks .zs- (ZnanaSzkoła) chroni przed kolizjami z istniejącymi klasami stron.
   Tokeny = superset zmiennych z raporty/index.html, zgodne z DESIGN.md.
   ========================================================================== */

:root {
  --teal: #0E776A;
  --teal-d: #095C53;
  --teal-soft: #E0F4F2;
  --teal-wash: #F0FAF9;
  --ink: #0F172A;
  --ink-2: #1E293B;
  --ink-soft: #2D3853;
  --ink-mute: hsl(222 18% 46%);
  --paper: #FAF8F2;
  --paper-2: #F2EFE7;
  --line: #E0DAD2;
  --line-soft: #ECE7DF;
  --card-rest: 0 1px 3px hsl(35 25% 40% / .06), 0 1px 2px hsl(35 25% 40% / .04);
  --card-hover: 0 4px 12px hsl(35 25% 40% / .10);
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
}

.tabular { font-variant-numeric: tabular-nums; }

/* --- Fokus: ring teal definiowany per-page (każda strona ma własną regułę
   :focus-visible) — wspólny arkusz celowo nie narzuca globalnego ringa. ---- */

/* --- Karta ---------------------------------------------------------------- */
.zs-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--card-rest);
}
.zs-card--clickable { transition: box-shadow .2s ease; }
.zs-card--clickable:hover { box-shadow: var(--card-hover); }

/* --- Fotografia + kredyt (SourceTag dla zdjęć) ---------------------------- */
.zs-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.zs-photo { display: block; width: 100%; height: auto; object-fit: cover; }
.zs-photo--rounded { border-radius: 16px; border: 1px solid var(--line); }
.zs-credit {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-soft); opacity: .8;
}
.zs-credit::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex: 0 0 auto;
}

/* --- Chip źródła / etykieta ----------------------------------------------- */
.zs-chip {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 3px 10px; font-size: 11.5px; font-weight: 600;
  color: var(--teal); background: var(--teal-soft); border-radius: 999px;
}

/* --- Overline sekcji (element SectionHeader wg DESIGN.md; jeden na sekcję) - */
.zs-overline {
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal);
}

/* --- Link CTA ze strzałką -------------------------------------------------- */
.zs-cta {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; font-size: 14px; font-weight: 700;
  color: var(--teal); text-decoration: none;
}
.zs-cta:hover { color: var(--teal-d); text-decoration: underline; }
.zs-cta svg { flex: 0 0 auto; }

/* --- Przycisk primary (granat wg DESIGN.md) -------------------------------- */
.zs-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 24px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 10px; cursor: pointer;
  transition: background .15s ease;
}
.zs-btn-primary:hover:not(:disabled) { background: var(--ink-2); }
.zs-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* --- Siatki sekcji ---------------------------------------------------------- */
.zs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.zs-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.zs-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* --- Karta faktu (duża liczba tabularna + źródło) --------------------------- */
.zs-fact { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.zs-fact-num {
  font-size: 34px; font-weight: 800; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.zs-fact p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); flex: 1; }
.zs-fact a.zs-credit { text-decoration: none; min-height: 44px; }
.zs-fact a.zs-credit:hover,
.zs-fact a.zs-credit:focus-visible { text-decoration: underline; }

/* --- Wzorce artykułowe (cytat, callout, badge rozdziału, pigułka TOC) ------
   żyją per-page w inline <style> stron raportów — wspólny arkusz celowo ich
   nie dubluje. -------------------------------------------------------------- */

/* --- Metryczka raportu (Kogo badano / Źródło / Opublikowano) ---------------- */
.zs-meta { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.zs-meta > div { display: flex; gap: 10px; }
.zs-meta dt { font-size: 13px; color: var(--ink-mute); min-width: 110px; flex: 0 0 auto; }
.zs-meta dd { margin: 0; font-size: 13px; color: var(--ink-soft); flex: 1; }

/* --- Mobile ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .zs-grid-2, .zs-grid-3, .zs-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .zs-fact-num { font-size: 30px; }
}

/* --- Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .zs-card--clickable, .zs-btn-primary { transition: none; }
}