/* karciarze.pl — arkusz strony.
 *
 * Kolory wyłącznie z tokens.css. Ten plik nie definiuje ani jednego hexa
 * poza cieniami — ta sama reguła co w `app/lib/theme.dart`, żeby strona
 * i aplikacja nie rozjechały się na oczach tej samej osoby.
 *
 * Typografia idzie od 18px w górę, nie od 16. To nie jest kosmetyka: grupa
 * docelowa to 40–70 lat i cała identyfikacja stoi na tym, że ma być widać
 * (patrz branding/README.md, sekcja Typografia).
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--kc-paper);
  color: var(--kc-ink);
  font-family: var(--kc-font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--kc-font-display); font-weight: 700; line-height: 1.2; }

a { color: var(--kc-felt); }
a:hover { color: var(--kc-felt-deep); }

.srodek { width: min(1080px, 100% - 48px); margin-inline: auto; }

/* ── nagłówek ──────────────────────────────────────────────────────── */

.gora {
  position: sticky; top: 0; z-index: 10;
  background: var(--kc-paper);
  border-bottom: 1px solid var(--kc-line);
}
.gora .srodek {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 0; flex-wrap: wrap;
}
.gora img { height: 40px; width: auto; display: block; }
.gora nav { display: flex; gap: 28px; flex-wrap: wrap; }
.gora nav a { color: var(--kc-ink-soft); text-decoration: none; font-weight: 600; }
.gora nav a:hover { color: var(--kc-felt); }

/* ── sekcja otwierająca ────────────────────────────────────────────── */

.otwarcie {
  background: var(--kc-felt);
  background-image: radial-gradient(ellipse at 50% 0%, var(--kc-felt-hi) 0%, var(--kc-felt) 55%, var(--kc-felt-lo) 100%);
  color: var(--kc-paper);
  padding: 72px 0 88px;
}
.otwarcie h1 { font-size: clamp(34px, 5.5vw, 58px); max-width: 16ch; }
.otwarcie .lead {
  font-size: clamp(20px, 2.4vw, 25px);
  margin-top: 20px; max-width: 46ch; opacity: .92;
}
.otwarcie .znak { width: 76px; height: 76px; display: block; margin-bottom: 26px; }

.przyciski { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-block; padding: 15px 30px;
  border-radius: var(--kc-radius);
  font-weight: 700; font-size: 19px; text-decoration: none;
  min-height: 56px;                 /* pole dotykowe jak w aplikacji */
  display: inline-flex; align-items: center;
}
.btn-glowny { background: var(--kc-gold); color: var(--kc-ink); }
.btn-glowny:hover { background: var(--kc-gold); color: var(--kc-ink); filter: brightness(1.08); }
.btn-drugi {
  background: transparent; color: var(--kc-paper);
  box-shadow: inset 0 0 0 2px rgba(243, 245, 242, .5);
}
.btn-drugi:hover { color: var(--kc-paper); box-shadow: inset 0 0 0 2px var(--kc-paper); }

.uwaga-status {
  margin-top: 22px; font-size: 17px; opacity: .8; max-width: 52ch;
}

/* ── sekcje ────────────────────────────────────────────────────────── */

section { padding: 76px 0; }
section h2 { font-size: clamp(28px, 3.6vw, 40px); max-width: 20ch; }
section .wstep { font-size: 20px; color: var(--kc-ink-soft); margin-top: 16px; max-width: 62ch; }

.jasna { background: var(--kc-paper); }
.biala { background: var(--kc-card); }

.siatka {
  display: grid; gap: 24px; margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Cztery kafle w `auto-fit` układają się 3 + 1 i zostawiają dziurę na pół
   ekranu. Parzyste sekcje dostają więc jawne dwie kolumny. */
.siatka-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .siatka-2 { grid-template-columns: 1fr; } }

.kafel {
  background: var(--kc-card);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius-lg);
  padding: 28px;
}
.biala .kafel { background: var(--kc-paper); }
.kafel h3 { font-size: 23px; margin-bottom: 10px; }
.kafel p { color: var(--kc-ink-soft); }
.kafel .ikonka { font-size: 34px; line-height: 1; margin-bottom: 14px; display: block; color: var(--kc-felt); }

/* lista zasad — dwie kolumny na szerokim, jedna na telefonie */
.zasady { columns: 2; column-gap: 44px; margin-top: 36px; }
.zasady li {
  break-inside: avoid; list-style: none; padding: 11px 0 11px 32px;
  position: relative; border-bottom: 1px solid var(--kc-line);
}
.zasady li::before {
  content: "♠"; position: absolute; left: 0; top: 11px;
  color: var(--kc-felt); font-size: 19px;
}
.zasady b { font-weight: 700; }
.zasady span { color: var(--kc-ink-soft); display: block; font-size: 17px; }

@media (max-width: 760px) { .zasady { columns: 1; } }

/* ── galeria zrzutów ───────────────────────────────────────────────── */

/* Zrzuty jadą w poziomie zamiast układać się w kolumnę: osiem obrazków jeden
   pod drugim to na telefonie kilkanaście ekranów przewijania i nikt nie
   dojedzie do treści pod spodem.

   Sam pasek przewijania jednak nie wystarczał i to była uwaga z zewnątrz:
   poziomy scroll na stronie czyta się jak niedokończony układ, a na myszy bez
   kółka poziomego nie ma czym go ruszyć. Stąd karuzela — pasek zostaje pod
   spodem jako droga dodatkowa, a nad nim stoją widoczne strzałki i kropki. */
.karuzela { position: relative; }

.galeria {
  --widoczne: 3;
  margin-top: 44px;
  display: grid;
  grid-auto-flow: column;
  /* Szerokość kadru liczona z liczby widocznych, a nie zgadnięta w pikselach:
     dzięki temu krok karuzeli równa się dokładnie jednemu kadrowi w każdym
     układzie, a skrypt nie musi znać żadnej stałej. */
  grid-auto-columns: calc((100% - (var(--widoczne) - 1) * 26px) / var(--widoczne));
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.galeria::-webkit-scrollbar { display: none; }
.galeria:focus-visible { outline: 3px solid var(--kc-gold); outline-offset: 6px; }
.galeria figure { scroll-snap-align: start; }

@media (max-width: 980px) { .galeria { --widoczne: 2; } }
@media (max-width: 640px) { .galeria { --widoczne: 1; } }

/* ── sterowanie karuzeli ───────────────────────────────────────────── */

/* 56 px to próg pola dotykowego z aplikacji i tu obowiązuje tak samo —
   stronę czyta ta sama grupa, co gra. */
.karuzela-strzalka {
  position: absolute; top: calc(50% - 34px);
  width: 56px; height: 56px; z-index: 2;
  display: grid; place-items: center;
  border: 1px solid var(--kc-line); border-radius: 50%;
  background: var(--kc-paper); color: var(--kc-felt);
  font-size: 30px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.karuzela-strzalka[data-kier="-1"] { left: -28px; }
.karuzela-strzalka[data-kier="1"]  { right: -28px; }
.karuzela-strzalka:hover:not(:disabled) { background: var(--kc-card); }
.karuzela-strzalka:focus-visible { outline: 3px solid var(--kc-gold); outline-offset: 3px; }
/* Na końcach strzałka gaśnie, ale ZOSTAJE na swoim miejscu: znikająca
   przesuwałaby drugą i kadry skakałyby pod palcem. */
.karuzela-strzalka:disabled { opacity: .32; cursor: default; }

/* Poniżej 1100 px strzałki nie mieszczą się poza kolumną treści, więc wchodzą
   do środka; niżej, gdy widoczny jest jeden kadr, schodzą całkiem — zostają
   kropki i przewijanie palcem, bo tam palec jest i tak pierwszy. */
@media (max-width: 1100px) {
  .karuzela-strzalka[data-kier="-1"] { left: 6px; }
  .karuzela-strzalka[data-kier="1"]  { right: 6px; }
}
@media (max-width: 640px) { .karuzela-strzalka { display: none; } }

.karuzela-kropki {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 6px;
}
/* Kropka ma 10 px, ale przycisk pod nią 44×44 — trafialność bierze się
   z pola dotykowego, nie z tego, co widać. */
.karuzela-kropka {
  width: 44px; height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.karuzela-kropka::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--kc-line); transition: background .18s, transform .18s;
}
.karuzela-kropka[aria-selected="true"]::before {
  background: var(--kc-felt); transform: scale(1.35);
}
.karuzela-kropka:focus-visible { outline: 3px solid var(--kc-gold); outline-offset: -6px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .karuzela-kropka::before { transition: none; }
}
.galeria img {
  width: 100%; height: auto; display: block;
  border-radius: var(--kc-radius-lg);
  border: 1px solid var(--kc-line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
}
.galeria figcaption {
  margin-top: 14px; font-size: 16px; color: var(--kc-ink-soft); line-height: 1.45;
}

/* ── stopka ────────────────────────────────────────────────────────── */

.dol {
  background: var(--kc-felt-deep); color: var(--kc-paper);
  padding: 54px 0 40px; font-size: 17px;
}
.dol a { color: var(--kc-paper); }
.dol .rzad {
  display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  align-items: flex-start;
}
.dol .znak { width: 46px; height: 46px; display: block; margin-bottom: 14px; }
.dol nav { display: flex; flex-direction: column; gap: 10px; }
.dol .prawa { opacity: .7; margin-top: 32px; font-size: 16px; }

/* ── dokument (polityka prywatności) ───────────────────────────────── */

.dokument { padding: 64px 0 88px; }
.dokument h1 { font-size: clamp(30px, 4.4vw, 44px); }
.dokument .data { color: var(--kc-ink-soft); margin-top: 12px; }
.dokument h2 { font-size: 26px; margin-top: 44px; }
.dokument h3 { font-size: 21px; margin-top: 28px; }
.dokument p, .dokument li { max-width: 68ch; margin-top: 14px; }
.dokument ul, .dokument ol { margin-left: 26px; }

/* Nazwa pakietu to dla przeglądarki jedno słowo i sama z siebie nie łamie się
   nigdzie. Monospace w 18 px wygląda przy tekście na większy niż jest
   i rozpycha wiersz, stąd .94em — po nim cały punkt mieści się w jednej linii.
   Na wąskim ekranie łamie się na <wbr> po kropkach (pl. / karciarze. /
   karciarze), bo przecięcie w środku wyrazu albo przed nawiasem czyta się jak
   literówka. „(pakiet" trzyma się identyfikatora niełamliwą spacją, żeby nie
   zostawało samo na końcu wiersza. break-word to już tylko zabezpieczenie na
   dużą skalę czcionki: lepsze niż tekst wyjeżdżający poza kolumnę. */
.dokument code {
  font-size: .94em;
  overflow-wrap: break-word;
}
.dokument .ramka {
  background: var(--kc-card); border: 1px solid var(--kc-line);
  border-left: 5px solid var(--kc-felt);
  border-radius: var(--kc-radius); padding: 22px 26px; margin-top: 28px;
}
.dokument .ramka p:first-child { margin-top: 0; }
.dokument table { border-collapse: collapse; margin-top: 20px; width: 100%; }
.dokument th, .dokument td {
  border: 1px solid var(--kc-line); padding: 11px 14px; text-align: left; vertical-align: top;
}
.dokument th { background: var(--kc-card); font-family: var(--kc-font-display); }