/* ==========================================================================
   DLA FIRM — oferta B2B
   Wartości przepisane z podglądu dla-firm.html. Kolory wyłącznie tokenami
   z style.css; cztery odcienie, których w palecie nie ma, siedzą jako
   zmienne lokalne przy sekcjach, w których występują.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Etykieta z kreską — powtarza się w trzech sekcjach
   -------------------------------------------------------------------------- */

.mp-firm-kicker{
  display:flex; align-items:center; gap:16px; margin:0 0 20px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-firm-kicker__linia{
  width:32px; height:1px; flex:0 0 auto; background:var(--mp-rule);
}

/* --------------------------------------------------------------------------
   1. Nagłówek strony
   -------------------------------------------------------------------------- */

.mp-firm-hero{
  background:var(--mp-warm);
  border-bottom:1px solid var(--mp-line);
  padding:clamp(48px,7vw,104px) 0 clamp(44px,6.5vw,92px);
}
.mp-firm-hero .mp-firm-kicker{ margin-bottom:22px; }
.mp-firm-hero .mp-firm-kicker__linia{ width:36px; }

.mp-firm-hero__tytul{
  margin:0; max-width:900px;
  font:300 clamp(34px,5.4vw,74px)/1.04 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-firm-hero__tytul em{ font-style:italic; color:var(--mp-focus); }

.mp-firm-hero__uklad{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(28px,4vw,72px);
  margin-top:clamp(30px,4vw,52px);
  align-items:start;
}
.mp-firm-hero__nadpis{
  margin:0 0 18px; font:400 11px/1 var(--mp-sans);
  letter-spacing:.15em; text-transform:uppercase; color:var(--mp-body);
}

/* Lista „Jeżeli” — w podglądzie zwykłe divy, tutaj lista numerowana,
   bo dla czytnika ekranu to trzy równorzędne przypadki, a nie akapity. */
.mp-firm-lista{ list-style:none; margin:0; padding:0; }
.mp-firm-lista li,
.mp-firm-lista__poz{
  display:flex; gap:16px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--mp-line-2);
}
.mp-firm-lista__num{
  font:300 12px/1 var(--mp-serif); color:var(--mp-muted);
  flex:0 0 auto;
}
.mp-firm-lista__tekst{
  font:300 clamp(16px,1.5vw,20px)/1.5 var(--mp-serif); color:var(--mp-ink-2);
}

.mp-firm-hero__kolumna{
  display:flex; flex-direction:column; gap:22px;
  padding-top:clamp(0px,2vw,34px);
}
.mp-firm-hero__akapit{
  margin:0; font:300 15px/1.88 var(--mp-sans);
  color:var(--mp-body-3); letter-spacing:.004em; text-wrap:pretty;
}
.mp-firm-hero__claim{
  margin:0; font:400 clamp(17px,1.6vw,22px)/1.5 var(--mp-serif); color:var(--mp-ink);
}
.mp-firm-hero__cta{ align-self:flex-start; }

/* --------------------------------------------------------------------------
   2. Pasmo zdjęć — trzy kadry 4:3 rozdzielone włoskową linią
   -------------------------------------------------------------------------- */

.mp-firm-galeria{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:1px; background:var(--mp-line-2);
}
.mp-firm-galeria__kadr{
  /* Zdjęcia pasma mają proporcję 4:3 (materiały z korekty 10.09.2026).
     Kadr kwadratowy ucinał z boków po jednej ósmej zdjęcia — rulon
     plakatu na pierwszym i krawędź planszy na trzecim. */
  margin:0; aspect-ratio:4/3; background:var(--mp-stone); overflow:hidden;
}
.mp-firm-galeria__kadr img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* --------------------------------------------------------------------------
   3. Dwa przykłady zastosowania
   -------------------------------------------------------------------------- */

.mp-firm-przyklady{
  background:var(--mp-cream); padding:clamp(52px,7.5vw,112px) 0;
}
.mp-firm-przyklady__uklad{
  /* Odcień siatki z podglądu, o pół tonu cieplejszy od --mp-line-2. */
  --mp-firm-siatka:#E9E2D8;

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:1px;
  background:var(--mp-firm-siatka);
  border:1px solid var(--mp-firm-siatka);
}
.mp-firm-karta{
  background:var(--mp-warm); padding:clamp(28px,3.4vw,52px);
}
.mp-firm-karta__meta{
  margin:0 0 18px; font:400 11px/1 var(--mp-sans);
  letter-spacing:.15em; text-transform:uppercase; color:var(--mp-body);
}
.mp-firm-karta__tytul{
  margin:0 0 18px; font:300 clamp(24px,2.6vw,34px)/1.2 var(--mp-serif); color:var(--mp-ink);
}
.mp-firm-karta__tekst{
  margin:0; font:300 15px/1.88 var(--mp-sans);
  color:var(--mp-body-2); letter-spacing:.004em; text-wrap:pretty;
}

/* --------------------------------------------------------------------------
   4. Cztery kroki — sekcja na ciemnym tle
   -------------------------------------------------------------------------- */

.mp-firm-kroki{
  /* Odcienie spoza palety globalnej, dopuszczalne wyłącznie na --mp-ink.
     Kontrast liczony na tle #241D15: etykieta 7,2 · kursywa 7,3 ·
     opis 7,9 · numery 3,1 (tekst wielkoformatowy, próg 3:1). */
  --mp-firm-etykieta:#C2B199;
  --mp-firm-zloty:#C4A97E;
  --mp-firm-opis:#BDB4A8;
  --mp-firm-numer:#7E6B4F;

  background:var(--mp-ink); padding:clamp(52px,7.5vw,110px) 0;
}
.mp-firm-kroki .mp-firm-kicker{ color:var(--mp-firm-etykieta); }
.mp-firm-kroki .mp-firm-kicker__linia{ background:var(--mp-accent); }

.mp-firm-kroki__tytul{
  margin:0 0 clamp(30px,4vw,52px);
  font:300 clamp(30px,4vw,52px)/1.06 var(--mp-serif);
  color:var(--mp-paper); text-wrap:balance;
}
.mp-firm-kroki__tytul em{ font-style:italic; color:var(--mp-firm-zloty); }

.mp-firm-kroki__uklad{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:1px; background:var(--mp-ink-2); border:1px solid var(--mp-ink-2);
}
.mp-firm-krok{ background:var(--mp-ink); padding:clamp(24px,2.8vw,40px); }
.mp-firm-krok__num{
  display:block; font:300 clamp(30px,3.4vw,46px)/1 var(--mp-serif);
  color:var(--mp-firm-numer);
}
.mp-firm-krok__tytul{
  margin:18px 0 0; font:400 clamp(16px,1.4vw,20px)/1.35 var(--mp-serif); color:var(--mp-paper);
}
.mp-firm-krok__tekst{
  margin:10px 0 0; font:300 13px/1.75 var(--mp-sans); color:var(--mp-firm-opis);
}

/* --------------------------------------------------------------------------
   5. Zapytanie — opis i formularz
   -------------------------------------------------------------------------- */

.mp-firm-kontakt{
  background:var(--mp-cream); padding:clamp(52px,7.5vw,112px) 0;
  /* Skok z „Napisz do mnie” pod przyklejony nagłówek obsługuje
     html{scroll-padding-top} w style.css (korekta 23). */
}
.mp-firm-kontakt__uklad{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(30px,4.4vw,76px);
  align-items:start;
}
.mp-firm-kontakt__tytul{
  margin:0 0 18px; font:300 clamp(30px,4vw,52px)/1.06 var(--mp-serif);
  color:var(--mp-ink); text-wrap:balance;
}
.mp-firm-kontakt__tytul em{ font-style:italic; color:var(--mp-focus); }
.mp-firm-kontakt__akapit{
  margin:0 0 26px; max-width:440px;
  font:300 15px/1.88 var(--mp-sans); color:var(--mp-body-2);
  letter-spacing:.004em; text-wrap:pretty;
}

.mp-firm-fakty{
  margin:0; display:flex; flex-direction:column; gap:14px;
  padding-top:22px; border-top:1px solid var(--mp-line);
}
.mp-firm-fakty__wiersz{ display:flex; gap:18px; }
.mp-firm-fakty dt{
  flex:0 0 120px; font:400 11px/1.4 var(--mp-sans);
  letter-spacing:.17em; text-transform:uppercase; color:var(--mp-body);
}
.mp-firm-fakty dd{
  margin:0; font:300 14px/1.5 var(--mp-sans); color:var(--mp-deep);
}

/* Formularz ---------------------------------------------------------------- */

.mp-firm-form{
  /* Czerwień komunikatów — 7,5:1 na tle --mp-warm. Błąd niesie też tekst
     i aria-invalid, kolor jest tu dodatkiem, nie jedynym nośnikiem. */
  --mp-firm-blad:#8A3423;

  border:1px solid var(--mp-line); background:var(--mp-warm);
  padding:clamp(24px,2.8vw,40px);
  display:flex; flex-direction:column; gap:16px;
}
.mp-firm-form__wiersz{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:16px;
}
.mp-firm-form__wiersz--waski{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
}

/* Odnośniki z podsumowania błędów prowadzą wprost do pól. Przyklejony
   nagłówek omija html{scroll-padding-top} (style.css, korekta 23); te 16 px
   to dodatkowy oddech nad polem — łącznie tyle, co dawne 76 px bez skryptu. */
.mp-firm-pole__wpis,
.mp-firm-zgoda__pole,
.mp-firm-form__alert{ scroll-margin-top:16px; }

.mp-firm-pole{ display:flex; flex-direction:column; }
.mp-firm-pole__etykieta{
  display:block; margin-bottom:9px;
  font:400 11px/1 var(--mp-sans); letter-spacing:.17em;
  text-transform:uppercase; color:var(--mp-body);
}
.mp-firm-pole__gwiazdka{ color:var(--mp-bronze); }

.mp-firm-pole__wpis{
  width:100%; min-height:var(--mp-tap);
  border:1px solid var(--mp-line-3); background:var(--mp-white);
  padding:15px 16px; font:300 14px/1.4 var(--mp-sans); color:var(--mp-ink);
}
.mp-firm-pole__wpis::placeholder{ color:var(--mp-muted); opacity:1; }
.mp-firm-pole__wpis:focus{ border-color:var(--mp-focus); }
.mp-firm-pole__wpis--opis{ min-height:110px; resize:vertical; line-height:1.7; }
.mp-firm-pole.is-blad .mp-firm-pole__wpis{ border-color:var(--mp-firm-blad); }

/* Nie ustawiamy display na stałe — inaczej atrybut hidden przestałby działać. */
.mp-firm-pole__blad:not([hidden]){
  display:block; margin-top:8px;
  font:400 12px/1.5 var(--mp-sans); color:var(--mp-firm-blad);
}

.mp-firm-form__alert{
  border:1px solid var(--mp-firm-blad); background:var(--mp-white);
  padding:16px 18px; margin:0;
  font:300 14px/1.6 var(--mp-sans); color:var(--mp-firm-blad);
}
.mp-firm-form__alert-tytul{ margin:0; }
.mp-firm-form__alert-lista{ margin:8px 0 0; padding-left:18px; }
.mp-firm-form__alert-lista a{ color:var(--mp-firm-blad); text-decoration:underline; }

.mp-firm-form__ok{
  border:1px solid var(--mp-rule); background:var(--mp-white);
  padding:16px 18px; margin:0;
  font:300 14px/1.6 var(--mp-sans); color:var(--mp-ink-2);
}

.mp-firm-zgoda{
  display:grid; grid-template-columns:auto 1fr;
  column-gap:12px; row-gap:6px; align-items:start;
  min-height:var(--mp-tap);
}
.mp-firm-zgoda__pole{
  width:20px; height:20px; margin:4px 0 0; accent-color:var(--mp-ink);
}
.mp-firm-zgoda__etykieta{
  font:300 13px/1.75 var(--mp-sans); color:var(--mp-body-2);
  /* Etykieta jest częścią celu dotykowego pola wyboru — stąd wysokość. */
  display:block; min-height:var(--mp-tap);
}
.mp-firm-zgoda__etykieta a{ color:var(--mp-bronze); text-decoration:underline; }
.mp-firm-zgoda .mp-firm-pole__blad{ grid-column:1 / -1; }
.mp-firm-zgoda.is-blad .mp-firm-zgoda__pole{ outline:2px solid var(--mp-firm-blad); outline-offset:2px; }

.mp-firm-form__nota{
  margin:0; font:300 12px/1.6 var(--mp-sans); color:var(--mp-body);
}

/* Pułapka na boty: poza ekranem, ale nie display:none — automat pomija
   pola ukryte, człowiek i tak jej nie zobaczy ani nie złapie tabulatorem. */
.mp-firm-form__pulapka{
  position:absolute; left:-9999px; top:0;
  width:1px; height:1px; overflow:hidden;
}

.mp-firm-form__wyslij{
  width:100%; padding:19px; min-height:48px; letter-spacing:.17em;
}

/* Komunikat dla redaktorki, gdy treść strony jest pusta. */
.mp-firm-pusto{
  background:var(--mp-band); padding:clamp(32px,5vw,64px) 0;
}
.mp-firm-pusto p{
  margin:0; max-width:640px;
  font:300 15px/1.8 var(--mp-sans); color:var(--mp-body-2);
}

/* --------------------------------------------------------------------------
   Telefon
   -------------------------------------------------------------------------- */

@media (max-width:640px){
  .mp-firm-fakty dt{ flex-basis:104px; }
  .mp-firm-hero__kolumna{ padding-top:0; }
}

/* ==========================================================================
   MOST DO ELEMENTORA
   --------------------------------------------------------------------------
   Strona jest zbudowana w Elementorze (wpis 1412), więc treść siedzi
   o poziom głębiej niż w szablonie: każdy nadtytuł, nagłówek i akapit ma
   własne opakowanie widgetu, a sekcje i listy są kontenerami.

   Reguły wyżej opisują wyłącznie klasy — żadnego selektora strukturalnego —
   więc trafiają tam, gdzie trafiały. Poniżej tylko to, czego klasa sama
   nie załatwia. Zasady te same, co na stronie głównej; szerzej
   w docs/STRONA-GLOWNA-ELEMENTOR.md.
   ========================================================================== */

/* Odstępy domyślne kontenerów i zestawu stylów. Odstęp między elementami
   opisuje tu arkusz co do piksela, więc Elementor nie ma nic dokładać. */
.mp-firm-hero,
.mp-firm-galeria,
.mp-firm-przyklady,
.mp-firm-kroki{
  --container-default-padding-top:0px;
  --container-default-padding-right:0px;
  --container-default-padding-bottom:0px;
  --container-default-padding-left:0px;
}
.mp-firm-hero .elementor-element,
.mp-firm-przyklady .elementor-element,
.mp-firm-kroki .elementor-element{
  --widgets-spacing:0px 0px;
  --widgets-spacing-row:0px;
  --widgets-spacing-column:0px;
  --kit-widget-spacing:0px;
}

/* Lewa kolumna hero była zwykłym <div> — kontener Elementora ustawia
   pionowy flex, co rozsuwałoby nadtytuł i listę. */
.mp-firm-hero__lewa{ display:block; }

/* Nadtytuł i pozycja listy stoją w rzędzie. Kierunek podajemy zmienną,
   bo Elementor czyta flex-direction:var(--flex-direction) regułą
   .e-con-full.e-flex o szczegółowości (0,2,0). */
.mp-firm-kicker.e-con,
.mp-firm-lista__poz.e-con{ --flex-direction:row; }

/* Pozycja listy „Jeżeli” — w szablonie <li>, tu kontener. */
.mp-firm-lista__poz{
  display:flex; gap:16px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--mp-line-2);
}

/* Rytm pionowy. Elementor zeruje marginesy każdego widgetu regułą
   `.e-con .elementor-widget.elementor-widget{margin:0}` o szczegółowości
   (0,4,0). Wartości te same, co w regułach wyżej. */
.elementor.elementor .e-con .mp-firm-hero__nadpis{ margin:0 0 18px; }
.elementor.elementor .e-con .mp-firm-karta__meta{ margin:0 0 18px; }
.elementor.elementor .e-con .mp-firm-karta__tytul{ margin:0 0 18px; }
.elementor.elementor .e-con .mp-firm-kroki__tytul{ margin:0 0 clamp(30px,4vw,52px); }
.elementor.elementor .e-con .mp-firm-krok__tytul{ margin:18px 0 0; }
.elementor.elementor .e-con .mp-firm-krok__tekst{ margin:10px 0 0; }

/* Elementor przycina każdy widget do 100% szerokości regułą (0,4,0);
   nagłówek hero ma własną miarę. */
.elementor.elementor .e-con > .mp-firm-hero__tytul{ max-width:900px; }

/* Widget „Obraz” centruje treść (.elementor-widget-image{text-align:center});
   kadr galerii był <figure> z domyślnym wyrównaniem. */
.mp-firm-galeria__kadr{ text-align:start; }