/* TECH-2447 - wpis bloga z nagłówkiem na zdjęciu (wariant B testu A/B T09, na stałe od 10.11.2026).
   Wpisy dwukolumnowe spod /blog/ (BlogItem::HasHeroLayout, klasa single-post--hero): nagłówek .blog-hero z H1, karta formularza
   .blog-form-card w prawej kolumnie, baner .blog-banner i moduł .expert-module w treści, kolumny 8/4.
   Ładowane tylko na tych wpisach (PageController::installCss), po css/ab-tests/form-card.css (karta wspólna z testami T02 / T10).
   Zachowanie: js/blog-hero.js. */

/* ==========================================================================
   Elementy w treści (Includes/BlogContentBanner.ss, BlogExpertModule.ss; miejsca liczy BlogContentHtml wg reguły H2):
   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)
   3) dzisiejszy boks CTA, który koliduje z 1) albo 2), dostaje d-none
   ========================================================================== */

/* --- 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 .expert-module { 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; }
.expert-module__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); }
.expert-module__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.expert-module__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-color, #41c207); }
.expert-module__lead { font-size: 20px; font-weight: 700; line-height: 1.25; color: #000; }
.expert-module__who { font-size: 14px; color: rgba(0, 0, 0, .7); }
.expert-module__btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.expert-module .btn { padding: 16px 22px; font-size: 13px; white-space: nowrap; }
.expert-module .btn-icon { width: 15px; margin-right: 8px; }
.expert-module__link { background: none; border: 0; padding: 0; font: 600 14px "Raleway", sans-serif; color: rgba(0, 0, 0, .7); cursor: pointer; }
.expert-module__link u { color: var(--secondary-color, #0295ff); text-underline-offset: 3px; }

/* --- 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 .expert-module { flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
  .expert-module__photo { width: 52px; height: 52px; min-width: 52px; }
  .expert-module__lead { font-size: 16px; }
  .expert-module__btns { flex-direction: row; width: 100%; }
  .expert-module .btn { flex: 1; padding: 13px 10px; font-size: 12px; justify-content: center; }
  .expert-module .btn-icon { display: none; }
  .expert-module__link { display: none; } /* „Bezpłatna konsultacja” jest w dolnym pasku strony */
}

/* ==========================================================================
   GÓRA ARTYKUŁU: nagłówek na zdjęciu (Includes/BlogHeroHeader.ss) + karta formularza z boku, przyklejona
   (pomniejszanie / przewijanie: js/blog-hero.js). Prototyp Adama (runda 3), bez nadtytułu.
   Telefon: karta pod artykułem (prawa kolumna spada na dół).
   ========================================================================== */

/* zdjęcie nagłówka wychodzi na 100vw, więc strona przycina poziome wyjście poza ekran - tylko gdy nagłówek jest widoczny
   (klasę ustawia js/blog-hero.js) */
html.blog-hero-visible, html.blog-hero-visible body { overflow-x: clip; }
body { --blog-nav-height: 76px; }              /* wysokość menu (bez niebieskiego paska) */
body.has-topbar { --blog-nav-height: 117px; }  /* menu + niebieski pasek na górze */

/* ==========================================================================
   UKŁAD WPISU Z NAGŁÓWKIEM NA ZDJĘCIU (klasa single-post--hero na .single-post, BlogItemSection.ss)
   Do 10.11.2026 akcje testu w Omniconvert (TECH-2460) - przeniesione 1:1, z tymi samymi wartościami i !important.
   Odstęp sekcji (90 px od 992 px) kompensuje margin-top: -90px - jeśli strona zmieni ten padding, trzeba poprawić wartość.
   ========================================================================== */
/* pierwszy akapit treści jest leadem nagłówka (BlogContentHtml::firstParagraph - ta sama definicja) */
.single-post--hero .single-post__body .single-post__wysiwyg > .row > .col-md-9 > p:first-of-type { display: none !important; }
/* nagłówek tuż pod menu */
.single-post--hero .single-post__body .single-post__wysiwyg > .row { padding-top: var(--blog-nav-height, 117px) !important; }
@media (min-width: 992px) {
  .single-post--hero .single-post__body { margin-top: -90px !important; }
  /* kolumny 8/4 */
  .single-post--hero .single-post__body .single-post__wysiwyg > .row > .col-md-9 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
  .single-post--hero .single-post__body .single-post__wysiwyg > .row > .col-md-3 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; position: relative; z-index: 2; }
}
@media (max-width: 991px) {
  .single-post--hero .single-post__body { margin-top: 0 !important; }
  .single-post--hero .single-post__body .single-post__wysiwyg > .row > .col-md-9,
  .single-post--hero .single-post__body .single-post__wysiwyg > .row > .col-md-3 { flex: 0 0 100% !important; max-width: 100% !important; }
  .single-post--hero .single-post__body .single-post__wysiwyg > .row { padding-top: 35px !important; }
}

/* ==========================================================================
   UKŁAD (komputer): zdjęcie z tytułem na całą szerokość, karta w prawej kolumnie od góry (kolumny 8/4 wyżej)
   ========================================================================== */
.blog-hero__tiles { display: flex; }
.blog-form-card { margin-top: 32px; }  /* telefon: karta pod artykułem */
@media (min-width: 992px) {
  .blog-form-card { position: sticky; top: calc(var(--blog-nav-height) + 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 js/blog-hero.js).
   Pasek przewijania nadpisany celowo: strona barwi paski globalnie na zielono - bez tego przy karcie stoi gruby zielony pas. */
.blog-form-card.is-scrollable { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .28) transparent; }
.blog-form-card.is-scrollable::-webkit-scrollbar { width: 8px; }
.blog-form-card.is-scrollable::-webkit-scrollbar-track { background: transparent; }
.blog-form-card.is-scrollable::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .28); border-radius: 4px; }
.blog-form-card.is-scrollable::-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ż) */
.blog-hero__inner { position: relative; z-index: 0; min-height: 610px; padding: 48px 34px 54px 0; font-family: "Raleway", sans-serif; color: #fff; }
.blog-hero__photo { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--blog-hero-offset, 135px)); width: 100vw; z-index: -1; overflow: hidden; background: #111; }
.blog-hero__photo .blog-hero__photo-frame { width: 100%; height: 100%; }
.blog-hero__photo 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 %) */
.blog-hero__photo::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%); }
.blog-hero__inner .single-post__head { display: block; width: auto; margin: 0; text-align: left; }
.blog-hero__inner .single-post__head .blog-hero__title { margin: 0; padding: 0; color: #fff; font: 700 48px/1.12 "Raleway", sans-serif; letter-spacing: -1.4px; text-align: left; }
/* tytuł jest H1: reguły h1 strony (.single-post__head h1 - szerokość; na telefonie .wysiwyg-content h1 -
   dzielenie wyrazów i rozmiary z !important, zob. niżej przy telefonie) nie mogą zmienić jego wyglądu */
.blog-hero__inner .single-post__head h1.blog-hero__title { width: auto; overflow-wrap: inherit; word-wrap: inherit; hyphens: inherit; }
.blog-hero__inner .blog-hero__breadcrumbs { width: auto; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.blog-hero__inner .breadcrumbs { justify-content: flex-start; padding: 14px 0 0; text-align: left; }
.blog-hero__inner .breadcrumbs__anchor { color: rgba(255, 255, 255, .92); font-size: 15px; }
.blog-hero__inner .breadcrumbs__anchor:last-child { color: var(--primary-color, #41c207); }
.blog-hero__inner .breadcrumbs__anchor:not(:last-child):after { filter: invert(1); }
.blog-hero__inner .post__creator { justify-content: flex-start; margin: 22px 0 0; }
.blog-hero__inner .post__author__name, .blog-hero__inner .post__date { color: #fff; }
.blog-hero__inner .post__author__image img { border-radius: 50%; }
.blog-hero__inner .post__dates { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.blog-hero__inner .post__dates svg { width: 22px; height: 22px; }
.blog-hero__inner .post__dates svg path { fill: #fff; }
.blog-hero__inner .post__dates span { margin: 0 !important; padding: 0; }
.blog-hero__inner .post__dates span::before { display: none; }
.blog-hero__inner .blog-hero__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; }
.blog-hero__inner .blog-hero__lead *, .blog-hero__inner .blog-hero__lead a { color: inherit; }
.blog-hero__inner .blog-hero__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) */
.blog-hero > .content-table { max-width: none; margin: 30px 0 0; }
.blog-hero > .content-table .content-table-list { flex: 1 1 auto; max-width: 100%; }
.blog-hero .content-table-list { padding: 16px 26px !important; }
.blog-hero .content-table-list > .goto-contentTable { display: none; }
.blog-hero .content-table.is-open .content-table-list > .goto-contentTable { display: block; }
.blog-hero .content-table.is-open .content-table-list { padding-bottom: 24px !important; }
.blog-hero .content-table__toggle { display: flex !important; align-items: center; gap: 12px; padding: 0 !important; margin: 0; cursor: pointer; user-select: none; }
.blog-hero .content-table__toggle::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; }
.blog-hero .content-table.is-open .content-table__toggle::after { content: 'Zwiń'; }
.blog-hero .content-table__toggle:focus-visible { outline: 2px solid var(--primary-color, #41c207); outline-offset: 4px; }

/* ==========================================================================
   KARTA FORMULARZA: wspólny komponent (Includes/ABFormCard.ss, css/ab-tests/form-card.css, klasy kf-), montowany w .blog-form-card.
   Tu tylko miejsce w pasku bocznym; wygląd, walidacja i teksty są w komponencie.
   ========================================================================== */
.blog-form-card > .kf { margin: 0; }

/* ==========================================================================
   KAFELKI O ARTYKULE: „X min czytania” i „N rozdziałów - Pokaż spis treści”
   ========================================================================== */
.blog-hero__tiles { flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.blog-hero__tile { 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: blog-hero-slide-in .5s ease-out both; }
.blog-hero__tile:nth-child(2) { animation-delay: .12s; }
.blog-hero__tile > svg { flex: 0 0 30px; width: 30px; height: 30px; }
.blog-hero__tile > svg * { stroke-dasharray: 160; stroke-dashoffset: 160; animation: blog-hero-draw 1.4s ease-out .45s forwards; }
.blog-hero__tile:nth-child(2) > svg * { animation-delay: .65s; }
.blog-hero__tile b { display: flex; align-items: baseline; gap: 5px; font: 700 18px/1.15 "Raleway", sans-serif; }
.blog-hero__tile b i, .blog-hero__tile b em { font-style: normal; }
.blog-hero__tile small { display: block; margin-top: 2px; font: 500 13px/1.25 "Raleway", sans-serif; opacity: .88; }
.blog-hero__tile--link { padding-right: 40px; cursor: pointer; transition: transform .28s cubic-bezier(.2, .8, .2, 1.3), box-shadow .28s, background .2s, border-color .2s; }
.blog-hero__tile--link:hover, .blog-hero__tile--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); }
.blog-hero__tile-arrow { 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); }
.blog-hero__tile-arrow svg { width: 16px; height: 16px; }
.blog-hero__tile--link:hover > svg { animation: blog-hero-icon-wiggle .6s ease-in-out; }
.blog-hero__tile--link:hover .blog-hero__tile-arrow { transform: translate(5px, -50%); }
@keyframes blog-hero-slide-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes blog-hero-draw { to { stroke-dashoffset: 0; } }
@keyframes blog-hero-icon-wiggle { 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) {
  .blog-hero__inner .single-post__head .blog-hero__title { font-size: 40px; }
  .blog-hero__inner { padding-right: 24px; }
}
@media (min-width: 992px) and (max-width: 1140px) {
  .blog-hero__inner .single-post__head .blog-hero__title { font-size: 34px; }
  .blog-hero__inner .blog-hero__lead { font-size: 16px; }
  .blog-hero__inner { min-height: 580px; }
}
/* niskie ekrany (laptop 1366 x 768): mniej powietrza; kartę dodatkowo pomniejsza JS */
@media (min-width: 992px) and (max-height: 800px) {
  .blog-hero__inner { padding-top: 34px; padding-bottom: 40px; min-height: 560px; }
  .blog-form-card { margin-top: 26px; }
  .blog-hero__inner .blog-hero__lead { font-size: 16.5px; }
}

/* ==========================================================================
   TELEFON I TABLET (do 991 px): nagłówek na zdjęciu (tytuł, okruszki, autor, kafelki, wstęp);
   karta .blog-form-card pod artykułem (prawa kolumna spada na dół) zamiast dawnej czarnej ramki #fixedRequestFormContainer
   ========================================================================== */
@media (max-width: 991px) {
  body { --blog-nav-height: 65px; }
  body.has-topbar { --blog-nav-height: 115px; }
  /* więcej powietrza nad i pod tytułem (13.10.2026: tytuł wyglądał na ściśnięty) */
  .blog-hero__inner { min-height: 0; padding: 44px 0 34px; }
  .blog-hero__photo::after { background: rgba(0, 0, 0, .8); } /* tekst na całej szerokości - równe, mocne przyciemnienie */
  .blog-hero__inner .single-post__head, .blog-hero__inner .single-post__head .blog-hero__title { text-align: center; }
  .blog-hero__inner .single-post__head .blog-hero__title { font-size: 29px; line-height: 1.2; letter-spacing: -.6px; }
  /* H1: .wysiwyg-content h1 ma tu 42 / 32 / 28 px, line-height i letter-spacing z !important (style.css) - te same wartości co wyżej */
  .blog-hero__inner .single-post__head h1.blog-hero__title { font-size: 29px !important; line-height: 1.2 !important; letter-spacing: -.6px !important; }
  .blog-hero__inner .breadcrumbs { justify-content: center; padding-top: 22px; }
  .blog-hero__inner .post__creator { justify-content: center; flex-wrap: wrap; gap: 4px 0; margin-top: 26px; }
  .blog-hero__inner .blog-hero__lead { margin-top: 16px !important; font-size: 16px; line-height: 1.55; }
  .blog-hero__tiles { justify-content: center; gap: 8px; margin-top: 16px; }
  .blog-hero__tile { padding: 8px 12px; gap: 8px; }
  .blog-hero__tile > svg { flex-basis: 24px; width: 24px; height: 24px; }
  .blog-hero__tile b { font-size: 15px; }
  .blog-hero__tile small { font-size: 11.5px; }
  .blog-hero__tile--link { padding-right: 30px; }
  .blog-hero__tile-arrow { right: 10px; }
  .blog-hero .content-table-list { padding: 14px 18px !important; }
  .blog-hero > .content-table { margin-top: 22px; }
}

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

/* menu rośnie od 1450 px (poziome menu, .nav { padding: 25px } w symbioza.css) i od 1501 px (większe linki):
   76 → 91 → 98 px, z niebieskim paskiem +41 px. Nagłówek B i przyklejona karta liczą się od --blog-nav-height. */
@media (min-width: 1450px) and (max-width: 1500px) {
  body { --blog-nav-height: 91px; }
  body.has-topbar { --blog-nav-height: 132px; }
}
@media (min-width: 1501px) {
  body { --blog-nav-height: 98px; }
  body.has-topbar { --blog-nav-height: 139px; }
}