/* ======================================================================
   pip.css — podstrona „Sprawdź swoje B2B" (/sprawdz-swoje-b2b/)

   DESIGN TOKENS — jedno miejsce do podmiany palety/fontu/odstępów.
   Tokeny są scoped do `.pip-page`, żeby nie kolidowały z resztą serwisu.
   Wartości startowe = paleta LegalnyMedyk (sky-blue + złoty), zgodnie ze
   stylem landingu. Finalną kolorystykę/font dostarczy Ania — wystarczy
   zmienić blok poniżej. Patrz docs/pip-test-przedsiebiorcy/README.md.
   ====================================================================== */

.pip-page {
  /* Marka/typografia/odstępy DZIEDZICZONE z landing.css (--lm-*) — dzięki temu
     paleta, promienie, cienie i rytm sekcji są identyczne jak na landingu.
     Fallbacki na wypadek, gdyby landing.css się nie załadował.
     Aby zmienić paletę pod Anię: nadpisz --lm-* w landing.css albo te tokeny. */
  --pip-primary: var(--lm-primary, #27A3DC);
  --pip-primary-dark: var(--lm-primary-dark, #1A86B8);
  --pip-primary-tint: var(--lm-primary-tint, #D9F0FB);
  --pip-accent: var(--lm-accent, #F4BD37);          /* złoty akcent */
  --pip-accent-dark: var(--lm-accent-dark, #D89E1A);

  /* atrament / tekst */
  --pip-ink: var(--lm-ink, #0B1F3A);
  --pip-ink-2: var(--lm-ink-3, #33445C);
  --pip-ink-3: var(--lm-ink-4, #64748B);

  /* tła i ramki */
  --pip-paper: var(--lm-paper, #ffffff);
  --pip-bg: var(--lm-bg-soft, #F3F8FC);
  --pip-border: var(--lm-border, #E3EAF2);

  /* progi ryzyka (zielony / żółty / czerwony) — własne, landing ich nie ma */
  --pip-green: #1E9E57;  --pip-green-bg: #E7F6EE;  --pip-green-ink: #11643A;
  --pip-yellow: #D79A00; --pip-yellow-bg: #FBF1D6; --pip-yellow-ink: #7E5A00;
  --pip-red: #D24545;    --pip-red-bg: #FBE9E9;    --pip-red-ink: #8C2A2A;
  /* wynik niejednoznaczny — NIE jest poziomem ryzyka, więc celowo neutralny
     (błękit marki), a nie kolejny stopień skali zielony→czerwony */
  --pip-unclear: #3E7CA6; --pip-unclear-bg: #E4F1F9; --pip-unclear-ink: #1F4F6E;

  /* kształt */
  --pip-radius-sm: 12px;
  --pip-radius: var(--lm-radius-lg, 18px);
  --pip-radius-lg: 24px;
  --pip-shadow-sm: var(--lm-shadow-sm, 0 4px 16px rgba(11, 31, 58, .06));
  --pip-shadow: var(--lm-shadow-lg, 0 14px 38px rgba(11, 31, 58, .10));

  /* typografia / wymiary */
  --pip-font: 'Montserrat', system-ui, -apple-system, "Segoe UI", sans-serif;
  --pip-container: var(--lm-container, 1180px);
  --pip-section-y: var(--lm-section-y, 100px);

  font-family: var(--pip-font);
  color: var(--pip-ink);
  background: var(--pip-paper);
}

/* ---------- layout / pomocnicze ---------- */
.pip-container {
  width: 100%;
  max-width: var(--pip-container);
  margin: 0 auto;
  padding: 0 24px;
}
.pip-container--narrow { max-width: 880px; }

.pip-section { padding: var(--pip-section-y) 0; }
.pip-section--soft { background: var(--pip-bg); }

.pip-section__head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
/* nagłówek do LEWEJ z dużą złotą cyfrą (reużywa .landing-section__num/__titlerow) */
.pip-head--left { text-align: left; max-width: 880px; margin: 0 0 44px; }
.pip-head--left .pip-section__sub { margin-left: 0; margin-right: 0; max-width: 60ch; }
.pip-section__title {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 12px;
}
.pip-section__sub {
  font-size: 1.06rem;
  color: var(--pip-ink-2);
  margin: 0;
  line-height: 1.6;
}

.pip-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pip-primary-dark);
  background: var(--pip-primary-tint);
  padding: 7px 14px;
  border-radius: 999px;
}
.pip-hl {
  color: var(--pip-primary-dark);
  background: linear-gradient(180deg, transparent 62%, rgba(244, 189, 55, .45) 62%);
}

/* skip-link (samodzielny — nie ładujemy landing.css) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pip-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ---------- przyciski ---------- */
.pip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1;
  padding: 13px 22px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.pip-btn:hover { transform: translateY(-2px); }
.pip-btn:active { transform: translateY(0); }
.pip-btn:focus-visible { outline: 3px solid var(--pip-accent); outline-offset: 2px; }
.pip-btn--lg { padding: 16px 28px; font-size: 1.05rem; }
.pip-btn--block { width: 100%; }

.pip-btn--primary { background: var(--pip-primary); color: #fff; }
.pip-btn--primary:hover { background: var(--pip-primary-dark); box-shadow: 0 10px 24px rgba(39, 163, 220, .35); }

.pip-btn--ghost { background: #fff; color: var(--pip-primary-dark); border-color: var(--pip-border); }
.pip-btn--ghost:hover { border-color: var(--pip-primary); color: var(--pip-primary-dark); }

/* Złoty CTA (jak landing-author-cta__btn--primary) — na tle blue */
.pip-btn--gold { background: var(--pip-accent); color: #0F0F10; box-shadow: 0 8px 24px rgba(244, 189, 55, .32); }
.pip-btn--gold:hover { background: #FFD060; box-shadow: 0 12px 28px rgba(244, 189, 55, .42); }
/* Ghost na ciemnym/blue tle — biała obwódka */
.pip-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.pip-btn--ghost-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.pip-btn--text {
  background: transparent;
  color: var(--pip-ink-2);
  border: none;
  padding: 10px 8px;
  font-weight: 600;
}
.pip-btn--text:hover { color: var(--pip-primary-dark); transform: none; }
.pip-btn--text:disabled { opacity: .4; cursor: default; }

/* ====================================================================== */
/* A. HERO                                                                */
/* ====================================================================== */
.pip-hero {
  position: relative;
  background: var(--lm-primary-gradient, linear-gradient(135deg, #27A3DC 0%, #1A86B8 100%));
  color: #fff;
  /* Góra celowo ciasna (2026-07-15): hero to nie okładka, tylko droga do CTA.
     Każdy piksel nad eyebrow spycha „Przejdź do testu" poniżej pierwszego ekranu. */
  padding: clamp(30px, 3vw, 52px) 0 clamp(40px, 3.5vw, 64px);
  text-align: center;
}
.pip-hero__inner { max-width: 900px; margin: 0 auto; }

/* eyebrow w wariancie na tle blue (jak landing-hero__eyebrow) */
.pip-eyebrow {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
.pip-eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pip-accent);
  display: inline-block;
}
.pip-hero__title {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #fff;
  margin: 14px auto 14px;
  max-width: 17em;
}
.pip-hero__lead {
  font-size: clamp(1.02rem, .95rem + .5vw, 1.18rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 auto 16px;
  max-width: 44em;
  font-weight: 500;
}
/* Ostatni akapit („Sprawdź w kilka minut…") to zapowiedź CTA — trzymamy go
   bliżej przycisku niż pozostałe, żeby czytały się jako jedna całość. */
.pip-hero__lead--strong { margin-bottom: 24px; }
.pip-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
}

/* Główny CTA hero — „maksymalnie duży, nie do przegapienia", ale proporcjonalny:
   rośnie płynnie z viewportem (clamp), zamiast skakać na progach. Wysokość
   nigdy < 56 px, czyli powyżej progu wygodnego dotyku (WCAG 2.5.5 / 48 px). */
.pip-hero__actions .pip-btn--gold {
  min-height: 64px;
  padding: 18px clamp(30px, 3.6vw, 52px);
  font-size: clamp(1.06rem, .98rem + .4vw, 1.24rem);
  font-weight: 800;
  border-radius: 14px;
  letter-spacing: -.01em;
  box-shadow: 0 10px 30px rgba(244, 189, 55, .40);
}
.pip-hero__actions .pip-btn--gold:hover {
  box-shadow: 0 14px 36px rgba(244, 189, 55, .52);
}
.pip-hero__actions .pip-btn--gold i { font-size: 1.05em; }
/* Drugi CTA celowo NIŻSZY i lżejszy — hierarchia ma być czytelna od razu,
   dwa równorzędne przyciski kasują się nawzajem. */
.pip-hero__actions .pip-btn--ghost-light {
  min-height: 52px;
  padding: 15px 26px;
}
.pip-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
}
.pip-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.pip-trust i { color: var(--pip-accent); }

/* highlight .hl na tle blue — biały tekst + złota fala (jak landing-hero) */
.pip-hero .hl {
  color: #fff;
  --hl-stroke: var(--lm-accent, #F4BD37);
  --hl-marker-bg: rgba(255, 255, 255, 0.18);
}

/* Miernik ryzyka (czysty CSS). Dekoracyjny stage w hero został usunięty —
   te style żyją dla PODPIĘTEGO POD WYNIK miernika `.pip-result__gauge`
   (patrz koniec pliku). Nie usuwaj ich razem z hero. */
.pip-gauge {
  position: relative;
  background: #fff;
  border: 1px solid var(--pip-border);
  border-radius: var(--pip-radius-lg);
  box-shadow: var(--pip-shadow);
  padding: 30px 30px 22px;
  text-align: center;
  width: 100%;
  max-width: 320px;
}
.pip-gauge__seg { display: none; }
.pip-gauge__arc {
  width: 240px;
  height: 121px;          /* dokładnie górna połowa okręgu o r=120 (+1px) */
  margin: 0 auto;
  position: relative;     /* kontekst pozycjonowania dla igły */
}
.pip-gauge__arc::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 240px; height: 240px;
  border-radius: 50%;
  /* maska ukrywa wnętrze (donut) ORAZ dolną połowę (transparent 180-360),
     więc overflow:hidden nie jest potrzebny — i nie obcina igły */
  background: conic-gradient(from -90deg,
    var(--pip-green) 0 60deg,
    var(--pip-yellow) 60deg 120deg,
    var(--pip-red) 120deg 180deg,
    transparent 180deg 360deg);
  -webkit-mask: radial-gradient(circle 121px at 120px 120px, transparent 0 70px, #000 71px);
          mask: radial-gradient(circle 121px at 120px 120px, transparent 0 70px, #000 71px);
}
/* Igła: oś obrotu DOKŁADNIE w środku łuku (120,120 = dolna krawędź łuku),
   0deg = pion (środek/żółty), ujemny = w lewo (zielony), dodatni = w prawo (czerwony). */
.pip-gauge__needle {
  position: absolute;
  left: 120px;            /* środek łuku w poziomie */
  bottom: 1px;            /* dolna krawędź łuku = środek okręgu */
  width: 5px;
  height: 88px;
  margin-left: -2.5px;    /* wyśrodkowanie szerokości igły na osi */
  background: var(--pip-ink);
  border-radius: 3px 3px 0 0;
  transform-origin: 50% 100%;
  transform: rotate(16deg);
  z-index: 2;
}
/* Piasta (hub) na osi obrotu */
.pip-gauge__needle::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -9px;
  width: 18px; height: 18px;
  background: var(--pip-ink);
  border: 3px solid #fff;
  border-radius: 50%;
  transform: translateX(-50%);
}
.pip-gauge__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pip-gauge__labels .is-green { color: var(--pip-green); }
.pip-gauge__labels .is-yellow { color: var(--pip-yellow-ink); }
.pip-gauge__labels .is-red { color: var(--pip-red); }
.pip-gauge__caption { margin-top: 10px; font-size: .86rem; color: var(--pip-ink-3); font-weight: 600; }

/* ====================================================================== */
/* Karty / siatki (sekcje B, C, E)                                        */
/* ====================================================================== */
.pip-grid { display: grid; gap: 22px; }
.pip-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pip-grid--3 { grid-template-columns: repeat(3, 1fr); }

.pip-card {
  background: #fff;
  border: 1px solid var(--pip-border);
  border-radius: var(--pip-radius);
  padding: 28px 24px;
  box-shadow: var(--pip-shadow-sm);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.pip-card:hover { transform: translateY(-4px); box-shadow: var(--pip-shadow); border-color: #cfe2f1; }
.pip-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--pip-primary-tint);
  color: var(--pip-primary-dark);
  font-size: 1.35rem;
  margin-bottom: 16px;
}
.pip-card__title { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; }
.pip-card__text { font-size: .96rem; line-height: 1.6; color: var(--pip-ink-2); margin: 0; }

.pip-card--accent .pip-card__icon { background: rgba(244, 189, 55, .22); color: var(--pip-accent-dark); }
.pip-card--accent { border-color: rgba(244, 189, 55, .55); }

/* ====================================================================== */
/* D. TEST                                                                */
/* ====================================================================== */
.pip-test__panel {
  background: #fff;
  border: 1px solid var(--pip-border);
  border-radius: var(--pip-radius-lg);
  box-shadow: var(--pip-shadow);
  padding: clamp(26px, 3vw, 46px);
  min-height: 320px;
  position: relative;
}

/* intro */
.pip-test__intro { text-align: center; padding: 18px 0; }
.pip-test__intro-text {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--pip-ink-2);
  max-width: 46em;
  margin: 0 auto 24px;
}
.pip-test__note { margin-top: 14px; font-size: .86rem; color: var(--pip-ink-3); }
.pip-test__noscript {
  background: var(--pip-yellow-bg);
  color: var(--pip-yellow-ink);
  border-radius: var(--pip-radius-sm);
  padding: 16px;
  text-align: center;
}

/* progress */
.pip-test__progress { margin-bottom: 26px; }
.pip-test__progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  font-weight: 700;
  color: var(--pip-ink-3);
  margin-bottom: 8px;
}
.pip-test__progress-track {
  height: 8px;
  background: var(--pip-border);
  border-radius: 999px;
  overflow: hidden;
}
.pip-test__progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pip-primary), var(--pip-primary-dark));
  border-radius: 999px;
  transition: width .3s ease;
}

/* pytanie */
.pip-test__question { text-align: center; margin: 8px 0 30px; }
.pip-test__cat {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pip-primary-dark);
  background: var(--pip-primary-tint);
  padding: 5px 12px;
  border-radius: 999px;
  margin: 0 0 16px;
}
.pip-test__q-text {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 auto 12px;
  max-width: 30em;
}
.pip-test__q-text:focus-visible { outline: none; }
.pip-test__q-help { font-size: .96rem; color: var(--pip-ink-3); margin: 0 auto; max-width: 34em; }

/* odpowiedzi */
.pip-test__answers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
.pip-answer {
  flex: 1 1 160px;
  max-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 18px 20px;
  border-radius: 14px;
  border: 2px solid var(--pip-border);
  background: #fff;
  color: var(--pip-ink);
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.pip-answer:hover { transform: translateY(-2px); }
.pip-answer:focus-visible { outline: 3px solid var(--pip-accent); outline-offset: 2px; }
.pip-answer--yes:hover, .pip-answer--yes.is-selected { border-color: var(--pip-red); color: var(--pip-red-ink); background: var(--pip-red-bg); }
.pip-answer--no:hover, .pip-answer--no.is-selected { border-color: var(--pip-green); color: var(--pip-green-ink); background: var(--pip-green-bg); }
.pip-answer--unknown:hover, .pip-answer--unknown.is-selected { border-color: var(--pip-yellow); color: var(--pip-yellow-ink); background: var(--pip-yellow-bg); }

.pip-test__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--pip-border);
  padding-top: 14px;
  margin-top: 6px;
}

/* wynik */
.pip-test__result { text-align: center; padding: 10px 0; }
.pip-result__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 800;
  padding: 10px 22px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pip-result__badge i { font-size: .7rem; }
.pip-result__badge.is-green { background: var(--pip-green-bg); color: var(--pip-green-ink); }
.pip-result__badge.is-yellow { background: var(--pip-yellow-bg); color: var(--pip-yellow-ink); }
.pip-result__badge.is-red { background: var(--pip-red-bg); color: var(--pip-red-ink); }

.pip-test__result.is-green { box-shadow: inset 0 4px 0 var(--pip-green); }
.pip-test__result.is-yellow { box-shadow: inset 0 4px 0 var(--pip-yellow); }
.pip-test__result.is-red { box-shadow: inset 0 4px 0 var(--pip-red); }

.pip-result__headline { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; margin: 0 0 12px; }
.pip-result__headline:focus-visible { outline: none; }
.pip-result__text { font-size: 1.06rem; line-height: 1.65; color: var(--pip-ink-2); max-width: 44em; margin: 0 auto 24px; }

.pip-result__areas {
  text-align: left;
  background: var(--pip-bg);
  border: 1px solid var(--pip-border);
  border-radius: var(--pip-radius);
  padding: 20px 24px;
  max-width: 560px;
  margin: 0 auto 24px;
}
.pip-result__areas-title { font-size: .98rem; font-weight: 700; margin: 0 0 12px; }
.pip-result__areas-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pip-result__areas-list li { display: flex; align-items: center; gap: 10px; font-size: .96rem; font-weight: 600; }
.pip-result__areas-list li.is-risk { color: var(--pip-red-ink); }
.pip-result__areas-list li.is-risk i { color: var(--pip-red); }
.pip-result__areas-list li.is-check { color: var(--pip-yellow-ink); }
.pip-result__areas-list li.is-check i { color: var(--pip-yellow); }
.pip-result__tag {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pip-ink-3);
  background: #fff;
  border: 1px solid var(--pip-border);
  padding: 2px 8px;
  border-radius: 999px;
}
.pip-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.pip-test__legal { text-align: center; font-size: .86rem; color: var(--pip-ink-3); margin: 18px auto 0; max-width: 50em; }

/* disclaimer (inline przy wyniku) */
.pip-disclaimer--inline {
  display: flex;
  gap: 12px;
  text-align: left;
  background: var(--pip-primary-tint);
  border: 1px solid #cfe6f5;
  border-radius: var(--pip-radius-sm);
  padding: 16px 18px;
  max-width: 600px;
  margin: 0 auto 24px;
}
.pip-disclaimer--inline i { color: var(--pip-primary-dark); margin-top: 3px; }
.pip-disclaimer--inline p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--pip-ink-2); }

/* ====================================================================== */
/* E. OFERTA                                                              */
/* ====================================================================== */
.pip-offer-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--pip-border);
  border-radius: var(--pip-radius);
  padding: 28px 24px;
  box-shadow: var(--pip-shadow-sm);
}
.pip-offer-card .pip-card__text { flex: 1 1 auto; margin-bottom: 20px; }

/* ====================================================================== */
/* F. PRAWNICY                                                            */
/* ====================================================================== */
.pip-lawyer {
  background: #fff;
  border: 1px solid var(--pip-border);
  border-radius: var(--pip-radius);
  overflow: hidden;
  box-shadow: var(--pip-shadow-sm);
}
.pip-lawyer__photo {
  aspect-ratio: 4 / 5;
  background: var(--pip-primary-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pip-lawyer__photo img { width: 100%; height: 100%; object-fit: cover; }
.pip-lawyer__photo-ph { font-size: 3rem; color: #b9d7ea; }
.pip-lawyer__name { font-size: 1.1rem; font-weight: 700; margin: 18px 22px 4px; }
.pip-lawyer__role { font-size: .9rem; font-weight: 600; color: var(--pip-primary-dark); margin: 0 22px 10px; }
.pip-lawyer__bio { font-size: .94rem; line-height: 1.55; color: var(--pip-ink-2); margin: 0 22px 22px; }

/* ====================================================================== */
/* G. FORMULARZ                                                           */
/* ====================================================================== */
.pip-form {
  background: #fff;
  border: 1px solid var(--pip-border);
  border-radius: var(--pip-radius-lg);
  box-shadow: var(--pip-shadow);
  padding: clamp(24px, 3vw, 40px);
}
.pip-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pip-field { display: block; margin-bottom: 18px; }
.pip-field__label { display: block; font-size: .9rem; font-weight: 700; margin-bottom: 7px; }
.pip-field__opt { font-weight: 500; color: var(--pip-ink-3); }
.pip-req { color: var(--pip-red); }
.pip-input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--pip-ink);
  padding: 12px 14px;
  border: 2px solid var(--pip-border);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pip-input:focus { outline: none; border-color: var(--pip-primary); box-shadow: 0 0 0 4px rgba(39, 163, 220, .15); }
.pip-textarea { resize: vertical; min-height: 120px; }

/* honeypot — wizualnie ukryty, ale nie display:none (boty go ignorują rzadziej) */
.pip-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pip-check { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 22px; font-size: .92rem; line-height: 1.5; color: var(--pip-ink-2); }
.pip-check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--pip-primary); }
.pip-check a { color: var(--pip-primary-dark); font-weight: 600; }

.pip-form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pip-form__note { font-size: .86rem; color: var(--pip-ink-3); display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.pip-form__note i { color: var(--pip-primary); }

.pip-form__status { margin: 18px 0 0; padding: 13px 16px; border-radius: 12px; font-size: .95rem; font-weight: 600; }
.pip-form__status.is-pending { background: var(--pip-bg); color: var(--pip-ink-2); }
.pip-form__status.is-ok { background: var(--pip-green-bg); color: var(--pip-green-ink); }
.pip-form__status.is-error { background: var(--pip-red-bg); color: var(--pip-red-ink); }

/* ====================================================================== */
/* H. FAQ                                                                 */
/* ====================================================================== */
.pip-faq { display: grid; gap: 12px; }
.pip-faq__item {
  background: #fff;
  border: 1px solid var(--pip-border);
  border-radius: var(--pip-radius-sm);
  overflow: hidden;
}
.pip-faq__q {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 1.02rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.pip-faq__q::-webkit-details-marker { display: none; }
.pip-faq__q::after {
  content: "\f078"; /* fa chevron-down */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .8rem;
  color: var(--pip-primary-dark);
  transition: transform .2s ease;
}
.pip-faq__item[open] .pip-faq__q::after { transform: rotate(180deg); }
.pip-faq__q:focus-visible { outline: 3px solid var(--pip-accent); outline-offset: -3px; }
.pip-faq__a { padding: 0 22px 20px; }
.pip-faq__a p { margin: 0; line-height: 1.65; color: var(--pip-ink-2); }
.pip-faq__a a { color: var(--pip-primary-dark); font-weight: 600; }

/* ====================================================================== */
/* I. DISCLAIMER BAND                                                     */
/* ====================================================================== */
/* Zastrzeżenie prawne — pasek nad stopką.
   BYŁ granatowy (var(--pip-ink)) — DOKŁADNIE ten sam kolor co stopka, więc oba
   zlewały się w jeden ciemny blok i stopka przestawała czytać się jak stopka.
   Teraz jasny: ciemna zostaje TYLKO stopka, a pasek należy wizualnie do treści
   strony (bo nim jest — to nota prawna do testu, nie element stopki). */
/* Baner „Zastrzeżenie prawne" ze zdjęciem — ten sam wzór co „Dołącz do
   społeczności ekspertów" na /zostan-autorem/ (.av2-community): to samo tło
   (img/landing/zespol-3.jpg) + granatowo-błękitny gradient, biały tekst.
   Overlay CIEMNIEJSZY niż na /zostan-autorem/, bo tu jest długi tekst prawny
   nad zdjęciem i musi zostać w pełni czytelny. */
.pip-disclaimer-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--pip-radius-lg);
  background: linear-gradient(120deg, rgba(11, 31, 58, .84), rgba(26, 134, 184, .68)),
              url("../img/landing/zespol-3.jpg") center / cover no-repeat;
  box-shadow: var(--pip-shadow);
  color: #fff;
}
.pip-disclaimer-banner__copy { padding: 46px 48px; max-width: 940px; }
.pip-disclaimer-banner__copy p {
  margin: 0 0 14px;
  font-size: .96rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .93);
}
.pip-disclaimer-banner__copy p:last-child { margin-bottom: 0; }

/* ====================================================================== */
/* RESPONSYWNOŚĆ                                                          */
/* ====================================================================== */
@media (max-width: 960px) {
  .pip-hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .pip-hero__visual { order: -1; }
  .pip-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pip-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pip-page { --pip-section-y: 56px; }
  .pip-hero__title br { display: none; }
  .pip-grid--4, .pip-grid--3 { grid-template-columns: 1fr; }
  .pip-form__row { grid-template-columns: 1fr; }
  /* Na telefonie oba CTA na pełną szerokość — największy możliwy cel dotyku
     i zero ryzyka, że tekst przycisku się złamie. Główny zostaje wyraźnie
     wyższy od pomocniczego, żeby hierarchia przetrwała zwężenie. */
  .pip-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .pip-hero__actions .pip-btn { width: 100%; }
  .pip-hero__actions .pip-btn--gold { min-height: 60px; padding-left: 18px; padding-right: 18px; }
  .pip-hero__actions .pip-btn--ghost-light { min-height: 50px; }
  .pip-answer { flex-basis: 100%; max-width: none; }
  .pip-result__actions { flex-direction: column; }
  .pip-result__actions .pip-btn { width: 100%; }
}

/* mniej ruchu dla użytkowników z prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pip-btn, .pip-card, .pip-answer, .pip-test__progress-bar { transition: none; }
  .pip-btn:hover, .pip-card:hover, .pip-answer:hover { transform: none; }
  /* igła ustawia się od razu w docelowej strefie, bez przejazdu */
  .pip-result__gauge .pip-gauge__needle { transition: none; }
}

/* ======================================================================
   v2 (2026-07-15) — elementy dodane wraz z nową specyfikacją treści:
   badge'e hero z podtytułem, pytanie wstępne (segmentacja), rozbudowany
   wynik (4 warianty), zgody formularza, strona polityki prywatności.
   ====================================================================== */

/* --- Skok do kotwicy vs przyklejony pasek ---
   Topbar jest position:sticky (84px, na mobile niższy), więc bez zapasu każdy
   skok do kotwicy („Przejdź do testu", CTA do kontaktu) i scrollIntoView na
   wyniku chował górę elementu pod paskiem — na wyniku znikała etykieta
   z poziomem ryzyka. */
.pip-page section[id],
.pip-page #pip-test-result { scroll-margin-top: 100px; }

/* --- Hero: badge z tytułem i podtytułem (było: jedna linijka) --- */
.pip-hero__lead--strong { font-weight: 700; color: #fff; }

.pip-trust { align-items: flex-start; gap: 18px 26px; }
.pip-trust li {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  flex: 1 1 180px;
  max-width: 230px;
}
.pip-trust i { font-size: 1.05rem; margin-bottom: 2px; }
.pip-trust__title { font-weight: 700; font-size: .95rem; }
.pip-trust__sub {
  font-weight: 500;
  font-size: .82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Pytanie wstępne (segmentacja, bez punktacji) --- */
.pip-test__segment { text-align: center; }
.pip-segment__options {
  display: grid;
  gap: 10px;
  max-width: 40em;
  margin: 22px auto 0;
}
.pip-segment__option {
  display: block;
  width: 100%;
  padding: 14px 18px;
  font: inherit;
  font-weight: 600;
  font-size: .98rem;
  text-align: left;
  color: var(--pip-ink);
  background: var(--pip-paper);
  border: 2px solid var(--pip-border);
  border-radius: var(--pip-radius-sm);
  cursor: pointer;
  transition: border-color .18s, transform .18s, background .18s;
}
.pip-segment__option:hover {
  border-color: var(--pip-primary);
  background: var(--pip-primary-tint);
  transform: translateY(-1px);
}
.pip-segment__option:focus-visible {
  outline: 3px solid var(--pip-primary);
  outline-offset: 2px;
}

/* --- Wynik: wariant „niejednoznaczny" + rozbudowana treść --- */
.pip-result__badge.is-unclear { background: var(--pip-unclear-bg); color: var(--pip-unclear-ink); }
.pip-test__result.is-unclear { box-shadow: inset 0 4px 0 var(--pip-unclear); }

/* Adnotacja przy wysokim ryzyku z wieloma „Nie wiem". */
.pip-result__note {
  max-width: 44em;
  margin: 0 auto 20px;
  padding: 12px 16px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pip-unclear-ink);
  background: var(--pip-unclear-bg);
  border-left: 3px solid var(--pip-unclear);
  border-radius: var(--pip-radius-sm);
  text-align: left;
}

.pip-result__body { max-width: 44em; margin: 0 auto 22px; }
.pip-result__body p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--pip-ink-2);
  margin: 0 0 14px;
  text-align: left;
}
.pip-result__body p:last-child { margin-bottom: 0; }

.pip-result__steps {
  max-width: 44em;
  margin: 0 auto 22px;
  padding: 18px 20px;
  background: var(--pip-bg);
  border: 1px solid var(--pip-border);
  border-radius: var(--pip-radius-sm);
  text-align: left;
}
.pip-result__steps-title { font-size: 1rem; font-weight: 700; margin: 0 0 10px; }
.pip-result__steps-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.pip-result__steps-list li { font-size: .97rem; line-height: 1.55; color: var(--pip-ink-2); }

.pip-result__outro {
  max-width: 44em;
  margin: 0 auto 22px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--pip-ink);
  text-align: left;
}

.pip-result__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 18px;
}

/* --- Formularz: zgody --- */
.pip-consents { display: grid; gap: 14px; margin: 4px 0 20px; }
.pip-form__afternote {
  margin: 18px 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--pip-ink-3);
  text-align: center;
}

/* --- Baner zastrzeżenia prawnego (nagłówek + podpis) --- */
/* `color` JAWNIE na h2, nie z dziedziczenia: main.css ma `h1,h2,...,h6 {
   color: var(--ink-900) }`, czyli regułę celującą wprost w h2 — a taka zawsze
   bije kolor odziedziczony po rodzicu. Bez tego nagłówek wyszedłby ciemny (#333)
   na zdjęciu i zniknął. Ta sama pułapka czeka na każdy nagłówek na własnym tle. */
.pip-disclaimer-banner__title {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 800;
  margin: 0 0 16px;
}
/* Podpis nadawcy noty (jest w specyfikacji). Selektor pod .__copy, żeby wygrać
   specyficznością z regułą koloru akapitów (.__copy p) i wyjść czysto biały. */
.pip-disclaimer-banner__copy .pip-disclaimer-banner__sign {
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 20px 0 0;
}
@media (max-width: 640px) {
  .pip-disclaimer-banner__copy { padding: 32px 24px; }
}

/* --- Stopka okrojona: DWIE kolumny domknięte do PRZECIWNYCH krawędzi ---
   Zmiana właściciela 2026-07-22: operator PO LEWEJ, marka (logo + hasło) PO
   PRAWEJ — wcześniej odwrotnie. Kolumny mają szerokość dokładnie na max-width
   treści (box operatora 360px, marka 340px), a `space-between` rozsuwa je do
   lewej i prawej krawędzi pasa. Dzięki temu obie krawędzie są „domknięte" i
   układ czyta się jak celowy, symetryczny — zamiast lewej połowy z pustką po
   prawej. Kolejność w DOM: operator (1) → marka (2). */
.lm-footer__grid--minimal {
  grid-template-columns: minmax(0, 360px) minmax(0, 340px);
  gap: 56px;
  margin-bottom: 32px;
  align-items: start;
  justify-content: space-between;
  text-align: left;
}
/* Marka po prawej: logo i hasło wyrównane do prawej krawędzi, żeby symetrycznie
   domykały pas z boxem operatora po lewej. */
.lm-footer--minimal .lm-footer__col--brand {
  text-align: right;
  justify-self: end;
}
.lm-footer--minimal .lm-footer__col--brand .lm-footer__tagline {
  margin-left: auto;   /* dosuwa blok max-width:340px do prawej krawędzi */
}
/* Logo niesie tu całe brandowanie (nie ma kolumn nawigacyjnych), więc odrobinę
   większe niż standardowe 58px — ale wciąż w rytmie stopki globalnej. */
.lm-footer--minimal .lm-footer__logo img { height: 66px; }

@media (max-width: 900px) {
  /* Poniżej ~900px dwie kolumny + gap nie mieszczą się bez ściskania boxu
     operatora — składamy w jedną, wszystko wraca do lewej (operator nad marką). */
  .lm-footer__grid--minimal {
    grid-template-columns: minmax(0, 360px);
    gap: 32px;
    justify-content: start;
  }
  .lm-footer--minimal .lm-footer__col--brand { text-align: left; justify-self: start; }
  .lm-footer--minimal .lm-footer__col--brand .lm-footer__tagline { margin-left: 0; }
}

/* --- Strona polityki prywatności (dokument prawny) --- */
.pip-legal { background: var(--pip-paper); padding-top: 40px; }
.pip-legal__head { margin-bottom: 32px; }
.pip-legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--pip-primary);
  text-decoration: none;
  margin-bottom: 20px;
}
.pip-legal__back:hover { text-decoration: underline; }
.pip-legal__title {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem);
  font-weight: 800;
  color: var(--pip-ink);
  margin: 0 0 8px;
}
.pip-legal__sub { font-size: 1rem; color: var(--pip-ink-3); margin: 0; }

.pip-legal__body { color: var(--pip-ink-2); }
.pip-legal__body h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--pip-ink);
  margin: 32px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--pip-border);
}
.pip-legal__body h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.pip-legal__body p { font-size: 1rem; line-height: 1.7; margin: 0 0 12px; }
.pip-legal__body ul,
.pip-legal__body ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 7px; }
.pip-legal__body li { font-size: 1rem; line-height: 1.65; }
.pip-legal__body a { color: var(--pip-primary); }

/* Podsekcja wewnątrz punktu polityki (np. „Piksel Meta" w pkt 12). Świadomie
   BEZ górnej kreski, którą ma h2 — inaczej czytałaby się jak nowy punkt
   numerowany, a jest częścią poprzedniego. Dodane 2026-08-25 z pikselem Meta:
   był to pierwszy h3 w tych dokumentach, więc wcześniej nie miał czego dziedziczyć. */
.pip-legal__body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pip-ink);
  margin: 22px 0 10px;
}
/* Nazwy plików cookies (_fbp, _fbc) — czytelnik ma je rozpoznać w ustawieniach
   przeglądarki, więc odróżniamy je od zwykłego tekstu. */
.pip-legal__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  background: var(--pip-bg);
  border: 1px solid var(--pip-border);
  border-radius: 4px;
  padding: 1px 5px;
}

.pip-legal__entity {
  padding: 16px 18px;
  background: var(--pip-bg);
  border-left: 3px solid var(--pip-primary);
  border-radius: var(--pip-radius-sm);
  line-height: 1.8;
}
.pip-legal__updated { font-weight: 700; color: var(--pip-ink); }
.pip-legal__contact {
  margin-top: 32px;
  padding: 20px;
  background: var(--pip-bg);
  border-radius: var(--pip-radius-sm);
}
.pip-legal__contact h2 { border-top: none; padding-top: 0; margin-top: 0; }
.pip-legal__contact ul { list-style: none; padding: 0; margin: 0; gap: 10px; }
.pip-legal__contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  text-decoration: none;
}
.pip-legal__contact a:hover { text-decoration: underline; }
.pip-legal__contact i { color: var(--pip-primary); }

@media (max-width: 768px) {
  /* Na mobile pasek jest niższy — mniejszy zapas, żeby nie zostawiać dziury. */
  .pip-page section[id],
  .pip-page #pip-test-result { scroll-margin-top: 70px; }
}

@media (max-width: 640px) {
  .pip-trust li { flex-basis: 100%; max-width: none; }
  .pip-result__cta { flex-direction: column; }
  .pip-result__cta .pip-btn { width: 100%; }
}

/* ======================================================================
   Miernik ryzyka na ekranie wyniku (2026-07-15)
   Reużywa .pip-gauge z hero — tu podpięty pod realny wynik testu.
   Kąt igły: 0deg = pion (środek żółtej strefy), ujemny w lewo (zielona),
   dodatni w prawo (czerwona). Łuk ma 3 strefy po 60deg, więc środek
   zielonej = -60deg, żółtej = 0deg, czerwonej = +60deg.
   ====================================================================== */
.pip-result__gauge {
  display: flex;
  justify-content: center;
  margin: 18px 0 24px;
}
/* `display:flex` powyżej bije regułę [hidden]{display:none} z przeglądarki
   (specyficzność klasy > atrybutu), więc bez tego resGauge.hidden = true NIE
   chowa miernika przy wyniku niejednoznacznym. */
.pip-result__gauge[hidden] { display: none; }
.pip-result__gauge .pip-gauge {
  max-width: 300px;
  box-shadow: none;
  background: var(--pip-surface-2, #f8fafc);
}
/* Start od lewej krawędzi — igła „mierzy” od zera do swojej strefy. */
.pip-result__gauge .pip-gauge__needle {
  transform: rotate(-90deg);
  transition: transform 1.05s cubic-bezier(.22, 1, .36, 1);
}
.pip-result__gauge.is-green  .pip-gauge__needle { transform: rotate(-60deg); }
.pip-result__gauge.is-yellow .pip-gauge__needle { transform: rotate(0deg); }
.pip-result__gauge.is-red    .pip-gauge__needle { transform: rotate(60deg); }

/* Aktywna strefa podświetlona, pozostałe wygaszone — wzmacnia „niskie/średnie/
   wysokie ryzyko” z nagłówka. */
.pip-result__gauge .pip-gauge__labels span {
  opacity: .3;
  transition: opacity .3s ease, transform .3s ease;
}
.pip-result__gauge .pip-gauge__labels span.is-active {
  opacity: 1;
  transform: scale(1.12);
}

/* ======================================================================
   Przyklejony CTA na małych ekranach (2026-07-15)
   Pokazywany tylko wtedy, gdy główny przycisk hero zjechał z ekranu, a test
   jeszcze nie został osiągnięty. Logika: initStickyCta() w pip-test.js.
   ====================================================================== */
.pip-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  padding: 10px 14px;
  /* safe-area: iPhone z paskiem gestów ucina dolne 34 px */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--pip-border);
  box-shadow: 0 -6px 24px rgba(11, 31, 58, .12);
  transform: translateY(100%);
  transition: transform .28s ease, opacity .28s ease;
  opacity: 0;
}
.pip-sticky-cta.is-visible { transform: translateY(0); opacity: 1; }
/* `display:flex` bije [hidden] z przeglądarki — bez tego pasek zostaje w DOM
   widoczny mimo hidden=true (ta sama pułapka co przy mierniku wyniku). */
.pip-sticky-cta[hidden] { display: none; }
.pip-sticky-cta .pip-btn--gold {
  width: 100%;
  min-height: 54px;
  font-size: 1.06rem;
  font-weight: 800;
  border-radius: 12px;
  box-shadow: none;
}
.pip-sticky-cta .pip-btn--gold:hover { transform: none; }

/* Pasek ma sens tylko tam, gdzie CTA hero realnie ucieka poza ekran.
   Powyżej 720 px szerokości przycisk mieści się nad zgięciem — pasek zbędny. */
@media (min-width: 721px) {
  .pip-sticky-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pip-sticky-cta { transition: none; }
}

/* ====================================================================== */
/* K. ZDJĘCIA PRZY BELKACH (split treść + foto, wzór wolftaxmed.pl)        */
/*    Nagłówek + karty po lewej (karty w POZIOMIE — 3 obok siebie),        */
/*    zdjęcie po prawej. Zdjęcie spina OBA wiersze grida (nagłówek + karty) */
/*    przez grid-template-areas, więc zaczyna się na wysokości nagłówka i   */
/*    schodzi do dołu kart (align-self: stretch + object-fit: cover).       */
/*    Węższe niż w pierwszej wersji (decyzja właściciela 2026-07-16 — było  */
/*    ~490 px, teraz ~300 px). Reguły bezpieczne, gdy w DOM nie ma splitu.  */
/*    Cofnięcie belki = w szablonie wyjąć <header>/<figure> poza split.     */
/* ====================================================================== */
.pip-media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 320px);
  grid-template-areas:
    "head  media"
    "cards media";
  gap: clamp(18px, 2.2vw, 30px) clamp(28px, 3vw, 48px);
  align-items: start;
}
/* nagłówek w lewej kolumnie, bez własnego marginesu dołu (odstęp daje row-gap) */
.pip-media-split > .pip-section__head { grid-area: head; margin: 0; max-width: none; }
.pip-media-split > .pip-grid { grid-area: cards; align-self: start; }
/* Karty w węższej kolumnie (3 obok siebie) — ciaśniejszy padding, żeby tekst
   nie robił się za wąski. Nadpisuje .pip-card / .pip-offer-card. */
.pip-media-split .pip-card,
.pip-media-split .pip-offer-card { padding: 22px 18px; }
.pip-media-split .pip-card__icon { width: 46px; height: 46px; font-size: 1.2rem; margin-bottom: 12px; }
.pip-media-split .pip-card__title { font-size: 1.02rem; }
.pip-media-split .pip-card__text { font-size: .9rem; }

.pip-media-split__media {
  grid-area: media;
  align-self: stretch;          /* od góry nagłówka do dołu kart */
  position: relative;
  margin: 0;
  border-radius: var(--pip-radius-lg);
  overflow: hidden;
  box-shadow: var(--pip-shadow);
  background: var(--pip-bg);
  min-height: 340px;
}
.pip-media-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  object-position: center;
}
/* portret: bias ku górze, żeby nie ucinać twarzy */
.pip-media-split__media--portrait img { object-position: 50% 18%; }
/* szerokie zdjęcie w wąskiej kolumnie: trzymaj twarze w kadrze */
.pip-media-split__media--wide img { object-position: 50% 28%; }

/* Podpis na zdjęciu (kto to za osoba) — półprzezroczysta belka u dołu foto,
   gradient od ciemnego dołu do przezroczystej góry, by tekst był czytelny bez
   przykrywania całego zdjęcia. */
.pip-media-split__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 30px 18px 14px;
  background: linear-gradient(to top,
    rgba(9, 24, 43, .86) 0%, rgba(9, 24, 43, .55) 52%, rgba(9, 24, 43, 0) 100%);
  color: #fff;
}
.pip-media-split__caption-name { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.pip-media-split__caption-role { font-size: .82rem; opacity: .92; }

/* wariant awaryjny: zdjęcie po lewej (gdyby właściciel chciał zamienić strony) */
.pip-media-split--reverse {
  grid-template-areas:
    "media head"
    "media cards";
  grid-template-columns: clamp(240px, 26vw, 320px) minmax(0, 1fr);
}

@media (max-width: 960px) {
  /* jedna kolumna: nagłówek, potem zdjęcie „na wejście", potem karty */
  .pip-media-split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "cards";
    gap: 22px;
  }
  .pip-media-split--reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "media" "cards";
  }
  .pip-media-split__media { align-self: auto; min-height: 0; max-height: 380px; }
  .pip-media-split__media img { min-height: 0; height: 320px; }
  .pip-media-split .pip-card,
  .pip-media-split .pip-offer-card { padding: 26px 22px; }
  .pip-media-split .pip-card__icon { width: 52px; height: 52px; font-size: 1.35rem; margin-bottom: 16px; }
  .pip-media-split .pip-card__title { font-size: 1.12rem; }
  .pip-media-split .pip-card__text { font-size: .96rem; }
}
@media (max-width: 620px) {
  .pip-media-split__media img { height: 260px; }
}