/* Wyprane3City — ujednolicenie sekcji na całym serwisie (16.09.2026, Szef: „ujednolić strony do sekcji").
   Zmierzone przed zmianą: sekcje prototypu 1280 px od lewej krawędzi 80 px, nowsze (w3cTresc) i hero 1040 px wycentrowane;
   kickery 9 px, akapity 10–13 px, podpisy 8–9 px, przyciski 11 px, okruszki 9 px; numeracja kickerów 01,02,03,01,02… .
   Tylko CSS — treść stron nietknięta. Ładowane ostatnie (po animacje.css). */

/* ===== 1. szerokość = strona główna: sekcje 1280 px (site.css .section), panele 1412 px z marginesem 14 px =====
   (16.09 wieczorem Szef: „ujednolić wszystko do strony głównej" — wcześniejsze 1040 px cofnięte) */
main .section .w3cWrap{width:100% !important}
main :is(.equipmentBand,.certificateBand,.socialBand,.priceDisclaimer)>*{max-width:1280px;margin-inline:auto}

/* ===== 1b. układy ===== */
/* CTA „Indywidualna wycena" = „Masz zdjęcie? Masz wycenę." z głównej: przyciski pod tekstem, te same odstępy */
main .innerCta{flex-direction:column;align-items:flex-start;justify-content:center}
@media (min-width:761px){main .innerCta{padding:105px max(55px,50% - 640px)}}
main .innerCta>div:nth-child(2){position:static !important;margin-top:28px;left:auto;right:auto;bottom:auto}
main .section.innerCta{width:min(1440px,100% - 28px);margin:0 auto 28px}
@media (max-width:760px){main .section.innerCta{width:calc(100% - 18px)}}
/* „Jak przebiega praca" = panel jak „Nie maskujemy. Wypłukujemy." (zaokrąglony 48 px, 14 px od krawędzi) */
main .serviceMethod{width:min(1440px,100% - 28px);margin:0 auto;border-radius:48px;padding:55px max(55px,50% - 640px) !important}
@media (max-width:760px){main .serviceMethod{width:calc(100% - 18px);border-radius:32px;padding:56px 22px !important}}
main .serviceMethodInner{width:100% !important;padding:0 !important;grid-template-columns:1fr !important;gap:0}
main .serviceMethod .sectionHeading{position:static !important;top:auto}
main .methodCards{margin-top:0}
main .methodCards article{min-height:0}
main .methodCards article>svg{margin-top:26px}
/* 4 elementy = 2×2, bez samotnej karty w drugim rzędzie */
@media (min-width:761px){
  main .w3cKroki:has(>article:nth-child(4):last-child),
  main .w3cUwagiLista:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===== 2. rytm: sekcje 62 px góra/dół jak na głównej (site.css) ===== */

/* ===== 3. typografia ===== */
main .sectionKicker{font-size:13px;letter-spacing:.16em}
main .eyebrow{font-size:13px !important}
main .breadcrumb{font-size:13px}

.pageHero .pageHeroLead{font-size:18px;line-height:1.65}
.pageHero :is(.heroGlassTag,.heroAreaTag) strong{font-size:15px}
.pageHero :is(.heroGlassTag,.heroAreaTag) small{font-size:13px}
.pageHero .heroMoveHint{font-size:12px}

main :is(.primaryButton,.secondaryButton,.textLink),
.pageHero :is(.primaryButton,.secondaryButton){font-size:15px !important}

/* akapity prowadzące sekcje */
main :is(.sectionHeading>p,.serviceIntro>div>p,.aboutIntro>p,.whyIntro>p,.galleryIntro>p,
  .innerCta>div>p,.finalCta p,.homePriceCta p,.darkFeatureCopy>p,.reasonsCopy>p,
  .contactSplit p,.scopeSection p,.serviceMethod p,.pricePageIntro p):not(.sectionKicker){font-size:17px;line-height:1.7}

/* treść kart i list */
main :is(.extractionTimeline p,.whyGrid p,.reasonTiles p,.methodCards p,.scopeList,.scopeList span,
  .contactPageGrid p,.reviewCards blockquote,.relatedRail small,.serviceCard>p,.contactSplit a){font-size:15px;line-height:1.6}
body:not(.page-template-page-kalkulator-php) main small{font-size:13px}
/* tylko pogrubienia, które w prototypie miały 10–11 px (nazwy usług w paskach itp. mają swoje 26 px — nie ruszać) */
main :is(.certificateBand,.equipmentBand,.priceDisclaimer,.galleryGrid,.artGlass) strong{font-size:17px}
main .relatedRail small{font-size:14px}
main :is(.relatedRail a,.methodCards article)>span{font-size:12px}
main .fullPriceTable span{font-size:16px}
main .servicePriceCard :is(p,span,small,a){font-size:14px;line-height:1.55}
main .servicePriceCard strong{font-size:clamp(28px,3vw,36px)}
main .reviewCards :is(strong,small){font-size:15px}
main .reviewCards small{font-size:13px}
main .socialBand strong{font-size:17px}
main .socialBand a{font-size:14px}
main .innerCta p:not(.sectionKicker){font-size:17px !important;line-height:1.7}
main .priceQuickLinks span{font-size:15px}
.siteFooter .footerColumn p{font-size:15px;line-height:1.65}

@media (max-width:760px){
  main :is(.sectionHeading>p,.serviceIntro>div>p,.aboutIntro>p,.whyIntro>p,.galleryIntro>p,
    .innerCta>div>p,.finalCta p,.homePriceCta p,.darkFeatureCopy>p,.reasonsCopy>p,
    .contactSplit p,.scopeSection p,.serviceMethod p,.pricePageIntro p):not(.sectionKicker){font-size:16px}
  main .sectionKicker,main .eyebrow{font-size:12px !important}
  .pageHero .pageHeroLead{font-size:16px}
}

/* ===== 4. numeracja kickerów: 01, 02, 03… na każdej stronie (było 01,02,03,01,02… oraz „+", „!", „▶") ===== */
main{counter-reset:w3cSekcja}
main .sectionKicker{counter-increment:w3cSekcja}
main .sectionKicker>span:first-child{font-size:0 !important}
main .sectionKicker>span:first-child::before{content:counter(w3cSekcja,decimal-leading-zero);font-size:12px;letter-spacing:.04em}

/* ===== 5. kroki na podstronach (.w3cKroki) = wygląd „Jak pracujemy" z home ===== */
main .w3cKroki{gap:14px}
main .w3cKroki article{align-items:flex-start;gap:16px;padding:22px 24px;border-radius:18px;
  transition:transform .3s cubic-bezier(.22,.8,.18,1),border-color .3s,box-shadow .3s}
main .w3cKroki span{min-width:40px;font:900 32px/1 'Barlow Condensed',sans-serif;color:#29d3ff !important;text-shadow:0 0 18px rgb(41 211 255/.35)}
main .w3cKroki strong{font-size:18px;line-height:1.25}
main .w3cKroki p{font-size:15px;line-height:1.55}
main .w3cKroki article:hover{transform:translateY(-3px);border-color:rgb(41 211 255/.55) !important;
  box-shadow:0 18px 50px rgb(0 0 0/.45),0 0 0 1px rgb(41 211 255/.25),0 0 34px rgb(41 211 255/.28),inset 0 1px 0 rgb(255 255 255/.12) !important}
@media (prefers-reduced-motion:reduce){main .w3cKroki article{transition:none}main .w3cKroki article:hover{transform:none}}

/* ===== 6. dopracowanie po konsultacji Grok + ChatGPT (16.09.2026) — bez zmian treści, cen i hero ===== */
/* hierarchia na telefonie: H2 miał 58 px, a H1 podstrony 45 px (home 50 px) */
@media (max-width:760px){
  main h2:not(.w3cGraInner h2):not(.scn h2){font-size:clamp(32px,9.4vw,42px) !important;line-height:1 !important}
}
main h2, .pageHero h1{text-wrap:balance}
/* menu w nagłówku miało 11 px */
.siteHeader .mainNav a{font-size:13px}
.siteHeader .headerCta{font-size:13px}
/* fokus z klawiatury — był systemowy (czarny/pomarańczowy) */
:is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #29d3ff !important;outline-offset:3px}
/* ceny: cyfry równej szerokości, kwoty w kolumnach się nie „tańczą" */
main :is(.fullPriceTable,.servicePriceCard,.relatedRail,.priceQuickLinks,.w3cTresc) :is(strong,span,b,td){font-variant-numeric:tabular-nums}
/* karta = link: podnosi się i dostaje cyan; karty informacyjne zostają płaskie */
main .relatedRail a{transition:transform .25s cubic-bezier(.22,.8,.18,1),border-color .25s,box-shadow .25s}
main .relatedRail a:hover{transform:translateY(-6px);border-color:rgb(41 211 255/.55) !important;
  box-shadow:0 16px 40px rgb(0 0 0/.35),0 0 26px rgb(41 211 255/.18) !important}
@media (prefers-reduced-motion:reduce){main .relatedRail a{transition:none}main .relatedRail a:hover{transform:none}}

/* ===== 7. wzorzec strony głównej dla kart, wierszy i wejść (16.09.2026 wieczór) =====
   Główna: karty 26 px zaokrąglenia, 27 px wnętrza, szkło 158°, obwódka .16, hover = uniesienie 6 px.
   Wiersze (kroki, FAQ, listy) jak „Jak pracujemy": 18 px. Na podstronach było 16/18/22/24/29/30/34 px. */
main :is(.methodCards article,.relatedRail a,.whyGrid article,.extractionTimeline article,.contactPageGrid a,
  .galleryGrid figure,.w3cPrzedPo,.w3cFilmKadr,.scopeList,.servicePriceCard,.contactMapCard,.w3cCennikLista,.reasonTiles article,.reviewCards article){
  border-radius:26px !important}
main :is(.methodCards article,.whyGrid article,.extractionTimeline article,.contactPageGrid a,.relatedRail a,.servicePriceCard){padding:27px !important}
main :is(.w3cKroki article,.w3cUwagiLista li,.w3cFaq details,.faqList details){border-radius:18px !important}
/* „Trzy etapy" miały płaskie tło zamiast szkła jak reszta kart; suwaki przed/po — ciemną obwódkę z jasnego motywu */
main .methodCards article{background:linear-gradient(158deg,rgb(31 52 74/.58) 0%,rgb(18 30 46/.42) 62%,rgb(14 24 38/.38) 100%) !important;
  border:1px solid rgb(168 192 216/.16) !important}
main .w3cPrzedPo{border-color:rgb(168 192 216/.16) !important}
/* hover: jedno zachowanie wszędzie — uniesienie 6 px + cyan obwódka */
main :is(.methodCards article,.whyGrid article,.extractionTimeline article,.contactPageGrid a,.reasonTiles article,.reviewCards article){
  transition:transform .3s cubic-bezier(.22,.8,.18,1),border-color .3s,box-shadow .3s !important}
main :is(.methodCards article,.whyGrid article,.extractionTimeline article,.contactPageGrid a,.reasonTiles article,.reviewCards article):hover{
  transform:translateY(-6px);border-color:rgb(41 211 255/.45) !important;
  box-shadow:0 18px 50px rgb(0 0 0/.45),0 0 26px rgb(41 211 255/.16),inset 0 1px 0 rgb(255 255 255/.1) !important}
main .w3cFaq details:hover{border-color:rgb(41 211 255/.4) !important}
/* nagłówek sekcji → treść: jak na głównej (26 px pod nagłówkiem + 30 px) */
main .w3cTresc .sectionHeading{margin-bottom:30px}
/* wejście elementów sekcji w3cTresc (animacje.js F) — ruch z site.css [data-reveal] */
.w3cCzeka{opacity:0}
.w3cCzeka.w3cWchodzi{animation:w3cWejdz .72s cubic-bezier(.2,.7,.2,1) var(--wejscie-delay,0ms) both}
@keyframes w3cWejdz{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media print{.w3cCzeka{opacity:1 !important;animation:none !important}}
@media (prefers-reduced-motion:reduce){
  .w3cCzeka{opacity:1;animation:none !important}
  main :is(.methodCards article,.whyGrid article,.extractionTimeline article,.contactPageGrid a,.reasonTiles article,.reviewCards article):hover{transform:none}
}
/* „Przejdź do innej powierzchni": 3 karty w siatce na 4 zostawiały pustą kolumnę — rozciągnięte jak kafle na głównej */
@media (min-width:761px){main .relatedRail{grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important}}
/* drugi przycisk w hero (/oferta/ „Przejdź do kontaktu") = wygląd przycisku z telefonem, nie drugi niebieski */
:is(main,.pageHero) .primaryButton.lightButton{background:rgb(168 192 216/.1) !important;border:1px solid rgb(255 255 255/.2) !important;box-shadow:none !important;color:#fff !important}
:is(main,.pageHero) .primaryButton.lightButton:hover{border-color:rgb(41 211 255/.45) !important}
