/* ══════════════════════════════════════════════════════
   legal.css — appme Legal / Documentation page
══════════════════════════════════════════════════════ */

/* ── Powłoka strony ─────────────────────────────────
   Ramka tej podstrony — .legal-page, breadcrumb, hero, poblask,
   badge, h1 i podtytuł — mieszka we WSPÓLNYM bloku POWŁOKA PODSTRON
   TREŚCIOWYCH w css/styles.css, razem z contact, support i blogiem.

   Stały tu wcześniej własne kopie tych reguł i zdążyły się rozjechać:
   breadcrumb miał 760px zamiast szerokości navbara i był wyszarzony
   do rgba(255,255,255,.3) zamiast białego, hero-inner 600px zamiast
   pełnej ramki, podtytuł dodatkowe 480px, a .legal-page nie miało
   przyciemnienia nad tłem wideo, które mają pozostałe podstrony.

   Dopisując regułę wymiarową, rób to TAM, nie tutaj — ten plik ładuje
   się PO styles.css, więc każda właściwość powtórzona tu wygrywa
   kaskadę i strony znów zaczynają się różnić. */


/* ── Document cards (list view) ────────────────────── */
/* Siatka kafelków, nie kolumna tekstu — więc pełna szerokość ramki, tak jak
   lista wpisów bloga. Cztery dokumenty w jednej kolumnie na ekranie 1400px
   dawały cztery paski tekstu z ogromną pustą przestrzenią po bokach.

   minmax(340px, …) dobrane pod zawartość kafelka: ikona 44px + tytuł + opis
   + strzałka. Poniżej tego opis łamie się na trzy linie i karta przestaje
   być skanowalna wzrokiem. auto-fit, więc przy czterech dokumentach wychodzą
   2–4 kolumny zależnie od ekranu, a dodanie piątego niczego nie wymaga. */
/* Odstęp do stopki jako PADDING, nigdy margines — patrz komentarz przy
   .faq-cta w css/faq.css. Ta siatka jest ostatnim dzieckiem .legal-page,
   a margines dolny wypłynąłby poza rodzica i uciął przyciemnienie nad wideo
   równo z ostatnim kafelkiem. */
.legal-content {
  max-width: var(--shell-max, 1400px);
  margin: 0 auto;
  padding: 0 var(--shell-gutter, clamp(1rem, 4vw, 3rem)) var(--page-bottom, 5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: .75rem;
}

.legal-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.3rem;
  border: 1.5px solid rgba(255,255,255,.06);
  border-radius: 1rem;
  background: rgba(255,255,255,.02);
  text-decoration: none;
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
  cursor: pointer;
}
.legal-card:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
  transform: translateY(-1px);
}

.legal-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--card-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-color) 20%, transparent);
  flex-shrink: 0;
}
.legal-card-icon svg {
  width: 20px; height: 20px;
  color: var(--card-color);
}

.legal-card-body {
  flex: 1;
  min-width: 0;
}
.legal-card-body h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
}
.legal-card-body p {
  font-size: .8rem;
  color: rgba(255,255,255,.4);
  margin: 0;
  line-height: 1.45;
}

.legal-card-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: .5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .2s, border-color .2s;
}
.legal-card-arrow svg {
  width: 14px; height: 14px;
  color: rgba(255,255,255,.35);
  transition: color .2s;
}
.legal-card:hover .legal-card-arrow {
  background: rgba(12,181,210,.1);
  border-color: rgba(12,181,210,.2);
}
.legal-card:hover .legal-card-arrow svg {
  color: var(--c1);
}

/* ── Back link ─────────────────────────────────────── */
.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255,255,255,.45);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s;
  margin-bottom: 1.5rem;
}
.legal-back-link:hover { color: var(--c1); }
.legal-back-link svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
}

/* ── Single document view ──────────────────────────── */
/* Sam dokument to JUZ kolumna tekstu, więc zostaje przy mierze czytania
   (--page-max, ~75 znaków w wierszu) i celowo NIE równa się z nagłówkiem
   ani z siatką kafelków nad nim. */
.legal-doc-view {
  max-width: var(--page-max, 760px);
  margin: 0 auto;
  padding: 2rem var(--page-gutter, 1.5rem) 4rem;
}

.legal-doc-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.legal-doc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: .85rem;
  background: color-mix(in srgb, var(--card-color) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-color) 20%, transparent);
  flex-shrink: 0;
}
.legal-doc-icon svg {
  width: 22px; height: 22px;
  color: var(--card-color);
}
.legal-doc-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: #fff;
  margin: 0 0 .2rem;
  letter-spacing: -.02em;
}
.legal-doc-header p {
  font-size: .82rem;
  color: rgba(255,255,255,.4);
  margin: 0;
  line-height: 1.4;
}

/* ── Document body (rendered HTML from /lang/) ─────── */
.legal-doc-body {
  font-size: .88rem;
  line-height: 1.85;
  color: rgba(255,255,255,.55);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.legal-doc-body b,
.legal-doc-body strong {
  color: rgba(255,255,255,.8);
  font-weight: 700;
}
.legal-doc-body a {
  color: var(--c1);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
}
.legal-doc-body a:hover { color: #fff; }
.legal-doc-body br + br {
  display: block;
  content: '';
  margin-top: .6rem;
}
.legal-doc-body ul,
.legal-doc-body ol {
  padding-left: 1.5rem;
  margin: .5rem 0;
}
.legal-doc-body li {
  margin-bottom: .25rem;
}
/* Zagniezdzone listy numerowane: a) b) c), jak w zrodlowym .docx.
   Markdown nie ma skladni list literowych — docx2md zapisuje kazdy poziom
   jako "1.", wiec numeracje poziomow ustawiamy tutaj. */
.legal-doc-body ol ol { list-style-type: lower-alpha; }
.legal-doc-body ol ol ol { list-style-type: lower-roman; }

/* ── Elementy z markdownu (data/legal/*.md) ──────────
   Stary HTML z lang/ udawal naglowki pogrubieniem, wiec tych regul
   wczesniej nie bylo potrzeba. */
.legal-doc-body h1,
.legal-doc-body h2,
.legal-doc-body h3,
.legal-doc-body h4 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
  margin: 1.75rem 0 .6rem;
}
.legal-doc-body h1 { font-size: 1.25rem; }
.legal-doc-body h2 { font-size: 1.05rem; color: var(--c1); }
.legal-doc-body h3 { font-size: .95rem; }
.legal-doc-body h4 { font-size: .88rem; color: rgba(255,255,255,.7); }
.legal-doc-body > :first-child { margin-top: 0; }
.legal-doc-body p { margin: 0 0 .85rem; }
.legal-doc-body hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 1.5rem 0;
}
.legal-doc-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .82rem;
}
.legal-doc-body th,
.legal-doc-body td {
  border: 1px solid rgba(255,255,255,.12);
  padding: .5rem .65rem;
  text-align: left;
  vertical-align: top;
}
.legal-doc-body th {
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  font-weight: 700;
}

/* Footer inside doc view */
.legal-doc-footer {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ── Fallback for color-mix (older browsers) ───────── */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .legal-card-icon,
  .legal-doc-icon {
    background: rgba(12,181,210,.1);
    border-color: rgba(12,181,210,.18);
  }
  .legal-card-icon svg,
  .legal-doc-icon svg {
    color: var(--c1);
  }
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  .legal-card { padding: 1rem; gap: .75rem; }
  .legal-card-icon { width: 38px; height: 38px; }
  .legal-card-body h2 { font-size: .88rem; }
  .legal-doc-header { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .legal-doc-title { font-size: 1.1rem; }
  .legal-doc-body { font-size: .84rem; }
}