/* TECH-2447 - test A/B T09, wpisy bloga /blog/<slug>/ w układzie dwukolumnowym: elementy wariantu B.
   1:1 z T09-B-final-v2.html (<style data-z="t09-b">) bez wklejonej kopii karty (osobny plik css/ab-tests/form-card.css)
   i bez części tylko dla prototypu (.pv-toast, podgląd godziny, <template>). Ładowane tylko na wpisach w teście (ABTests::isT09Active).
   Kolumny 8/4, odstępy i ukrycie pierwszego akapitu NIE są tutaj - to akcje testu, które wkleja Mateusz w Omniconvert. */

/* ==========================================================================
   T09 B - elementy wspólne dla wersji docelowej i zapasowej
   1) baner „Więcej klientów i sprzedaży z internetu” (przed 2. H2 treści)
   2) moduł eksperta „Porozmawiaj z ekspertem” (przed 3. H2 treści) - wygląd 1:1 jak u Bartka
   3) ukrycie dzisiejszego boksu CTA, gdy koliduje z 1) albo 2)
   Miejsca wstawienia liczy JS (wspolne.js). Szablony: <template id="t09-baner">, <template id="t09-modul">.
   ========================================================================== */

/* --- 1) baner (prototyp Mateusza; zmiana: przycisk otwiera główny formularz kontaktowy) --- */
.single-post__body .blog-banner { display: flex; align-items: center; gap: 32px; margin: 44px 0 8px; padding: 32px 36px; border-radius: 8px; background: #000; color: #fff; text-align: left; }
.single-post__body .blog-banner p { margin: 0; padding: 0; }
.blog-banner__txt { flex: 1 1 auto; min-width: 0; }
.single-post__body .blog-banner .blog-banner__title { font: 700 28px/1.15 "Raleway", sans-serif; letter-spacing: -.8px; color: #fff; }
.single-post__body .blog-banner .blog-banner__title em { font-style: normal; color: var(--primary-color, #41c207); }
.single-post__body .blog-banner .blog-banner__text { margin-top: 10px; font: 400 16px/1.5 "Raleway", sans-serif; color: rgba(255, 255, 255, .75); }
/* = .btn.btn--primary strony (13px/700, wersaliki, zielony, 4px) */
.single-post__body .blog-banner .blog-banner__btn { flex: none; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 18px 26px; border: 1px solid var(--primary-color, #41c207); border-radius: 4px;
  background: var(--primary-color, #41c207); color: #fff; font: 700 13px/1 "Raleway", sans-serif; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.single-post__body .blog-banner .blog-banner__btn::after { display: none !important; }
.blog-banner__btn svg { width: 16px; height: 16px; }
.blog-banner__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- 2) moduł eksperta (Bartek, S3) - wygląd 1:1; zmiana: główny przycisk = „Zadzwoń do eksperta” --- */
.single-post__body .t09-expert { display: flex; align-items: center; gap: 20px; margin: 30px 0 6px; padding: 18px 22px; background: #f2f9ed; border: 1px solid rgba(65, 194, 7, .35); border-radius: 5px; text-align: left; }
.t09-expert__photo { width: 72px; height: 72px; min-width: 72px; margin: 0 !important; border-radius: 50%; object-fit: cover; object-position: 50% 12%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary-color, #41c207); }
.t09-expert__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.t09-expert__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-color, #41c207); }
.t09-expert__lead { font-size: 20px; font-weight: 700; line-height: 1.25; color: #000; }
.t09-expert__who { font-size: 14px; color: rgba(0, 0, 0, .7); }
.t09-expert__btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.t09-expert .btn { padding: 16px 22px; font-size: 13px; white-space: nowrap; }
.t09-expert .btn-icon { width: 15px; margin-right: 8px; }
.t09-expert__link { background: none; border: 0; padding: 0; font: 600 14px "Raleway", sans-serif; color: rgba(0, 0, 0, .7); cursor: pointer; }
.t09-expert__link u { color: var(--secondary-color, #0295ff); text-underline-offset: 3px; }

/* --- 3) dzisiejszy boks CTA stojący tuż obok naszego elementu: dostaje klasę ab-t09-a (wspolne.js), więc w wariancie B
   ukrywa go Omniconvert razem z resztą kontroli; w kontroli zostaje --- */

/* --- przełączanie wariantów: CSS STRONY (webdev). Elementy wariantu B domyślnie ukryte; pokazuje je Omniconvert --- */
.ab-t09-b { display: none; }

/* --- telefon --- */
@media (max-width: 767.98px) {
  .single-post__body .blog-banner { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 32px; padding: 24px 20px; text-align: center; }
  .single-post__body .blog-banner .blog-banner__title { font-size: 24px; }
  .single-post__body .blog-banner .blog-banner__btn { justify-content: center; }
  .single-post__body .t09-expert { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
  .t09-expert__photo { width: 52px; height: 52px; min-width: 52px; }
  .t09-expert__lead { font-size: 16px; }
  .t09-expert__btns { flex-direction: row; width: 100%; }
  .t09-expert .btn { flex: 1; padding: 13px 10px; font-size: 12px; justify-content: center; }
  .t09-expert .btn-icon { display: none; }
  .t09-expert__link { display: none; } /* „Bezpłatna konsultacja” jest w dolnym pasku strony */
}

/* ==========================================================================
   T09 B - WERSJA DOCELOWA: góra artykułu na blogu widoczni.com — CSS STRONY (webdev)
   Runda 4 (13.10): elementy wariantu B są w HTML obok kontroli i mają klasę ab-t09-b (domyślnie ukryte, wspolne.css);
   kontrola ma ab-t09-a. Ten plik styluje TYLKO elementy B (nagłówek .t09b-naglowek, kartę .pv-bok, kafle), więc
   bez Omniconvert wpis wygląda 1:1 jak dziś. Zmiany układu strony (kolumny 8/4, odstępy, ukrycie pierwszego akapitu)
   NIE są tu: to akcje testu w Omniconvert (src/akcje-testu.css).
   Baza: prototyp Adama (runda 3) - nagłówek na zdjęciu + karta formularza z boku, przyklejona; bez nadtytułu,
   karta = wspólny komponent (karta.css/karta.js), mocniejsze przyciemnienie zdjęcia, pomniejszanie/odpinanie karty.
   Telefon: karta pod artykułem (prawa kolumna spada na dół) zamiast dzisiejszej czarnej ramki (ta ma ab-t09-a).
   ========================================================================== */

/* zdjęcie nagłówka wychodzi na 100vw, więc strona przycina poziome wyjście poza ekran - tylko gdy nagłówek B jest widoczny
   (klasę ustawia t09.js). W prototypie było to „html, body” bez warunku, co zmieniało overflow-x strony także w kontroli. */
html.t09b-widoczny, html.t09b-widoczny body { overflow-x: clip; }
/* nowy nagłówek jest pierwszym dzieckiem kolumny treści, więc pierwszy akapit traci .wysiwyg-content p:first-child { margin-top: 0 }
   ze style.css - ta sama deklaracja dla akapitu tuż za nagłówkiem, żeby kontrola wyglądała jak dziś */
.wysiwyg-content .t09b-naglowek + p { margin-top: 0; }
/* to samo dla wpisów zaczynających się od nagłówka: style.css zeruje margines h1-h6 / .h1-.h5 tylko jako :first-child.
   Tylko przy ukrytym nagłówku B (kontrola) - w wariancie B odstęp pod nowym nagłówkiem zostaje jak w prototypie (klasę ustawia t09.js) */
html:not(.t09b-widoczny) .t09b-naglowek + :is(h1, h2, h3, h5, h6, .h1, .h2, .h3, .h4, .h5) { margin: 0; }
body { --pv-gora: 76px; }              /* wysokość menu (bez niebieskiego paska) */
body.has-topbar { --pv-gora: 117px; }  /* menu + niebieski pasek na górze */

/* ==========================================================================
   UKŁAD (komputer): zdjęcie z tytułem na całą szerokość, karta w prawej kolumnie od góry (kolumny 8/4 = akcja testu)
   ========================================================================== */
.pv-kafle { display: flex; }
.pv-bok { margin-top: 32px; }  /* telefon: karta pod artykułem */
@media (min-width: 992px) {
  .pv-bok { position: sticky; top: calc(var(--pv-gora) + 16px); margin-top: 44px; z-index: 5; transform-origin: 50% 0; }
}
/* poprawka 14.10: gdy karta nie mieści się nawet w skali 80 %, zostaje przyklejona i przewija się w środku (wysokość ustawia t09.js).
   Pasek przewijania nadpisany celowo: strona barwi paski globalnie na zielono - bez tego przy karcie stoi gruby zielony pas. */
.pv-bok.is-przewijana { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .28) transparent; }
.pv-bok.is-przewijana::-webkit-scrollbar { width: 8px; }
.pv-bok.is-przewijana::-webkit-scrollbar-track { background: transparent; }
.pv-bok.is-przewijana::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .28); border-radius: 4px; }
.pv-bok.is-przewijana::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .45); }

/* nagłówek na zdjęciu (zdjęcie wychodzi na całą szerokość ekranu, pod kartą też) */
.pv-hero { position: relative; z-index: 0; min-height: 610px; padding: 48px 34px 54px 0; font-family: "Raleway", sans-serif; color: #fff; }
.pv-hero__foto { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--pv-lewo, 135px)); width: 100vw; z-index: -1; overflow: hidden; background: #111; }
.pv-hero__foto .pv-foto { width: 100%; height: 100%; }
.pv-hero__foto img { display: block; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; }
/* przyciemnienie: mocniejsze po stronie tekstu (lewa), lżejsze pod kartą (13.10.2026: było równe 64 %) */
.pv-hero__foto::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .8) 45%, rgba(0, 0, 0, .66) 75%, rgba(0, 0, 0, .58) 100%); }
.pv-hero .single-post__head { display: block; width: auto; margin: 0; text-align: left; }
.pv-hero .single-post__head .t09b-tytul { margin: 0; padding: 0; color: #fff; font: 700 48px/1.12 "Raleway", sans-serif; letter-spacing: -1.4px; text-align: left; }
.pv-hero .t09b-okruszki { width: auto; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.pv-hero .breadcrumbs { justify-content: flex-start; padding: 14px 0 0; text-align: left; }
.pv-hero .breadcrumbs__anchor { color: rgba(255, 255, 255, .92); font-size: 15px; }
.pv-hero .breadcrumbs__anchor:last-child { color: var(--primary-color, #41c207); }
.pv-hero .breadcrumbs__anchor:not(:last-child):after { filter: invert(1); }
.pv-hero .post__creator { justify-content: flex-start; margin: 22px 0 0; }
.pv-hero .post__author__name, .pv-hero .post__date { color: #fff; }
.pv-hero .post__author__image img { border-radius: 50%; }
.pv-hero .post__dates { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.pv-hero .post__dates svg { width: 22px; height: 22px; }
.pv-hero .post__dates svg path { fill: #fff; }
.pv-hero .post__dates span { margin: 0 !important; padding: 0; }
.pv-hero .post__dates span::before { display: none; }
.pv-hero .pv-lead { margin: 22px 0 0 !important; max-width: 720px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); font: 400 18px/1.6 "Raleway", sans-serif; }
.pv-hero .pv-lead *, .pv-hero .pv-lead a { color: inherit; }
.pv-hero .pv-lead a { word-break: normal; } /* strona łamie linki w dowolnym miejscu („S EO”) */

/* spis treści pod zdjęciem, w kolumnie tekstu, zwinięty do jednej linii - klik w „Spis treści” rozwija (kopia spisu w nagłówku B) */
.t09b-naglowek > .content-table { max-width: none; margin: 30px 0 0; }
.t09b-naglowek > .content-table .content-table-list { flex: 1 1 auto; max-width: 100%; }
.t09b-naglowek .content-table-list { padding: 16px 26px !important; }
.t09b-naglowek .content-table-list > .goto-contentTable { display: none; }
.t09b-naglowek .content-table.is-otwarty .content-table-list > .goto-contentTable { display: block; }
.t09b-naglowek .content-table.is-otwarty .content-table-list { padding-bottom: 24px !important; }
.t09b-naglowek .pv-spis-tyt { display: flex !important; align-items: center; gap: 12px; padding: 0 !important; margin: 0; cursor: pointer; user-select: none; }
.t09b-naglowek .pv-spis-tyt::after { content: 'Pokaż (' attr(data-ile) ')'; margin-left: auto; padding-left: 16px; color: #2b7d04;
  font: 600 15px/1 "Raleway", sans-serif; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; }
.t09b-naglowek .content-table.is-otwarty .pv-spis-tyt::after { content: 'Zwiń'; }
.t09b-naglowek .pv-spis-tyt:focus-visible { outline: 2px solid var(--primary-color, #41c207); outline-offset: 4px; }

/* ==========================================================================
   KARTA FORMULARZA: wspólny komponent _wspolne/karta-formularza (karta.css, klasy kf-), montowany w .pv-bok.
   Tu tylko miejsce w pasku bocznym; wygląd, walidacja i teksty są w komponencie.
   ========================================================================== */
.pv-bok > .kf { margin: 0; }

/* ==========================================================================
   KAFELKI O ARTYKULE: „X min czytania” i „N rozdziałów - Pokaż spis treści”
   ========================================================================== */
.pv-kafle { flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.pv-kafel { all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 10px;
  background: rgba(0, 0, 0, .42); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-family: "Raleway", sans-serif;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pv-wjazd .5s ease-out both; }
.pv-kafel:nth-child(2) { animation-delay: .12s; }
.pv-kafel > svg { flex: 0 0 30px; width: 30px; height: 30px; }
.pv-kafel > svg * { stroke-dasharray: 160; stroke-dashoffset: 160; animation: pv-a-rysuj 1.4s ease-out .45s forwards; }
.pv-kafel:nth-child(2) > svg * { animation-delay: .65s; }
.pv-kafel b { display: flex; align-items: baseline; gap: 5px; font: 700 18px/1.15 "Raleway", sans-serif; }
.pv-kafel b i, .pv-kafel b em { font-style: normal; }
.pv-kafel small { display: block; margin-top: 2px; font: 500 13px/1.25 "Raleway", sans-serif; opacity: .88; }
.pv-kafel--link { padding-right: 40px; cursor: pointer; transition: transform .28s cubic-bezier(.2, .8, .2, 1.3), box-shadow .28s, background .2s, border-color .2s; }
.pv-kafel--link:hover, .pv-kafel--link:focus-visible { background: rgba(65, 194, 7, .22); border-color: var(--primary-color, #41c207); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.pv-kafel__strz { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--primary-color, #41c207); transition: transform .28s cubic-bezier(.2, .8, .2, 1.3); }
.pv-kafel__strz svg { width: 16px; height: 16px; }
.pv-kafel--link:hover > svg { animation: pv-a-ikona .6s ease-in-out; }
.pv-kafel--link:hover .pv-kafel__strz { transform: translate(5px, -50%); }
@keyframes pv-wjazd { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pv-a-rysuj { to { stroke-dashoffset: 0; } }
@keyframes pv-a-ikona { 0% { transform: none; } 30% { transform: scale(1.18) rotate(-8deg); } 60% { transform: scale(.96) rotate(4deg); } 100% { transform: none; } }

/* ==========================================================================
   Węższe komputery i laptopy
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1300px) {
  .pv-hero .single-post__head .t09b-tytul { font-size: 40px; }
  .pv-hero { padding-right: 24px; }
}
@media (min-width: 992px) and (max-width: 1140px) {
  .pv-hero .single-post__head .t09b-tytul { font-size: 34px; }
  .pv-hero .pv-lead { font-size: 16px; }
  .pv-hero { min-height: 580px; }
}
/* niskie ekrany (laptop 1366 x 768): mniej powietrza; kartę dodatkowo pomniejsza JS */
@media (min-width: 992px) and (max-height: 800px) {
  .pv-hero { padding-top: 34px; padding-bottom: 40px; min-height: 560px; }
  .pv-bok { margin-top: 26px; }
  .pv-hero .pv-lead { font-size: 16.5px; }
}

/* ==========================================================================
   TELEFON I TABLET (do 991 px): nagłówek na zdjęciu (tytuł, okruszki, autor, kafelki, wstęp);
   karta .pv-bok pod artykułem (prawa kolumna spada na dół) zamiast czarnej ramki #fixedRequestFormContainer (ab-t09-a)
   ========================================================================== */
@media (max-width: 991px) {
  body { --pv-gora: 65px; }
  body.has-topbar { --pv-gora: 115px; }
  /* więcej powietrza nad i pod tytułem (13.10.2026: tytuł wyglądał na ściśnięty) */
  .pv-hero { min-height: 0; padding: 44px 0 34px; }
  .pv-hero__foto::after { background: rgba(0, 0, 0, .8); } /* tekst na całej szerokości - równe, mocne przyciemnienie */
  .pv-hero .single-post__head, .pv-hero .single-post__head .t09b-tytul { text-align: center; }
  .pv-hero .single-post__head .t09b-tytul { font-size: 29px; line-height: 1.2; letter-spacing: -.6px; }
  .pv-hero .breadcrumbs { justify-content: center; padding-top: 22px; }
  .pv-hero .post__creator { justify-content: center; flex-wrap: wrap; gap: 4px 0; margin-top: 26px; }
  .pv-hero .pv-lead { margin-top: 16px !important; font-size: 16px; line-height: 1.55; }
  .pv-kafle { justify-content: center; gap: 8px; margin-top: 16px; }
  .pv-kafel { padding: 8px 12px; gap: 8px; }
  .pv-kafel > svg { flex-basis: 24px; width: 24px; height: 24px; }
  .pv-kafel b { font-size: 15px; }
  .pv-kafel small { font-size: 11.5px; }
  .pv-kafel--link { padding-right: 30px; }
  .pv-kafel__strz { right: 10px; }
  .t09b-naglowek .content-table-list { padding: 14px 18px !important; }
  .t09b-naglowek > .content-table { margin-top: 22px; }
}

/* ograniczenie ruchu w systemie: bez animacji, od razu stan końcowy */
@media (prefers-reduced-motion: reduce) {
  .t09b-naglowek .pv-hero * { animation: none !important; transition: none !important; }
  .t09b-naglowek .pv-kafel > svg * { stroke-dashoffset: 0; }
}