/* ============================================================
   La Manuli - strony tekstowe i błąd 404 (redesign v2).
   Wymaga /css/lm.css. Używają go: o-la-manuli-v2, polityka-prywatnosci-v2, 404-v2.
   Klasy neutralne: .page-hero, .prose, .toc, .error-page (+ elementy pomocnicze).
   Breakpointy (tylko w @media): 480 / 768 / 1000 / 1280 jak w lm.css.
   ============================================================ */

:root{
  --coral-ink:#8A2238;        /* tekst na różu (plakietka błędu, licznik gry) */
  --violet-ink:#5C4A8A;       /* tekst na fiolecie (spis treści) */
  --violet-wash:#F7F4FD;      /* tło spisu treści */
  --board-line:#C9E4F4;       /* podkładka: obrys i pinezki */
}

/* aktywny punkt menu mobilnego (lm.css stylizuje tylko .site-nav__link) */
.mobile-menu__link[aria-current="page"]{ background:var(--blue-soft); }

/* ---------- 1. Okruszki ---------- */
/* komponent .breadcrumbs: lm.css (sekcja 16) */

/* ---------- 2. Nagłówek strony .page-hero ---------- */
.page-hero{
  --hero-bg:var(--blue-soft);
  --hero-dot:#C9E4F4;
  background-color:var(--hero-bg);
  background-image:radial-gradient(circle, var(--hero-dot) 2px, transparent 2.6px);
  background-size:24px 24px;
  background-position:12px 12px;
  border-radius:0 0 clamp(32px, 4.4vw, 56px) clamp(32px, 4.4vw, 56px);
  overflow:clip;
}
.page-hero--mint{ --hero-bg:var(--mint-soft); --hero-dot:#C4EBDB; }
.page-hero--violet{ --hero-bg:var(--violet-soft); background-image:none; }
.page-hero__inner{
  display:grid;
  gap:clamp(24px, 4.4vw, 56px);
  align-items:center;
  padding-block:var(--crumbs-before) clamp(36px, 5.5vw, 72px);
}
.page-hero__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  --gap:clamp(14px, 1.8vw, 22px);
  gap:var(--gap);
  min-width:0;
}
/* odstęp okruszki -> H1 taki sam jak na każdej stronie (bez doliczania odstępu kolumny) */
.page-hero__copy > .breadcrumbs{ margin-bottom:calc(var(--crumbs-after) - var(--gap)); }
/* nagłówek dwukolumnowy z okruszkami: tekst od góry (okruszki w tym samym miejscu co na innych stronach),
   ilustracja wyśrodkowana w pionie; strona 404 (bez okruszków) zostaje wyśrodkowana w całości */
.page-hero__inner--split{ align-items:start; }
.page-hero__inner--split > .hero-art{ align-self:center; }
.error-page .page-hero__inner--split{ align-items:center; }
/* H1 (.page-hero__title): --fs-h1 z lm.css (jak każda strona poza home) */
.error-page .page-hero__inner{ padding-top:clamp(24px, 5vw, 72px); }
/* strona błędu na wysokim ekranie: tło sekcji sięga stopki (bez białego pasa), treść wyśrodkowana w pionie */
.main--fill{ display:flex; flex-direction:column; }
.main--fill > .page-hero{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; border-radius:0; }
.page-hero__lead{ max-width:540px; font-size:var(--fs-lead); line-height:1.6; color:var(--ink); }
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.page-hero .eyebrow{ color:var(--violet-ink); }

/* węższy kontener (polityka) i gęstszy rytm sekcji strony tekstowej */
/* strona tekstowa: ta sama szerokość co nagłówek (wspólna lewa krawędź z logo); miarę tekstu trzyma --measure w .legal-section */
.container--narrow{ width:min(var(--container), 100% - 2 * var(--gutter)); margin-inline:auto; }
.section--sm{ padding-block:clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.section--sm.section--tail{ padding-top:clamp(8px, 2vw, 24px); padding-bottom:clamp(3rem, 2rem + 4vw, 5.5rem); }

/* ---------- 3. Proza (długi tekst) ---------- */
.prose{
  max-width:var(--container-text);
  font-size:var(--fs-text);
  line-height:var(--lh-text);
  color:var(--ink);
}
.prose > p, .prose > ul, .prose > ol{ max-width:var(--measure); }
.prose > * + *{ margin-top:var(--space-4); }
.prose h2{
  margin-top:clamp(32px, 4vw, 48px);
  font-size:var(--fs-h2-text);
  line-height:1.2;
}
.prose h2 + *{ margin-top:var(--space-3); }
.prose ul,
.prose ol{ display:flex; flex-direction:column; gap:10px; list-style:none; }
.prose ul > li{ position:relative; padding-left:28px; }
.prose ul > li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.55em;
  width:14px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 26%, var(--blue) 30%);
}
.prose ul ul{ margin-top:10px; }
.prose p{ text-wrap:pretty; }
.prose__lead{
  font:700 var(--fs-h3)/1.5 var(--font-head);
  color:var(--blue-ink);
}

/* wyróżniony fragment: komponent .callout z lm.css (sekcja 18; .callout--info = błękit) */

/* tabela (prawa użytkownika) */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:2px solid var(--border-card);
  border-radius:16px;
  overflow:clip;
  font-size:.9375rem;
  line-height:1.5;
}
.table th{
  padding:10px 14px;
  text-align:left;
  background:var(--violet-soft);
  color:var(--blue-ink);
  font:900 .875rem/1.3 var(--font-head);
}
.table td{ padding:10px 14px; border-top:1px solid var(--border-card); vertical-align:top; }
.table td:first-child{ width:34%; }
.table strong{ color:var(--blue-ink); }

/* ---------- 4. O marce ---------- */
/* dekoracja w miejscu zdjęcia: serce z koralików na podkładce */
.hero-art{
  --toy-edge:var(--mint);
  --toy-edge-w:8px;
  width:min(100%, 380px);
  justify-self:center;
  padding:clamp(14px, 2vw, 22px);
  border-radius:clamp(24px, 3vw, 32px);
  border-width:3px;
}
.pegboard{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  padding:3.8%;
  border-radius:18px;
  background:var(--blue-soft);
  box-shadow:inset 0 0 0 2px var(--board-line), 0 4px 0 var(--board-line);
}
.pegboard__cell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1;
}
.pegboard__peg{ width:22%; aspect-ratio:1; border-radius:50%; background:var(--board-line); }
.pegboard .bead{
  --bead-size:88%;
  --c:var(--coral);
  background:
    radial-gradient(circle at 30% 27%, rgba(255,255,255,.8) 0 6%, transparent 8%),
    radial-gradient(circle, var(--blue-soft) 0 24%, rgba(14,77,110,.16) 25% 27%, var(--c) 28%);
}
.pegboard .bead--white{ --c:#fff; }

/* wstęp i dwie kolumny */
.about-intro{ display:grid; gap:clamp(20px, 3vw, 40px); align-items:start; }
.about-intro .prose h2{ margin-top:0; }
.values{
  list-style:none;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(14px, 1.8vw, 22px);
  margin-top:clamp(24px, 3vw, 36px);
  padding-bottom:6px;
}
.value{
  --toy-edge-w:6px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(18px, 2.2vw, 26px);
  border-radius:28px;
}
.value__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:18px;
  background:#fff;
  color:var(--blue-ink);
  box-shadow:0 3px 0 var(--toy-edge);
}
.value__title{ display:block; font:900 1.25rem/1.2 var(--font-head); color:var(--blue-ink); }
.value__text{ display:block; line-height:1.55; }
.value__text::first-letter{ text-transform:uppercase; }

.duo{ display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(22px, 3vw, 32px); padding-bottom:6px; }
.info-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:clamp(22px, 3vw, 36px);
  border-radius:28px;
}
.info-card p{ font-size:var(--fs-lead); line-height:1.6; }

.cta-band{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px);
  border-radius:clamp(28px, 3vw, 40px);
  text-align:center;
}
.cta-band p{ max-width:520px; font-size:var(--fs-lead); line-height:1.6; }
.cta-band__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:4px; }

/* ---------- 5. Polityka prywatności ---------- */
.privacy-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px 10px 12px;
  border-radius:var(--radius-pill);
  border:2px solid var(--mint);
  background:#fff;
  box-shadow:0 4px 0 var(--mint);
  font:900 clamp(15px, 1.4vw, 18px)/1.2 var(--font-head);
  color:var(--blue-ink);
}
.privacy-badge__icon{
  display:flex;
  flex:0 0 32px;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--mint-soft);
  color:var(--mint-ink);
  --icon-accent:var(--mint-line);
}
.updated{ font-size:var(--fs-small); line-height:1.5; color:var(--ink); }
.facts{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap:12px;
  width:100%;
  margin-top:6px;
}
.fact{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 18px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 4px 0 var(--fact-edge, var(--blue));
}
.fact:nth-child(1){ --fact-edge:var(--mint); }
.fact:nth-child(2){ --fact-edge:var(--blue); }
.fact:nth-child(3){ --fact-edge:var(--yellow-soft-edge); }
.fact__value{ font:900 clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem)/1 var(--font-head); color:var(--blue-ink); font-variant-numeric:tabular-nums; }
.fact__label{ font:800 .875rem/1.3 var(--font-head); color:var(--ink); }

.legal{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(20px, 4vw, 56px);
  align-items:start;
  width:min(var(--container), 100% - 2 * var(--gutter));
  margin-inline:auto;
  padding-block:clamp(28px, 4.4vw, 56px) clamp(48px, 6vw, 80px);
}
/* kolumna jak w artykule: tekst w miarze --measure, tabela i ramki na szerokość kolumny */
.legal__main{ min-width:0; max-width:var(--container-text); }
.legal-section > p, .legal-section > ul, .legal-section > ol, .legal-section > h2{ max-width:var(--measure); }
.legal-section{ scroll-margin-top:calc(var(--header-h-sm) + 16px); }
.legal-section + .legal-section{ margin-top:clamp(28px, 3.4vw, 40px); }
.legal-section > * + *{ margin-top:var(--space-4); }
.legal-section > h2 + *{ margin-top:var(--space-3); }
.legal-section h2{ display:flex; align-items:center; gap:12px; margin-top:0; }
.legal-section h2::before{
  content:"";
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 22%, var(--sec, var(--blue)) 26%);
  box-shadow:0 3px 0 rgba(14,77,110,.12);
}
.legal-section:nth-of-type(5n+2) h2::before{ --sec:var(--mint); }
.legal-section:nth-of-type(5n+3) h2::before{ --sec:var(--yellow-soft-edge); }
.legal-section:nth-of-type(5n+4) h2::before{ --sec:var(--coral); }
.legal-section:nth-of-type(5n+5) h2::before{ --sec:var(--violet); }
.legal__contact{ margin-top:clamp(28px, 3.4vw, 40px); }

/* spis treści: na mobile zwijany (details), od 1000 px stały panel */
.toc{ border-radius:20px; background:var(--violet-wash); padding:4px 14px; }
.toc__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  list-style:none;
  cursor:pointer;
}
.toc__summary::-webkit-details-marker{ display:none; }
.toc__summary::after{
  content:"";
  border:6px solid transparent;
  border-top-color:var(--blue-deep);
  border-bottom-width:0;
  transition:transform var(--dur-2) var(--ease-out);
}
.toc details[open] > .toc__summary::after{ transform:rotate(180deg); }
.toc h2{ font:900 15px/1 var(--font-head); color:var(--blue-ink); letter-spacing:0; }
.toc ol{
  display:flex;
  flex-direction:column;
  padding-bottom:10px;
  list-style:none;
  counter-reset:toc;
}
.toc a{
  counter-increment:toc;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 10px;
  border-radius:12px;
  font:800 14px/1.25 var(--font-head);
  color:var(--ink);
  text-decoration:none;
}
.toc a::before{
  content:counter(toc);
  display:flex;
  flex:0 0 24px;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  color:var(--violet-ink);
  font:900 12px/1 var(--font-head);
}
.toc a:hover{ background:#fff; color:var(--blue-ink); }
.toc a:focus-visible{ outline-offset:-3px; }

/* ---------- 6. Błąd 404 ---------- */
.error-page__code{
  padding:8px 14px;
  border-radius:12px;
  background:var(--coral-soft);
  color:var(--coral-ink);
  font:900 14px/1 var(--font-head);
  box-shadow:0 3px 0 var(--coral-edge);
}
.error-page__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.error-page__links{ display:flex; flex-wrap:wrap; gap:0 18px; font:800 15px/1 var(--font-head); }
.error-page__links a{ display:flex; align-items:center; min-height:44px; }
.error-page__links a:hover{ color:var(--blue-ink); }

/* sprite koralika 3D (tylko dekoracja i mini-gra) */
.lmb-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* mini-gra "Ułóż serce" */
.game{
  --toy-edge:var(--coral-edge);
  --toy-edge-w:8px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(14px, 2vw, 22px);
  border-radius:32px;
  border-width:3px;
  color:var(--coral);
}
.game__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px; }
.game__title{ display:flex; align-items:center; gap:10px; font:900 16px/1.2 var(--font-head); color:var(--blue-ink); }
.game__title svg{ width:22px; height:22px; flex:0 0 22px; color:var(--coral); }
.game__tools{ display:flex; align-items:center; gap:8px; }
.game__count{
  min-width:56px;
  padding:8px 12px;
  border-radius:var(--radius-pill);
  background:var(--coral-soft);
  text-align:center;
  font:900 15px/1 var(--font-head);
  color:var(--coral-ink);
  font-variant-numeric:tabular-nums;
}
.game__area{
  position:relative;
  width:100%;
  max-width:500px;
  margin-inline:auto;
  aspect-ratio:500 / 330;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.game__board{ position:absolute; left:50%; top:50%; width:52%; translate:-50% -50%; }
.pegboard svg{ display:block; }
.pegboard__bead{ position:absolute; inset:4%; width:92%; height:92%; }
.pegboard__bead--white{ color:#fff; }
.game__hole::before{
  content:"";
  width:84%;
  aspect-ratio:1;
  border-radius:50%;
  border:2px dashed var(--coral);
  transition:background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.game__hole .pegboard__bead{ display:none; }
.game__hole.is-near::before{ border-color:var(--blue-deep); background:#fff; }
.game__hole.is-filled::before{ display:none; }
.game__hole.is-filled .pegboard__bead{ display:block; animation:lm-pop var(--dur-bead) var(--ease-press); }
@keyframes lm-pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }

.game__bead{
  position:absolute;
  left:var(--x);
  top:var(--y);
  z-index:2;
  width:max(8%, 44px);
  aspect-ratio:1;
  padding:0;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--coral);
  cursor:grab;
  translate:-50% -50%;
  rotate:var(--r);
  touch-action:none;
  transition:transform var(--dur-3) var(--ease-press);
}
.game__bead svg{ display:block; width:100%; height:auto; aspect-ratio:1; pointer-events:none; }   /* Safari: bez height:100% w pudełku aspect-ratio */
.game__bead.is-drag{ z-index:3; rotate:0deg; cursor:grabbing; transition:none; }
.game__bead[data-i="0"]{ --x:11.2%; --y:20%;   --r:-12deg; }
.game__bead[data-i="1"]{ --x:14%;   --y:76.4%; --r:18deg; }
.game__bead[data-i="2"]{ --x:89.2%; --y:17.6%; --r:24deg; }
.game__bead[data-i="3"]{ --x:88%;   --y:71.5%; --r:-10deg; }
.game__bead[data-i="4"]{ --x:50%;   --y:92%;   --r:8deg; }
.game__fx{ position:absolute; inset:0; overflow:visible; pointer-events:none; }
.game__piece{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; will-change:transform, opacity; }
.game__done{
  align-self:center;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  background:var(--yellow-soft);
  box-shadow:0 3px 0 var(--yellow-soft-edge);
  font:900 16px/1 var(--font-head);
  color:var(--blue-ink);
}
.game__done:empty{ display:none; }

/* ---------- 7. Breakpointy ---------- */
@media (max-width:479px){
  .game__area{ aspect-ratio:311 / 300; }
  .game__board{ top:14.7%; width:65%; translate:-50% 0; }
  .game__bead[data-i="0"]{ --x:7.7%;  --y:10%; }
  .game__bead[data-i="1"]{ --x:6.4%;  --y:65.3%; }
  .game__bead[data-i="2"]{ --x:93.2%; --y:17.3%; }
  .game__bead[data-i="3"]{ --x:93.9%; --y:70.7%; }
  .game__bead[data-i="4"]{ --x:50.2%; --y:91.3%; }
}
@media (min-width:600px){
  .values{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:768px){
  .duo{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1000px){
  .page-hero__inner--split{ grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); }
  .about-intro{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .values{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .legal{ grid-template-columns:260px minmax(0, 1fr); }
  .legal--single{ grid-template-columns:minmax(0, 1fr); }   /* strona bez spisu treści (źródła grafik) */
  .toc{ position:sticky; top:calc(var(--header-h) + 24px); padding:18px; border-radius:24px; }
  .toc__summary{ min-height:0; margin-bottom:8px; cursor:default; }
  .toc__summary::after{ display:none; }
  .toc h2{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--violet-ink); }
  .toc ol{ padding-bottom:0; }
}

/* ---------- 8. Ruch ograniczony ---------- */
@media (prefers-reduced-motion:reduce){
  .game__bead{ transition:none; }
  .game__hole.is-filled .pegboard__bead{ animation:none; }
}