/* =====================================================================
   AUTO SITKO – strona startowa, plakat, regulamin i polityka prywatności.
   Korzysta z /app/style.css (kolory, font, przyciski, karty).
   ===================================================================== */

/* ---------- strona startowa ---------- */
.s-strona { background: var(--tlo); }
.s-gora {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + var(--gora)) 20px 10px; background: var(--czarny);
}
.s-gora .logo { margin: 0; }
.s-hero { background: var(--czarny); color: #fff; padding: 36px 20px 64px; }
.s-hero h1 { font-size: clamp(36px, 8vw, 64px); font-weight: 900; font-style: italic; line-height: 1.02; letter-spacing: -.02em; }
.s-hero-pod { color: #c4c4ca; font-size: 17px; max-width: 620px; margin-top: 16px; }
.s-przyciski { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.s-obrys-jasny { color: #fff; border-color: rgba(255, 255, 255, .5); }
.s-obrys-jasny:active { background: rgba(255, 255, 255, .1); }
/* czarne pasy na całą szerokość, treść wyśrodkowana do 1100 px */
.s-gora, .s-hero { padding-left: max(20px, calc((100% - 1100px) / 2)); padding-right: max(20px, calc((100% - 1100px) / 2)); }
.s-hero > * { max-width: 760px; }
.s-tresc { display: flex; flex-direction: column; gap: 28px; max-width: 1132px; margin: -36px auto 0; padding: 0 16px 40px; }
html:has(> body.s-strona), html:has(> body.s-dokument) { background: var(--tlo); }
.s-strona, .s-dokument { min-height: 100dvh; }

.s-funkcje { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.s-funkcja { background: var(--karta); border-radius: var(--promien); box-shadow: var(--cien); padding: 18px; }
.s-funkcja h2 { font-size: 16px; font-weight: 800; margin-top: 12px; }
.s-funkcja p { color: var(--tekst-2); font-size: 14px; margin-top: 4px; }

.s-tytul { font-size: 24px; font-weight: 900; }
.s-wstep { color: var(--tekst-2); margin: 4px 0 14px; }
.s-kolumny { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.s-qr-karta { text-align: center; }
.s-qr { width: 200px; margin: 0 auto; background: #fff; }
.s-qr svg { display: block; width: 100%; height: auto; }
.s-warsztat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.s-warsztat h2 { font-size: 20px; font-weight: 800; }
.s-warsztat > * + * { margin-top: 0; }
.s-stopka { text-align: center; padding: 20px 16px calc(28px + var(--dol)); color: var(--tekst-3); font-size: 14px; }
.s-stopka a { color: var(--tekst-2); }

/* ---------- plakat A4 ---------- */
.s-plakat-tlo { background: #d9d9de; }
.s-plakat-pasek {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--czarny); color: #fff; font-size: 14px;
}
.s-plakat {
  width: 210mm; min-height: 297mm; margin: 16px auto; padding: 16mm 16mm 12mm;
  display: flex; flex-direction: column; gap: 9mm;
  background: var(--czarny); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.s-plakat-gora { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--czerwony); padding-bottom: 5mm; }
.s-plakat-gora .logo { font-size: 15mm; margin: 0; }
.s-plakat-gora p { color: #c4c4ca; font-size: 5mm; }
.s-plakat h1 { font-size: 21mm; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.02em; }
.s-plakat-lista { font-size: 6mm; line-height: 1.35; }
.s-plakat-lista li { position: relative; padding-left: 9mm; margin: 2.2mm 0; }
.s-plakat-lista li::before { content: ""; position: absolute; left: 0; top: 2.4mm; width: 4.5mm; height: 4.5mm; border-radius: 1mm; background: var(--czerwony); }
.s-plakat-qr { display: flex; align-items: center; gap: 9mm; background: #fff; color: var(--czarny); border-radius: 5mm; padding: 7mm; margin-top: auto; }
.s-qr--duzy { width: 70mm; flex-shrink: 0; }
.s-plakat-qr p { font-size: 5.5mm; }
.s-plakat-skanuj { font-size: 10mm !important; font-weight: 900; font-style: italic; line-height: 1.05; color: var(--czerwony); margin-bottom: 4mm; }
.s-plakat-adres { font-weight: 700; margin-top: 3mm; word-break: break-all; }
.s-plakat-stopka { text-align: center; color: #c4c4ca; font-size: 5mm; }

@media print {
  @page { size: A4; margin: 0; }
  html, body.s-plakat-tlo { background: #fff !important; }
  .s-plakat { margin: 0; box-shadow: none; width: 210mm; height: 297mm; min-height: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- regulamin i polityka prywatności ---------- */
.s-dokument { background: var(--tlo); }
.s-dok {
  max-width: 820px; margin: 0 auto; padding: 24px 20px 48px;
  background: var(--karta); line-height: 1.6;
}
.s-dok h1 { font-size: 28px; font-weight: 900; line-height: 1.2; }
.s-dok h2 { font-size: 19px; font-weight: 800; margin: 26px 0 8px; }
.s-dok p, .s-dok li { margin: 6px 0; }
.s-dok ol, .s-dok ul { padding-left: 22px; }
.s-dok ol { list-style: decimal; }
.s-dok ul { list-style: disc; }
.s-dok .s-uzupelnij { background: #fff3c4; padding: 0 4px; border-radius: 3px; font-weight: 700; }
.s-dok .wyciszony { font-size: 14px; }
@media (min-width: 860px) { .s-dok { margin: 24px auto; border-radius: var(--promien); box-shadow: var(--cien); padding: 36px 44px 48px; } }

html:has(> body.s-plakat-tlo) { background: #d9d9de; }