/* 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 ───────────────────────────────────────────────── */

/* Na wąskim ekranie zrzuty jadą w poziomie zamiast układać się w kolumnę:
   pięć obrazków jeden pod drugim to na telefonie kilka ekranów przewijania
   i nikt nie dojedzie do treści pod spodem. */
.galeria {
  margin-top: 44px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  -webkit-overflow-scrolling: touch;
}
.galeria figure { scroll-snap-align: center; }
.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; }
.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); }