/* sobczak-olczyk.pl — CAŁY CSS tej strony (rodzina satelitów plakatowania).
   Od 2026-10-07 (decyzja Przemka, punkt S24 odbioru) _style-default.css skórki = wersja core bez zmian,
   a wszystko, co należy do tej strony, siedzi TUTAJ w blokach [BLOCK: klient …]. Ten plik ładuje się po _style.css
   i _style_90_wow.css, więc bloki wygrywają remisy ze skórką. Bloki rodziny generuje
   output/rozwieszanie-plakatow.slask.pl/scripts/_zastosuj_marke.py — zmiany wyglądu rodziny rób tam, nie ręcznie tutaj.
   Plik w rejestrze customizacji jako keep (SAFEMODE go nie nadpisze). */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* === [BLOCK: klient sobczak-olczyk.pl — paleta i fonty] START === */
/* Paleta doneta.pl, wspólna dla satelitów plakatowania (Przemek 2026-10-05). Fonty rodziny satelitów.
   Generuje output/rozwieszanie-plakatow.slask.pl/scripts/_zastosuj_marke.py. */
:root {
	--mark: #277ABD;        /* biały na nim 4,56 — linki na bieli, akcenty, ikony, duże nagłówki */
	--mark-light: #A0D4FF;  /* tylko z grafitowym tekstem (9,01) */
	--mark-dark: #105A96;   /* przyciski, tła sekcji z białym tekstem (7,18) */
	--mark2: #C9225A;       /* róż: drugi kolor przycisków/etykiet, biały na nim 5,44 */
	--mark2-light: #f48fb1;
	--mark2-dark: #9F1F4A;
	--grey-darker: #2B2B2B;
	--grey-dark: #3E3E3E;
	--grey: #8A8A8A;
	--grey-light: #CECECE;
	--grey-lighter: #F3F3F3;
	--black: #000;
	--white: #fff;
	--font-family-header: 'Bebas Neue', sans-serif;
	--font-family-header-light: 400;
	--font-family-header-regular: 400;
	--font-family-header-medium: 400;
	--font-family-header-bold: 400;
	--font-family-header-extra-bold: 400;
	--font-family-text: 'IBM Plex Sans', sans-serif;
	--font-family-text-light: 300;
	--font-family-text-regular: 400;
	--font-family-text-medium: 500;
	--font-family-text-bold: 600;
	--font-family-icon-google: 'Material Symbols Outlined';
}
/* Jasny błękit: biały tekst 1,57 → grafitowy 9,01. */
.bg-mark-light, .bg-mark-light h2, .bg-mark-light h3, .bg-mark-light h4, .bg-mark-light p, .bg-mark-light li, .bg-mark-light strong, .bg-mark-light span:not(.material-symbols-outlined) { color: var(--grey-darker) !important; }
.bg-mark2-light, .bg-mark2-light h2, .bg-mark2-light h3, .bg-mark2-light p, .bg-mark2-light li { color: var(--grey-darker) !important; }
.vote .date { color: #6B6B6B !important; }
/* Przyciski: --mark-dark (7,18), hover róż (5,44). `html body` — bo _style.css ładuje się później. */
html body a.button, html body input[type=submit], html body input[type=button], html body .articles_pages .more_articles a { background: var(--mark-dark); color: var(--white); }
html body a.button:hover, html body input[type=submit]:hover, html body input[type=button]:hover, html body .articles_pages .more_articles a:hover { background: var(--mark2); color: var(--white); }
/* Linki w szarych sekcjach: #277ABD na #F3F3F3 = 4,11 → --mark-dark 6,47. */
html body .bg-grey-lighter a:not(.button):not(.pill), html body #kontakt a:not(.button) { color: var(--mark-dark); }
html body .articles_wrapper article.article_container.v .article_title a:hover { color: var(--mark-dark); }
.wow .pill.violet, .wow.pill.violet { color: var(--mark2-dark); }
section.phone_me_popup div.phone_me_wrapper div.source input, section.phone_me_popup div.phone_me_wrapper div.source select { border-color: var(--mark) !important; }
/* === [BLOCK: klient sobczak-olczyk.pl — paleta i fonty] END === */

/* === [BLOCK: klient sobczak-olczyk.pl — klasy uzywane w tresci] START === */
/* Kroki „Jak wygląda plakatowanie” (sekcja .steps-v1 na bg-mark, bloki .step-v1) — reguły z Małopolski/waw.
   Hover kółka: róż z białą cyfrą (5,44). */
.steps-v1 {}
.step-v1 {position:relative;}
.step-v1 p {margin-top:1rem;text-align:center;font-size:0.9rem;line-height:1.4;}
/* _style.css skórki: p:last-child{margin:0} — do 2026-10-07 wygrywał remis z regułą wyżej (ładował się po _style-default.css);
   po przeniesieniu bloków do _style_100_custom.css zachowujemy ten wygląd jawnie. */
.step-v1 p:last-child {margin-top:0;}
.step-v1 > div {text-align:center;border-radius:50%;background:var(--white);color:var(--black);padding:2rem;width:100px;height:100px;align-items:center;display:flex;justify-content:center;margin:auto;font-weight:var(--font-family-header-bold);position:relative;z-index:2;transform:scale(1);transition:all 0.6s ease;}
.step-v1:hover > div {background:var(--mark2);color:var(--white);}
.step-v1::after {content:'';position:absolute;top:50px;left:50%;width:100%;height:4px;background:var(--white);z-index:1;transform:translateY(-50%) scaleX(0);transform-origin:left;transition:transform 0.8s ease;}
.step-v1:last-child::after {display:none;}
.step-v1:nth-child(1) > div {animation:steps-v1-stepPulse 0.6s ease 0.5s both;}
.step-v1:nth-child(1)::after {animation:steps-v1-lineProgress 0.8s ease 1.1s both;}
.step-v1:nth-child(2) > div {animation:steps-v1-stepPulse 0.6s ease 1.9s both;}
.step-v1:nth-child(2)::after {animation:steps-v1-lineProgress 0.8s ease 2.5s both;}
.step-v1:nth-child(3) > div {animation:steps-v1-stepPulse 0.6s ease 3.3s both;}
.step-v1:nth-child(3)::after {animation:steps-v1-lineProgress 0.8s ease 3.9s both;}
.step-v1:nth-child(4) > div {animation:steps-v1-stepPulse 0.6s ease 4.7s both;}
.step-v1:nth-child(4)::after {animation:steps-v1-lineProgress 0.8s ease 5.3s both;}
.step-v1:nth-child(5) > div {animation:steps-v1-stepPulse 0.6s ease 6.1s both;}
.step-v1:nth-child(5)::after {animation:steps-v1-lineProgress 0.8s ease 6.7s both;}
.step-v1:nth-child(6) > div {animation:steps-v1-stepPulse 0.6s ease 7.5s both;}
.step-v1:nth-child(6)::after {animation:steps-v1-lineProgress 0.8s ease 8.1s both;}
@keyframes steps-v1-stepPulse {
  0% {transform:scale(0) rotate(-180deg);opacity:0;} 60% {transform:scale(1.2) rotate(0deg);opacity:1;} 100% {transform:scale(1) rotate(0deg);opacity:1;}
}
@keyframes steps-v1-lineProgress {
  0% {transform:translateY(-50%) scaleX(0);} 100% {transform:translateY(-50%) scaleX(1);}
}
/* Tabela cen miasta (addon plakatowanie_cennik, token [PLK_CENNIK] — strony miast). Nagłówek --mark-dark z białym
   tekstem (7,18), zebra jasnoszara, na telefonie przewijanie w poziomie zamiast rozpychania strony. */
html body .plk-cennik {width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0;}
html body .plk-cennik table, html body table.plk-cennik {width:100%;border-collapse:collapse;font-size:.95rem;}
html body .plk-cennik th, html body table.plk-cennik th {background:var(--mark-dark);color:var(--white);text-align:left;padding:.7rem .9rem;font-weight:600;}
html body .plk-cennik td, html body table.plk-cennik td {padding:.6rem .9rem;border-bottom:1px solid var(--grey-light);color:var(--grey-darker);}
html body .plk-cennik tbody tr:nth-child(even) td, html body table.plk-cennik tbody tr:nth-child(even) td {background:var(--grey-lighter);}
/* Do 2026-10-07 dwie reguły wyżej (th, td) przegrywały remis z _style.css `table:not([class]) tr th/td` (tabela z addonu
   nie ma klasy, a _style.css ładował się po _style-default.css) — na żywo był szary nagłówek z czarnym tekstem.
   Od przeniesienia do _style_100_custom.css wygrywają; niebieski nagłówek włączony decyzją Przemka 2026-10-07.
   Ramki komórek zostają ze skórki (1px --grey-light), w nagłówku w kolorze tła, żeby nie rysowały jasnej kratki. */
html body .plk-cennik table:not([class]) tr th {border-color:var(--mark-dark);}
/* === [BLOCK: klient sobczak-olczyk.pl — klasy uzywane w tresci] END === */

/* === [BLOCK: klient sobczak-olczyk.pl — poprawki QA (z waw 2026-10-04)] START === */
/* Poprawki QA plakatowanie.waw.pl (lista QA pkt 21–26, akcept Przemka 2026-10-04) wbudowane od razu, kolory doneta.
   `html body` — bo _style.css i _style_90_wow.css ładują się później. */

/* 21. Inicjały-awatary przy opiniach: ciemne tła, biała litera k1 14,2 · k2 7,18 · k3 7,58 · k4 10,7 · k5 5,44. */
html body .avatar_default { color: var(--white); font-weight: 400; }
html body .avatar_default.k1 { background: var(--grey-darker); }
html body .avatar_default.k2 { background: var(--mark-dark); }
html body .avatar_default.k3 { background: var(--mark2-dark); }
html body .avatar_default.k4 { background: var(--grey-dark); }
html body .avatar_default.k5 { background: var(--mark2); }

/* 22. H1 w treści: theme clamp(1.5rem, 5vw, 3rem) = 24 px na telefonie → 40 px; od ~960 px nadal 48 px. */
html body main h1 { font-size: clamp(2.5rem, 5vw, 3rem); }

/* 23. Przycisk na ciemnym tle sekcji (hero, bg-mark-dark): granat na granacie znika → róż z białą obwódką,
   hover biały z granatowym tekstem. */
html body .bg-mark-dark a.button, html body .bg-mark a.button { background: var(--mark2); color: var(--white); box-shadow: 0 0 0 2px var(--white); }
html body .bg-mark-dark a.button:hover, html body .bg-mark a.button:hover { background: var(--white); color: var(--mark-dark); }

/* 25. Kroki: nagłówki wyśrodkowane jak kółka i opisy; linia tylko przy 5 kolumnach (desktop);
   telefon: JEDEN krok pod drugim (1 kolumna), mniejsze kółko. */
html body .steps-v1 .step-v1 h3 { text-align: center; }
@media (max-width: 1000px) {
	html body .steps-v1 .step-v1::after { display: none; animation: none; }
}
@media (max-width: 700px) {
	html body section.steps-v1 > .section-content, html body .steps-v1 > .section-content { flex-wrap: wrap; }
	html body section.steps-v1 > .section-content > div.step-v1, html body .steps-v1 .step-v1 { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; }
	html body .steps-v1 .step-v1 > div { width: 72px; height: 72px; padding: 0; }
	html body .steps-v1 .step-v1 h3 { margin: 1rem 0 .25rem; }
	html body .steps-v1 .step-v1 p { margin: .25rem auto 0; max-width: 34ch; }
}

/* 26 / N1. FAQ: skrypt po rozwinięciu wpisuje „_”, a wow obraca ikonę o 45°. Tekst ukryty, rysujemy „−” bez obrotu. */
html body .wow .faq .f.active h3 span.faq_arrow { font-size: 0 !important; transform: translateY(-50%); }
html body .wow .faq .f.active h3 span.faq_arrow::after { content: "\2212"; font-size: 1.1rem; line-height: 1; }

/* 26 / N3. Wiersz „Grupa Max 15 sp. z o.o., NIP …” w sekcji kontaktowej — ten sam rozmiar co lista nad nim. */
html body #kontakt p.fs-12, html body #kontakt span.fs-12 { font-size: inherit; line-height: inherit; }

/* 26 / N4. Listy z punktorami: punktor na zewnątrz, zawinięty wiersz pod tekstem. */
html body main .section-content ul:not([class]) { padding-left: 1.25rem; }
html body main .section-content ul:not([class]) > li { list-style-position: outside; }
html body .footer_city_lists ul { padding-left: 1.1rem; }
html body .footer_city_lists ul li { list-style-position: outside; }

/* 26 / N5. Ikony kart poza .feature-card — jak w pozostałych kartach. */
html body main .feat-ico { display: inline-flex; align-items: center; font-size: 2.1rem; color: var(--mark); line-height: 1; margin-bottom: .75rem; }

/* 26 / N6. Galerie: odstęp podpisu od zdjęcia. */
html body .galleries_wrapper .gallery_item .gallery_name { margin-top: .6rem; }
/* === [BLOCK: klient sobczak-olczyk.pl — poprawki QA (z waw 2026-10-04)] END === */

/* === [BLOCK: klient sobczak-olczyk.pl — glowna v3 (formularz, karty realizacji, miejsca na zdjecia)] START === */
/* Poprawki Przemka po akcepcie głównej (2026-10-05). Klasy w treści: hero-foto, hero-form, plk-foto, plk-karta*. */

/* Hero formularz kompaktowy: karta nie wyższa niż tekst hero obok (desktop). Pola formularza nie mają klas —
   kolejność w form_forms id=6: e-mail, telefon, liczba plakatów, format (pary w 2 kolumnach), miejscowości,
   checkbox druku, textarea, informacja RODO, przycisk (na całą szerokość). Ukryte inputy nie zajmują komórek siatki. */
html body .hero-form { padding: 1rem 1.4rem 1.1rem !important; }
html body .hero-form h2 { font-size: 1.6rem !important; line-height: 1.1 !important; margin: 0 0 .55rem !important; }
html body .hero-form form { display: grid; grid-template-columns: 1fr 1fr; column-gap: .6rem; row-gap: .4rem; }
html body .hero-form form > * { grid-column: 1 / -1; }
html body .hero-form form > div.line:nth-of-type(-n+4) { grid-column: auto; }
html body .hero-form form div.line { margin: 0; gap: .5rem; align-items: center; }
html body .hero-form form input:not([type=checkbox]):not([type=submit]), html body .hero-form form textarea { padding: .45rem .7rem; font-size: .9rem; }
html body .hero-form form textarea { min-height: 60px; height: 60px; resize: vertical; }
html body .hero-form form input[type=checkbox] { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: var(--mark-dark); }
html body .hero-form form div.line div.desc2 { font-size: .9rem; }
html body .hero-form form div.line div.desc2.rodo_agree { font-size: .72rem; line-height: 1.3; margin: 0; }
html body .hero-form form .submit { margin: 0; }
html body .hero-form form .submit input[type=submit] { padding-top: .55rem; padding-bottom: .55rem; }
@media (max-width: 700px) {
	html body .hero-form form { grid-template-columns: 1fr; }
	html body .hero-form form > div.line:nth-of-type(-n+4) { grid-column: 1 / -1; }
}
/* Checkbox druku w formularzach poza hero (blok kontaktu, kontakt): w jednej linii z opisem. */
html body form div.line input[type=checkbox] + div.desc2 { margin: 0; }

/* Hero ze zdjęciem, układ (a) (bramka „zdjecia” 2026-10-05, zdjecia_propozycja.md runda 3): zdjęcie przyklejone do lewej
   (`--hero-foto`, wysokość sekcji), na nim nakładka gradientu #105A96 z punktami liczonymi od środka ekranu, bo prawa
   kolumna (45%/55% kontenera 1400 px Hestii) też zaczyna się w stałej odległości od środka: na 1440 px tekst od ok. 662 px,
   na 1920 px od ok. 902 px, a człowiek na zdjęciu kończy się ok. 494 px. Pierwsza kolumna `hero-foto__miejsce` jest pusta.
   Telefon (≤ 991 px): zdjęcie `--hero-foto-m` osobno nad tekstem (::before), pod nim tytuł i formularz na #105A96.
   Zmienne ustawia treść strony: style="--hero-foto:url(/wp-content/uploads/…);--hero-foto-m:url(…)" na sekcji. */
html body section.hero-foto { --hero-foto: none; --hero-foto-m: none; min-height: 680px; background-color: var(--mark-dark);
	background-image: linear-gradient(90deg, rgba(16,90,150,.25) 0, rgba(16,90,150,.30) calc(50% - 260px),
		rgba(16,90,150,.88) calc(50% - 100px), rgba(16,90,150,.92) 100%), var(--hero-foto);
	background-size: 100% 100%, auto 100%; background-position: 0 0, left center; background-repeat: no-repeat; }
html body section.hero-foto > .section-content > div.hero-foto__miejsce { flex: 0 0 calc(45% - .75em); max-width: calc(45% - .75em); }
html body section.hero-foto > .section-content > div.hero-foto__tresc { flex: 0 0 calc(55% - .75em); max-width: calc(55% - .75em); }
html body section.hero-foto .hero-foto__tresc h1 { margin-top: 0; }
html body section.hero-foto .hero-form { background: rgba(10,58,99,.55) !important; box-shadow: none; margin-top: 1rem; }
html body section.hero-foto .hero-form h2, html body section.hero-foto .hero-form .desc2, html body section.hero-foto .hero-form .desc2 a { color: var(--white) !important; }
html body section.hero-foto .hero-form input[type=submit] { background: var(--mark2); color: var(--white); }
html body section.hero-foto .hero-form input[type=submit]:hover { background: var(--mark2-dark); }
@media (max-width: 991px) {
	html body section.hero-foto { background-image: none; min-height: 0; padding-top: 0 !important; }
	html body section.hero-foto::before { content: ''; display: block; width: 100%; aspect-ratio: 13 / 10; background: var(--hero-foto-m) 40% 50% / cover no-repeat; margin-bottom: 2rem; }
	html body section.hero-foto > .section-content > div.hero-foto__miejsce { display: none; }
	html body section.hero-foto > .section-content > div.hero-foto__tresc { flex: 1 1 100%; max-width: 100%; }
}

/* Zdjęcia w treści (karty nośników, druk, kroki, dla kogo, kontakt, realizacje): lazy, zaokrąglone, przycięte do ramki. */
html body .plk-img { display: block; width: 100%; height: auto; border-radius: .75rem; object-fit: cover; }
html body .feature-card .plk-img { aspect-ratio: 4 / 3; margin-bottom: 1rem; }
html body .plk-img-4x3 { aspect-ratio: 4 / 3; }
html body .plk-img-pion { aspect-ratio: 3 / 4; max-width: 420px; margin-left: auto; }
html body img.plk-img.plk-img-waski { aspect-ratio: 4 / 3; width: 100%; max-width: 480px !important; margin-left: auto; }   /* !important: theme ma regułę img max-width 100% o wyższej wadze */
html body .plk-foto-rzad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0 0; }
html body .plk-foto-rzad.plk-dwa { grid-template-columns: repeat(2, 1fr); }
html body .plk-foto-rzad figure { margin: 0; }
html body .plk-foto-rzad .plk-img { aspect-ratio: 4 / 3; }
html body .plk-foto-rzad figcaption { font-size: .85rem; margin-top: .4rem; }
html body .bg-mark .plk-foto-rzad figcaption, html body .bg-mark-dark .plk-foto-rzad figcaption { color: var(--white); }
@media (max-width: 700px) { html body .plk-foto-rzad { grid-template-columns: 1fr; } html body .plk-img-pion { max-width: 100%; } }
html body .plk-karta-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Logo w nagłówku „PLAKATOWANIE [ŚLĄSK]” (bramka „logo” 2026-10-05, plik 1200×203 = 5,9 : 1). Theme daje 45 px i
   max-width:50vw przy stałej wysokości → na telefonie by się spłaszczyło; tu wysokość na desktopie, szerokość na telefonie. */
html body header.header_main section .logo a img { height: 52px; width: auto; max-width: none; margin: .55rem 0; }
@media (max-width: 1100px) { html body header.header_main section .logo a img { height: 44px; } }
@media (max-width: 600px) { html body header.header_main section .logo a img { height: auto; width: 220px; max-width: calc(100vw - 130px); margin: .6rem 0; } }

/* Miejsca na zdjęcia w sekcjach (rodzaje nośników, druk) — szary placeholder 4:3, zdjęcie przez style="--plk-foto:url(...)". */
html body .plk-foto { --plk-foto: none; width: 100%; max-width: 480px; margin-left: auto; aspect-ratio: 4 / 3; border-radius: 1rem; background: var(--grey-lighter) var(--plk-foto) center / cover no-repeat; border: 1px solid var(--grey-light); }

/* Karty realizacji (magazyn „Karty realizacji” + core token ADDON_KARUZELA). */
html body .plk-karta { background: var(--white); border: 1px solid var(--grey-light); border-radius: 1rem; overflow: hidden; height: 100%; margin: .5rem; display: flex; flex-direction: column; }
html body .plk-karta-foto { --plk-foto: none; aspect-ratio: 4 / 3; background: var(--grey-lighter) var(--plk-foto) center / cover no-repeat; }
html body .plk-karta-tresc { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
html body .plk-karta h3 { font-size: 1.35rem !important; line-height: 1.15 !important; margin: 0 !important; color: var(--grey-darker); }
html body .plk-karta p { font-size: .92rem; line-height: 1.45; margin: 0; color: var(--grey-dark); }
html body .plk-karta a.plk-karta-link { margin-top: auto; font-weight: 600; color: var(--mark-dark); }
html body .s-produkty-carousel .owl-item .plk-karta-wrap section { padding: 0 !important; margin: 0 !important; }

/* Kwadrat „Opinie klientów” (Przemek 2026-10-05): ~360×360 na desktopie w prawej kolumnie pierwszej sekcji pod hero,
   na telefonie pełna szerokość pod wstępem. 1 opinia naraz (JS w modules/js/footer/slask_karuzela_1_zdjecie_telefon.php),
   długie opinie przycięte do 5 linii, żeby kwadrat się nie rozciągał. */
html body .plk-opinie-kwadrat { width: 100%; max-width: 380px; min-height: 360px; margin-left: auto; padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
html body .plk-opinie-kwadrat .plk-opinie-naglowek { background: var(--mark-dark); color: var(--white) !important; font-size: 1.6rem !important; line-height: 1.2 !important; margin: 0 !important; padding: 1.1rem 1.4rem .9rem !important; display: block; }
html body .plk-opinie-kwadrat .plk-opinie-tresc { padding: 1rem 1.4rem .6rem; flex: 1; }
html body .plk-opinie-kwadrat .testimonials, html body .plk-opinie-kwadrat .owl-wrapper { margin: 0; padding: 0; }
html body .plk-opinie-kwadrat .testimonial { padding: 0; box-shadow: none; border: 0; background: transparent; }
html body .plk-opinie-kwadrat .testimonial .text { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: .95rem; line-height: 1.5; }
html body .plk-opinie-kwadrat .owl-dots { margin-top: .4rem; }
@media (max-width: 1000px) {
	html body .plk-opinie-kwadrat { max-width: 100%; min-height: 0; margin: 1rem 0 0; }
}
/* === [BLOCK: klient sobczak-olczyk.pl — glowna v3 (formularz, karty realizacji, miejsca na zdjecia)] END === */

/* === [BLOCK: klient sobczak-olczyk.pl — W15 (hero miast, karty, realizacje-blog, megamenu, kontakt z twarza)] START === */
/* W15 po przeglądzie demo przez Przemka (2026-10-05), pilot: Katowice + elementy wspólne. */

/* 1. Hero: JEDEN mechanizm dla głównej i miast (W15 pkt 1). Zdjęcie leży w warstwie ::after przyciętej do lewej części
   sekcji: od lewej krawędzi do 60 px przed środkiem ekranu, czyli tuż przed kolumną z tekstem (tekst zaczyna się ok.
   2 px za środkiem: 662 px na 1440, 902 px na 1920). background-size: cover, więc zdjęcie pionowe i poziome wypełnia
   całą warstwę, bez pustego niebieskiego pola i bez ostrej krawędzi. Gradient w tej samej warstwie: lekki granat na
   zdjęciu, od 200 px przed końcem warstwy gęstnieje i kończy się pełnym #105A96 = kolorem tła sekcji, więc przejście
   jest płynne. Punkty gradientu są te same co w poprzedniej wersji głównej (.30 przy 50% - 260 px, .88 przy 50% - 100 px).
   Od akceptu pilota (2026-10-05) wszystkie 39 miast mają hero-foto--miasto; stara reguła hero-foto--pion skasowana.
   Kadr zdjęcia: domyślnie lewa strona i środek wysokości; strony miast (hero-foto--miasto) środek, 35% wysokości. */
@media (min-width: 992px) {
	html body section.hero-foto { position: relative; isolation: isolate; background-image: none; }
	html body section.hero-foto::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0;
		width: calc(50% - 60px); z-index: -1; pointer-events: none;
		background: linear-gradient(90deg, rgba(16,90,150,.25) 0, rgba(16,90,150,.30) calc(100% - 200px),
			rgba(16,90,150,.88) calc(100% - 40px), rgba(16,90,150,1) 100%) 0 0 / 100% 100% no-repeat,
			var(--hero-foto) left center / cover no-repeat; }
	html body section.hero-foto.hero-foto--miasto::after {
		background: linear-gradient(90deg, rgba(16,90,150,.25) 0, rgba(16,90,150,.30) calc(100% - 200px),
			rgba(16,90,150,.88) calc(100% - 40px), rgba(16,90,150,1) 100%) 0 0 / 100% 100% no-repeat,
			var(--hero-foto) center 35% / cover no-repeat; }
}

/* 2. Karty z miniaturą w jednym kadrze (W15 pkt 2): zdjęcie zawsze 4:3 (object-fit: cover), tytuł maks. 2 linie,
   opis maks. 3 linie, link na dole karty — karty w rzędzie/karuzeli mają równą wysokość niezależnie od zdjęcia.
   Przed poprawką: ramka miała aspect-ratio, a obrazek height:100% — przy zdjęciu pionowym przeglądarka rozciągała
   ramkę do naturalnej wysokości obrazka. */
html body .plk-karta-foto { aspect-ratio: auto; overflow: hidden; }
html body .plk-karta-foto img, html body .plk-karta-foto img.plk-img { display: block; width: 100%; height: auto !important;
	aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
html body .plk-karta h3 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; }
html body .plk-karta p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.35em; }

/* 3. Realizacje = wpisy bloga (W15 pkt 3): karty wpisów z core (box_artykul.php, wariant h) — token
   [ADDON_BLOG-BY-CAT_{kategoria}_4_4_h] na głównej i stronach miast oraz lista na /realizacje/. Wygląd jak karty
   realizacji: zdjęcie 4:3, tytuł, zajawka maks. 4 linie, „Czytaj więcej” na dole, równe wysokości (grid). */
html body .articles_wrapper { gap: 1.25rem; }
/* min-width: 0 — bez tego element siatki/flexa nie zwęża się poniżej naturalnej szerokości zdjęcia (1200 px)
   i tytuł z zajawką wychodzą poza kartę (ucięte przez overflow: hidden). */
html body .articles_wrapper > article, html body .articles_wrapper article.article_container.h > a,
html body .articles_wrapper article.article_container.h .article_photo, html body .articles_wrapper article.article_container.h .article_description { min-width: 0; }
html body .articles_wrapper article.article_container.h .article_photo img { max-width: 100%; }
html body .articles_wrapper article.article_container.h { background: var(--white); border: 1px solid var(--grey-light);
	border-radius: 1rem; overflow: hidden; display: flex; }
html body .articles_wrapper article.article_container.h > a { width: 100%; }
html body .articles_wrapper article.article_container.h .article_photo { aspect-ratio: 4 / 3; overflow: hidden; }
html body .articles_wrapper article.article_container.h .article_photo img { width: 100%; height: 100%; object-fit: cover; }
html body .articles_wrapper article.article_container.h:hover .article_photo img { filter: none; transform: scale(1.03); }
html body .articles_wrapper article.article_container.h .article_description { text-align: left; padding: 1rem 1.2rem 1.2rem; box-sizing: border-box;
	display: flex; flex-direction: column; flex: 1; }
html body .articles_wrapper article.article_container.h .article_title { margin: 0 0 .45rem; font-size: 1.2rem; line-height: 1.2;
	font-weight: 700; color: var(--grey-darker); }
html body .articles_wrapper article.article_container.h .article_description .articles_text { margin: 0; font-size: .92rem;
	line-height: 1.45; color: var(--grey-dark); display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4;
	-webkit-box-orient: vertical; overflow: hidden; }
html body .articles_wrapper article.article_container.h .article_more { display: block; margin-top: auto; padding-top: .7rem;
	font-weight: 600; color: var(--mark-dark); }
html body .plk-realizacje-rzad .articles_wrapper { margin: 1.5rem 0 0; padding: 0; max-width: none; }
@media (max-width: 1000px) {
	html body .articles_wrapper.x4 { grid-template-columns: repeat(2, 1fr); }
}
/* Telefon: rząd kart przewijany w bok (kawałek następnej karty widać na krawędzi), lista /realizacje/ w jednej kolumnie. */
@media (max-width: 700px) {
	html body .articles_wrapper.x4 { grid-template-columns: 1fr; }
	html body .plk-realizacje-rzad .articles_wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
		gap: 1rem; padding: 0 0 .6rem; -webkit-overflow-scrolling: touch; }
	html body .plk-realizacje-rzad .articles_wrapper article.article_container.h { flex: 0 0 80%; scroll-snap-align: start; }
}
/* Wpis realizacji: daty i licznik odsłon z core ukryte — data wpisu = data akcji (służy do kolejności), dla giełdy
   jej nie znamy, więc nie pokazujemy wymyślonej daty. Rok jest w treści wpisu (fakty: Gdzie / Ile / Kiedy). */
html body main.article_container .article_info { display: none; }

/* 4. Megamenu „Oferta” (W15 pkt 4): natywne megamenu core (pages.megamenu=1), lista miast wstawiana przez
   load-theme_slask_megamenu.php. Desktop: panel po najechaniu, wyrównany do prawej krawędzi menu, 4 kolumny,
   grupy liter z pogrubioną literą, nazwy miast WIELKIMI literami (jak stara strona). Telefon: rozwijana lista w menu. */
html body nav.header_menu .megamenu { left: auto; right: 0; width: min(1080px, calc(100vw - 2rem)); padding: 1.3rem 1.8rem 1.1rem;
	border-top: 3px solid var(--mark-dark); border-radius: 0 0 1rem 1rem; box-shadow: 0 24px 60px -14px rgba(15,23,42,.28); }
html body .slk-mega-naglowek { font-weight: 700; font-size: 1.05rem; color: var(--grey-darker); margin: 0 0 .9rem; }
html body .slk-mega-naglowek small { font-weight: 400; font-size: .82rem; color: var(--grey-dark); margin-left: .5rem; }
html body .slk-mega-kolumny { columns: 4; column-gap: 2.2rem; }
html body .slk-mega-grupa { break-inside: avoid; margin: 0 0 .8rem; }
html body .slk-mega-litera { display: block; font-weight: 800; font-size: 1.05rem; color: var(--mark-dark);
	border-bottom: 1px solid var(--grey-light); margin: 0 0 .3rem; padding-bottom: .15rem; }
html body .slk-mega ul, html body nav.header_menu .megamenu .slk-mega ul { list-style: none; margin: 0; padding: 0; display: block; }
html body .slk-mega ul li, html body nav.header_menu .megamenu .slk-mega ul li { padding: 0; margin: .12rem 0; font-size: .84rem; }
html body nav.header_menu .megamenu .slk-mega ul li:before { content: none; }
html body .slk-mega a, html body nav.header_menu .megamenu .slk-mega ul li a { text-transform: uppercase; font-weight: 600;
	letter-spacing: .02em; color: var(--grey-darker); text-decoration: none; }
html body .slk-mega a:hover, html body nav.header_menu .megamenu .slk-mega ul li a:hover { color: var(--mark2); }
html body .slk-mega-stopka { margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--grey-light); }
html body .slk-mega-stopka a, html body nav.header_menu .megamenu .slk-mega-stopka a { color: var(--mark-dark); font-weight: 700; text-transform: none; }
html body .megamenu_responsive .slk-mega { padding: .4rem 1rem 1rem; }
html body .megamenu_responsive .slk-mega-naglowek small { display: block; margin: .2rem 0 0; }
html body .megamenu_responsive .slk-mega-kolumny { columns: 2; column-gap: 1.2rem; }
html body .megamenu_responsive .slk-mega a { font-size: .9rem; line-height: 1.9; }
/* menu telefonu ukrywa zagnieżdżone listy (nav.header_menu_responsive ul ul) — lista miast ma być widoczna po rozwinięciu „Oferty” */
html body .header_menu_responsive .megamenu_responsive .slk-mega ul { display: block !important; position: static; }
html body .header_menu_responsive .megamenu_responsive .slk-mega ul li { display: block !important; border: 0; padding: 0; }
html body .header_menu_responsive .megamenu_responsive .slk-mega ul li a { display: inline; padding: 0; border: 0; }
/* `html body .slk-mega ul {padding:0}` przegrywał do 2026-10-07 remis z _style.css `nav.header_menu_responsive ul ul`
   (wcięcie listy miast w menu telefonu) — po przeniesieniu do _style_100_custom.css zachowujemy to wcięcie jawnie. */
html body nav.header_menu_responsive .slk-mega ul { padding: .5em 0 .5em 1em; }

/* 5–6. Sekcja kontaktowa pod pierwszą sekcją treści strony miasta (W15 pkt 5) z kartą osoby (pkt 6, wzór lejdis-bhp.pl/bhp/):
   lewa kolumna = karta (okrągłe zdjęcie twarzy, imię i nazwisko, rola, telefon, e-mail miasta, adres punktu),
   prawa = mapa Google (wizytówka, jeśli miasto ją ma — load-theme_email_miasta.php). Osoba = magazyn „Osoba kontaktowa”
   (jedna zmiana w panelu zmienia wszystkie strony). Mapa z bloku nad stopką (#maps) na takiej stronie znika, bo byłaby drugi raz. */
html body .plk-osoba-karta { background: var(--white); border: 1px solid var(--grey-light); border-radius: 1rem;
	padding: 1.6rem 1.7rem; box-shadow: 0 10px 30px -18px rgba(15,23,42,.35); }
html body .plk-osoba-karta section.container, html body .plk-osoba-karta .section-content { padding: 0 !important; margin: 0 !important; max-width: none; }
html body .plk-osoba { display: flex; align-items: center; gap: 1.3rem; }
html body .plk-osoba img.plk-osoba-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
	border: 4px solid var(--white); box-shadow: 0 0 0 2px var(--mark-dark); }
html body .plk-osoba-imie { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: var(--grey-darker); }
html body .plk-osoba-rola { display: block; color: var(--grey-dark); font-size: .95rem; margin-top: .2rem; }
html body ul.plk-kontakt-lista { list-style: none; margin: 1.3rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--grey-light); }
html body ul.plk-kontakt-lista li { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 .6rem; padding: 0; background: none; }
html body ul.plk-kontakt-lista li::before { content: none; }
html body ul.plk-kontakt-lista .material-symbols-outlined { color: var(--mark-dark); font-size: 1.35rem; line-height: 1.4; }
html body ul.plk-kontakt-lista small { display: block; color: var(--grey-dark); font-size: .8rem; line-height: 1.2; }
html body ul.plk-kontakt-lista a { font-weight: 600; color: var(--mark-dark); }
html body .plk-mapa { border-radius: 1rem; overflow: hidden; min-height: 420px; height: 100%; box-shadow: 0 10px 30px -18px rgba(15,23,42,.35); }
html body .plk-mapa iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
html body:has(.plk-kontakt-miasta) #maps { display: none; }
/* W16 (Przemek 2026-10-06): karta osoby także w bloku nad stopką (9005), na Kontakcie i — kompaktowo — w stopce (ciemne tło). */
html body .plk-osoba-karta ul.plk-kontakt-lista li > div { min-width: 0; overflow-wrap: anywhere; }
html body .footer_wrapper .plk-osoba-karta.plk-osoba-stopka { background: transparent; border: 0; box-shadow: none; padding: 0; margin: .4rem 0 1rem; }
html body .footer_wrapper .plk-osoba-stopka .plk-osoba { gap: .8rem; }
html body .footer_wrapper .plk-osoba-stopka img.plk-osoba-foto { width: 64px; height: 64px; border-width: 2px; box-shadow: 0 0 0 2px #A0D4FF; }
html body .footer_wrapper .plk-osoba-stopka .plk-osoba-imie { color: var(--white); font-size: 1.05rem; }
html body .footer_wrapper .plk-osoba-stopka .plk-osoba-rola { color: rgba(255,255,255,.78); font-size: .85rem; }
html body .footer_wrapper .plk-osoba-stopka ul.plk-kontakt-lista { margin: .8rem 0 0; padding: .7rem 0 0; border-top-color: rgba(255,255,255,.2); }
html body .footer_wrapper .plk-osoba-stopka ul.plk-kontakt-lista li { margin: 0 0 .35rem; }
html body .footer_wrapper .plk-osoba-stopka ul.plk-kontakt-lista small { color: rgba(255,255,255,.7); }
html body .footer_wrapper .plk-osoba-stopka ul.plk-kontakt-lista a, html body .footer_wrapper .plk-osoba-stopka ul.plk-kontakt-lista div { color: var(--white); font-weight: 400; }
html body .footer_wrapper .plk-osoba-stopka .material-symbols-outlined { color: #A0D4FF; font-size: 1.1rem; }
@media (max-width: 600px) {
	html body .plk-osoba img.plk-osoba-foto { width: 96px; height: 96px; }
	html body .plk-mapa, html body .plk-mapa iframe { min-height: 320px; }
}
/* === [BLOCK: klient sobczak-olczyk.pl — W15 (hero miast, karty, realizacje-blog, megamenu, kontakt z twarza)] END === */

/* === [BLOCK: klient sobczak-olczyk.pl — W17 (sekcja AI nas poleca)] START === */
/* W17 (Przemek 2026-10-06): sekcja „Dlaczego AI poleca nas” = klocek ai-authority z _style_90_wow.css (_w17_ai.py).
   Akcent klocka (--ok-cta = --mark #277ABD) ma na granacie bg-ok-ink tylko 3,9:1 — za mało dla napisu „Zaufanie”
   i ikon. Jasny niebieski rodziny satelitów (--mark-light #A0D4FF) daje 11,3:1. Zakres: tylko wnętrze klocka. */
.ai-auth { --ok-cta: var(--mark-light); }
/* Telefon: siatka klocka (auto-fit 150 px) daje 2 + 1 kafelka, a „od 2008” łamie się na dwie linie.
   Każdy kafelek w jednym wierszu: liczba, obok podpis. `html body`, bo `.wow .ai-stat-grid` z _style_90_wow.css
   ma tę samą wagę i ładuje się później. */
@media (max-width: 600px) {
	html body .ai-auth .ai-stat-grid { grid-template-columns: 1fr; gap: .75rem; margin-bottom: 1.75rem; }
	html body .ai-auth .ai-stat { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; }
	html body .ai-auth .ai-stat-num { font-size: 1.9rem; white-space: nowrap; flex-shrink: 0; }
	html body .ai-auth .ai-stat-lbl { margin-top: 0; }
	html body .ai-auth .ai-auth-quote { padding: 1.1rem 1.2rem; }
	html body .ai-auth .ai-auth-quote p { font-size: 1.05rem; }
}
/* === [BLOCK: klient sobczak-olczyk.pl — W17 (sekcja AI nas poleca)] END === */
/* === [BLOCK: klient sobczak-olczyk.pl — logo w naglowku] START === */
/* Logo „PLAKATOWANIE [DOLNY ŚLĄSK]” bez „.PL” (bramka „logo” 2026-10-08, plik 1200×154 = 7,79 : 1; prostokąt tej samej
   wysokości co na Śląsku). Theme daje 45 px (telefon 33 px) i max-width:50vw przy stałej wysokości — długie logo by się
   spłaszczyło. Generuje output/sobczak-olczyk.pl/scripts/_d3_grafiki.py. */
html body header.header_main section .logo a img { height: 52px; width: auto; max-width: none; margin: .55rem 0; }
@media (max-width: 1200px) { html body header.header_main section .logo a img { height: 44px; } }
@media (max-width: 1100px) { html body header.header_main section .logo a img { height: 38px; } }
@media (max-width: 600px) { html body header.header_main section .logo a img { height: auto; width: 230px; max-width: calc(100vw - 160px); margin: .6rem 0; } }
/* === [BLOCK: klient sobczak-olczyk.pl — logo w naglowku] END === */

/* PATCH:realizacje-auto-20261020-START — wpisy „Realizacje” z automatu (lejdis.online): plakietki, bloki split-section na przemian, podpisy zdjęć */
.plk-ekipa-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.plk-chip{display:inline-flex;align-items:center;gap:.4rem;background:color-mix(in srgb,var(--mark) 8%,#fff);border:1px solid color-mix(in srgb,var(--mark) 22%,transparent);color:#0f172a;padding:.45rem .85rem;border-radius:999px;font-size:.88rem;font-weight:600}
.plk-chip .material-symbols-outlined{font-size:1.15rem;color:var(--mark-dark)}
@media (min-width:769px){
	.wow .split-wrap.split-rev{grid-template-columns:1fr 1.4fr}
	.wow .split-wrap.split-rev .split-right{order:-1}
}
.wow .split-caption{font-size:.85rem;color:#334155;margin:.5rem 0 0;text-align:center;line-height:1.4}
/* PATCH:realizacje-auto-20261020-END */