/* ─────────────────────────────────────────────────────────────────────────────
   Landing Google Ad Grants — style WŁASNE podstrony z dokumentami
   (`/google-ad-grants/dokumenty`). Sam landing korzysta wyłącznie ze wspólnego
   `_shared/landing.css`; tutaj leżą tylko klasy biblioteki wzorów, przeniesione
   15.09.2026 razem ze stroną po skasowaniu osobnej zakładki Akademii.

   `--lp` / `--lp-soft` definiuje `body.theme-adgrants` we wspólnym arkuszu,
   więc karty same biorą niebieski landingu — nic tu nie trzeba nadpisywać.
   ───────────────────────────────────────────────────────────────────────────── */

.dok-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:16px; margin-top:32px; }

/* Karta dokumentu ma wyglądać jak rzecz do wzięcia, a nie jak akapit tekstu. Reguła bazowa
   zgubiła się przy przenoszeniu arkusza z /akademia 15.09.2026 (przyszły same `.dok-*`),
   więc karty na `/google-ad-grants/dokumenty` leciały bez tła, obwódki i odstępów. */
.dok { display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--shadow-sm); transition:border-color .18s ease, box-shadow .18s ease; }
.dok:hover { border-color:var(--border-strong); box-shadow:var(--shadow); }

.dok-top { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:11px; }
.dok-fmt { background:var(--lp-soft); color:var(--lp); font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:var(--r-sm); }
.dok-dla { font-size:.72rem; font-weight:600; color:var(--fg-muted); }
.dok-soon { margin-left:auto; background:var(--accent-soft); color:var(--accent-fg);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  font-size:.68rem; font-weight:700; padding:2px 9px; border-radius:999px; }

.dok-nazwa { font-size:1rem; font-weight:700; color:var(--navy); line-height:1.35;
  margin-bottom:7px; }
.dok-opis { flex:1; font-size:.88rem; line-height:1.6; color:var(--fg-secondary); }
.dok-foot { margin-top:16px; }

.dok-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px 14px; background:var(--fg); color:#fff; text-decoration:none;
  font-size:.9rem; font-weight:600; border-radius:var(--r); transition:background .15s; }
.dok-btn:hover { background:#1E293B; color:#fff; }
.dok-btn svg { flex:0 0 auto; }
.dok.is-soon { background:color-mix(in srgb, var(--bg) 55%, #fff); border-style:dashed; }
.dok-btn.is-soon { background:var(--bg); color:var(--fg-muted);
  border:1px dashed var(--border-strong); cursor:not-allowed; }
.dok-btn.is-soon:hover { background:var(--bg); color:var(--fg-secondary); }

.dok-msg { margin-top:9px; font-size:.8rem; line-height:1.5; color:var(--fg-secondary); }
.dk-hero-doc { padding:64px 24px 52px; }
.dk-doc-head { position:relative; z-index:2; max-width:760px; }
.dk-doc-head h1 { margin-bottom:14px; }

.dk-wroc { display:inline-block; margin-bottom:16px; font-size:.88rem; font-weight:600;
  color:var(--fg-secondary); text-decoration:none; }
.dk-wroc:hover { color:var(--accent-fg); }

.dk-doc-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.dk-doc-meta span { background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:6px 14px; font-size:.82rem; color:var(--fg-secondary);
  box-shadow:var(--shadow-sm); }
.dk-doc-meta b { color:var(--navy); font-weight:800; }

.dk-doc-info { padding-top:34px; padding-bottom:0; }
.dk-info-box { display:flex; gap:13px; align-items:flex-start; max-width:820px; margin:0 auto;
  padding:16px 18px; background:var(--lp-soft); border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb, var(--lp) 22%, transparent); }
.dk-info-box svg { flex:0 0 auto; width:22px; height:22px; color:var(--lp); margin-top:2px; }
.dk-info-box b { display:block; font-size:.93rem; color:var(--navy); margin-bottom:3px; }
.dk-info-box span { display:block; font-size:.88rem; line-height:1.6; color:var(--fg-secondary); }

/* Odnośnik do biblioteki wzorów pod cennikiem — wyśrodkowany, oddzielony od kart,
   ale wyraźnie mniejszy niż CTA, bo to materiał do przeczytania, a nie krok zakupowy. */
.cennik-dok { margin:30px 0 0; text-align:center; font-size:.93rem; }
.cennik-dok a { color:var(--lp); font-weight:700; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--lp) 35%, transparent); padding-bottom:2px; }
.cennik-dok a:hover { border-bottom-color:var(--lp); }


/* ═════════════════════════════════════════════════════════════════════════════
   PODSTRONY /pakiet-vip i /akademia — style przeniesione ze skasowanego landingu
   `/akademia` (commit 3af5dd59^) razem z treścią, 15.09.2026.

   Prefiks `ak-` zostaje, bo tak nazywały się klasy w źródle i tak są opisane w historii
   gita. NIE przenosimy stąd: `body.theme-akademia` (motyw indygo — podstrony chodzą na
   `theme-adgrants`, które ma własne `--lp` we wspólnym arkuszu), `.theme-akademia
   .kurs-ico` (landing rysuje znaki kursów SVG-ami z własnym kafelkiem — nadpisanie
   popsułoby je na index.php) ani `.ak-rozwidlenie` / `.ak-tor*` / `.ak-vip` / `.ak-pricing`
   (elementy układu, których podstrony nie używają).
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── ETAPY WSPÓŁPRACY VIP ────────────────────────────────────────────────────
   Wspólne `.steps` to siatka kafli (auto-fit minmax(215px,1fr)) — przy SIEDMIU krokach
   z opisem po kilka zdań każdy kafel robi się paskiem tekstu nie do przeczytania.
   Dlatego oś pionowa: numer + kreska łącząca, treść pełnej szerokości. */
.ak-etapy { list-style:none; margin:36px auto 0; padding:0; max-width:820px; }

.ak-etap { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr);
  gap:20px; padding:0 0 28px; }
/* Kreska łącząca kolejne kroki — rysowana na kolumnie numeru, nie na treści. */
.ak-etap::before { content:""; position:absolute; left:27px; top:52px; bottom:0; width:2px;
  background:linear-gradient(var(--border-strong), var(--border)); }
.ak-etap.is-last { padding-bottom:0; }
.ak-etap.is-last::before { display:none; }

.ak-etap-no { position:relative; z-index:1; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:2px solid var(--lp); color:var(--lp);
  font-size:1.28rem; font-weight:800; letter-spacing:-.02em; box-shadow:var(--shadow-sm);
  font-variant-numeric:tabular-nums; }

.ak-etap-tresc { padding-top:6px; }
.ak-etap-tresc h3 { font-size:1.12rem; font-weight:800; color:var(--navy);
  letter-spacing:-.01em; margin-bottom:8px; }
.ak-etap-tresc p { font-size:.95rem; line-height:1.65; color:var(--fg-secondary); }
.ak-etap-tresc p + p { margin-top:10px; }
.ak-etap-tresc strong { color:var(--fg); font-weight:700; }

/* Uwaga w kroku — wariant, wyjątek albo warunek płatności. Ma być widoczna
   osobno od opisu, bo to zwykle właśnie o to pyta zarząd organizacji. */
.ak-etap-uwaga { padding:11px 13px; background:var(--lp-soft); border-radius:var(--r);
  border-left:3px solid var(--lp); font-size:.9rem; }
.ak-etap-uwaga b { color:var(--navy); font-weight:700; }

.ak-etap-akcje { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.ak-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  font-size:.82rem; font-weight:600; color:var(--navy); text-decoration:none;
  transition:border-color .15s, color .15s, background .15s; }
a.ak-chip:hover { border-color:var(--accent); color:var(--accent-fg); background:var(--accent-soft); }
.ak-chip.is-info { color:var(--fg-muted); font-weight:500; background:var(--bg); }

@media (max-width:560px){
  .ak-etap { grid-template-columns:44px minmax(0,1fr); gap:14px; }
  .ak-etap::before { left:21px; top:44px; }
  .ak-etap-no { width:44px; height:44px; font-size:1.05rem; }
  .ak-etap-tresc { padding-top:2px; }
}

/* ── KOSZTY VIP: dwie opłaty obok siebie ─────────────────────────────────────
   Nie `.pricing`, bo to nie są warianty do wyboru — to dwie składowe jednej ceny
   i karta z przyciskiem zakupu sugerowałaby, że można wziąć jedną z nich. */
.vip-koszty { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px; max-width:820px; margin:32px auto 0; }
.vip-koszt { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm); }
.vip-koszt.is-abon { border-color:color-mix(in srgb, var(--lp) 40%, transparent); }
.vip-koszt-kiedy { display:block; font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--lp); margin-bottom:7px; }
.vip-koszt-kwota { font-size:1.9rem; font-weight:800; color:var(--navy); letter-spacing:-.025em;
  line-height:1.1; }
.vip-koszt-kwota span { display:block; margin-top:3px; font-size:.78rem; font-weight:600;
  letter-spacing:0; color:var(--fg-muted); }
.vip-koszt p { margin-top:11px; font-size:.88rem; line-height:1.6; color:var(--fg-secondary); }
.vip-koszt p b { color:var(--navy); font-weight:700; }

/* Gwarancja zwrotu opłaty wdrożeniowej — najmocniejszy argument oferty VIP,
   więc dostaje własny blok, a nie kolejny punkt listy. */
.ak-gwarancja { display:flex; gap:11px; align-items:flex-start; margin:0 0 14px;
  padding:13px 14px; background:var(--green-soft); border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--green) 26%, transparent); }
.ak-gwarancja svg { flex:0 0 auto; width:20px; height:20px; color:var(--green); margin-top:1px; }
.ak-gwarancja b { display:block; font-size:.88rem; color:var(--navy); margin-bottom:2px; }
.ak-gwarancja span { display:block; font-size:.82rem; line-height:1.5; color:var(--fg-secondary); }
/* Wariant samodzielny: w źródle blok siedział w karcie cennika, tutaj stoi w sekcji. */
.ak-gwarancja.is-blok { max-width:820px; margin:18px auto 0; padding:15px 17px; }

/* ── DODATKI DO AKADEMII ─────────────────────────────────────────────────────
   Płatne rozszerzenia wariantu PRO. Poza kartami cennika, bo dotyczą jednej z nich
   i w karcie robiły z listy cech ścianę tekstu. */
.ak-dodatki { max-width:820px; margin:34px auto 0; padding:20px 22px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); }
.ak-dodatki-head { display:flex; gap:13px; align-items:flex-start; }
.ak-dodatki-head svg { flex:0 0 auto; width:22px; height:22px; color:var(--lp); margin-top:2px; }
.ak-dodatki-head b { display:block; font-size:.95rem; color:var(--navy); margin-bottom:3px; }
.ak-dodatki-head span { display:block; font-size:.88rem; line-height:1.6; color:var(--fg-secondary); }
.ak-dodatki .zasady { margin-top:6px; }

/* ── PORÓWNANIE WARIANTÓW ────────────────────────────────────────────────────
   Cztery kolumny zamiast trzech, a nagłówek niesie nazwę + cenę. Tabele w landingach
   pisane są bez <thead>, więc reguły `.compare thead th` z arkusza wspólnego nie łapią —
   stylujemy pierwszy wiersz wprost. */
.ak-compare table { min-width:720px; }
.ak-compare tr:first-child th { background:var(--bg); color:var(--fg-secondary);
  font-weight:700; font-size:.88rem; border-bottom:1px solid var(--border);
  vertical-align:top; line-height:1.3; }
.ak-compare tr:first-child th:last-child { color:var(--lp); background:var(--lp-soft); }
.ak-compare tr:first-child th span { display:block; margin-top:3px; font-size:.76rem;
  font-weight:600; color:var(--fg-muted); letter-spacing:0; }
.ak-compare tr:first-child th:last-child span { color:var(--lp); opacity:.8; }
/* Kolumna VIP podświetlona na kolor landingu — arkusz wspólny maluje ją pomarańczem
   zarezerwowanym dla CTA, a tu wyróżnia się ofertę, nie przycisk. */
.ak-compare td:last-child { background:color-mix(in srgb, var(--lp-soft) 70%, #fff); }
.ak-compare td:first-child { font-weight:600; color:var(--navy); }

/* ── DROBIAZGI ───────────────────────────────────────────────────────────────*/
/* Liczba lekcji przy tytule kursu — `.kurs b` jest blokiem, więc pigułka musi być inline. */
.ak-lekcje { display:inline-block; margin-left:8px; vertical-align:1px;
  background:var(--lp-soft); color:var(--lp); font-size:.7rem; font-weight:700;
  letter-spacing:.02em; padding:2px 8px; border-radius:999px; }

/* Zdanie domykające sekcję (odnośnik „zobacz wszystkie…"). */
.ak-pod-lista { max-width:760px; margin:22px auto 0; text-align:center;
  font-size:.92rem; color:var(--fg-secondary); }
.ak-pod-lista a { font-weight:600; }
.ak-pod-lista .btn-ghost { margin-top:4px; }

/* Sekcja „Stała współpraca" ma sześć kart — bez tego przy 1080 px wypadały 4 + 2,
   a druga linia ciągnęła się przez całą szerokość. */
@media (min-width:1000px){ .ak-stala { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Para akcji „kup / szczegóły" (`.price-akcje`) zniknęła 22.09 razem z podstronami
   /google-ad-grants/akademia i /pakiet-vip — nie ma już dokąd prowadzić drugiego
   przycisku, a nieużywany CSS tylko udaje, że coś takiego na stronie jest. */

/* ── Gwarancja przyznania grantu ──────────────────────────────────────────────
   Jedyne zdanie w ścieżce wdrożenia, które zdejmuje ryzyko z organizacji — ma się
   wyróżniać (Oskar 22.09: „to daj na pomarańczowo"). Pomarańcz to `--accent`,
   nie `--lp` (na tym landingu `--lp` jest niebieski jak Google). */
.gwarancja { color:var(--accent-fg); font-weight:700; }

/* ── Dopisek pod trzema zasadami programu ─────────────────────────────────── */
.zasady-wiecej { margin:18px auto 0; max-width:760px; text-align:center;
  font-size:.93rem; line-height:1.65; color:var(--fg-secondary); }
.zasady-wiecej a { color:var(--accent-fg); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.zasady-wiecej a:hover { border-bottom-color:var(--accent); }
/* Bez tego „24 zasad programu" łamało się w pół z podkreśleniem po obu stronach. */
.zasady-wiecej a strong { white-space:nowrap; }

/* ── Planer: pole na frazy wypełnia kolumnę (Oskar 22.09) ─────────────────────
   Obie karty mają być tej samej wysokości, a miejsce na wpisywanie ma zjadać całą
   różnicę — bez pustego pasa pod przyciskiem. Robi to wspólny arkusz sam z siebie
   (`.kw-wrap { align-items:stretch }` + `.kw-panel .kw-ta { flex:1 1 auto }`),
   więc tutaj NIE nadpisujemy ani wysokości pola, ani `.kw-list`.
   Uwaga na przyszłość: własna wysokość `.kw-ta` nic tu nie da, dopóki kolumna się
   rozciąga — pole i tak urośnie do wysokości kolumny z wynikami. */