/* Reset i bazowe ustawienia — patrz docs/assets-css.md */

/* Montserrat, samohostowane (pliki w assets/fonts/, patrz docs/assets-css.md)
   — WCZEŚNIEJ motyw w ogóle nie ładował tego fontu jako web fontu (brak
   @font-face, brak enqueue Google Fonts), więc każdy zrzut ekranu w tym
   projekcie wyglądał poprawnie TYLKO dlatego, że Montserrat jest
   zainstalowany lokalnie na tej maszynie deweloperskiej — na produkcji,
   u każdego realnego odwiedzającego, cała strona renderowałaby się
   fontem zastępczym (system-ui) zamiast Montserrat (znalezione
   2026-08-06 przy weryfikacji zawijania nagłówka w bloku contact-cta).
   Pliki to zmienne (variable) fonty Google — jeden plik pokrywa cały
   zakres wag 300–800 (unicode-range latin/latin-ext wystarcza dla
   PL/EN/DE, bez cyrylicy/wietnamskiego, których strona nie potrzebuje). */

@font-face {
  font-family: 'Montserrat';

  font-style: normal;

  font-weight: 300 800;

  font-display: swap;

  src: url('fonts/montserrat-normal-latin.woff2') format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';

  font-style: normal;

  font-weight: 300 800;

  font-display: swap;

  src: url('fonts/montserrat-normal-latin-ext.woff2') format('woff2');

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';

  font-style: italic;

  font-weight: 300 800;

  font-display: swap;

  src: url('fonts/montserrat-italic-latin.woff2') format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';

  font-style: italic;

  font-weight: 300 800;

  font-display: swap;

  src: url('fonts/montserrat-italic-latin-ext.woff2') format('woff2');

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  color: #454545;
  background-color: #ffffff;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid #39b54a;
  outline-offset: 2px;
}

/* Zerowanie domyślnego marginesu Gutenberga na blokach sekcji pełnej szerokości. */

.wp-block-group.alignfull {
  margin-top: 0;
  margin-bottom: 0;
}

.fb-container {
  width: 100%;
  max-width: 70.75rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-container {
    padding-inline: 2rem;
  }
}

@media (min-width: 1024px) {
  .fb-container {
    padding-inline: 4rem;
  }
}

/* Rozmiar dużych nagłówków sekcji (about/certifications/offer/pillars/
   realizations/contact-cta/product-specs itd.) — display-xl (48px) jest
   za duży na wąskim ekranie, więc na mobile skalujemy w dół do 32px, tylko
   hero/page-hero/product-hero (osobny token display-2xl) zostają przy
   własnym, już ustalonym skoku 3rem→88px na 768px (klient 2026-08-06).
   JEDNA zmienna zamiast tej samej pary @media w każdym pliku bloku —
   zmiana progu/wartości w jednym miejscu wystarczy dla wszystkich. */

:root {
  --fb-heading-xl: 2rem;
}

@media (min-width: 768px) {
  :root {
    --fb-heading-xl: 3rem;
    /* 48px/800 */
  }
}

/* Pionowy odstęp sekcji (padding-block) — jedna reguła dla WSZYSTKICH
   bloków sekcji (w tym stopki): 64px mobile / 80px desktop. Wcześniej
   rozjechane między blokami (strona główna 80px na każdej szerokości,
   strona produktu 48px, stopka 40px) — klient 2026-08-06: "odstępy
   pomiędzy sekcjami powinny trzymać się jakieś reguły". */

:root {
  --fb-section-padding-block: 4rem;
}

@media (min-width: 768px) {
  :root {
    --fb-section-padding-block: 5rem;
  }
}

/* Blok flora-bis/realizacja-hero — patrz blocks/realizacja-hero/realizacja-hero.php.
   Minimalny hero single realizacji: breadcrumb + tytuł + lokalizacja.
   Jasne tło, spójne z page-hero (wariant light) i archiwum realizacji. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-realizacja-hero,
:root :where(.is-layout-constrained) > .fb-realizacja-hero {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/company-hero — patrz blocks/company-hero/company-hero.php.
   Jasne tło, breadcrumb + nagłówek + opis po lewej, zdjęcie (stała
   wysokość, zaokrąglone rogi) po prawej, BEZ CTA. Wzorem Figma (hero na
   stronie "O firmie", node 272:3979). Style breadcrumb/nagłówka celowo
   DUPLIKUJĄ wartości z page-hero.css/product-hero.css (osobne klasy
   .fb-company-hero__*, nie współdzielone) — ten sam powód co rozdzielenie
   product-hero: prosty, niezależny blok zamiast kolejnego wariantu w
   współdzielonym komponencie. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-company-hero,
:root :where(.is-layout-constrained) > .fb-company-hero {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/company-timeline — patrz blocks/company-timeline/company-timeline.php.
   Eyebrow+nagłówek+opis (sticky od desktopu) po lewej, oś czasu (karty
   rok+tytuł+opis) po prawej. Wzorem Figma (sekcja "Kim jesteśmy" na
   stronie "O firmie", node 271:2288). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-company-timeline,
:root :where(.is-layout-constrained) > .fb-company-timeline {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/partner-logos — patrz blocks/partner-logos/partner-logos.php.
   Wydzielony z flora-bis/testimonials (klient 2026-08-06) — style
   przeniesione 1:1 (.fb-testimonials__partners* -> .fb-partner-logos__*),
   teraz jako samodzielna sekcja z własnym tłem/paddingiem zamiast
   doklejona pod siatką opinii. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-partner-logos,
:root :where(.is-layout-constrained) > .fb-partner-logos {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Komponenty współdzielone przez inc/render-helpers.php i inc/polylang.php.
   Zmiana klasy tutaj = zmiana we wszystkich blokach, które jej używają. */

.fb-btn-primary,
.fb-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fb-btn-primary {
  background-color: #39b54a;
  color: #ffffff;
  border: 1px solid #39b54a;
}

.fb-btn-primary:hover {
  background-color: #4dcf5f;
  border-color: #4dcf5f;
}

.fb-btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
}

.fb-btn-secondary:hover {
  background-color: #ffffff;
  color: #0a1f1e;
}

.fb-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1875rem;
  /* 3px */
  text-transform: uppercase;
  color: #39b54a;
}

/* Odstęp eyebrow→nagłówek — WYŁĄCZNIE przez gap na wrapperze (nigdy margin
   na .fb-eyebrow, usunięty stąd), żeby był identyczny wszędzie niezależnie
   od tego, czy blok używa współdzielonego fb_section_heading() (ta klasa)
   czy własnego wrappera (__heading/__left w certifications/offer/pillars/
   product-specs/realizations/contact-cta) — klient 2026-08-06: "zawsze ta
   sama odległość". */

.fb-section-heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fb-heading-display-lg {
  font-size: 2rem;
  font-weight: 700;
  color: #0a1f1e;
}

/* 48px/800 desktop, 32px mobile — Figma H4 (np. tytuł bloku "o firmie",
   node 182:665). Rozmiar przez --fb-heading-xl (global-base.css), NIE
   theme() bezpośrednio — tam jest jedyny próg 768px, klient 2026-08-06. */

.fb-heading-display-xl {
  font-size: var(--fb-heading-xl);
  font-weight: 800;
  line-height: 1;
  color: #0a1f1e;
}

.fb-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

/* Domyślny wariant (grid) — 2 kolumny od desktopu, zgodnie z Figmą
   (node 182:672 "List": itemSpacing 32 = column-gap, counterAxisSpacing
   16 = row-gap). Na mobile jedna kolumna (za mało miejsca na dwie). */

@media (min-width: 640px) {
  .fb-checklist--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fb-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0a1f1e;
}

.fb-checklist__icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.fb-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: #fafafa;
}

.fb-card__icon-img {
  width: 2.5rem;
  height: 2.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.fb-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0a1f1e;
}

.fb-card__description {
  font-size: 0.875rem;
  color: #454545;
}

/* Siatka "kafelków" (zdjęcie + odznaka-ikona + strzałka + tytuł/opis) —
   współdzielona między sekcjami z tym samym układem (oferta/produkty na
   stronie głównej, docelowo też siatka realizacji — ustalone z klientem
   2026-08-04, żeby nie duplikować stylów). Renderowana przez
   fb_tile_card() w inc/render-helpers.php. */

.fb-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .fb-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fb-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2rem;
  }
}

.fb-tile-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgb(212 212 212 / 0.5);
  /* Gray-50 */
  background-color: #ffffff;
  text-decoration: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

a.fb-tile-card:hover {
  border-color: #d4d4d4;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
}

.fb-tile-card__media {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

.fb-tile-card__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 308 / 208;
  -o-object-fit: cover;
  object-fit: cover;
}

.fb-tile-card__arrow {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: inline-flex;
}

.fb-tile-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  /* wartość klienta 2026-08-04 */
}

.fb-tile-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0a1f1e;
}

.fb-tile-card__description {
  font-size: 0.75rem;
  color: #454545;
}

.fb-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: #39b54a;
  color: #ffffff;
}

.fb-lang-switcher {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* 12px */
  margin: 0;
  padding: 0;
}

.fb-lang-switcher__link {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.25rem 0.375rem;
  border-radius: 0.25rem;
}

.fb-lang-switcher__item.is-current .fb-lang-switcher__link {
  color: #39b54a;
}

/* Blok flora-bis/header — patrz blocks/header/header.php.
   Wartości z Figmy (Dev Mode): navbar home = 182:1370, navbar default = 270:2008.
   Uwagi klienta (2026-08-04): logo wyśrodkowane (mobile: do lewej), odstęp
   pod logo 2rem, gap flag 12px, social sticky do połowy ekranu (fixed poza
   .fb-header — backdrop-filter na .fb-header tworzy containing block, które
   psuło `position: fixed` potomków), panel mobilny jako nakładka (nie
   rozpycha treści), animacja hamburgera→X, pasek sticky-reveal na home. */

/* Zerowanie marginesu Gutenberga dla sekcji fb-* (patrz docs/wp-blocks-php.md) */

:root :where(.is-layout-flow) > .fb-header,
:root :where(.is-layout-constrained) > .fb-header {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/hero — patrz blocks/hero/hero.php.
   Wartości z Figmy (Dev Mode): hero = 182:595, zdjęcie+gradient = 182:599, statystyki = 182:630.
   Uwagi klienta (2026-08-04): treść do lewej (nie centrowana), statystyki
   POD zdjęciem (nie nachodzące), ikony w statystykach — uwzględnione niżej. */

/* Zerowanie marginesu Gutenberga. */

:root :where(.is-layout-flow) > .fb-hero,
:root :where(.is-layout-constrained) > .fb-hero {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/about — patrz blocks/about/about.php.
   Wartości z Figmy (Dev Mode, node 182:665 "about", strona "Home v2.1"):
   zdjęcie 453x549 (radius 16), gap 32 do treści, treść 647 szerokości —
   453+32+647=1132, dokładnie kontener treści (.fb-header__row itd.). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-about,
:root :where(.is-layout-constrained) > .fb-about {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/certifications — patrz blocks/certifications/certifications.php.
   Wartości z Figmy (Dev Mode, node 402:3238 "certifications"): tło ciemne
   (fb-dark), treść 647px + globus 453px + gap 32 = 1132px (kontener treści),
   siatka odznak 3 kolumny/gap 12, poświata (blur 240px, zielona 20% opacity,
   pozycja górny-lewy róg, częściowo poza sekcją — odtworzona jako CSS blur
   zamiast eksportu PNG, bo eksport Figmy renderował ją jako ziarnisty szum. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-certs,
:root :where(.is-layout-constrained) > .fb-certs {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/offer — patrz blocks/offer/offer.php.
   Wartości z Figmy (Dev Mode, node 182:781 "offer"): tło jasnoszare
   (fb-gray-light), nagłówek + opis w jednym wierszu (desktop), 2 zdjęcia
   744px/356px (gap 32, radius 16, wysokość 320px). Siatka produktów to
   współdzielony `.fb-tile-grid` z global-components.css (NIE duplikować
   tu stylów karty — patrz uwaga klienta 2026-08-04 o wspólnych klasach
   z przyszłą siatką realizacji). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-offer,
:root :where(.is-layout-constrained) > .fb-offer {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/pillars — patrz blocks/pillars/pillars.php.
   Wartości z Figmy (Dev Mode, node 182:829 "why flora"): tło ciemne
   (fb-dark), poświata (blur 240px, ta sama technika co w certifications.css
   — eksport PNG dawał szum, odtworzone jako CSS blur), siatka 4 kart. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-pillars,
:root :where(.is-layout-constrained) > .fb-pillars {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/realizations — patrz blocks/realizations/realizations.php.
   Wartości z Figmy (Dev Mode, node 182:842 "realizations"): tło białe,
   karta 356x508 (radius 16), gradient czarny od dołu (0.8→0.2→0 opacity),
   pigułka kategorii (zielona), lokalizacja+ikona pinezki, tytuł. Karuzela:
   natywny scroll-snap + przyciski poprzedni/następny (src/main.js). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-realizations,
:root :where(.is-layout-constrained) > .fb-realizations {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/testimonials — patrz blocks/testimonials/testimonials.php.
   Wartości z Figmy (Dev Mode, node 182:861 "testimonials"): tło jasnoszare,
   nagłówek wyśrodkowany, siatka 3 kart opinii (cytat + ikona + imię/rola).
   Pasek logotypów partnerów wydzielony do partner-logos.css (klient
   2026-08-06). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-testimonials,
:root :where(.is-layout-constrained) > .fb-testimonials {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/media-banner — patrz blocks/media-banner/media-banner.php.
   Pełnoszerokie dekoracyjne zdjęcie/wideo (320px z Figmy, node 336:2489
   "Rectangle 1"). Wydzielone z contact-cta jako osobny blok (klient
   2026-08-06), żeby dało się użyć samego banera bez karty CTA i
   odwrotnie. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-media-banner,
:root :where(.is-layout-constrained) > .fb-media-banner {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/contact-cta — patrz blocks/contact-cta/contact-cta.php.
   Wartości z Figmy (Dev Mode, node 182:878 "CTA"): ciemna karta (radius
   16, padding 32) z opisem/kontaktem po lewej i białym formularzem po
   prawej. Formularz to Contact Form 7 (ustalone z klientem 2026-08-06)
   — style celują w jego natywne klasy (.wpcf7-*), nie we własny markup
   pól. Baner zdjęcia/wideo nad tą sekcją to osobny blok
   (`flora-bis/media-banner`), patrz media-banner.css. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-contact-cta,
:root :where(.is-layout-constrained) > .fb-contact-cta {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/footer — patrz blocks/footer/footer.php.
   Wartości z Figmy (Dev Mode, node 327:1948 "footer"): ciemna stopka
   (tło fb-dark), 4 kolumny (marka/nawigacja/produkty/kontakt) nad
   paskiem copyright. Figma ma sztywną szerokość canvasu (1512px) —
   tu odtworzone przez ten sam wzorzec `__row` (max-width + margin-auto)
   co reszta bloków, nie dosłowny padding z Figmy (patrz uwaga w
   contact-cta.css o tym samym problemie).

   Menu "Produkty" pokazuje jeden nagłówek nad dwiema kolumnami linków
   (Figma miała dwa nagłówki "Produkty"/"oferta" — uznane za pozostałość
   kopiuj-wklej w projekcie; klient chce dwa menu total: Nawigacja i
   Produkty, to drugie w dwóch kolumnach, klient 2026-08-06). Nawigacja i
   Produkty to prawdziwe menu WP (Wygląd → Menu, lokalizacje
   `footer-info`/`footer-offer`), patrz fb_footer_get_menu_items() —
   NIE atrybut bloku ani żywy WP_Query (klient 2026-08-06: "zamiast
   stworzyć menu i podpiąć produkty to zrobiłeś to na fallbacku?"). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-footer,
:root :where(.is-layout-constrained) > .fb-footer {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Osobny wyciek: template-part stopki renderuje się jako
   `<div class="wp-block-template-part">` BEZPOŚREDNIO pod `.wp-site-blocks`
   (`tagName:"div"`, NIE "footer" — patrz uwaga niżej) — to NIE jest
   `.fb-footer` (ta jest zagnieżdżona piętro niżej) i NIE ma klasy
   `.is-layout-flow`/`.is-layout-constrained`, więc powyższe zerowanie go
   nie łapie. Rdzeń WP dokłada tu 24px przez `:where(.wp-site-blocks) > * {
   margin-block-start: 24px }` — widoczne jako szczelina nad stopką (klient
   2026-08-06). `:last-child`, NIE tag/klasa — wrapper headera ma dokładnie
   ten sam tag+klasę (`tagName:"div"` po naprawie [footer > footer] niżej),
   więc jedyne co je odróżnia w tym miejscu to kolejność (stopka zawsze
   ostatnia z template-parts poziomu strony, przegląd codex exec
   2026-08-06). */

.wp-site-blocks > .wp-block-template-part:last-child {
  margin-block-start: 0;
}

/* `tagName:"div"` na template-parcie stopki (patrz templates/*.html) — NIE
   "footer": sam blok flora-bis/footer już renderuje własny `<footer>`
   (fb_render_footer_block()). Template-part z tagName:"footer" dawał
   `<footer><footer>` — zagnieżdżony, nieprawidłowy landmark `contentinfo`
   x2 dla czytników ekranu (przegląd codex exec 2026-08-06). Ten sam wzorzec
   już stosowany dla headera (`tagName:"div"`, blok renderuje własny
   `<header>`). */

/* Blok flora-bis/page-hero — patrz blocks/page-hero/page-hero.php.
   Reużywalny hero dla podstron (Produkty, O firmie, Kontakt, Realizacje…),
   wzorem Figma (hero na "Produkty" node 277:5368, ten sam komponent na
   innych podstronach z inną treścią) — jeden blok zamiast osobnego na
   każdą podstronę. Układ: breadcrumb + duży nagłówek po lewej, opis +
   2x CTA po prawej (klient 2026-08-06 — wcześniejsza wersja miała
   wszystko po lewej + wymyśloną kolumnę mini-info po prawej, usuniętą).
   Breadcrumb z Yoast SEO (`yoast_breadcrumb()`) — style celują w jego
   natywną strukturę (zagnieżdżone <span>/<a>, klasa `.breadcrumb_last`
   na bieżącej stronie), nie własny markup. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-page-hero,
:root :where(.is-layout-constrained) > .fb-page-hero {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/split-cta — patrz blocks/split-cta/split-cta.php.
   Ciemna zaokrąglona karta wewnątrz jasnej sekcji — treść po lewej,
   przyciski po prawej, zielona poświata (blur) za przyciskami. Wzorem
   Figma (sekcja "Contact" na stronie "Produkty", node 277:5525) — poprawione
   po zrzucie ekranu od klienta (2026-08-06), pierwsza wersja była błędnie
   pełnoszerokim białym tłem bez karty. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-split-cta,
:root :where(.is-layout-constrained) > .fb-split-cta {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/products-grid — patrz blocks/products-grid/products-grid.php.
   Siatka kart (.fb-tile-grid/.fb-tile-card) już zdefiniowana w
   global-components.css (współdzielona z ofertą na stronie głównej) —
   tu tylko kontener wiersza + odstęp pod nagłówkiem. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-products-grid,
:root :where(.is-layout-constrained) > .fb-products-grid {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/product-hero — patrz blocks/product-hero/product-hero.php.
   Ciemna karta z breadcrumb + nagłówek + opis + CTA po lewej, zdjęcie
   produktu po prawej, zielona poświata z lewej strony. Wzorem Figma (hero
   na stronie "Produkt", node 272:4043).

   Style breadcrumb/nagłówka celowo DUPLIKUJĄ wartości z page-hero.css
   (nie współdzielą klas) — świadoma decyzja: to osobne, proste bloki
   (klient 2026-08-06), mały koszt duplikacji zamiast współdzielonego,
   trudniejszego w utrzymaniu komponentu z wieloma wariantami. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-product-hero,
:root :where(.is-layout-constrained) > .fb-product-hero {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/product-description — patrz blocks/product-description/product-description.php.
   Jasna sekcja: eyebrow + dwukolorowy nagłówek + opis (wiele akapitów).
   Wzorem Figma (sekcja "Contact" na stronie "Produkt", node 272:4070 —
   mimo nazwy w Figmie to opis produktu). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-product-description,
:root :where(.is-layout-constrained) > .fb-product-description {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/product-benefits — patrz blocks/product-benefits/product-benefits.php.
   Jasnoszara sekcja — eyebrow + dwukolorowy nagłówek + siatka kart korzyści
   (ikona w zielonym kwadracie 48x48, ten sam wzorzec co .fb-pillars__icon).
   Wzorem Figma (node 272:4122, strona "Produkt"). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-product-benefits,
:root :where(.is-layout-constrained) > .fb-product-benefits {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/product-specs — patrz blocks/product-specs/product-specs.php.
   Jasna sekcja — nagłówek + opis (układ lewa/prawa jak page-hero), pod
   spodem jedna lub więcej tabel parametrów. Wzorem Figma (sekcja "Contact"
   na stronie "Produkt", node 272:4153). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-product-specs,
:root :where(.is-layout-constrained) > .fb-product-specs {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/realizations-grid — patrz blocks/realizations-grid/realizations-grid.php.
   Archiwum realizacji: pigułki filtra (kategoria-realizacji, dynamicznie z
   realnych termów) + licznik + siatka kart. Sama KARTA (.fb-realizations__card)
   jest współdzielona z karuzelą strony głównej — style w realizations.css,
   NIE tutaj (klient 2026-08-06: "miałeś widok kafelka realizacji zrobiony
   już w sliderze, niepotrzebnie go tworzyłeś od podstaw"). Ten plik ma
   WYŁĄCZNIE layout siatki/filtra wokół tej współdzielonej karty. Filtrowanie
   client-side w main.js (initRealizationsGridFilter) — JS przełącza
   [hidden] na .fb-realizations-grid__cell wg data-category. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-realizations-grid,
:root :where(.is-layout-constrained) > .fb-realizations-grid {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/contact-form — patrz blocks/contact-form/contact-form.php.
   Nagłówek + karta formularza CF7 po lewej (grid 647fr/453fr, jak
   contact-cta.css — flex proporcjonalny okazał się tam niestabilny),
   sidebar (dane firmy na ciemnej karcie + godziny + szybki kontakt) po
   prawej. Wzorem Figma (node 205:4117, strona "Kontakt"). Formularz to
   Contact Form 7 (ID 115) — jego markup zawiera WŁASNE <label> (widoczne
   etykiety pól, inaczej niż w `contact-cta`, które ma tylko placeholdery)
   wewnątrz `.fb-contact-form__field` (patrz treść formularza w panelu CF7);
   PUŁAPKA SKŁADNI CF7 (odkryta 2026-08-06): wartości w cudzysłowie
   (`placeholder "..."`) muszą być OSTATnią opcją w tagu, po wszystkich
   opcjach `klucz:wartość` (np. `id:...`) — w innej kolejności CF7 uznaje
   tag za nieprawidłowy i zostawia dosłowny tekst `[text* ...]` zamiast
   pola formularza. */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-contact-form,
:root :where(.is-layout-constrained) > .fb-contact-form {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/contact-people — patrz blocks/contact-people/contact-people.php.
   Nagłówek + siatka kart (avatar-placeholder + imię/rola + telefon/e-mail).
   Wzorem Figma (node 205:4258, strona "Kontakt"). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-contact-people,
:root :where(.is-layout-constrained) > .fb-contact-people {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Blok flora-bis/map — patrz blocks/map/map.php.
   Nagłówek + osadzona mapa Google (iframe). Wzorem Figma (node 205:4331
   "Contact", strona "Kontakt"). */

/* Zerowanie marginesu Gutenberga (patrz docs/wp-blocks-php.md). */

:root :where(.is-layout-flow) > .fb-map,
:root :where(.is-layout-constrained) > .fb-map {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Typografia dla "Strony tekstowej" (`templates/page-text.html`) — czyste
   bloki rdzenia Gutenberga (`wp:heading`/`wp:paragraph`/`wp:list`) wewnątrz
   `wp:post-content`, bez własnego bloku motywu (np. Polityka prywatności,
   Regulamin). Wzorem Figma (node 205:5637, strona "Polityka prywatności").

   Odstępy przez MARGIN, NIE `display:flex + gap` (poprzednia wersja) —
   flex na <ol>/<ul> kurczył je do szerokości treści (fit-content), co przy
   rdzeniowej regule WP `.is-layout-constrained > :not([align]) {
   margin-inline: auto }` wizualnie WYŚRODKOWYWAŁO listy zamiast trzymać je
   przy lewej krawędzi (klient 2026-08-07: "powinien być normalnie do lewej
   krawędzi, bez środkowania marginem"). Do tego brakujący `margin:0` na
   `<p>` pozwalał domyślnemu marginesowi przeglądarki SUMOWAĆ się z
   `gap` z flexa — stąd nierówne, "dziwne" odstępy wokół nagłówków. */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.fb-realizacja-hero {
  background-color: #ffffff;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-realizacja-hero {
    padding-inline: 2.5rem;
  }
}

.fb-realizacja-hero__row {
  max-width: 70.75rem;
  margin-inline: auto;
  /* Dół celowo 0 — odstęp do galerii poniżej liczony w CAŁOŚCI przez
       padding-top galerii (3rem/48px mobile, 5rem/80px desktop), żeby nie
       sumować się z tym paddingiem i nie dawać podwójnego odstępu (klient
       2026-08-06: "za duża odległość pomiędzy zajawką a widgetem galerii,
       chcę 80px desktop / 48px mobile"). */
  padding-block: var(--fb-section-padding-block) 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fb-realizacja-hero__breadcrumb {
  display: block;
  font-size: 0.75rem;
  color: #454545;
}

.fb-realizacja-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.fb-realizacja-hero__breadcrumb a:hover,
  .fb-realizacja-hero__breadcrumb a:focus-visible {
  color: #0a1f1e;
}

.fb-realizacja-hero__breadcrumb .breadcrumb_last {
  color: #454545;
}

.fb-realizacja-hero__title {
  /* Ta sama skala co page-hero (wariant light) — H4/H5, 2rem mobile /
       3rem desktop, konwencja nagłówków sekcji w projekcie. */
  font-size: var(--fb-heading-xl);
  font-weight: 800;
  line-height: 1;
  color: #0a1f1e;
}

.fb-realizacja-hero__location {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: #454545;
}

/* Galeria wpisywana bezpośrednio w post_content realizacji (core/gallery,
     natywny blok WP) — post-content na tym szablonie ma layout "default"
     (bez ograniczenia szerokości, świadomie: nasze własne bloki, jak
     realizacja-hero wyżej, same zarządzają swoim max-width). core/gallery
     tego nie robi samo z siebie, więc bez tej reguły rozciąga się na całą
     szerokość ekranu zamiast trzymać się konwencji 1132px reszty strony. */

.fb-company-hero {
  background-color: #ffffff;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-company-hero {
    padding-inline: 2.5rem;
  }
}

.fb-company-hero__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .fb-company-hero__row {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
}

.fb-company-hero__left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .fb-company-hero__left {
    flex: 0 0 36.75rem;
    /* 588px z Figmy */
  }
}

.fb-company-hero__breadcrumb {
  display: block;
  font-size: 0.75rem;
  color: #454545;
}

.fb-company-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.fb-company-hero__breadcrumb a:hover,
  .fb-company-hero__breadcrumb a:focus-visible {
  color: #0a1f1e;
}

.fb-company-hero__breadcrumb .breadcrumb_last {
  color: #454545;
}

.fb-company-hero__title {
  /* H4/H5 (48px) — ta sama skala co page-hero (wariant light) i
       realizacja-hero, NIE display-2xl/88px (klient 2026-08-06). */
  font-size: var(--fb-heading-xl);
  font-weight: 800;
  line-height: 1;
  color: #0a1f1e;
}

.fb-company-hero__title-main {
  display: block;
}

.fb-company-hero__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-company-hero__description {
  font-size: 0.875rem;
  color: #454545;
}

.fb-company-hero__image {
  width: 100%;
}

@media (min-width: 1024px) {
  .fb-company-hero__image {
    flex: 1 1 0%;
  }
}

.fb-company-hero__image-img {
  display: block;
  width: 100%;
  height: 16rem;
  /* 256px mobile — 320px z Figmy tylko od desktopu */
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 1rem;
}

@media (min-width: 1024px) {
  .fb-company-hero__image-img {
    height: 20rem;
    /* 320px z Figmy */
  }
}

.fb-company-timeline {
  background-color: #fafafa;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-company-timeline {
    padding-inline: 2.5rem;
  }
}

.fb-company-timeline__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .fb-company-timeline__row {
    flex-direction: row;
    /* flex-start, NIE stretch (domyślne) — .fb-company-timeline__left
         musi zachować swoją naturalną (krótszą) wysokość, żeby
         position:sticky miało w ogóle gdzie "pływać" w obrębie tego
         rzędu (klient 2026-08-06: sticky lewa kolumna). */
    align-items: flex-start;
    gap: 2rem;
  }
}

.fb-company-timeline__left {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* 40px z Figmy — między blokiem nagłówka a opisem */
}

@media (min-width: 1024px) {
  .fb-company-timeline__left {
    flex: 0 0 34.375rem;
    /* 550px z Figmy */
    /* Sticky: przesuwa się z treścią, zatrzymuje się przy górnej
         krawędzi widoku (top = wysokość sticky headera, 5rem/80px —
         .fb-header__row min-height w header.css — + 2rem odstępu, żeby
         treść nie dotykała headera podczas scrolla, klient 2026-08-06)
         i automatycznie kończy na wysokości ostatniego boxa po prawej, bo
         sticky jest ograniczone do obszaru wspólnego rodzica
         (.fb-company-timeline__row) — bez żadnego dodatkowego JS. */
    position: sticky;
    top: 7rem;
  }
}

.fb-company-timeline__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* eyebrow→nagłówek, jednolite wszędzie — klient 2026-08-06 */
}

.fb-company-timeline__title {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
  color: #0a1f1e;
}

.fb-company-timeline__title-main {
  display: block;
}

.fb-company-timeline__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-company-timeline__description {
  font-size: 0.875rem;
  color: #454545;
}

.fb-company-timeline__right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* 24px z Figmy */
  width: 100%;
}

.fb-company-timeline__item {
  display: flex;
  gap: 2rem;
  /* 32px z Figmy */
  align-items: flex-start;
  padding: 1.5625rem;
  /* 25px z Figmy */
  border: 1px solid rgb(212 212 212 / 0.5);
  border-radius: 1rem;
}

.fb-company-timeline__year {
  flex-shrink: 0;
  font-size: 1.125rem;
  /* 18px — H7 */
  font-weight: 700;
  color: #39b54a;
  white-space: nowrap;
}

.fb-company-timeline__item-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  /* pozwala tekstowi się zawijać zamiast rozpychać box */
}

.fb-company-timeline__item-title {
  /* margin:0 — domyślny margines h1–h6 rozjeżdżałby ciasny gap:0.25rem
       na .fb-company-timeline__item-body (margines na flex-item DODAJE się
       do gap, nie zlewa z nim). itemTitleTag pozwala na h1–h6 (przegląd
       codex exec 2026-08-06 — hierarchia nagłówków w karcie). */
  margin: 0;
  font-size: 0.875rem;
  /* 14px — Body2 */
  font-weight: 600;
  color: #0a1f1e;
}

.fb-company-timeline__item-description {
  font-size: 0.875rem;
  /* 14px — Body */
  font-weight: 400;
  color: #454545;
}

.fb-partner-logos {
  background-color: #fafafa;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-partner-logos {
    padding-inline: 2.5rem;
  }
}

.fb-partner-logos__row {
  max-width: 70.75rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  /* 24px z Figmy */
}

.fb-partner-logos__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1875rem;
  /* 3px, jak .fb-eyebrow */
  text-transform: uppercase;
  color: #454545;
  text-align: center;
}

.fb-partner-logos__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  /* 40px z Figmy */
}

.fb-partner-logos__logo-img {
  display: block;
  height: 1rem;
  /* 16px z Figmy — logotypy różnej szerokości, stała wysokość */
  width: auto;
  max-width: none;
}

.fb-header {
  position: relative;
  z-index: 50;
  background-color: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgb(212 212 212 / 0.5);
  /* fb-gray @ 50% */
  padding-inline: 1rem;
}

/* Header główny (`.fb-header--default` na podstronach, `.fb-header--home`
     na stronie głównej) jest w normalnym przepływie na OBU wariantach —
     przewija się razem ze stroną. Przypięty pasek pojawia się dopiero jako
     `.fb-header-sticky` po przewinięciu (JS, patrz niżej) — na obu
     wariantach ten sam mechanizm "wjazdu po scrollu", tylko `.fb-header--default`
     bazowo różni się wyglądem (kompaktowy od razu, nie duży dwuwierszowy).
     Wcześniej `.fb-header--default` miał tu `position: sticky` (przypięty
     od razu, bez animacji wjazdu) — gubiło to efekt "wjazdu po scrollu"
     znany z home (klient 2026-08-06). */

@media (min-width: 768px) {
  .fb-header {
    padding-inline: 2.5rem;
  }
}

/* Kontener treści — 1132px (Figma: canvas 1512px "full width" minus
     2×190px paddingu), wyśrodkowany. .fb-header samo w sobie zostaje pełną
     szerokością (tło/border), max-width idzie na wiersze treści. */

.fb-header__row {
  max-width: 70.75rem;
  margin-inline: auto;
}

/* Kompaktowy pasek "sticky-reveal" (tylko home) — ukryty nad ekranem,
     wjeżdża i przypina się do góry po przewinięciu strony (klasa .is-visible
     dodawana przez src/main.js). `inert` w HTML wyłącza focus/AT, dopóki
     pasek jest niewidoczny (usuwane/dodawane tym samym skryptem). */

.fb-header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}

.fb-header-sticky.is-visible {
  transform: translateY(0);
}

.fb-header__row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Wiersz górny na home: logo do lewej na mobile (flex), wyśrodkowane od
     1024px (grid — odporniejsze niż justify-content:space-between przy
     dużej ilości elementów bocznych o zmiennej szerokości). */

.fb-header--home .fb-header__row--top {
  padding-block-start: 1.5rem;
  padding-block-end: 2rem;
  /* odstęp pod logo — 2rem, wartość klienta */
}

.fb-header--home .fb-header__row--top .fb-header__row-side--start {
  display: none;
}

.fb-header--home .fb-header__row--top .fb-header__row-side--end {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline-start: auto;
}

@media (min-width: 1024px) {
  .fb-header--home .fb-header__row--top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
  }

  .fb-header--home .fb-header__row--top .fb-header__row-side--start {
    display: block;
    grid-column: 1;
  }

  .fb-header--home .fb-header__row--top .fb-header__logo-link {
    grid-column: 2;
    justify-self: center;
  }

  .fb-header--home .fb-header__row--top .fb-header__row-side--end {
    grid-column: 3;
    justify-self: end;
    margin-inline-start: 0;
  }
}

/* Wiersz pojedynczy (podstrony + pasek sticky-reveal) — hamburger dosuwany
     do prawej krawędzi przez margin-auto. */

.fb-header__row--single .fb-header__mobile-toggle {
  margin-inline-start: auto;
}

.fb-header__actions {
  margin-inline-start: auto;
}

.fb-header--home .fb-header__row--nav {
  display: none;
  padding-block-end: 1.5rem;
}

.fb-header--default .fb-header__row--single,
  .fb-header-sticky .fb-header__row--single {
  padding-block: 1rem;
  min-height: 5rem;
  /* 80px */
}

.fb-header__logo-link {
  display: inline-flex;
  flex-shrink: 0;
}

/* Na mobile górny wiersz strony głównej pokazuje tylko logo + hamburger —
     przełącznik języka jest już w panelu mobilnym (uniknięcie zawijania/przelewania). */

.fb-header--home .fb-header__row--top .fb-lang-switcher {
  display: none;
}

@media (min-width: 1024px) {
  .fb-header--home .fb-header__row--top .fb-lang-switcher {
    display: flex;
  }
}

.fb-header__logo--lg {
  height: 1.5rem;
  /* kompaktowe na mobile, żeby zmieściło się obok hamburgera */
  width: auto;
}

@media (min-width: 1024px) {
  .fb-header__logo--lg {
    height: 2.25rem;
    /* 36px — wartość z Figmy na desktopie */
  }
}

.fb-header__logo--sm {
  height: 1.5rem;
  /* 24px */
  width: auto;
}

/* Nawigacja — ukryta na mobile, hamburger ją odsłania (patrz JS).
     .fb-nav = <nav> (kontener), .fb-nav__list = <ul> (flex row). */

.fb-nav {
  display: none;
}

.fb-nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
  /* wariant default: 32px */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Scope do .fb-header__row--nav (duży, dwuwierszowy header home) — NIE
     goły `.fb-header--home .fb-nav__list`. Odkąd pasek sticky-reveal
     renderuje się też na home z klasą `.fb-header--home` (klient
     2026-08-06, patrz uwaga w fb_render_header_block()), goły selektor
     przeciekał 160px gap z dużego headera do kompaktowego paska sticky,
     wypychając przełącznik języka/CTA poza widoczny obszar. */

.fb-header--home .fb-header__row--nav .fb-nav__list {
  gap: 10rem;
  /* wariant home: 160px */
}

/* flex-wrap: submenu (flex-basis:100% niżej) łamie się na własną linię pod
     linkiem+strzałką zamiast układać się obok nich w tym samym rzędzie —
     inaczej accordion na mobile wyglądał jak dwie kolumny (błąd klienta
     2026-08-04: "brzydko się robi na mobile"). Na desktopie (≥1024px)
     submenu i tak ma position:absolute, więc flex-basis nie ma znaczenia. */

.fb-nav__list > li {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.fb-nav__link,
  .fb-nav__list > li > a {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0a1f1e;
  text-decoration: none;
  white-space: nowrap;
}

/* Przycisk-strzałka (split button) — osobny od linku, żeby "Produkty" samo
     w sobie zostało klikalne, a rozwijanie podmenu działało przez klik/tap
     (nie hover — nie działa na dotyku). Tap target ~36px, WCAG 2.5.8. */

.fb-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-start: 0.125rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.fb-nav__toggle:hover,
  .fb-nav__toggle:focus-visible {
  background-color: rgb(10 31 30 / 0.06);
}

.fb-nav__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.fb-nav__toggle[aria-expanded='true'] .fb-nav__chevron {
  transform: rotate(180deg);
}

/* Podmenu — domyślnie (mobile/panel): normalny przepływ, wcięta lista
     (accordion). Otwieranie/zamykanie: atrybut [hidden] przełączany w JS
     na klik przycisku-strzałki (src/main.js), nie hover. */

.fb-nav__submenu {
  flex-basis: 100%;
  width: 100%;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.fb-nav__submenu a {
  display: block;
  padding: 0.5rem 0.75rem 0.5rem 1.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #454545;
  text-decoration: none;
  white-space: normal;
}

.fb-nav__submenu a:hover {
  background-color: #fafafa;
}

/* Desktop (kontekst wiersza, od 1024px — panel mobilny jest wtedy i tak
     ukryty): podmenu jako pływający dropdown, nie wcięta lista w miejscu. */

@media (min-width: 1024px) {
  .fb-header__row .fb-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin-top: 0.75rem;
    padding: 0.5rem;
    min-width: 17rem;
    /* mieści "PRZECIWOŚLNIENIOWE" bez łamania w środku słowa (klient 2026-08-07) */
    background: #ffffff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
    border-radius: 0.5rem;
  }

  .fb-header__row .fb-nav__submenu a {
    padding-inline-start: 0.75rem;
  }
}

.fb-header__actions {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .fb-header--home .fb-header__row--nav {
    display: flex;
    justify-content: center;
  }

  .fb-nav {
    display: block;
  }

  .fb-header__actions {
    display: flex;
  }

  /* Wariant kompaktowy (podstrony + pasek sticky-reveal): nawigacja
       wyśrodkowana W PRZESTRZENI MIĘDZY logo a flagami/CTA (klient
       2026-08-04), nie przyklejona zaraz za logo. flex:1 na .fb-nav
       zajmuje całą wolną przestrzeń rzędu, justify-content:center
       centruje listę linków wewnątrz niej; .fb-header__actions
       (margin-inline-start:auto) i tak ląduje na końcu rzędu. */

  .fb-header__row--single .fb-nav {
    display: flex;
    flex: 1;
    justify-content: center;
  }
}

/* Przełącznik języka */

.fb-lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* 12px */
  list-style: none;
  margin: 0;
  padding: 0;
}

.fb-lang-switcher__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
}

.fb-lang-switcher__flag {
  width: 1.6875rem;
  /* 27px */
  height: 1rem;
  /* 16px */
  border-radius: 0.25rem;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Hamburger (mobile) — 3 belki animowane do X na .is-open. */

.fb-header__mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #0a1f1e;
}

@media (min-width: 1024px) {
  .fb-header__mobile-toggle {
    display: none;
  }
}

.fb-header__burger {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 1.125rem;
}

.fb-header__burger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.fb-header__burger-line:nth-child(1) {
  top: 0;
}

.fb-header__burger-line:nth-child(2) {
  top: 0.5rem;
}

.fb-header__burger-line:nth-child(3) {
  top: 1rem;
}

[data-fb-header-toggle].is-open .fb-header__burger-line:nth-child(1) {
  top: 0.5rem;
  transform: rotate(45deg);
}

[data-fb-header-toggle].is-open .fb-header__burger-line:nth-child(2) {
  opacity: 0;
}

[data-fb-header-toggle].is-open .fb-header__burger-line:nth-child(3) {
  top: 0.5rem;
  transform: rotate(-45deg);
}

/* Panel mobilny — NAKŁADKA nad treścią poniżej (position:absolute), nie
     rozpycha layoutu. Płynne pojawianie (opacity + wysokość). */

.fb-header__mobile-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-inline: 1rem;
  padding-block: 0;
  background-color: #ffffff;
  border-top: 1px solid rgb(212 212 212 / 0.5);
  box-shadow: 0 16px 32px rgb(0 0 0 / 0.12);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0.3s, padding-block 0.3s ease;
}

@media (min-width: 768px) {
  .fb-header__mobile-panel {
    padding-inline: 2.5rem;
  }
}

.fb-header.is-open .fb-header__mobile-panel,
  .fb-header-sticky.is-open .fb-header__mobile-panel {
  max-height: 32rem;
  padding-block: 1.5rem;
  opacity: 1;
  visibility: visible;
  overflow-y: auto;
}

/* WAŻNE: scope tylko do .fb-nav WEWNĄTRZ panelu, nie do .fb-header.is-open .fb-nav
     ogólnie — to drugie dopasowywało też .fb-nav w widocznym wierszu
     (.fb-header__row--single, brak tam owijającego display:none jak w
     wariancie home), przez co po otwarciu panelu nawigacja pokazywała się
     DODATKOWO poziomo w wierszu obok hamburgera (błąd zgłoszony przez klienta
     2026-08-04: "poziomy tekst pod hamburgerem"). Panel i tak zarządza własną
     widocznością przez opacity/max-height, więc .fb-nav w nim może być
     zawsze display:block bez warunku .is-open. */

.fb-header__mobile-panel .fb-nav {
  display: block;
}

.fb-header__mobile-panel .fb-nav__list {
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.fb-header__mobile-panel .fb-header__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-inline-start: 0;
}

@media (min-width: 1024px) {
  .fb-header__mobile-panel {
    display: none !important;
  }
}

/* Pływający pasek social media — fixed do viewportu (renderowany POZA
     .fb-header, żeby backdrop-filter/position:sticky nie tworzył
     containing blocka i nie psuł pozycjonowania), przypięty do połowy
     wysokości ekranu, do prawej krawędzi. */

.fb-social {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1280px) {
  .fb-social {
    display: flex;
  }
}

.fb-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
}

.fb-social__item--accent .fb-social__link {
  background-color: #39b54a;
  color: #ffffff;
}

.fb-social__item--light .fb-social__link {
  background-color: #ffffff;
  color: #0a1f1e;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
}

.fb-hero {
  padding-top: 1.5rem;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-hero {
    padding-inline: 2.5rem;
  }
}

/* Karta zdjęcia — szerokość jak kontener treści (1132px, wyśrodkowana),
     nie zmienny margin-inline (ten drugi źle skalował się powyżej 1512px:
     odejmował stałe marginesy zamiast ograniczać do stałej szerokości). */

.fb-hero__photo-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0a1f1e;
  border-radius: 1rem;
  max-width: 70.75rem;
  margin-inline: auto;
  padding: 1.5625rem 2.5rem;
  /* 25px 40px — wartość klienta */
  min-height: 32rem;
  display: flex;
  align-items: flex-end;
}

@media (min-width: 1024px) {
  .fb-hero__photo-wrap {
    min-height: 35.625rem;
    /* 570px — wartość klienta na desktop */
  }
}

.fb-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fb-hero__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.fb-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgb(0 0 0 / 0.75) 0%,
      rgb(0 0 0 / 0.45) 55%,
      rgb(0 0 0 / 0.05) 100%
    );
}

/* Treść zawsze do lewej — bez max-width+margin:auto (to centrowałoby blok). */

.fb-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 40rem;
  margin-inline-end: auto;
}

.fb-hero__title {
  font-size: 3rem;
  /* klient 2026-08-06 */
  line-height: 1.05;
  font-weight: 800;
  color: #ffffff;
}

@media (min-width: 768px) {
  .fb-hero__title {
    font-size: 5.5rem;
  }
}

.fb-hero__title-main {
  display: block;
  line-height: 0.8;
}

.fb-hero__title-accent {
  display: block;
  font-weight: 300;
  font-style: italic;
  color: #39b54a;
  /* #39b54a — dokładnie z Figmy (var(--Green, #39B54A)) */
  line-height: 0.8;
}

.fb-hero__description {
  margin-top: 1.5rem;
  /* 24px na mobile (H1 mniejsze) — wartość klienta */
  max-width: 32rem;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.75);
}

@media (min-width: 768px) {
  .fb-hero__description {
    margin-top: 2.5rem;
    /* 40px od momentu, gdy H1 rośnie do display-2xl */
  }
}

.fb-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  /* 16px — wartość klienta */
}

/* Pasek statystyk — POD zdjęciem, normalny przepływ (bez nachodzenia),
     szerokość jak kontener treści (1132px, wyśrodkowana; .fb-hero już ma
     padding-inline dla marginesu na wąskich ekranach). */

.fb-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 70.75rem;
  margin-inline: auto;
  margin-top: 1.5rem;
  background-color: #fafafa;
  border-radius: 1rem;
  border: 1px solid #d4d4d4;
}

@media (min-width: 1024px) {
  .fb-hero__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fb-hero-stat {
  padding: 2rem 1rem;
  text-align: center;
}

/* Kreska dzieląca kolumny — tylko od 1024px (klient: bez kreski na mobile). */

@media (min-width: 1024px) {
  .fb-hero-stat {
    border-inline-end: 1px solid #d4d4d4;
  }

  .fb-hero-stat:last-child {
    border-inline-end: none;
  }
}

.fb-hero-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: 0.75rem;
  background-color: rgb(57 181 74 / 0.05);
  /* Green-5 — wartość klienta */
}

/* Fallback DOMYŚLNIE schowany przez CSS (nie JS) — wcześniejsza wersja
     chowała go dopiero po starcie animacji (event 'DOMLoaded' z lottie-web),
     co dawało widoczny błysk fallbacku tuż po wczytaniu strony, zanim JS
     zdążył zareagować (fetch skryptu + DOMContentLoaded + IntersectionObserver
     + init lottie — realny, zauważalny czas; klient 2026-08-07: "przez
     chwilę miga fallback"). Teraz: zero wyścigu, bo widoczność nie zależy
     od czasu wykonania JS. Wyjątki (fallback POWINIEN być widoczny) niżej:
     `prefers-reduced-motion` (JS świadomie nie odpala animacji) i
     `<noscript>` w PHP (JS całkiem zablokowany/wyłączony) — jedyne dwa
     przypadki, gdy odtwarzacz Lottie faktycznie nigdy się nie pojawi. */

.fb-hero-stat__icon-fallback {
  display: none;
}

/* Stały rozmiar 48px (3rem = cały fb-hero-stat__icon, bez zapasu na
     tło-plakietkę) — WIĘKSZY niż fallback (24px), żeby animowana ikona
     nie wyglądała mniejsza/mniej ostra niż statyczna (klient 2026-08-07).
     JEDEN wspólny rozmiar dla wszystkich 4 ikon (nie różne współczynniki
     per ikona jak w poprzedniej wersji) — prościej, klient: "stałą
     wysokość i szerokość... na 48px".

     CELOWO `width`/`height` na WRAPPERZE, NIE `transform: scale()` na
     `svg` (wcześniejsza wersja) — SVG z lottie-web ma doklejony własny
     inline `style="...transform: translate3d(0,0,0)..."` (przyspieszenie
     GPU); przeglądarka przy transformowanej, GPU-warstwowej treści może
     ją zrasteryzować RAZ przy oryginalnym rozmiarze i dopiero tę bitmapę
     skalować — stąd realne ryzyko rozmycia przy powiększaniu przez
     transform (klient 2026-08-07: "będzie minimalnie rozmazane").
     Zmiana `width`/`height` samego kontenera nie ma tego problemu — SVG
     ma inline `width:100%;height:100%`, więc dopasowuje się do nowego
     rozmiaru i renderuje wektorowo od nowa, bez pośredniej bitmapy. */

.fb-hero-stat__icon-lottie {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
}

/* 1. i 2. statystyka (verified/document) — mniejsza ikona niż domyślne
     48px (klient 2026-08-07: "1 i 2 trzeba zrobić na 2.5rem"). */

.fb-hero-stat:nth-child(1) .fb-hero-stat__icon-lottie,
  .fb-hero-stat:nth-child(2) .fb-hero-stat__icon-lottie {
  width: 2.5rem;
  height: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .fb-hero-stat__icon-fallback {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* H6 z Figmy: Montserrat 700/32px. */

.fb-hero-stat__value {
  font-size: 2rem;
  font-weight: 700;
  color: #39b54a;
}

/* H8 z Figmy: Montserrat 600/12px, letter-spacing 3px. */

.fb-hero-stat__label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: #454545;
}

.fb-about {
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-about {
    padding-inline: 2.5rem;
  }
}

.fb-about__row {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 70.75rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .fb-about__row {
    flex-direction: row;
    align-items: center;
  }
}

.fb-about__media {
  flex-shrink: 0;
  border-radius: 1rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .fb-about__media {
    width: 28.3125rem;
    /* 453px — szerokość zdjęcia z Figmy */
  }
}

.fb-about__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 453 / 549;
  -o-object-fit: cover;
  object-fit: cover;
}

.fb-about__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* mobile — klient 2026-08-06 */
  min-width: 0;
}

@media (min-width: 1024px) {
  .fb-about__content {
    gap: 2.5rem;
    /* 40px — odstęp nagłówek/treść z Figmy */
  }
}

.fb-about .fb-heading-display-xl {
  max-width: 24.375rem;
  /* 390px — wartość klienta */
}

@media (min-width: 1024px) {
  .fb-about__content {
    flex: 1;
  }
}

.fb-about__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* 24px — odstęp opis/checklist z Figmy */
}

.fb-about__description {
  max-width: 42rem;
  font-size: 0.875rem;
  color: #454545;
}

.fb-certs {
  position: relative;
  overflow: hidden;
  background-color: #0a1f1e;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-certs {
    padding-inline: 2.5rem;
  }
}

.fb-certs__glow {
  position: absolute;
  top: -10.5rem;
  /* -168px — poświata częściowo poza sekcją, jak w Figmie */
  left: -15rem;
  /* -240px */
  width: 30rem;
  /* 480px */
  height: 30rem;
  background: #39b54a;
  opacity: 0.2;
  border-radius: 9999px;
  filter: blur(7.5rem);
  /* 120px — połowa promienia blur z Figmy (240px na warstwie), skompensowana rozmiarem elementu */
  pointer-events: none;
}

.fb-certs__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 70.75rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .fb-certs__row {
    flex-direction: row;
    align-items: center;
  }
}

.fb-certs__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* mobile — klient 2026-08-06 */
  min-width: 0;
}

@media (min-width: 1024px) {
  .fb-certs__content {
    gap: 2rem;
    flex: 1;
  }
}

.fb-certs__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* eyebrow→nagłówek, jednolite wszędzie — klient 2026-08-06 */
}

.fb-certs__title {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
}

.fb-certs__title-main {
  display: block;
}

.fb-certs__title-accent {
  display: block;
  font-weight: 400;
  font-style: italic;
  color: #39b54a;
}

.fb-certs__description {
  max-width: 32rem;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.7);
}

/* Mobile (Figma "UI Mobile"): pigułki NIE na pełną szerokość — flex-wrap,
     każda dopasowana do własnej treści, układają się po dwie w rzędzie,
     jeśli się zmieszczą (nie sztywna siatka). Od 640px: prawdziwa siatka
     (Figma "UI Desktop", layoutMode GRID, równe kolumny). */

.fb-certs__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  /* 12px z Figmy */
}

@media (min-width: 640px) {
  .fb-certs__grid {
    display: grid;
    /* minmax(0, 1fr), NIE goły 1fr — bez tego kolumna nie kurczy się
         poniżej min-content pigułki (WPZ WIDE-PN-EN 1090 itp.), siatka
         napiera na resztę wiersza i wypycha globus poza overflow:hidden
         sekcji (realny błąd znaleziony przy tej sekcji). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .fb-certs__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fb-certs__badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  /* mobile: szerokość dopasowana do treści (patrz .fb-certs__grid) */
  padding: 0.75rem 1.25rem 0.75rem 0.75rem;
  /* 12px 20px 12px 12px z Figmy */
  border-radius: 5rem;
  /* 80px — pigułka */
  border: 1px solid rgb(57 181 74 / 0.2);
  /* Green-20 */
  background-color: rgb(255 255 255 / 0.05);
  /* White-5 */
}

@media (min-width: 640px) {
  .fb-certs__badge {
    flex: initial;
    /* od 640px badge to komórka gridu, nie flex item */
  }
}

.fb-certs__badge-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  /* 36px */
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #39b54a;
}

/* Ikona wgrywana w panelu (dowolny plik, nie tylko nasze stałe SVG) —
     wymuszony jednolity rozmiar, żeby duże/małe pliki nie rozwalały odznaki. */

.fb-certs__badge-icon-img {
  width: 1rem;
  /* 16px, jak oryginalne ikony z Figmy */
  height: 1rem;
  -o-object-fit: contain;
  object-fit: contain;
}

.fb-certs__badge-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fb-certs__badge-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}

.fb-certs__badge-desc {
  font-size: 0.75rem;
  color: rgb(212 212 212 / 0.5);
  /* Gray-50 */
}

.fb-certs__globe {
  order: -1;
  /* mobile: globus przed treścią (wartość klienta) */
  flex-shrink: 0;
  max-width: 20rem;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .fb-certs__globe {
    order: 0;
    /* desktop: z powrotem za treścią, jak w Figmie */
    width: 28.3125rem;
    /* 453px z Figmy */
    max-width: none;
    margin-inline: 0;
  }
}

.fb-certs__globe-img {
  display: block;
  width: 100%;
  height: auto;
}

.fb-offer {
  background-color: #fafafa;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-offer {
    padding-inline: 2.5rem;
  }
}

.fb-offer__row {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* 40px z Figmy */
  max-width: 70.75rem;
  margin-inline: auto;
}

.fb-offer__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* eyebrow→nagłówek, jednolite wszędzie — klient 2026-08-06 */
  max-width: 30.3125rem;
  /* 485px — wartość klienta */
}

.fb-offer__title {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
  color: #0a1f1e;
}

/* Bez display:block — main i accent płyną jako zwykły tekst (accent
     wyróżniony kursywą/kolorem), więc mogą wylądować w tej samej linii,
     jeśli starczy miejsca, zamiast zawsze łamać się osobno (wartość
     klienta 2026-08-04). */

.fb-offer__title-accent {
  font-weight: 400;
  font-style: italic;
  color: #39b54a;
}

.fb-offer__photos {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* 32px z Figmy */
}

/* Od desktopu zdjęcia wchodzą w te same tory co siatka produktów pod
     spodem (.fb-tile-grid: 3 kolumny, gap 2rem) — szeroka fotografia
     zajmuje 2 kolumny, wąska 1, żeby krawędzie zdjęć i kart się pokrywały
     (wartość klienta 2026-08-04). */

@media (min-width: 1024px) {
  .fb-offer__photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.fb-offer__photo {
  border-radius: 1rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .fb-offer__photo--wide {
    grid-column: span 2;
  }

  .fb-offer__photo--narrow {
    grid-column: span 1;
  }
}

.fb-offer__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .fb-offer__photo-img {
    aspect-ratio: auto;
    height: 20rem;
    /* 320px z Figmy */
  }
}

.fb-pillars {
  position: relative;
  overflow: hidden;
  background-color: #0a1f1e;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-pillars {
    padding-inline: 2.5rem;
  }
}

.fb-pillars__glow {
  position: absolute;
  top: 3rem;
  /* 48px z Figmy */
  right: -15rem;
  /* -240px — poświata częściowo poza sekcją, jak w Figmie */
  width: 30rem;
  /* 480px */
  height: 30rem;
  background: #39b54a;
  opacity: 0.2;
  border-radius: 9999px;
  filter: blur(7.5rem);
  /* 120px — patrz uwaga w certifications.css o kompensacji promienia blur z Figmy */
  pointer-events: none;
}

.fb-pillars__row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* 40px z Figmy */
  max-width: 70.75rem;
  margin-inline: auto;
}

.fb-pillars__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* eyebrow→nagłówek, jednolite wszędzie — klient 2026-08-06 */
  max-width: 39.25rem;
  /* 628px z Figmy */
}

.fb-pillars__title-heading {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
}

/* Bez display:block — main i accent płyną jako zwykły tekst (accent
     wyróżniony kursywą/kolorem), więc mogą wylądować w tej samej linii,
     jak w Figmie i jak ustalono przy sekcji oferty (klient 2026-08-04). */

.fb-pillars__title-accent {
  font-weight: 400;
  font-style: italic;
  color: #39b54a;
}

.fb-pillars__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  /* 32px z Figmy */
}

@media (min-width: 640px) {
  .fb-pillars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fb-pillars__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fb-pillars__card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* 24px z Figmy */
  padding: 1.5rem;
  /* 24px z Figmy */
  border-radius: 1rem;
  background-color: rgb(255 255 255 / 0.05);
  /* White-5 */
  border: 1px solid rgb(57 181 74 / 0.2);
  /* Green-20 */
}

.fb-pillars__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fb-pillars__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  /* 48px */
  height: 3rem;
  border-radius: 0.5rem;
  background-color: #39b54a;
}

.fb-pillars__icon-img {
  width: 1.5rem;
  /* 24px, jak w Figmie */
  height: 1.5rem;
  -o-object-fit: contain;
  object-fit: contain;
}

.fb-pillars__number {
  font-size: 3rem;
  /* 48px/800, jak nagłówek — bardzo blade tło dekoracyjne */
  font-weight: 800;
  color: rgb(255 255 255 / 0.1);
  /* White-10 */
}

.fb-pillars__card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* 16px z Figmy */
}

.fb-pillars__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}

.fb-pillars__description {
  font-size: 0.875rem;
  color: #d4d4d4;
}

/* "Breakout grid" — 3 kolumny (lewy margines / treść max 1132px / prawy
     margines). .fb-realizations__row siedzi w środkowej kolumnie (2),
     .fb-realizations__track rozciąga się przez WSZYSTKIE trzy kolumny
     (1/4) — jego własny box (czyli granica przycinania scrolla) sięga
     PRAWDZIWEJ krawędzi ekranu po obu stronach, nie tylko po prawej.
     Pierwsza karta i tak wygląda tak samo jak wcześniej, bo track ma
     spacer dopasowany do szerokości lewego marginesu (patrz
     .fb-realizations__track-spacer niżej i syncEdgeSpacing() w main.js) —
     ale kiedy karta przewija się w lewo, znika za PRAWDZIWĄ krawędzią
     ekranu, a nie za krawędzią wewnętrznego kontenera (klient 2026-08-05:
     "slajdy powinny być chowane przez krawędź ekranu, a nie przez lewą
     część wewnętrznego kontenera"). Wcześniej (grid-column: 2/4) granica
     przycinania po lewej pokrywała się z krawędzią kontenera 1132px,
     co dawało widoczne "urwanie" karty w złym miejscu przy scrollu. */

.fb-realizations {
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) min(70.75rem, 100% - 2rem) minmax(1rem, 1fr);
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  overflow: hidden;
}

@media (min-width: 768px) {
  .fb-realizations {
    grid-template-columns: minmax(2.5rem, 1fr) min(70.75rem, 100% - 5rem) minmax(2.5rem, 1fr);
  }
}

.fb-realizations__row {
  grid-column: 2;
  margin-bottom: 2.5rem;
  /* 40px z Figmy — odstęp do karuzeli poniżej */
}

.fb-realizations__heading-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .fb-realizations__heading-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.fb-realizations__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* eyebrow→nagłówek, jednolite wszędzie — klient 2026-08-06 */
}

.fb-realizations__title {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
  max-width: 39.25rem;
  /* 628px z Figmy */
}

.fb-realizations__title-main {
  display: block;
  color: #0a1f1e;
}

/* Opcjonalna, domyślnie pusta — bez titleAccent nagłówek zostaje
     jednokolorowy jak dotąd (klient 2026-08-04, karuzela na stronie
     głównej); ustawiana per wystąpienie, np. "Przykłady wdrożeń" na
     single `produkt` (klient 2026-08-06). */

.fb-realizations__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-realizations__nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.fb-realizations__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  /* 48px */
  height: 3rem;
  border-radius: 0.625rem;
  /* 10px */
  border: none;
  cursor: pointer;
}

.fb-realizations__nav-btn--prev {
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
}

.fb-realizations__nav-btn--next {
  background-color: #39b54a;
}

.fb-realizations__nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Karuzela — scrollowalny flex, bez biblioteki JS, BEZ scroll-snap
     (usunięty 2026-08-06, patrz niżej). Pasek przewijania ukryty
     (przewija się przyciskami, przeciąganiem myszką lub natywnym
     scrollem/swipe'em — pasek psułby czysty wygląd z Figmy). grid-column:
     1/4 (patrz .fb-realizations wyżej) — box tracka sięga prawdziwej
     krawędzi ekranu po OBU stronach, więc karty W TRAKCIE scrolla/dragu
     wizualnie "wyzierają" poza kontener 1132px aż do prawdziwej krawędzi.

     Pozycje SPOCZYNKOWE (gdzie karta się zatrzymuje) liczy WYŁĄCZNIE JS —
     jedna reguła dla wszystkich kart poza ostatnią: lewa krawędź karty =
     lewa krawędź kontenera 1132px (`targetForIndex()` w main.js),
     stosowana identycznie po kliknięciu strzałki i po puszczeniu
     przeciągnięcia myszką. padding-inline-start/-end (liczone dynamicznie
     w JS, `syncEdgeSpacing()`) tylko wizualnie dosuwają pierwszą/ostatnią
     kartę do linii kontenera — zwykły padding wystarcza, bez potrzeby
     osobnego elementu-spacera.

     `scroll-snap-type` był tu wcześniej (`x proximity`), ale po
     uproszczeniu modelu spoczynku (JEDNA reguła zamiast trzech różnych
     trybów — pierwsza/środkowe swobodnie do prawdziwej krawędzi/ostatnia,
     klient 2026-08-06: środkowe karty bez marginesu źle wyglądały na
     mobile, a przewidywalne dojeżdżanie po przeciągnięciu wymagało pełnej
     kontroli JS) okazał się szkodliwy: docelowe pozycje JS (przesunięte o
     szerokość marginesu względem naturalnego DOM-owego startu karty) NIE
     są prawidłowymi punktami scroll-snap, więc przeglądarka po dojechaniu
     tam i tak "poprawiała" scroll do najbliższego legalnego punktu snap
     (naturalny start karty, czyli PRAWDZIWA krawędź ekranu) — cofając
     naszą pracę. Usunięcie scroll-snap-type oddaje pełną kontrolę JS-owi:
     przyciski i drag zawsze explicite dojeżdżają (`track.scrollTo`) do
     obliczonej pozycji, bez ryzyka nadpisania przez przeglądarkę. Koszt:
     surowy scroll/swipe (bez przycisku/dragu) nie "przyciąga" się już do
     karty — uznane za akceptowalne uproszczenie. */

.fb-realizations__track {
  grid-column: 1 / 4;
  display: flex;
  gap: 1.5rem;
  /* 24px na mobile — wartość klienta */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-inline-start: 1rem;
  /* fallback; nadpisywane dynamicznie przez JS */
  padding-inline-end: 1rem;
  /* fallback; nadpisywane dynamicznie przez JS */
  cursor: grab;
  /* przeciąganie myszką na desktopie, klient 2026-08-06 */
}

/* .is-dragging dokładane/usuwane w JS (initRealizationsCarousel(), obsługa
     pointerdown/up na myszy) — user-select:none, żeby drag nie zaznaczał
     tekstu kart pod kursorem. */

.fb-realizations__track.is-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .fb-realizations__track {
    gap: 2rem;
    /* 32px z Figmy */
  }
}

.fb-realizations__track::-webkit-scrollbar {
  display: none;
}

/* Widok kafelka współdzielony z archiwum "Realizacje"
     (`flora-bis/realizations-grid`, `fb_realizations_render_card()` w
     inc/render-helpers.php) — tu tylko wygląd NIEZALEŻNY od kontekstu
     (zdjęcie/gradient/pigułka/tekst, proporcje karty). Stała szerokość +
     cursor:grab (karuzela pozioma) scope'owane NIŻEJ do
     `.fb-realizations__track .fb-realizations__card`, żeby nie wyciekały
     do siatki archiwum, gdzie karta ma wypełniać kolumnę grida (klient
     2026-08-06). */

.fb-realizations__card {
  position: relative;
  aspect-ratio: 356 / 508;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 16px (Figma Dev Mode MCP, node 270:984, 2026-08-06) — było 1.5rem/24px,
       ustalone wcześniej bez dostępu do dokładnych danych Figmy. */
  padding: 1rem;
}

.fb-realizations__track .fb-realizations__card {
  flex: 0 0 auto;
  width: 17rem;
  /* 272px na mobile — więcej niż jedna karta widoczna na raz */
  /* <a> ma własny UA-owy cursor:pointer, który NADPISUJE odziedziczony
       cursor:grab z .fb-realizations__track (to nie jest "inherit", więc
       dziedziczenie tu nie działa) — trzeba ustawić jawnie na karcie,
       inaczej łapanie za slajd wygląda jak zwykły link, nie jak
       przeciąganie (klient 2026-08-06). */
  cursor: grab;
}

.fb-realizations__track.is-dragging .fb-realizations__card {
  cursor: grabbing;
}

@media (min-width: 640px) {
  .fb-realizations__track .fb-realizations__card {
    width: 22.25rem;
    /* 356px z Figmy */
  }
}

.fb-realizations__card-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  /* Bez tego przeglądarka inicjuje natywny drag obrazka (ghost) zamiast
       pozwolić naszemu JS przewinąć track — patrz też draggable="false"
       w PHP (fb_realizations_render_card()), to jest dodatkowe
       zabezpieczenie dla Safari, gdzie sam atrybut czasem nie wystarcza. */
  -webkit-user-drag: none;
  user-drag: none;
}

.fb-realizations__card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      to top,
      rgb(0 0 0 / 0.8) 0%,
      rgb(0 0 0 / 0.2) 50%,
      rgb(0 0 0 / 0) 100%
    );
}

.fb-realizations__pill {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background-color: #39b54a;
  color: #ffffff;
  font-size: 0.6875rem;
  /* 11px z Figmy */
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.fb-realizations__card-info {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fb-realizations__location {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #d4d4d4;
}

.fb-realizations__card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}

.fb-testimonials {
  background-color: #fafafa;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-testimonials {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — patrz uwaga w blocks-catalog.md o ujednoliceniu wyrównania z headerem (klient 2026-08-06) */
  }
}

.fb-testimonials__row {
  max-width: 70.75rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* 40px z Figmy */
}

/* Nagłówek renderowany przez fb_section_heading() (współdzielony
     helper) — wyśrodkowanie i ograniczenie szerokości tytułu specyficzne
     dla TEJ sekcji dopisujemy tu, nie w globalnym komponencie. */

.fb-testimonials .fb-section-heading {
  text-align: center;
}

.fb-testimonials .fb-eyebrow {
  text-align: center;
}

.fb-testimonials .fb-heading-display-xl {
  max-width: 30.5rem;
  /* 487px z Figmy */
  margin-inline: auto;
}

.fb-testimonials__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .fb-testimonials__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    /* 32px z Figmy */
  }
}

.fb-testimonials__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* 16px z Figmy */
  background-color: #ffffff;
  border: 1px solid rgb(212 212 212 / 0.5);
  /* fb-gray.DEFAULT @ 50% */
  border-radius: 1rem;
  padding: 1.5rem;
}

.fb-testimonials__quote-icon {
  align-self: center;
  /* klient 2026-08-06: ikona cudzysłowu na środku karty */
}

.fb-testimonials__quote {
  font-size: 0.875rem;
  color: #0a1f1e;
}

.fb-testimonials__attribution {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(212 212 212 / 0.5);
}

.fb-testimonials__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0a1f1e;
}

.fb-testimonials__role {
  font-size: 0.75rem;
  color: #454545;
}

.fb-media-banner__img,
  .fb-media-banner__video {
  display: block;
  width: 100%;
  height: 20rem;
  /* 320px z Figmy */
  -o-object-fit: cover;
  object-fit: cover;
}

/* Padding-inline na OUTER sekcji (.fb-contact-cta), NIE na __row (jak w
     pozostałych blokach, patrz uwaga w blocks-catalog.md) — __row ma
     max-width:1132px + margin-inline:auto, więc gdy przeglądarka jest
     szersza niż 1132px+padding, auto-margin i tak wchłania nadmiar i karta
     wychodzi dokładnie 1132px NIEZALEŻNIE od paddingu outera (potrzebne dla
     proporcji kolumn 492:544, patrz __content/__form-card niżej). Wcześniej
     padding był na __row i zerowany od 768px "żeby karta miała dokładnie
     1132px" — ale to samo osiąga się bez zerowania, a przy 768–1131px
     (viewport węższy niż 1132, max-width jeszcze NIE ogranicza) zerowy
     padding zostawiał treść dotykającą krawędzi ekranu (przegląd codex exec
     2026-08-06). */

.fb-contact-cta {
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-contact-cta {
    padding-inline: 2.5rem;
  }
}

.fb-contact-cta__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
}

.fb-contact-cta__card {
  position: relative;
  overflow: hidden;
  background-color: #0a1f1e;
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Poświata w tle, ten sam wzorzec co .fb-pillars__glow (blur, zamiast
     eksportu PNG — patrz uwaga w certifications.css) — brakowało jej w
     pierwszej wersji bloku (klient 2026-08-06). Górny lewy róg karty,
     częściowo poza jej granicami, jak w Figmie (node 182:878). */

.fb-contact-cta__glow {
  position: absolute;
  top: -6rem;
  left: -6rem;
  width: 20rem;
  /* 320px z Figmy */
  height: 20rem;
  background: #39b54a;
  opacity: 0.2;
  border-radius: 9999px;
  filter: blur(7.5rem);
  /* 120px z Figmy */
  pointer-events: none;
}

@media (min-width: 768px) {
  .fb-contact-cta__card {
    padding: 2rem;
    /* CSS Grid, NIE flex — z flex (flex: 492 1 0% / 544 1 0%,
         flex-basis:0%) kolumny uparcie renderowały się w innej
         proporcji niż deklarowana (zmierzone ~461:574 zamiast 492:544,
         nagłówek się łamał), mimo min-width:0 na każdym możliwym
         poziomie (kolumnie i samych polach formularza) — nie znaleziono
         przyczyny tego konkretnego zachowania flexboksa. Grid z
         `minmax(0, Nfr)` (kanoniczny sposób na wymuszenie proporcji fr
         bez wpływu min-content dzieci) dał poprawny, stabilny wynik od
         razu (klient 2026-08-06). */
    display: grid;
    grid-template-columns: minmax(0, 492fr) minmax(0, 544fr);
    align-items: stretch;
  }
}

.fb-contact-cta__content {
  position: relative;
  /* nad .fb-contact-cta__glow (absolute) */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .fb-contact-cta__content {
    justify-content: center;
  }
}

/* Osobny wrapper dla eyebrow+nagłówek (NIE cały .fb-contact-cta__content,
     bo ten ma jeszcze opis + linki kontaktowe z INNYM odstępem 1.5rem) —
     eyebrow→nagłówek ma być wszędzie 0.75rem, jednolicie (klient
     2026-08-06). */

.fb-contact-cta__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fb-contact-cta__title {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
}

.fb-contact-cta__title-main {
  display: block;
  color: #ffffff;
}

.fb-contact-cta__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
  /* Montserrat Italic z Figmy, NIE dziedziczone 800 */
}

.fb-contact-cta__description {
  font-size: 0.875rem;
  color: #d4d4d4;
  max-width: 28rem;
}

.fb-contact-cta__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* 12px — klient 2026-08-06 */
}

.fb-contact-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.fb-contact-cta__link-text {
  display: flex;
  flex-direction: column;
}

.fb-contact-cta__link-label {
  font-size: 0.75rem;
  color: rgb(212 212 212 / 0.5);
  /* fb-gray.DEFAULT @ 50% — klient 2026-08-06 */
}

.fb-contact-cta__link-value {
  /* H7 (text-lg, jak .fb-contact-cta__form-title), tylko biały —
       klient 2026-08-06. */
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
}

.fb-contact-cta__form-card {
  position: relative;
  /* nad .fb-contact-cta__glow (absolute) */
  z-index: 1;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .fb-contact-cta__form-card {
    padding: 2rem;
  }
}

.fb-contact-cta__form-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0a1f1e;
}

.fb-contact-cta__form-card .fb-contact-cta__form-subtitle {
  /* Selektor musi być bardziej specyficzny niż `.fb-contact-cta__form-card p`
       (zerowanie marginesu pól CF7 niżej) — inaczej margin-bottom przegrywa
       mimo kolejności w pliku, bo tamten selektor ma wyższą specyficzność
       (klasa+tag) niż sam `.fb-contact-cta__form-subtitle` (klient 2026-08-06). */
  font-size: 0.875rem;
  color: #454545;
  margin-bottom: 1.5rem;
}

.fb-contact-cta__form-placeholder {
  font-size: 0.875rem;
  color: #454545;
  background-color: #fafafa;
  border-radius: 0.5rem;
  padding: 1rem;
}

/* Contact Form 7 — nadpisanie natywnych klas .wpcf7-*, żeby dopasować
     pola do designu (jasnoszare tło, radius 8, bez obramowania) bez
     dotykania markupu wtyczki. */

.fb-contact-cta__form-card .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 1rem;
}

.fb-contact-cta__form-card p {
  margin: 0;
}

.fb-contact-cta__form-card input.wpcf7-form-control,
  .fb-contact-cta__form-card textarea.wpcf7-form-control {
  width: 100%;
  background-color: #fafafa;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  color: #0a1f1e;
}

.fb-contact-cta__form-card textarea.wpcf7-form-control {
  min-height: 8rem;
  resize: vertical;
}

.fb-contact-cta__form-card input.wpcf7-form-control::-moz-placeholder, .fb-contact-cta__form-card textarea.wpcf7-form-control::-moz-placeholder {
  color: #454545;
}

.fb-contact-cta__form-card input.wpcf7-form-control::placeholder,
  .fb-contact-cta__form-card textarea.wpcf7-form-control::placeholder {
  color: #454545;
}

.fb-contact-cta__form-card .wpcf7-form-control.wpcf7-acceptance {
  display: block;
}

.fb-contact-cta__form-card .wpcf7-list-item {
  margin: 0;
}

.fb-contact-cta__form-card .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.75rem;
  color: #454545;
  cursor: pointer;
}

/* Customowy checkbox (nie accent-color) — projekt ma już zdefiniowany
     "status zaznaczenia": obrys 16x16 (border zielony, radius ~4px) +
     wypełniony zielony kwadrat 8x8 (radius 2px) wyśrodkowany w środku,
     widoczny tylko gdy zaznaczone (gotowe SVG z Figmy, ta sama karuzela
     designu co reszta checkboxów w projekcie — klient 2026-08-06).
     appearance:none zdejmuje natywny wygląd przeglądarki, ::before
     rysuje wewnętrzny kwadrat tylko dla :checked. */

.fb-contact-cta__form-card .wpcf7-list-item input[type='checkbox'] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  flex-shrink: 0;
  border: 1px solid #39b54a;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
}

.fb-contact-cta__form-card .wpcf7-list-item input[type='checkbox']:checked::before {
  content: '';
  position: absolute;
  inset: 0.25rem;
  /* 4px — wraz z obwódką 16x16 daje wypełniony kwadrat 8x8, jak w Figmie */
  background-color: #39b54a;
  border-radius: 0.125rem;
}

.fb-contact-cta__form-card input.wpcf7-submit {
  width: 100%;
  background-color: #39b54a;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
}

.fb-contact-cta__form-card input.wpcf7-submit:hover {
  background-color: #4dcf5f;
}

.fb-contact-cta__form-card .wpcf7-spinner {
  display: none;
}

.fb-contact-cta__form-card .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
}

.fb-contact-cta__form-card form.sent .wpcf7-response-output {
  background-color: rgb(57 181 74 / 0.1);
  color: #0a1f1e;
  border: 1px solid #39b54a;
}

.fb-contact-cta__form-card form.invalid .wpcf7-response-output,
  .fb-contact-cta__form-card form.unaccepted .wpcf7-response-output,
  .fb-contact-cta__form-card form.failed .wpcf7-response-output,
  .fb-contact-cta__form-card form.aborted .wpcf7-response-output,
  .fb-contact-cta__form-card form.spam .wpcf7-response-output {
  background-color: rgb(220 38 38 / 0.1);
  color: rgb(153 27 27);
  border: 1px solid rgb(220 38 38 / 0.4);
}

.fb-contact-cta__form-card .wpcf7-not-valid-tip {
  display: block;
  font-size: 0.75rem;
  color: rgb(220 38 38);
  margin-top: 0.25rem;
}

.fb-footer {
  background-color: #0a1f1e;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-footer {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — patrz uwaga w blocks-catalog.md o ujednoliceniu wyrównania z headerem (klient 2026-08-06) */
  }
}

.fb-footer__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* 40px z Figmy */
}

.fb-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

@media (min-width: 640px) {
  .fb-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fb-footer__top {
    /* NIE grid z minmax(0,Nfr) (jak w contact-cta) — tam kolumny mają
         wypełnić całą szerokość 50/50 kontenera, więc fr-proporcje pasują.
         Tu w Figmie kolumny mają szerokość HUG (naturalną, do treści),
         a odstępy między nimi to `justify-content: space-between`, nie
         stały gap — grid z fr rozciągał kolumny proporcjonalnie do 100%
         szerokości, przez co odstępy między kolumnami wychodziły inne niż
         w Figmie (klient 2026-08-06: "sprawdź odstępy od kolumn"). Flex
         bez zadanej szerokości kolumn zostawia je przy naturalnej treści. */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

.fb-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* 32px z Figmy */
}

.fb-footer__logo-link {
  display: inline-block;
  align-self: flex-start;
}

.fb-footer__logo {
  display: block;
  height: 2.25rem;
  /* 36px z Figmy */
  width: auto;
}

.fb-footer__description {
  font-size: 0.75rem;
  line-height: 1.375;
  color: #d4d4d4;
  max-width: 16.25rem;
  /* 259px z Figmy — szerokość kolumny marki */
}

.fb-footer__social-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* klient 2026-08-06 */
  gap: 0.875rem;
  flex-wrap: wrap;
}

/* Wrapper wokół ikon `.fb-social__item`/`.fb-social__link` (reużyte z
     header.css) — celowo NIE `.fb-social`, bo ta klasa ma `position: fixed`
     (pływający pasek headera). Tu ikony mają zwykły przepływ w wierszu. */

.fb-footer__social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* 8px z Figmy */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tło ikony — subtelne, prawie niewidoczne na ciemnym tle ("ghost icon"),
     ten sam wzorzec co ikony telefonu/koperty w contact-cta (tam 10%
     opacity, tu 5% — celowo różne wartości z Figmy dla obu miejsc, klient
     2026-08-06). NIE `.fb-social__item--light` (header.css) — ta ma pełną
     biel, zbyt mocną na tym tle. */

.fb-footer__social-link {
  background-color: rgb(255 255 255 / 0.05);
}

.fb-footer__badge {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.fb-footer__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* 24px z Figmy */
}

.fb-footer__col-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1875rem;
  /* 3px, jak .fb-eyebrow */
  text-transform: uppercase;
  color: #ffffff;
}

.fb-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* 12px z Figmy */
  list-style: none;
  margin: 0;
  padding: 0;
}

.fb-footer__links li {
  font-size: 0.75rem;
  line-height: 1.375;
  color: #d4d4d4;
}

.fb-footer__links a {
  color: inherit;
  text-decoration: none;
}

.fb-footer__links a:hover,
  .fb-footer__links a:focus-visible {
  color: #ffffff;
}

/* Telefon/e-mail w kolumnie Kontakt — zielone, jak w Figmie (klient
     2026-08-06), w odróżnieniu od zwykłych (szarych) linków nawigacji/
     produktów powyżej. Selektor musi być bardziej specyficzny niż
     `.fb-footer__links a` (2 klasy + tag, nie tylko 1 klasa) — inaczej
     przegrywa mimo kolejności w pliku (ten sam problem specyficzności co
     `.fb-contact-cta__form-subtitle`, patrz contact-cta.css). `:hover`
     celowo pominięty — kolor już akcentowy. */

.fb-footer__links a.fb-footer__links-accent {
  color: #39b54a;
}

.fb-footer__col--products {
  /* Na mobile/tablet dużo więcej miejsca niż na desktopie (kolumna nie
       stoi obok trzech innych) — 250px z Figmy niepotrzebnie ściskało tu
       tekst (klient 2026-08-06: "na mobile można to rozciągnąć"). */
  max-width: 100%;
}

@media (min-width: 1024px) {
  .fb-footer__col--products {
    /* Szerokość kolumny grupy "Produkty" (2 podkolumny + odstęp) z Figmy —
         bez niej `.fb-footer__products-columns` poniżej (grid 1fr 1fr)
         rozciągałby się do szerokości najdłuższej nazwy produktu zamiast
         równych, czytelnych kolumn (klient 2026-08-06: "ułóż ładnie menu
         Produkty, aby były dwie kolumny"). */
    max-width: 15.625rem;
    /* 250px z Figmy (105+105+40 gap) */
  }
}

.fb-footer__products-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  /* 40px z Figmy */
}

.fb-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .fb-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.fb-footer__copyright {
  font-size: 0.75rem;
  color: rgb(212 212 212 / 0.5);
  /* fb-gray.DEFAULT @ 50% — klient 2026-08-06 */
}

.fb-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgb(212 212 212 / 0.5);
  /* fb-gray.DEFAULT @ 50% — klient 2026-08-06 */
}

.fb-footer__credit a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.fb-footer__credit-logo {
  display: block;
  height: 0.5rem;
  /* 8px z Figmy */
  width: auto;
}

/* Widoczne tylko dla adminów (fb_footer_render_menu_placeholder()), gdy
     lokalizacja footer-info/footer-offer nie ma jeszcze przypisanego menu. */

.fb-footer__menu-placeholder {
  font-size: 0.75rem;
  color: #454545;
  background-color: rgb(255 255 255 / 0.05);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.fb-page-hero {
  background-color: #0a1f1e;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-page-hero {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — patrz uwaga w blocks-catalog.md o ujednoliceniu wyrównania z headerem (klient 2026-08-06) */
  }
}

.fb-page-hero__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .fb-page-hero__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
  }
}

.fb-page-hero__left {
  max-width: 40rem;
}

.fb-page-hero__breadcrumb {
  display: block;
  font-size: 0.75rem;
  color: #d4d4d4;
  margin-bottom: 1.5rem;
}

.fb-page-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.fb-page-hero__breadcrumb a:hover,
  .fb-page-hero__breadcrumb a:focus-visible {
  color: #ffffff;
}

.fb-page-hero__breadcrumb .breadcrumb_last {
  color: #ffffff;
}

.fb-page-hero__title {
  /* Na mobile mniejszy niż 88px (za duży, łamie się nieczytelnie na
       wąskim ekranie) — ten sam próg 3rem/768px co .fb-hero__title na
       stronie głównej (klient 2026-08-06: mobile ma się zachowywać tak
       samo w obu miejscach). H1/H2 z Figmy dzielą jeden token rozmiaru
       od desktopu (patrz tailwind.config.js: display-2xl 88px — komentarz
       "H1/H2") — main i accent mają więc TĘ SAMĄ wielkość, różni je tylko
       kolor/kursywa (klient 2026-08-06: "napis powinien być biały H1,
       zielony H2 z figmy"). */
  font-size: 3rem;
  font-weight: 800;
  line-height: 0.8;
  color: #ffffff;
}

@media (min-width: 768px) {
  .fb-page-hero__title {
    font-size: 5.5rem;
  }
}

.fb-page-hero__title-accent {
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
  /* Montserrat Italic, jak wszystkie akcenty w projekcie */
}

.fb-page-hero__right {
  /* max-width/align-self:end TYLKO od 1024px (patrz niżej) — poniżej tego
       progu `.fb-page-hero__row` jest w kolumnie (flex-direction:column),
       gdzie align-self działa na osi POZIOMEJ, więc "end" bez media query
       odsyłało tę kolumnę do prawej krawędzi na mobile zamiast pełnej
       szerokości (klient 2026-08-06). */
  width: 100%;
}

@media (min-width: 1024px) {
  .fb-page-hero__right {
    max-width: 26rem;
    align-self: end;
  }
}

.fb-page-hero__description {
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.5);
  /* klient 2026-08-06 */
}

.fb-page-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* Wariant light (Realizacje) — białe tło, jedna kolumna: breadcrumb,
     tytuł, opis, w tej kolejności, bez podziału lewo/prawo z wariantu
     dark. Nadpisuje kolory (tekst ciemny zamiast białego) i układ __row
     (zawsze column, __right bez ograniczenia szerokości). */

.fb-page-hero--light {
  background-color: #ffffff;
}

.fb-page-hero--light .fb-page-hero__row {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .fb-page-hero--light .fb-page-hero__row {
    flex-direction: column;
  }
}

.fb-page-hero--light .fb-page-hero__left {
  max-width: none;
}

.fb-page-hero--light .fb-page-hero__breadcrumb {
  /* fb-gray.dark (#454545), NIE fb-gray.DEFAULT (#d4d4d4, ~1.5:1 na
       bieli — projektowany do tekstu na CIEMNYM tle wariantu dark, gdzie
       kontrast jest odwrotny). Przegląd codex exec 2026-08-06. */
  color: #454545;
  margin-bottom: 1rem;
}

.fb-page-hero--light .fb-page-hero__breadcrumb a:hover,
  .fb-page-hero--light .fb-page-hero__breadcrumb a:focus-visible {
  color: #0a1f1e;
}

.fb-page-hero--light .fb-page-hero__breadcrumb .breadcrumb_last {
  /* fb-gray.dark (#454545), zgodnie z Figma Dev Mode MCP (node 272:4028,
       2026-08-06) — nie fb-dark (#0a1f1e, za ciemny względem specyfikacji). */
  color: #454545;
}

.fb-page-hero--light .fb-page-hero__title {
  /* Figma Dev Mode MCP (node 272:4028, 2026-08-06): tytuł tego wariantu to
       H4/H5 (48px) — TA SAMA skala co --fb-heading-xl (2rem mobile / 3rem
       desktop, konwencja pozostałych nagłówków sekcji w projekcie), NIE
       display-2xl/88px z wariantu dark (bazowa reguła .fb-page-hero__title
       niżej w tym pliku) — light hero wygląda jak zwykły nagłówek sekcji,
       nie jak duży baner. */
  font-size: var(--fb-heading-xl);
  line-height: 1;
  color: #0a1f1e;
}

.fb-page-hero--light .fb-page-hero__right {
  width: 100%;
  max-width: 39.25rem;
  /* 628px z Figmy — opis nie rozciąga się na całą szerokość */
}

@media (min-width: 1024px) {
  .fb-page-hero--light .fb-page-hero__right {
    max-width: 39.25rem;
    align-self: start;
  }
}

.fb-page-hero--light .fb-page-hero__description {
  /* Ten sam powód co breadcrumb wyżej — fb-gray.dark zamiast .DEFAULT. */
  color: #454545;
}

/* __text: bez wpływu na layout, gdy blok NIE ma zdjęcia (display:contents
     — dzieci (__left/__right) zachowują się tak, jakby były bezpośrednimi
     dziećmi __row, dokładnie jak przed dodaniem tego wrappera). Realny box
     tylko w wariancie --split (Kontakt, obrazek obok tekstu). */

.fb-page-hero__text {
  display: contents;
}

/* Wariant split (light + imageId ustawiony, np. Kontakt node 205:4066):
     tekst (breadcrumb+tytuł+opis, stackowane jak w --light) w jednej
     kolumnie obok zdjęcia, w rzędzie od desktopu. */

.fb-page-hero--split .fb-page-hero__row {
  gap: 2rem;
}

@media (min-width: 1024px) {
  .fb-page-hero--split .fb-page-hero__row {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .fb-page-hero--split .fb-page-hero__text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 0 0 36.75rem;
    /* 588px z Figmy */
  }
}

.fb-page-hero--split .fb-page-hero__image {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .fb-page-hero--split .fb-page-hero__image {
    flex: 1 1 0%;
    align-self: stretch;
  }
}

.fb-page-hero__image-img {
  display: block;
  width: 100%;
  height: 12rem;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 1024px) {
  .fb-page-hero__image-img {
    height: 100%;
    min-height: 20rem;
    /* 320px z Figmy */
  }
}

.fb-split-cta {
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-split-cta {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — patrz uwaga w blocks-catalog.md o ujednoliceniu wyrównania z headerem (klient 2026-08-06) */
  }
}

.fb-split-cta__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
}

.fb-split-cta__card {
  position: relative;
  overflow: hidden;
  background-color: #0a1f1e;
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .fb-split-cta__card {
    padding: 2.5rem 3rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
}

.fb-split-cta__glow {
  position: absolute;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);
  width: 18rem;
  height: 18rem;
  background: #39b54a;
  opacity: 0.2;
  border-radius: 9999px;
  filter: blur(6rem);
  pointer-events: none;
}

.fb-split-cta__content {
  position: relative;
  z-index: 1;
  max-width: 38rem;
}

.fb-split-cta__title {
  font-size: 2rem;
  /* 32px/700 */
  font-weight: 700;
  color: #ffffff;
}

.fb-split-cta__description {
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.5);
  margin-top: 0.75rem;
}

.fb-split-cta__cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
}

.fb-products-grid {
  background-color: #fafafa;
  /* #FAFAFA — pominięte w pierwszej wersji, klient 2026-08-06 */
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-products-grid {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — patrz uwaga w blocks-catalog.md o ujednoliceniu wyrównania z headerem (klient 2026-08-06) */
  }
}

.fb-products-grid__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
}

.fb-products-grid__row .fb-tile-grid {
  margin-top: 2.5rem;
}

.fb-product-hero {
  /* overflow:hidden TU, nie na .fb-product-hero__row — sekcja jest
       pełnej szerokości (alignfull), rząd jest wąski (max-width:page,
       wyśrodkowany). `overflow:hidden` na wąskim rzędzie przycinało
       poświatę (left:-8rem, czyli spory kawałek jej szerokości) od razu
       przy lewej krawędzi rzędu — tuż obok tekstu nagłówka, więc wyglądało
       to jak ucięcie w połowie treści. Na sekcji przycięcie następuje
       dopiero przy prawdziwej krawędzi strony (samo ciemne tło, nic tam
       nie ma), więc poświata ma miejsce na płynny zanik (klient 2026-08-06).
       Rząd zostaje `position:relative` (kotwica dla absolute poświaty),
       ale to sekcja teraz przycina to, co wizualnie wychodzi poza NIĄ. */
  position: relative;
  overflow: hidden;
  background-color: #0a1f1e;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-product-hero {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — patrz uwaga w blocks-catalog.md o ujednoliceniu wyrównania z headerem (klient 2026-08-06) */
  }
}

.fb-product-hero__row {
  position: relative;
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .fb-product-hero__row {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
}

.fb-product-hero__glow {
  position: absolute;
  top: 50%;
  left: -8rem;
  transform: translateY(-50%);
  width: 24rem;
  height: 24rem;
  background: #39b54a;
  opacity: 0.2;
  border-radius: 9999px;
  filter: blur(9rem);
  pointer-events: none;
}

.fb-product-hero__left {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

@media (min-width: 1024px) {
  .fb-product-hero__left {
    flex-shrink: 0;
  }
}

.fb-product-hero__breadcrumb {
  display: block;
  font-size: 0.75rem;
  color: #d4d4d4;
  margin-bottom: 1.5rem;
}

.fb-product-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.fb-product-hero__breadcrumb a:hover,
  .fb-product-hero__breadcrumb a:focus-visible {
  color: #ffffff;
}

.fb-product-hero__breadcrumb .breadcrumb_last {
  color: #ffffff;
}

.fb-product-hero__title {
  /* Zmniejszone z 3rem/display-2xl (48px/88px) — długie nazwy produktów
       (np. "Panele przeciwolśnieniowe") łamały się nieczytelnie w
       oryginalnej skali page-hero (klient 2026-08-06). Literalne rem, bez
       dopasowanego tokenu w tailwind.config.js — punktowa korekta tego
       jednego bloku, nie zmiana globalnej skali. */
  font-size: 2rem;
  font-weight: 800;
  line-height: 0.9;
  color: #ffffff;
}

@media (min-width: 768px) {
  .fb-product-hero__title {
    font-size: 3.5rem;
  }
}

.fb-product-hero__title-main {
  display: block;
}

.fb-product-hero__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-product-hero__description {
  font-size: 0.875rem;
  color: #39b54a;
  /* klient 2026-08-06 */
  margin-top: 1.5rem;
  max-width: 30rem;
}

.fb-product-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.fb-product-hero__image {
  position: relative;
  z-index: 1;
  width: 100%;
}

@media (min-width: 1024px) {
  .fb-product-hero__image {
    max-width: 32rem;
  }
}

.fb-product-hero__image-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.fb-product-description {
  background-color: #ffffff;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-product-description {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — patrz uwaga w blocks-catalog.md o ujednoliceniu wyrównania z headerem (klient 2026-08-06) */
  }
}

.fb-product-description__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
}

.fb-product-description__heading {
  margin-bottom: 1.5rem;
}

.fb-product-description__title-main {
  display: block;
  color: #0a1f1e;
}

.fb-product-description__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-product-description__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.875rem;
  color: #454545;
  max-width: 48rem;
}

.fb-product-benefits {
  background-color: #fafafa;
  padding-inline: 1rem;
}

/* Wariant sectionBg="white" — reużyty na stronie "O firmie", sekcja
     "Projektujemy i produkujemy" (node 270:1815, klient 2026-08-06). */

.fb-product-benefits--white {
  background-color: #ffffff;
}

@media (min-width: 768px) {
  .fb-product-benefits {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — patrz uwaga w blocks-catalog.md o ujednoliceniu wyrównania z headerem (klient 2026-08-06) */
  }
}

.fb-product-benefits__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
}

.fb-product-benefits__title-main {
  display: block;
  color: #0a1f1e;
}

.fb-product-benefits__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-product-benefits__grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .fb-product-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fb-product-benefits__grid.fb-product-benefits__grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 4 kolumny — "Projektujemy i produkujemy" na "O firmie" (node
       270:1815, klient 2026-08-06). */

  .fb-product-benefits__grid.fb-product-benefits__grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fb-product-benefits__card {
  background-color: #ffffff;
  border: 1px solid rgb(212 212 212 / 0.5);
  border-radius: 1rem;
  padding: 2rem;
}

.fb-product-benefits__icon {
  /* Jasnozielone tło, BEZ ramki — dokładne wartości z Figmy (node
       270:1815, klient 2026-08-06: ramka na samej ikonie była błędem,
       karta już ma własną ramkę). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background-color: rgb(57 181 74 / 0.05);
}

/* Wariant iconStyle="dark" — reużyty na stronie "O firmie", sekcja
     "Twój projekt. Nasza realizacja" (node 270:1888, klient 2026-08-06:
     "tam tylko trzeba ustawić kolor pod ikonktami"). Ikona (uploadowany
     obraz per pozycja) powinna być jasna/biała, żeby była widoczna na
     ciemnym tle — dobór pliku ikony po stronie edytora, nie CSS. */

.fb-product-benefits__icon--dark {
  border-radius: 0.875rem;
  background-color: #0a1f1e;
  border: none;
}

.fb-product-benefits__icon-img {
  width: 1.5rem;
  height: 1.5rem;
  -o-object-fit: contain;
  object-fit: contain;
}

.fb-product-benefits__card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0a1f1e;
  margin-top: 1.5rem;
}

.fb-product-benefits__card-description {
  font-size: 0.875rem;
  color: #454545;
  margin-top: 0.5rem;
}

.fb-product-specs {
  background-color: #ffffff;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-product-specs {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — patrz uwaga w blocks-catalog.md o ujednoliceniu wyrównania z headerem (klient 2026-08-06) */
  }
}

.fb-product-specs__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
}

.fb-product-specs__columns {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .fb-product-specs__columns {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
}

.fb-product-specs__left {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* eyebrow→nagłówek, jednolite wszędzie — klient 2026-08-06 */
}

.fb-product-specs__title {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
  /* z Figmy: line-height 48px = font-size, nie domyślne (klient 2026-08-06) */
}

.fb-product-specs__title-main {
  display: block;
  color: #0a1f1e;
}

.fb-product-specs__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-product-specs__description {
  font-size: 0.875rem;
  color: #454545;
  max-width: 28rem;
}

.fb-product-specs__tables {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.fb-product-specs__table-title {
  /* Ten sam styl co .fb-eyebrow (12px/600, zielony, uppercase,
       letter-spacing 3px) — z Figmy, nie własny ciemny styl (klient
       2026-08-06: "tabela różni się stylami"). */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: #39b54a;
  margin-bottom: 1rem;
}

.fb-product-specs__table-scroll {
  overflow-x: auto;
}

.fb-product-specs__table {
  width: 100%;
  /* separate, NIE collapse — z collapse border-radius na komórkach
       nagłówka (16px 16px 0 0 z Figmy) nie renderuje się w ogóle, znany
       limit CSS tabel (klient 2026-08-06: sprawdź zaokrąglenia). */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  /* "Body"/"Body2" z Figmy (14px/22px) — NIE text-sm */
}

/* thead th, NIE goły `th` — pierwsza komórka każdego wiersza w tbody jest
     teraz też `<th scope="row">` (semantyka nagłówka wiersza dla czytników
     ekranu, przegląd codex exec 2026-08-06), ale ma wyglądać jak dawne
     `td:first-child` (ciemny bold tekst na jasnym tle), NIE jak zielony
     nagłówek kolumny — bez tego zawężenia goły selektor złapałby też te
     komórki. */

.fb-product-specs__table thead th {
  text-align: left;
  text-transform: uppercase;
  background-color: #39b54a;
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  /* 12px 24px z Figmy */
  white-space: nowrap;
}

.fb-product-specs__table thead th:first-child {
  border-top-left-radius: 1rem;
  /* 16px, tylko górne rogi nagłówka z Figmy */
}

.fb-product-specs__table thead th:last-child {
  border-top-right-radius: 1rem;
}

.fb-product-specs__table td,
  .fb-product-specs__table tbody th {
  padding: 0.75rem 1.5rem;
  /* 12px 24px z Figmy */
  color: #454545;
  /* Body — regular */
  font-weight: 400;
  border-bottom: 1px solid #fafafa;
  white-space: nowrap;
  text-align: left;
  /* <th> ma domyślnie center+bold w przeglądarce — reset do wyglądu td */
}

/* Pierwsza kolumna (nazwa wariantu/parametru, teraz <th scope="row">) —
     Body2 z Figmy: ta sama wielkość (text-md/14px) ale semibold + ciemna,
     w odróżnieniu od pozostałych kolumn (Body — regular, szare). */

.fb-product-specs__table tbody th {
  color: #0a1f1e;
  font-weight: 600;
}

.fb-product-specs__table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.fb-product-specs__footnote {
  margin-top: 1rem;
  font-size: 0.6875rem;
  color: #454545;
}

.fb-realizations-grid {
  /* Figma (Dev Mode MCP, node 267:1272, próbkowanie pikseli 2026-08-06):
       sekcja pod hero ma jasnoszare tło (#FAFAFA = fb-gray.light), odróżniające
       ją od czysto białego page-hero (wariant light) powyżej. */
  background-color: #fafafa;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-realizations-grid {
    padding-inline: 2.5rem;
    /* na OUTER sekcji, nie na __row — konwencja wyrównania z headerem */
  }
}

.fb-realizations-grid__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
}

.fb-realizations-grid__filter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .fb-realizations-grid__filter {
    flex-direction: row;
    align-items: center;
    /* Figma (Dev Mode MCP, node 269:1730, 2026-08-06): rząd "Kategoria"+
         pigułki ma RÓWNE marginesy po obu stronach (138px przy 1132px
         kontenera) — wyśrodkowany jako grupa, NIE rozciągnięty na całą
         szerokość jak "Znaleziono N" i siatka kart poniżej (klient
         2026-08-06: "Kategorie razem z pilami do wyśrodkowania"). */
    justify-content: center;
    gap: 1.5rem;
  }
}

.fb-realizations-grid__filter-label {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #454545;
}

.fb-realizations-grid__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* Wartości z komponentu "pills" w Design System (Figma Dev Mode MCP,
     node 47:321, warianty Property 1: Default/Variant2/Variant3,
     2026-08-06). Stan domyślny/nieaktywny to NIE biel+szary (jak
     wcześniej zgadywane ze zrzutu ekranu) — to jasnozielona poświata
     tła (rgba(57,181,74,.05)), zielony obrys 50% i zielony tekst,
     potwierdzone też próbkowaniem pikseli (#F0F6F1 = ten zielony tint
     na tle sekcji #FAFAFA). Wariant "Variant3" (pełna zieleń, biały
     tekst) to stan aktywny/wybrany — ten sam co pigułka kategorii na
     karcie (.fb-realizations__pill). */

.fb-realizations-grid__pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 1px solid rgb(57 181 74 / 0.5);
  background-color: rgb(57 181 74 / 0.05);
  color: #39b54a;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fb-realizations-grid__pill:hover {
  border-color: #39b54a;
}

.fb-realizations-grid__pill.is-active {
  border-color: #39b54a;
  background-color: #39b54a;
  color: #ffffff;
}

.fb-realizations-grid__count {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: #454545;
}

/* "Znaleziono N realizacji" — liczba pogrubiona (Figma: Body/400 dla
     reszty tekstu, Body2/600 dla samej liczby, ten sam kolor #454545). */

.fb-realizations-grid__count strong {
  font-weight: 600;
}

.fb-realizations-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .fb-realizations-grid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fb-realizations-grid__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* [hidden] dokładane w JS (initRealizationsGridFilter, main.js) na
     .fb-realizations-grid__cell nie pasujących do wybranej pigułki —
     zwykły natywny atrybut wystarcza (UA stylesheet już ustawia
     display:none), jawna reguła tylko dla pewności wobec display:grid
     rodzica. Karta w środku (.fb-realizations__card) — patrz realizations.css. */

.fb-realizations-grid__cell[hidden] {
  display: none;
}

.fb-contact-form {
  background-color: #ffffff;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-contact-form {
    padding-inline: 2.5rem;
  }
}

.fb-contact-form__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .fb-contact-form__row {
    display: grid;
    grid-template-columns: minmax(0, 647fr) minmax(0, 453fr);
    align-items: end;
    /* jak w Figmie (items-end na kontenerze) */
    gap: 2rem;
  }
}

.fb-contact-form__main {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* 40px z Figmy — nagłówek → karta formularza */
}

.fb-contact-form__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* eyebrow→nagłówek, jednolite wszędzie */
}

.fb-contact-form__title {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
}

.fb-contact-form__title-main {
  display: block;
  color: #0a1f1e;
}

.fb-contact-form__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-contact-form__card {
  background-color: #ffffff;
  border: 1px solid rgb(212 212 212 / 0.5);
  border-radius: 1rem;
  padding: 1.5625rem;
  /* 25px z Figmy */
}

.fb-contact-form__placeholder {
  font-size: 0.875rem;
  color: #454545;
  background-color: #fafafa;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0;
}

/* Contact Form 7 — nadpisanie natywnych klas .wpcf7-*, scope'owane do
     karty formularza (ten sam wzorzec co contact-cta.css). */

.fb-contact-form__card .fb-cf7-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .fb-contact-form__card .fb-cf7-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.fb-contact-form__card .fb-contact-form__field {
  margin-bottom: 1.5rem;
}

.fb-contact-form__card .fb-cf7-grid .fb-contact-form__field {
  margin-bottom: 0;
}

.fb-contact-form__card .fb-contact-form__field:last-of-type {
  margin-bottom: 0;
}

.fb-contact-form__card .fb-contact-form__field p {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* 8px z Figmy — etykieta → pole */
  margin: 0;
}

.fb-contact-form__card .fb-contact-form__field br {
  display: none;
  /* wpautop wstawia <br> między <label> a polem — niepotrzebny przy flex column */
}

.fb-contact-form__card .fb-contact-form__field label {
  font-size: 0.875rem;
  /* 14px — Body2 */
  font-weight: 600;
  color: #0a1f1e;
}

/* Descendant, NIE `> form >` — CF7 owija właściwy <form> w swój własny
     `.wpcf7` div (`<div class="fb-contact-form__card"><div class="wpcf7">
     <form>...`), więc bezpośredni potomek nigdy by nie trafił (przegląd
     codex exec 2026-08-06). */

.fb-contact-form__card form > p {
  margin: 0;
}

.fb-contact-form__card .wpcf7-form-control-wrap {
  display: block;
}

.fb-contact-form__card input.wpcf7-form-control,
  .fb-contact-form__card textarea.wpcf7-form-control {
  width: 100%;
  background-color: #fafafa;
  border: none;
  border-radius: 0.5rem;
  padding: 0.6875rem 0.75rem;
  /* ~11px/12px — 44px wysokości pola z Figmy */
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  color: #0a1f1e;
}

.fb-contact-form__card textarea.wpcf7-form-control {
  background-color: #ffffff;
  border: 1px solid rgb(212 212 212 / 0.5);
  border-radius: 0.625rem;
  min-height: 10rem;
  /* 160px z Figmy */
  resize: vertical;
}

.fb-contact-form__card input.wpcf7-form-control::-moz-placeholder, .fb-contact-form__card textarea.wpcf7-form-control::-moz-placeholder {
  color: #454545;
}

.fb-contact-form__card input.wpcf7-form-control::placeholder,
  .fb-contact-form__card textarea.wpcf7-form-control::placeholder {
  color: #454545;
}

/* "Temat" — pigułki radiowe (Figma: zielona wypełniona = zaznaczona,
     obrys zielony 5% tła = niezaznaczona). Natywny <input type="radio">
     ukryty (position:absolute + opacity:0, NIE display:none — zostaje
     dostępny dla klawiatury/czytników ekranu), stan wizualny na sąsiednim
     <span> przez selektor :checked + sibling. */

.fb-contact-form__card .wpcf7-form-control.wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fb-contact-form__card .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}

.fb-contact-form__card .wpcf7-radio .wpcf7-list-item label {
  display: inline-flex;
  cursor: pointer;
}

.fb-contact-form__card .wpcf7-radio .wpcf7-list-item input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fb-contact-form__card .wpcf7-radio .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  font-size: 0.6875rem;
  /* 11px — Body4 */
  font-weight: 600;
  text-transform: uppercase;
  color: #39b54a;
  background-color: rgb(57 181 74 / 0.05);
  border: 1px solid rgb(57 181 74 / 0.5);
}

.fb-contact-form__card .wpcf7-radio .wpcf7-list-item input[type='radio']:checked + .wpcf7-list-item-label {
  color: #ffffff;
  background-color: #39b54a;
  border-color: #39b54a;
}

.fb-contact-form__card .wpcf7-radio .wpcf7-list-item input[type='radio']:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid #0a1f1e;
  outline-offset: 2px;
}

/* RODO — checkbox customowy, ten sam wzorzec co contact-cta.css. */

.fb-contact-form__card .wpcf7-form-control.wpcf7-acceptance {
  display: block;
  margin-bottom: 1.5rem;
}

.fb-contact-form__card .wpcf7-acceptance .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #454545;
  cursor: pointer;
}

.fb-contact-form__card .wpcf7-acceptance .wpcf7-list-item-label a {
  color: #39b54a;
}

.fb-contact-form__card .wpcf7-acceptance input[type='checkbox'] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  position: static;
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
  border: 1px solid #39b54a;
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
}

.fb-contact-form__card .wpcf7-acceptance input[type='checkbox']:checked {
  position: relative;
}

.fb-contact-form__card .wpcf7-acceptance input[type='checkbox']:checked::before {
  content: '';
  position: absolute;
  inset: 0.25rem;
  background-color: #39b54a;
  border-radius: 0.125rem;
}

.fb-contact-form__card input.wpcf7-submit {
  width: 100%;
  background-color: #39b54a;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  border-radius: 0.5rem;
  padding: 0.875rem 1.75rem;
  cursor: pointer;
}

.fb-contact-form__card input.wpcf7-submit:hover {
  background-color: #4dcf5f;
}

.fb-contact-form__card .wpcf7-spinner {
  display: none;
}

.fb-contact-form__card .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
}

.fb-contact-form__card form.sent .wpcf7-response-output {
  background-color: rgb(57 181 74 / 0.1);
  color: #0a1f1e;
  border: 1px solid #39b54a;
}

.fb-contact-form__card form.invalid .wpcf7-response-output,
  .fb-contact-form__card form.unaccepted .wpcf7-response-output,
  .fb-contact-form__card form.failed .wpcf7-response-output,
  .fb-contact-form__card form.aborted .wpcf7-response-output,
  .fb-contact-form__card form.spam .wpcf7-response-output {
  background-color: rgb(220 38 38 / 0.1);
  color: rgb(153 27 27);
  border: 1px solid rgb(220 38 38 / 0.4);
}

.fb-contact-form__card .wpcf7-not-valid-tip {
  display: block;
  font-size: 0.75rem;
  color: rgb(220 38 38);
  margin-top: 0.25rem;
}

/* Sidebar — 3 karty (dane firmy, godziny, szybki kontakt). */

.fb-contact-form__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* 24px z Figmy */
  width: 100%;
}

.fb-contact-form__company {
  background-color: #0a1f1e;
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fb-contact-form__company-label,
  .fb-contact-form__hours-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  /* 12px — H8 */
  font-weight: 600;
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: #39b54a;
}

.fb-contact-form__company-name {
  font-size: 1.125rem;
  /* 18px — H7 */
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.fb-contact-form__company-address {
  font-style: normal;
  font-size: 0.875rem;
  color: rgb(212 212 212 / 0.8);
}

.fb-contact-form__company-address p {
  margin: 0;
}

.fb-contact-form__company-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-top: 0.5rem;
}

.fb-contact-form__company-id {
  display: flex;
  flex-direction: column;
  flex: 1 1 7rem;
}

.fb-contact-form__company-id span {
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.5);
}

.fb-contact-form__company-id strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}

.fb-contact-form__hours,
  .fb-contact-form__quick {
  background-color: #ffffff;
  border: 1px solid rgb(212 212 212 / 0.5);
  border-radius: 1rem;
  padding: 1.5625rem;
  /* 25px z Figmy */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fb-contact-form__hours-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fb-contact-form__hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5625rem;
  /* 9px z Figmy */
  border-bottom: 1px solid #fafafa;
  font-size: 0.875rem;
}

.fb-contact-form__hours-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fb-contact-form__hours-row span {
  color: #454545;
}

.fb-contact-form__hours-row strong {
  font-weight: 600;
  color: #0a1f1e;
}

.fb-contact-form__quick-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1875rem;
  text-transform: uppercase;
  color: #454545;
  margin: 0;
}

.fb-contact-form__quick-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0a1f1e;
  text-decoration: none;
}

.fb-contact-form__quick-link:hover {
  color: #39b54a;
}

.fb-contact-people {
  background-color: #fafafa;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-contact-people {
    padding-inline: 2.5rem;
  }
}

.fb-contact-people__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* 40px z Figmy */
}

.fb-contact-people__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fb-contact-people__title {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
}

.fb-contact-people__title-main {
  display: block;
  color: #0a1f1e;
}

.fb-contact-people__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-contact-people__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .fb-contact-people__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.fb-contact-people__card {
  background-color: #ffffff;
  border: 1px solid rgb(212 212 212 / 0.5);
  border-radius: 1rem;
  padding: 1.5625rem;
  /* 25px z Figmy */
}

.fb-contact-people__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fb-contact-people__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background-color: #fafafa;
}

.fb-contact-people__id {
  display: flex;
  flex-direction: column;
}

.fb-contact-people__name {
  font-size: 0.875rem;
  /* 14px — Body2 */
  font-weight: 600;
  color: #0a1f1e;
}

.fb-contact-people__role {
  font-size: 0.75rem;
  /* 12px — Caption */
  color: #454545;
}

.fb-contact-people__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
}

.fb-contact-people__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #0a1f1e;
  text-decoration: none;
}

.fb-contact-people__link:hover {
  color: #39b54a;
}

.fb-map {
  background-color: #fafafa;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .fb-map {
    padding-inline: 2.5rem;
  }
}

.fb-map__row {
  max-width: 70.75rem;
  margin-inline: auto;
  padding-block: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  /* 40px z Figmy */
}

.fb-map__heading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fb-map__title {
  font-size: var(--fb-heading-xl);
  /* 32px mobile / 48px desktop — global-base.css */
  font-weight: 800;
  line-height: 1;
}

.fb-map__title-main {
  display: block;
  color: #0a1f1e;
}

.fb-map__title-accent {
  display: block;
  color: #39b54a;
  font-style: italic;
  font-weight: 400;
}

.fb-map__frame {
  position: relative;
  width: 100%;
  height: 20rem;
  /* 320px z Figmy */
  border-radius: 1rem;
  overflow: hidden;
}

/* `overflow:hidden` na __frame przycina globalny `:focus-visible` outline
     (global-base.css) na samym iframe — widoczny zamiennik na kontenerze,
     który NIE jest przycinany przez własny overflow (przegląd codex exec
     2026-08-06). */

.fb-map__frame:focus-within {
  outline: 2px solid #39b54a;
  outline-offset: 2px;
}

.fb-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* BEZ padding-inline / tła TU — to <main> (alignfull) obejmuje zarówno
     hero (białe, pełna szerokość) jak i treść (szare, pełna szerokość)
     poniżej; surowy CSS `padding` na wspólnym rodzicu ściskałby OBA na
     równi i psuł "pełną szerokość" alignfull hero (widoczne szare pasy po
     bokach karty hero — klient 2026-08-07). Każdy blok pilnuje własnych
     marginesów sam, jak wszędzie indziej w motywie. */

.fb-text-page {
  background-color: #ffffff;
}

/* page-hero jest współdzielony z innymi podstronami (Realizacje, Kontakt…)
     z WŁASNĄ szerokością wiersza (1132px, maxWidth.page) — na stronie
     tekstowej Figma chce węższej, 744px kolumny, tej samej co treść niżej
     (node 205:5637). Nadpisanie scope'owane do .fb-text-page, NIE zmiana
     domyślnej szerokości page-hero.css (klient 2026-08-07: "zostały
     szerokości kontenera do poprawy"). */

.fb-text-page .fb-page-hero__row {
  max-width: 46.5rem;
  /* 744px */
}

/* Pełna szerokość (align:full w szablonie) + szare tło "pod treścią" —
     wzorem Figmy (node 205:5637, sekcja "Contact"). BEZ padding-inline ANI
     padding-block TU — to znowu ten sam problem co .fb-text-page wyżej:
     page-hero jest FAKTYCZNIE pierwszym blokiem WEWNĄTRZ
     .wp-block-post-content (nie osobnym elementem szablonu), więc
     jakikolwiek padding na tym wspólnym rodzicu obejmowałby też alignfull
     hero — w tym pionowy, dokładający szarą przestrzeń NAD hero zamiast
     pod nim (klient 2026-08-07: "jeszcze jest padding-block"). Odstęp
     pionowy + padding-inline (mobilny margines bezpieczeństwa) przeniesione
     na bezpośrednie dzieci niżej. */

.fb-text-page > .wp-block-post-content {
  background-color: #fafafa;
  /* #FAFAFA */
}

/* Górny odstęp sekcji (64/80px) na PIERWSZYM realnym bloku treści, NIE
     na całym .wp-block-post-content. Dolny odstęp na ostatnim bloku. */

.fb-text-page .wp-block-post-content > .alignfull + *,
  .fb-text-page .wp-block-post-content > *:first-child:not(.alignfull) {
  padding-top: var(--fb-section-padding-block);
  /* 64px mobile / 80px desktop — global-base.css */
}

.fb-text-page .wp-block-post-content > *:last-child {
  padding-bottom: var(--fb-section-padding-block);
}

/* Wąska kolumna do czytania (744px, wyśrodkowana) — baza dla WSZYSTKICH
     dzieci poza page-hero. Realna specyficzność (NIE :where()) — musi
     przebić rdzeniowe reguły layoutu WP (`.is-layout-constrained > *`
     itp.), inaczej kolumna traci szerokość/wyśrodkowanie (klient
     2026-08-07: "na desktopie nie trzyma się kolumny", po pierwszej,
     zbyt szerokiej próbie z :where() na całej regule). `width: calc(100%
     - 2rem)` zamiast `padding-inline` + media query — stałe 16px
     marginesu bezpieczeństwa na każdej szerokości, bez skoku przy 768px
     (przegląd codex exec 2026-08-07). */

/* PEŁNA specyficzność (BEZ :where()) na całej regule, łącznie z
     margin-top — próba z :where() (tylko dla margin-top, żeby przebić
     rdzeniową regułę WP `.is-layout-constrained > *` dla block-gap)
     ODWRÓCIŁA się: WP core używa WŁASNEGO `:where()` (specyficzność 0) do
     tej samej właściwości i to on ładuje się PO motywie, więc dwa
     0-specyficzne reguły rozstrzyga kolejność w arkuszu, nie logika — w
     efekcie odstęp między zwykłymi akapitami zniknął całkiem (klient
     2026-08-07: "tekst pomiędzy sobą nie ma odstępów"). Realna
     specyficzność (3 klasy) jest odporna na tę kolejność. */

.fb-text-page .wp-block-post-content > *:not(.alignfull) {
  width: calc(100% - 2rem);
  max-width: 46.5rem;
  /* 744px z Figmy */
  margin-inline: auto;
  margin-top: 1.5rem;
  /* 24px — odstęp PRZED każdym blokiem */
  margin-bottom: 0;
}

/* Nagłówek = granica nowej sekcji → 40px zamiast bazowych 24px
     ("Article" gap-40 w Figmie). `:not(.alignfull)` tu jest CELOWO zbędny
     logicznie (nagłówki nigdy nie mają tej klasy) — dokłada 1 "klasę" do
     specyficzności (2 klasy + 1 typ → 3 klasy + 1 typ), żeby ta reguła
     przebiła bazową regułę wyżej (3 klasy, 0 typów) NIEZALEŻNIE od
     kolejności w pliku — klasy porównuje się przed typami, więc bez tego
     WSZYSTKIE nagłówki dostawały 24px zamiast 40px (klient 2026-08-07,
     potwierdzone przez CDP). */

.fb-text-page .wp-block-post-content > h2:not(.alignfull),
  .fb-text-page .wp-block-post-content > h3:not(.alignfull),
  .fb-text-page .wp-block-post-content > h4:not(.alignfull) {
  margin-top: 2.5rem;
  /* 40px — granica nowej sekcji */
}

/* page-hero (alignfull) i pierwszy blok ZARAZ PO nim: zero (nawet gdy
     ten pierwszy blok to akurat nagłówek) — hero ma własny padding-block,
     pierwszy blok ma już padding-top 64/80px z reguły wyżej, nie może się
     do tego doliczać marginesu z żadnej z reguł powyżej. `.fb-text-page`
     POWTÓRZONE celowo (4 klasy) — musi przebić OBIE reguły wyżej,
     WŁĄCZNIE z regułą nagłówków (3 klasy + 1 typ), bo klasy zawsze biją
     typy przy porównaniu specyficzności; bez tego zduplikowania pierwszy
     nagłówek (częsty przypadek: h2 zaraz po hero) dostawał 40px zamiast
     0px, mimo że reguła zero jest zdefiniowana NIŻEJ (klient 2026-08-07,
     potwierdzone przez CDP: 3 klasy vs 3 klasy + 1 typ — typ wygrywa,
     kolejność w pliku bez znaczenia przy różnej liczbie typów). */

.fb-text-page.fb-text-page .wp-block-post-content > .alignfull,
  .fb-text-page.fb-text-page .wp-block-post-content > .alignfull + *,
  .fb-text-page.fb-text-page .wp-block-post-content > *:first-child:not(.alignfull) {
  margin-top: 0;
}

.fb-text-page h2,
  .fb-text-page h3,
  .fb-text-page h4 {
  color: #0a1f1e;
  font-weight: 700;
}

/* H7 (18px bold) dla WSZYSTKICH poziomów użytych w treści — Figma nie
     rozróżnia H2/H3/H4 wizualnie w tym dokumencie, każdy nagłówek sekcji
     ("1. POSTANOWIENIA OGÓLNE" itd.) ma tę samą, jedną skalę. Wcześniej h2
     miał 32px (display-lg) — dużo za duże względem Figmy, stąd "coś
     dziwnego" w odstępach (klient 2026-08-07). */

.fb-text-page h2,
  .fb-text-page h3,
  .fb-text-page h4 {
  font-size: 1.125rem;
}

.fb-text-page p,
  .fb-text-page li {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #454545;
}

.fb-text-page ul,
  .fb-text-page ol {
  margin: 0;
  padding-left: 1.25rem;
}

.fb-text-page ul {
  list-style: disc;
}

.fb-text-page ol {
  list-style: decimal;
}

/* Listy zagnieżdżone (numerowana w numerowanej, np. "1." → podpunkty
     wewnątrz) — a/b/c zamiast powtórzonego 1/2/3, żeby dwa poziomy nie
     wyglądały identycznie (klient 2026-08-07: "żeby lepiej się czytało").
     W tym dokumencie listy NIE są zagnieżdżone w DOM (`<li><ol>…`) — to
     osobne bloki `wp:list` jeden po drugim. Rozróżnienie "główna lista
     sekcji" (zaraz po nagłówku, zostaje 1/2/3) vs "rozwinięcie punktu"
     (po akapicie albo po innej liście, np. "1. Administrator przetwarza
     dane w celach:" → lista celów — dostaje a/b/c) przez kombinator `+`
     (CSS nie ma selektora "poprzedni rodzic", więc `h2 + ol` zamiast
     odwrotnie); `> h2/h3/h4 + ol` ma więcej selektorów typu (2 vs 1) niż
     ogólna reguła niżej, więc wygrywa niezależnie od kolejności w pliku. */

.fb-text-page .wp-block-post-content > h2 + ol,
  .fb-text-page .wp-block-post-content > h3 + ol,
  .fb-text-page .wp-block-post-content > h4 + ol {
  list-style-type: decimal;
}

.fb-text-page .wp-block-post-content > ol,
  .fb-text-page ol ol {
  list-style-type: lower-alpha;
}

/* Niektóre bloki `wp:list` w tym dokumencie mają atrybut HTML `start`
     kontynuujący numerację z POPRZEDNIEJ, osobnej listy (np. start="7") —
     niewidoczne przy zwykłych cyfrach, ale przy literach dawało "g, h, i"
     zamiast "a, b, c" (klient 2026-08-07: "każda z nich to niezależna
     lista, a połączyłeś to w jeden ciąg"). `counter-reset` na <ol> w CSS
     NIE wystarcza — Chromium generuje domyślny marker `<li>` przez
     natywny algorytm "ordinal value" oparty na atrybucie `start`,
     OSOBNY od CSS-owego licznika `list-item` (zweryfikowane: counter-reset
     był poprawnie zaaplikowany w computed style, a numeracja mimo to się
     nie zresetowała). Jedyny pewny sposób: WYMUSIĆ treść markera przez
     `::marker { content: counter(...) }`, która CZYTA CSS-owy licznik
     zamiast natywnego atrybutu. */

.fb-text-page .wp-block-post-content > ol {
  counter-reset: list-item 0;
}

.fb-text-page .wp-block-post-content > h2 + ol > li::marker,
  .fb-text-page .wp-block-post-content > h3 + ol > li::marker,
  .fb-text-page .wp-block-post-content > h4 + ol > li::marker {
  content: counter(list-item) '. ';
}

.fb-text-page .wp-block-post-content > ol:not(:is(h2 + *, h3 + *, h4 + *)) > li::marker {
  content: counter(list-item, lower-alpha) '. ';
}

.fb-text-page li + li {
  margin-top: 0.5rem;
}

.fb-text-page a {
  color: #39b54a;
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.fb-text-page a:hover,
  .fb-text-page a:focus-visible {
  color: #4dcf5f;
}

.fb-text-page strong {
  color: #0a1f1e;
  font-weight: 600;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.sticky {
  position: sticky;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-3 {
  height: 0.75rem;
}

.resize {
  resize: both;
}

.italic {
  font-style: italic;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.wp-block-post-content > .wp-block-gallery {
  max-width: calc(70.75rem + 2rem);
  margin-inline: auto;
  margin-block: 0;
  padding-inline: 1rem;
  padding-block: 3rem var(--fb-section-padding-block);
}

@media (min-width: 768px) {
  .wp-block-post-content > .wp-block-gallery {
    max-width: calc(70.75rem + 5rem);
    padding-inline: 2.5rem;
    padding-block-start: var(--fb-section-padding-block);
  }
}