/* ==== lp-cee.css - warstwa CEE na wspolnym lp.css ====
   Laduje TYLKO template-lp-cee.php (wp_enqueue_style 'lp-cee-css' z zaleznoscia
   'lp-dark-css'), wiec wspolne landingi (4490/4491) nie widza tych regul w ogole.
   Scope jak w lp.css - pod .lp-dark / body.lp-dark.lp-light (CEE zawsze ma obie klasy).
   Kolejnosc pliku = kolejnosc nadpisywania; specyficznosc zostaje taka jak w lp.css. */

/* hero: naglowek szerszy niz uniwersalne 17ch (tytul CEE jest dluzszy)
   i karta formularza 560px zamiast 480px (miesci osobe + 3 pola bez sciskania) */
.lp-dark .lp-hero h1{max-width:22ch}
.lp-dark .lp-formcard{width:560px}
@media (max-width:1100px){ .lp-dark .lp-formcard{width:100%} }

/* osoba w karcie formularza (lpd_form_owner_*): zdjecie 56px + imie/rola nad naglowkiem */
.lp-dark .lp-formcard .who{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.lp-dark .lp-formcard .who img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 15%;flex:none}
.lp-dark .lp-formcard .who .n{font-weight:700;font-size:16px;line-height:22px;color:var(--ink)}
.lp-dark .lp-formcard .who .r{font-size:14px;line-height:20px;color:var(--g6)}

/* hero: kolumna tekstu i karta formularza jednej wysokosci - staty schodza na dol kolumny, do linii dolu karty */
.lp-dark .lp-hero{align-items:stretch}
.lp-dark .lp-hero .trust{margin-top:auto}

/* ==== .proof.proof-card: proof z okladka case study i przyciskiem (CEE 4763) ====
   Szablon dokleja .proof-card tylko gdy jest lpd_proof_image albo para btn+url;
   badge z checkiem wypada w tym wariancie - kotwica wizualna to okladka. */
.lp-dark .proof.proof-card{gap:48px}
.lp-dark .proof-card .shot{flex:0 0 40%;border-radius:16px;overflow:hidden}
.lp-dark .proof-card .shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lp-dark .proof-card .txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
/* .btn ma white-space:nowrap - na waskiej karcie etykieta wychodzila poza krawedz */
.lp-dark .proof-card .txt .btn{max-width:100%;white-space:normal;text-align:center}
/* na jasnym okladka moze miec biale tlo - hairline zeby nie zlewala sie z karta */
body.lp-dark.lp-light .proof-card .shot{box-shadow:inset 0 0 0 1px var(--border)}
/* okladka jako link do case study (szablon owija <img> w <a> gdy jest lpd_proof_url) */
.lp-dark .proof-card .shot a{display:block}
.lp-dark .proof-card .shot img{transition:transform .25s ease, filter .25s ease}
.lp-dark .proof-card .shot a:hover img{transform:scale(1.03);filter:brightness(.94)}
@media (max-width:1100px){
  .lp-dark .proof.proof-card{flex-direction:column;align-items:stretch;gap:28px;padding:32px 24px}
  .lp-dark .proof-card .shot{flex:none}
  .lp-dark .proof-card p{font-size:22px;line-height:32px}
}

/* ==== Pasek logotypow (.svc-strip--stacked): 9 znakow z globalnej opcji trusted_logos lamalo sie
   na dwa rzedy przy gap 56px i wysokosci 24px (Hubject sam w drugim rzedzie). Ciasniejszy gap,
   22px i limit szerokosci znaku (connected.svg mial 293px) mieszcza wszystkie w jednym rzedzie
   od ~1250px; nizej dalej zawijaja sie rowno. */
.lp-dark .svc-strip--stacked .marks{gap:32px 40px}
.lp-dark .svc-strip--stacked .marks img{height:22px;max-width:150px}

/* ==== FAQ: lp.css daje .svc-faq ramke gora i dol; gorna czytala sie jako "linia pod certyfikatami"
   (uwaga wlasciciela 2026-09-17). Zostaje tylko dolna, ktora zamyka sekcje przed pasem CTA. */
.lp-dark .svc-faq{border-top:none}

/* ==== Sekcja "who" na gorze (lpd_who_position=top): stoi tuz pod paskiem logotypow, wiec potrzebuje
   wlasnego odstepu (w dolnym polozeniu dziedziczy go po sekcji wyzej i ma padding-top:0). */
.lp-dark .proc.who-top{padding-top:64px;padding-bottom:24px}

/* ==== Hero ze zdjeciem z ACF (lpd_hero_bg) ====
   Szablon dokleja .has-bg + inline --hero-bg tylko gdy pole jest ustawione, wiec bez
   pola zostaje ::before z lp.css (wypieczony hero-bg-faded.jpg w dark, plaski wash w light).
   Welon: pionowy (czytelnosc + zejscie w kolor tla strony na samym dole - light #FFFFFF,
   dark #0B0E20, zeby sekcja pod hero startowala bez szwu) + narozny od lewego dolu,
   gdzie siedzi tekst; gora zdjecia zostaje odsloniata. */
.lp-dark .lp-hero-wrap.has-bg::before{background:
  linear-gradient(180deg, rgba(11,14,32,.20) 0%, rgba(11,14,32,.32) 45%, rgba(11,14,32,.92) 84%, #0B0E20 96%, #0B0E20 100%),
  linear-gradient(to top right, rgba(11,14,32,.94) 12%, rgba(11,14,32,.5) 42%, rgba(11,14,32,0) 66%),
  var(--hero-bg) center/cover no-repeat #0B0E20}
body.lp-dark.lp-light .lp-hero-wrap.has-bg::before{background:
  linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.24) 45%, rgba(255,255,255,.90) 84%, #FFFFFF 96%, #FFFFFF 100%),
  linear-gradient(to top right, rgba(255,255,255,.94) 12%, rgba(255,255,255,.5) 42%, rgba(255,255,255,0) 66%),
  var(--hero-bg) center/cover no-repeat #FFFFFF}
/* tekst na dol kolumny (nad staty), gorna czesc hero zostaje samym zdjeciem;
   staty dalej konczą sie rowno z dolem karty formularza */
.lp-dark .lp-hero-wrap.has-bg .lp-hero .txt{justify-content:flex-end}
.lp-dark .lp-hero-wrap.has-bg .lp-hero .trust{margin-top:24px}
/* mobile: kolumna tekstu lezy na calej szerokosci zdjecia, wiec welon narozny nie wystarcza -
   rowny welon na cala szerokosc, dalej z zejsciem w kolor tla strony na dole */
@media (max-width:1100px){
  .lp-dark .lp-hero-wrap.has-bg::before{background:
    linear-gradient(180deg, rgba(11,14,32,.62) 0%, rgba(11,14,32,.74) 45%, rgba(11,14,32,.94) 86%, #0B0E20 96%, #0B0E20 100%),
    var(--hero-bg) center/cover no-repeat #0B0E20}
  body.lp-dark.lp-light .lp-hero-wrap.has-bg::before{background:
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.72) 45%, rgba(255,255,255,.93) 86%, #FFFFFF 96%, #FFFFFF 100%),
    var(--hero-bg) center/cover no-repeat #FFFFFF}
}

/* 2026-10-01: dwie karty tej samej wysokosci i karty features bez obrazu */
.lp-dark .models .cards{align-items:stretch}
/* lpd_hide=mcard_b: granatowy blok 2/3 (naglowek + tekst) obok jednej karty 1/3 */
.lp-dark .models.models-split{background:none;padding:0;display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:stretch}
.lp-dark .models.models-split .hd{background:linear-gradient(118.915deg,var(--navy1) 67.92%,var(--navy2) 98.58%);border-radius:24px;padding:64px 60px;gap:24px;justify-content:center}
.lp-dark .models.models-split .hd .row{flex-direction:column;align-items:flex-start;gap:24px}
.lp-dark .models.models-split .hd .row p{flex:none;max-width:640px}
.lp-dark .models.models-split .cards{display:flex}
.lp-dark .models.models-split .mcard{min-height:0}
@media (max-width:1100px){.lp-dark .models.models-split{grid-template-columns:1fr}}
.lp-dark .fcard.no-shot{padding-top:32px}

/* 2026-10-01: CTA pod intro, opis w pozycji panelu */
.lp-dark .svc-intro .btn.l.intro-cta{align-self:flex-start;margin-top:-20px;display:inline-flex;flex-direction:row;flex:none;width:auto;max-width:none;padding:12px 32px;gap:10px}
.lp-dark .svc-intro .card-b .batch.has-d{align-items:flex-start}
.lp-dark .svc-intro .card-b .batch.has-d .dot{margin-top:7px}
.lp-dark .svc-intro .card-b .batch .nm .d{display:block;margin-top:4px;font-weight:400;font-size:14px;line-height:21px;color:#DCE6FA}

/* intro z opisami w panelu (.panel-d): karta rosnie z trescia zamiast przycinac ja do 436 px */
@media (min-width:1101px){
.lp-dark .svc-intro.panel-d .r{height:auto;min-height:620px;padding-top:178px}
.lp-dark .svc-intro.panel-d .card-b{position:relative;top:auto;height:auto;margin-left:0}
.lp-dark .svc-intro.panel-d .card-b .panel{position:relative;left:auto;right:auto;top:auto;padding:40px 32px}
}

/* strzalki w przyciskach (jak w koncowym CTA) */
.lp-dark .btn.l,.lp-dark button.btn.xl{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.lp-dark .btn.l svg,.lp-dark button.btn.xl svg{width:18px;height:18px;flex:none}