/* ============================================================
   css/strona-v2.css — WSPÓLNY arkusz PODSTRON w stylu nowego landingu /v2
   (o-nas.html, bezpieczenstwo-zdjec.html, kolejne z frontend/szablon-strona-v2.html).

   Skąd to jest: tokeny, krój, reset, przycisk, nagłówek i mgiełka hero są
   przepisane 1:1 z inline <style> w index-v2.html (landing trzyma CSS inline
   ze względu na LCP; podstrony są lżejsze i mogą dzielić jeden plik).
   Zmieniasz kolor / krój / przycisk → zmień TU i w index-v2.html.

   Czego tu NIE ma: stopki. Jej CSS i markup wstrzykuje js/stopka-v2.js
   (jedno źródło prawdy dla landingu i podstron).
   ============================================================ */

/* ---------- KRÓJ — Fira Sans self-hosted (jak index-v2.html) ---------- */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/fira-sans/fira-sans-400-pl.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/fira-sans/fira-sans-700-pl.woff2') format('woff2'); }
@font-face { font-family: 'Fira Sans Fallback'; font-weight: 400; src: local('Segoe UI'), local('SegoeUI'), local('Roboto'), local('Roboto-Regular'), local('Helvetica Neue'), local('Arial'), local('ArialMT'); size-adjust: 106%; ascent-override: 93.5%; descent-override: 26.5%; line-gap-override: 0%; }
@font-face { font-family: 'Fira Sans Fallback'; font-weight: 700; src: local('Segoe UI Bold'), local('SegoeUI-Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 104%; ascent-override: 93.5%; descent-override: 26.5%; line-gap-override: 0%; }

/* ---------- TOKENY — „Paleta kadr.ai", wariant B ---------- */
:root {
  --tlo: #FCFCFA;
  --karta: #FFFFFF;
  --karta-2: #F3F3EE;
  --linia: #D8D8D0;
  --tekst: #161616;
  --tekst-2: #4A4A45;
  --tekst-3: #6B6B64;
  --ziel-800: #1A5A2B;
  --ziel-700: #1B6130;
  --ziel-100: #DDF0E1;
  --terra-700: #8E320D;
  --terra-hover: #7E2C0B;
  --terra-50: #FCF1EB;
  --terra-linia: #F8E3D9;
  --promien-btn: 8px;
  --promien-karta: 12px;
  --szer: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --font: 'Fira Sans', 'Fira Sans Fallback', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cien-karta: 0 10px 28px rgba(15, 23, 42, 0.10);
  --ziarno: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='z'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.22  0 0 0 0 0.15  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23z)'/></svg>");
}

/* ---------- RESET / BAZA ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 18px;               /* treść ≥ 18 px — odbiorca 50+ */
  line-height: 1.6;
  color: var(--tekst);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; color: var(--tekst); }
h2 { font-size: clamp(28px, 4vw, 36px); }
h3 { font-size: clamp(21px, 2.8vw, 25px); line-height: 1.25; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--ziel-700); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kontener { width: 100%; max-width: var(--szer); margin: 0 auto; padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); }
.srodek { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.srodek p { max-width: 640px; color: var(--tekst-2); }
.link { color: var(--ziel-800); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--ziel-700); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- PRZYCISK — jedno CTA w terakocie (jak na landingu) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 64px; padding: 17px 38px;
  border-radius: var(--promien-btn);
  font-size: 20px; font-weight: 700; line-height: 1.2; color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 45%, rgba(0,0,0,0.12) 100%),
    var(--terra-700);
  box-shadow: 0 10px 22px rgba(142, 50, 13, 0.35), inset 0 1px 0 rgba(255,255,255,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  max-width: 100%; text-align: center;
}
.btn:hover { background-color: var(--terra-hover); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(142, 50, 13, 0.40), inset 0 1px 0 rgba(255,255,255,0.45); }
.btn:active { transform: translateY(0); }
.btn svg { flex-shrink: 0; }
@media (max-width: 360px) { .btn { padding-left: 22px; padding-right: 22px; font-size: 18px; } }
.tylko-waskie { display: none; }
@media (max-width: 360px) { .tylko-waskie { display: inline; } .btn span { text-align: center; } }
.btn--primary { /* alias dla przycisku „Zaakceptuj" z js/cookie-consent.js */ }

/* ---------- NAGŁÓWEK + HERO PODSTRONY — ta sama mgiełka B, niższy pas ---------- */
.hero { position: relative; padding-bottom: 56px; background: var(--tlo); }
.hero > * { position: relative; z-index: 1; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 0;
  background: linear-gradient(to bottom, rgba(252, 252, 250, 0), var(--tlo) 85%);
  pointer-events: none;
}
/* Jedna barwa, piaskowa — jak na landingu (wariant C makiety „Mgiełka hero kadr.ai"); pas podstrony jest niższy, więc elipsa mniejsza i wyżej.
   Od 2026-09-22 nagłówek stoi PRZED pasem (sticky pasek z pasek-naglowka.css), więc kotwica elipsy to 224 px = dawne 300 px minus 76 px paska —
   środek mgiełki zostaje w tym samym miejscu strony. */
.hero--mgla-b { background: var(--ziarno) repeat, radial-gradient(ellipse 900px 460px at 50% 224px, rgba(198,166,126,0.30) 0%, rgba(198,166,126,0.13) 50%, rgba(198,166,126,0) 84%), var(--tlo); }

/* Wnętrze paska nagłówka: logo | link. Sam pasek (sticky, tło, linia, cień, wysokość 76 px)
   i rozmiar logo (30 px / 26 px) — css/pasek-naglowka.css, wspólny dla serwisu (2026-09-22);
   <header class="site-header"> stoi w każdej podstronie PRZED pasem .hero. */
.naglowek { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.naglowek__logo { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.naglowek__logo img { width: auto; }
.naglowek__kontakt { font-size: 18px; font-weight: 700; color: var(--ziel-800); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; padding: 10px 0; }
.naglowek__kontakt:hover { color: var(--ziel-700); }
@media (max-width: 380px) { .naglowek__kontakt { font-size: 16px; white-space: normal; text-align: right; } }

.hero__tresc { max-width: 900px; padding-top: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.hero__etykieta { font-size: 15px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ziel-800); }
.hero__tytul { font-size: clamp(32px, 5.6vw, 52px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; max-width: 820px; }
.hero__opis { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.55; color: var(--tekst-2); max-width: 680px; }

/* ---------- ARTYKUŁ — treść podstrony ---------- */
.artykul { max-width: 780px; padding-top: clamp(24px, 4vw, 40px); padding-bottom: clamp(56px, 7vw, 88px); display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); }
.artykul section { display: flex; flex-direction: column; gap: 16px; }
.artykul h2 { margin-bottom: 4px; text-wrap: balance; }
.artykul h3 { margin-top: 8px; }
.artykul p, .artykul li { color: var(--tekst-2); line-height: 1.65; }
.artykul strong { color: var(--tekst); }
.artykul ul, .artykul ol { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.artykul a:not(.btn) { color: var(--ziel-800); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.artykul a:not(.btn):hover { color: var(--ziel-700); }
.artykul figure { display: flex; flex-direction: column; gap: 10px; }
.artykul figure img, .artykul figure video { width: 100%; height: auto; border-radius: var(--promien-karta); border: 1px solid var(--linia); }
.artykul figure video { max-width: 560px; margin: 0 auto; background: var(--karta-2); }
.artykul figcaption { font-size: 16px; color: var(--tekst-3); }
.artykul blockquote { padding: 4px 0 4px 20px; border-left: 4px solid var(--ziel-100); font-size: 20px; line-height: 1.5; color: var(--tekst); }

/* „W skrócie" — karta z listą ikon (jak listwa zaufania w stopce). */
/* `.artykul .skrot` — musi wygrać z `.artykul ul` (display:flex, padding-left) niżej/wyżej w pliku. */
.artykul .skrot, .skrot { list-style: none; padding: 24px 28px; border-radius: var(--promien-karta); background: var(--karta); border: 1px solid var(--linia); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.skrot li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--tekst); }
.skrot svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--ziel-700); margin-top: 1px; }
@media (max-width: 640px) { .artykul .skrot, .skrot { grid-template-columns: 1fr; padding: 20px; } }

/* Wyróżniona ramka — np. „Chcesz, żebyśmy skasowali pliki wcześniej?" */
.ramka { padding: 22px 26px; border-radius: var(--promien-karta); background: var(--terra-50); border: 1px solid var(--terra-linia); display: flex; flex-direction: column; gap: 8px; }
.ramka p { color: var(--tekst); }

/* Porównanie przed / po — dwa kwadratowe obrazy obok siebie z podpisami. */
.porownanie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.porownanie figure { gap: 8px; }
.porownanie img { aspect-ratio: 1 / 1; object-fit: cover; }
.porownanie figcaption { font-size: 16px; font-weight: 700; color: var(--tekst-2); text-align: center; }

/* Karty 2/3 kolumny — np. „Co dla nas ważne". */
.karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.karty--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karta { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 10px; background: var(--karta-2); border: 1px solid var(--linia); }
.karta h3 { font-size: 20px; line-height: 1.3; margin: 0; }
.karta p { font-size: 17px; }
@media (max-width: 800px) { .karty, .karty--2 { grid-template-columns: 1fr; } }

/* ---------- PASY + ZAMKNIĘCIE (jak na landingu) ---------- */
.pas { border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.pas--szary { background: var(--karta-2); }
.pas--bialy { background: var(--karta); }
.pas--terra { background: var(--terra-50); }
.pas--ostatni { border-bottom: 0; }   /* pod spodem stopka ma własną, różową kreskę */
.zamkniecie { max-width: 900px; padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(56px, 7vw, 88px); gap: 22px; }
.zamkniecie h2 { font-size: clamp(28px, 4.6vw, 40px); line-height: 1.12; text-wrap: balance; }

/* ---------- BANER COOKIE (markup wstrzykuje js/cookie-consent.js) ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--karta); border-top: 1px solid var(--linia);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
  transform: translateY(100%); opacity: 0; visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, visibility 0.4s ease;
}
.cookie-banner--visible { transform: translateY(0); opacity: 1; visibility: visible; }
.cookie-banner__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: var(--szer); margin: 0 auto;
  padding: 18px var(--pad);
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.cookie-banner__text { font-size: 16px; line-height: 1.5; color: var(--tekst-2); flex: 1; }
.cookie-banner__link { color: var(--ziel-800); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie-banner__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.btn--cookie-accept { min-height: 48px; padding: 12px 24px; font-size: 16px; box-shadow: none; text-shadow: none; }
.btn--cookie-accept:hover { box-shadow: none; transform: none; }
.btn--cookie-reject { min-height: 48px; padding: 12px 16px; font-size: 16px; font-weight: 700; color: var(--tekst-2); background: transparent; box-shadow: none; text-shadow: none; }
.btn--cookie-reject:hover { color: var(--tekst); background: transparent; transform: none; box-shadow: none; }
@media (max-width: 640px) { .cookie-banner__inner { flex-direction: column; text-align: center; gap: 14px; } }