/* ==========================================================================
   MMA — Współpraca v0.6.0 (fix11, 2026-04-28)
   fix11 (2026-04-28) — pakiet 3 zmian z briefu klienta dla `/wspolpraca/`:
     P1 — Drugi przycisk CTA „Opisz nam swój pomysł" pod mostkiem (fix9 P3 +
          fix10 P2) ma na hover `box-shadow: 0 10px 28px rgba(0,0,0,0.35)` —
          cień jest UCIĘTY od dołu, bo sąsiadująca sekcja FAQ
          (`<section class="mma-wsp-section mma-wsp-faq bg-…">`) jest
          siostrzanym blokiem renderowanym PO Realizacji w drzewie DOM —
          przy tej samej hierarchii stacking (oba mają `position: relative`
          z `.mma-wsp-section` L168, brak `z-index`) późniejsze rodzeństwo
          (FAQ) maluje się NA WIERZCHU — jego tło (bg-white/bg-gray) zakrywa
          overflowing shadow CTA. Fix: `.mma-wsp-realizacja { z-index: 2 }`
          — sekcja Realizacji wyżej w stack-order, jej dzieci (CTA + cień)
          malują się NAD FAQ. Bez ruszania geometrii (margin-top 92/64,
          padding-bottom 12 z fix10 P2 zachowane). FAQ bez `z-index` —
          domyślny 0, niżej.
     P2 — Logo + podpis klienta w opinii (`__footer`) wyrównane do PRAWEJ
          (desktop + mobile). Aktualnie (fix8 P2 L1687): `display: flex;
          gap: 16` bez `justify-content` → flex-start (lewo). Logo
          `flex 0 0 auto`, autor `flex 1 1 auto` (ciągnie się na prawo —
          ale `text-align` domyślny left, więc tekst wyrównany do lewej w
          rozszerzonym kontenerze). Fix: `justify-content: flex-end` na
          `__footer` + `flex: 0 0 auto` + `text-align: right` na `__autor`
          (override fix8 P2 L1718–1722). Kolejność DOM `<__logo><__autor>`
          (z fix8) zachowana → na flex-end: [empty][logo][autor] — logo
          po lewej w prawej grupie, autor po prawej. Mobile (≤991, fix8
          L1725 `flex-wrap: wrap`) — `justify-content: flex-end` dziedziczy
          się z desktop reguły, działa też w wrap. Reguła fix9 P1
          (logo bez białego tła) NIETKNIĘTA.
     P3 — Hero H2 (`.mma-wsp-intro__haslo`) — większa czcionka TYLKO na
          mobile (`@max-width 991`). Bazowa typografia (L280 v0.5.0)
          `font-size: clamp(30px, 4.5vw, 52px)` — na mobile (≤430px viewport)
          4.5vw = ~17–19px → floor 30px wygrywa, tekst H2 mały, dużo
          whitespace po bokach. Klient: H2 ma być prawie na całą szerokość
          ekranu na mobile. Fix: w `@media (max-width: 991px)` reguła
          `.mma-wsp-intro__haslo { font-size: clamp(34px, 9vw, 48px);
          line-height: 1.15 }`. Na 393px viewport: 9vw ≈ 35.4px (między
          floor 34 a ceil 48 — w przedziale aktywnym). Na 430px: 9vw ≈
          38.7px. Tekst H2 wypełnia ~85–90% szerokości viewport (przy
          padding-h `--mma-wsp-padding-h: 20px` mobile + container max).
          Desktop bez zmian. `nl2br` z fix10 P1 zachowany — wieloliniowy
          H2 z ACF dalej działa.
   ==========================================================================
   MMA — Współpraca v0.5.0 (fix10, 2026-04-27)
   fix10 (2026-04-27) — pakiet 2 zmian z briefu klienta dla `/wspolpraca/`:
     P1 — Hero H2 (`Hasło główne`) wieloliniowy. Klient: chce sam decydować
          w którym miejscu łamać tekst hero. Wymaga zmiany ACF `intro_haslo`
          z `text` na `textarea` (`inc/mma-wspolpraca-fields.php` v0.5.0)
          + render `nl2br( esc_html( ... ) )` w
          `template-parts/wspolpraca/section-intro.php` v0.2.0. CSS bez zmian
          — `.mma-wsp-intro__haslo` (L228+) ma już typografię H2 z line-height,
          `<br>` z `nl2br` po prostu wymusza złamanie linii w wybranym miejscu.
     P2 — Drugi przycisk CTA pod mostkiem (fix9 P3) ma być DOKŁADNIE w połowie
          odległości między dolną krawędzią ramki mostka a górną krawędzią
          tytułu sekcji FAQ — przy zachowaniu pozycji FAQ (klient: „nie
          obniżać sekcji FAQ"). Matematyka:
            - Przed: `.mma-wsp-real-mostek-cta { margin-top: 24px }`
              + `.mma-wsp-realizacja { padding-bottom: var(--section-py)=80 }`
              + `.mma-wsp-faq { padding-top: 80 }` = przycisk wysoko, ~24px od
              ramki, ~210px od tytułu FAQ. Asymetryczne.
            - Cel: równowaga 92 / btn / 92 (desktop). Czyli `margin-top: 92px`
              (od ramki) + `padding-bottom: 12px` na `.mma-wsp-realizacja`
              (12 + 80 padding-top FAQ = 92 — symetria względem CTA). Razem
              92 + ~50 (btn) + 12 + 80 = 234 (= jak przed fix10) — FAQ NIE
              schodzi niżej.
            - Mobile (≤991): proporcjonalnie. `margin-top: 64px` + `padding-
              bottom: 12px` (12 + 52 padding-top FAQ = 64 — symetria, btn
              ~46 wys.). Razem 64 + 46 + 12 + 52 = 174 (= przed fix10).
          Override fix9 P3 (`margin: 24px 0 0 0` desktop / `20px 0 0 0` mobile)
          oraz bazowej reguły `.mma-wsp-realizacja { padding: var(...) 0 }`
          (L559–561) — kolejność w pliku decyduje.
   ── Wcześniej (fix9, 2026-04-27) ── pakiet 3 zmian z briefu klienta dla `/wspolpraca/`:
     P1 — Logo opinii (banner Zabawowo) — usuń biały kwadratowy back-fill.
          Wcześniej fix8 P2 (L1654–1664) miał `.mma-wsp-real-opinia__footer
          .mma-wsp-real-opinia__logo img { background: #fff; padding: 6px;
          border-radius: 8px }` — granatowe logo Zabawowo na białym tle CSS
          dawało widoczną białą obwódkę dookoła. Klient: logo ma być wyświetlane
          „nago" (tło assetu, bez paddingu, bez ramki). Override w sekcji `fix9`
          niżej resetuje te trzy własności na `transparent / 0 / 0`.
     P2 — Autor opinii — wieloliniowy + bez prefiksu `— `. Wymagało zmiany ACF
          `opinia_autor` z `text` na `textarea` (`new_lines: br` w ACF, ale my
          renderujemy z `nl2br` w PHP). CSS bez zmian — typografia z bazy
          L785–791 + reset margin w fix8 footer L1671–1676 wystarczają.
     P3 — Drugi przycisk „Opisz nam swój pomysł" pod mostkiem. Markup w
          `section-realizacja.php` v0.6.0 — nowy `<div
          class="mma-wsp-real-mostek-cta">` z `<a class="mma-wsp-btn
          mma-wsp-btn--primary">`. Styl wizualny: 1:1 z hero CTA
          (`.mma-wsp-intro .mma-wsp-btn--primary` L1278–1306). Nowy selektor
          `.mma-wsp-real-mostek-cta .mma-wsp-btn--primary` z TYMI SAMYMI
          wartościami (kopia 1:1, żeby nie ruszać hero) + odstęp 24px nad
          przyciskiem (mobile 20px).
   ── Wcześniej (fix8, 2026-04-27) ── pakiet 3 zmian z briefu klienta dla `/wspolpraca/`:
     P1 — Lightbox galerii 1:1 ze stroną główną. Wcześniej (fix7 P1) lightbox
          był skopiowany z `/o-nas/` (mma-onas.css L688–739) — overlay
          rgba(0,0,0,0.85), border-radius 8 + box-shadow czarny, × szary.
          Klient pokazał na screenie home, że ma wyglądać identycznie:
          overlay rgba(0,0,0,0.92), zdjęcie z **żółtą ramką** 4px #f5c518 +
          radius 12 + glow rgba(245,197,24,0.3), × **żółte** #f5c518 36px
          weight 700 (hover white). Selektory scope'owane do `#mmaWspGaleriaLb`
          aby NIE zmienić zachowania na `/o-nas/` (gdzie ma być oryginalny
          styl mma-onas.css — bez ramki).
     P2 — Logo opinii pod cytatem, obok autora. Wcześniej (fix7 P5) logo było
          po lewej **obok** całego cytatu (flex-row w `<blockquote>`). Klient:
          ma być POD opinią, w jednej linii z `— Imię Nazwisko (firma)`.
          Markup w `section-realizacja.php` v0.5.0 — nowy `<footer
          class="mma-wsp-real-opinia__footer">` z `__logo` (lewo) + `__autor`
          (prawo, vertical-center). Stare reguły fix7 P5 (`.has-logo` flex
          na blockquote, `__body`) — zachowane jako fallback (nieaktywne bo
          markup ich nie używa, ale zostawiamy żeby uniknąć błędów cache).
     P3 — Mostek: większa czcionka + żółta ramka + szerokość 1:1 jak ramka
          opinii. Wcześniej (fix7 P4) mostek miał `border: 1px solid
          var(--mma-wsp-border)` (szary) + max-width 720 + font-size 18.
          Po fix8: `border: 2px solid var(--mma-wsp-gold)` (żółty),
          `max-width: 100%` (= szerokość `__quote`), font-size 22 (mobile 18).
   ── Wcześniej (fix7, 2026-04-27) ── pakiet 6 zmian:
     P1 — Galeria realizacji: kliknięcie zdjęcia otwiera lightbox 1:1 jak
          `/o-nas/`. Markup `<div class="mma-galeria-lightbox" id="mmaWspGaleriaLb">`
          + IIFE JS — w `section-realizacja.php` v0.4.0. CSS lightboxa
          (`.mma-galeria-lightbox` + frame + close) skopiowany niżej z
          `mma-onas.css` L688–739 — `mma-onas.css` NIE jest enqueued na
          `/wspolpraca/`, więc trzymamy własną kopię. `__galeria__item`
          dostaje `cursor: pointer` + lekki hover.
     P2 — Nad cytatem opinii nagłówek „Opinia klienta" — typografia 1:1
          z `__galeria__naglowek`. Wspólna reguła
          `.mma-wsp-real-galeria__naglowek, .mma-wsp-real-opinia__naglowek`
          (selektor dodany do istniejącej reguły L687–695 nie jest możliwy
          zachowując zgodność z fix6 — używamy `:where()`-style pojedynczej
          reguły w bloku fix7 na końcu pliku).
     P3 — „Efekt końcowy — galeria" → „Efekt końcowy" (sam tekst w PHP
          v0.4.0; CSS bez zmian).
     P4 — Tekst mostka („Twój projekt też może tak wyglądać…") wpisany
          w ramkę identyczną jak baner `Dane projektu` (`.mma-wsp-real-card`):
          białe tło, border 1px `var(--mma-wsp-border)`, radius
          `var(--mma-wsp-radius)`, padding 32×40 (mobile 24).
     P5 — Opinia z opcjonalnym logo (nowe pole ACF `opinia_logo` w
          `inc/mma-wspolpraca-fields.php` v0.3.0). Gdy ustawione,
          `<blockquote>` ma klasę `.has-logo` → flex layout: desktop logo
          po lewej (100×100 contain), opinia po prawej; mobile column +
          center, logo nad cytatem (80×80).
     P6 — Większe odstępy w meta-kolumnie banera (`.mma-wsp-real-card__meta`):
          tytuł 0→14, klient 0→12, czas 6→0 (bo klient ma już margin-bottom).
   ── Wcześniej (fix6, 2026-04-27) ──
   fix6 (2026-04-27):
     P1 — Sekcja „Co tworzymy" (`.mma-wsp-oferta__grid`) na mobile (≤991px) ma
          być w **1 kolumnie** (jeden kafelek na wiersz). Dotąd warianty
          `cols-3/cols-4` lądowały w 2 kolumnach (L871–874 + L1067–1071).
          Override poniżej (`fix6 P1`) wymusza `grid-template-columns: 1fr`
          dla wszystkich wariantów `cols-2/3/4` w mobile, z `!important`,
          żeby przebić wcześniejsze reguły.
     P2 — Sekcja „Realizacja" — informacja „Czas realizacji" jest teraz
          renderowana w lewej meta-kolumnie (pod „Klient: …"), a nie w
          prawej kolumnie faktów. Tu dodaje się tylko styl typografii dla
          `.mma-wsp-real-card__czas`. Logika przeniesienia: w PHP
          (`section-realizacja.php` v0.3.0). Wymiary banera (padding/gap/
          szerokości kolumn) — bez zmian.
   ── Wcześniej (fix5, 2026-04-27) ──
   fix5: klient prosił o usunięcie białego obramowania z hero CTA
                       „Opisz nam swój pomysł" (FIX6 z fix4 dodał `border: 3px solid #fff`
                       — kopia z `.mma-home-hero-btn--primary`). Teraz `border: 0`.
                       Reszta stylu (pill 100px / Oswald 20/600 / 1.5px / pad 18×48 /
                       gold #f5c518 + hover) bez zmian.
   ── Wcześniej (fix4, 2026-04-27) ──
   FIX3: logo klienta wypełnia kolumnę banera Realizacji + etykiety/wartości lewo.
   FIX5: kółka kroków zawsze idealnie wycentrowane nad tekstem; strzałki absolute
         (od centrum kółka do centrum następnego), ostatni krok bez strzałki.
   FIX6: Hero CTA „Opisz nam swój pomysł" 1:1 jak `.mma-home-hero-btn--primary`
         (pill 100px, Oswald 20/600/letter-spacing 1.5px, padding 18×48, gold + hover).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokeny
   -------------------------------------------------------------------------- */
:root {
    --mma-wsp-gold:         #fec009;
    --mma-wsp-gold-dark:    #e5a309;
    --mma-wsp-navy:         #1a1a2e;
    --mma-wsp-white:        #ffffff;
    --mma-wsp-gray:         #f8f8f8;
    --mma-wsp-border:       #e5e5e5;
    --mma-wsp-text:         #1f2937;
    --mma-wsp-muted:        #6b7280;
    --mma-wsp-radius:       14px;
    --mma-wsp-radius-sm:    8px;
    --mma-wsp-max-width:    1210px;
    --mma-wsp-padding-h:    20px;
    --mma-wsp-section-py:   80px;
    --mma-wsp-shadow:       0 2px 16px rgba(0,0,0,.08);
    --mma-wsp-shadow-hover: 0 6px 28px rgba(0,0,0,.14);
}

/* --------------------------------------------------------------------------
   Wspólne — wrapper i nagłówek strony
   -------------------------------------------------------------------------- */
.mma-wsp-page {}

/* .mma-wsp-page-header — usunięte z DOM przy ujednoliceniu BC do page-shell (2026-04-25) */

/* --------------------------------------------------------------------------
   Inner każdej sekcji
   -------------------------------------------------------------------------- */
.mma-wsp-inner {
    max-width: var(--mma-wsp-max-width);
    margin: 0 auto;
    padding: 0 var(--mma-wsp-padding-h);
}

/* --------------------------------------------------------------------------
   Sekcje — tła i padding
   -------------------------------------------------------------------------- */
.mma-wsp-section {
    padding: var(--mma-wsp-section-py) 0;
    position: relative;
}

.mma-wsp-section.bg-white  { background-color: var(--mma-wsp-white); }
.mma-wsp-section.bg-gray   { background-color: var(--mma-wsp-gray); }
.mma-wsp-section.bg-yellow { background-color: var(--mma-wsp-gold); }

/* Hero (intro) — zawsze takie samo szare tło jak page-header, niezależnie od ACF bg-* */
.mma-wsp-page .mma-wsp-section.mma-wsp-intro {
    background-color: var(--mma-wsp-gray);
}

@media (min-width: 769px) {
    .mma-wsp-page .mma-wsp-section.mma-wsp-intro {
        min-height: calc(100vh - 256px);
        display: flex;
        align-items: center;
    }
    .mma-wsp-page .mma-wsp-section.mma-wsp-intro .mma-wsp-inner {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Wspólny nagłówek sekcji
   -------------------------------------------------------------------------- */
.mma-wsp-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.mma-wsp-section-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: var(--mma-wsp-navy);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mma-wsp-section-sep {
    display: none;
}

.mma-wsp-section-subtitle {
    font-size: 18px;
    color: var(--mma-wsp-muted);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Przyciski
   -------------------------------------------------------------------------- */
.mma-wsp-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--mma-wsp-radius-sm);
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .2s, transform .15s, box-shadow .2s;
    cursor: pointer;
    border: none;
}

.mma-wsp-btn--primary {
    background: var(--mma-wsp-gold);
    color: var(--mma-wsp-navy);
}

.mma-wsp-btn--primary:hover {
    background: var(--mma-wsp-gold-dark);
    transform: translateY(-2px);
    box-shadow: var(--mma-wsp-shadow-hover);
}

/* --------------------------------------------------------------------------
   SEKCJA 1 — Intro / Lead
   -------------------------------------------------------------------------- */
.mma-wsp-intro {
    padding: var(--mma-wsp-section-py) 0;
}

.mma-wsp-intro__inner {}

.mma-wsp-intro__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.mma-wsp-intro--reverse .mma-wsp-intro__grid {
    direction: rtl;
}
.mma-wsp-intro--reverse .mma-wsp-intro__grid > * {
    direction: ltr;
}

.mma-wsp-intro--centered .mma-wsp-intro__inner {
    text-align: center;
    max-width: 800px;
}

.mma-wsp-intro__haslo {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 700;
    color: var(--mma-wsp-navy);
    line-height: 1.15;
    margin: 0 0 20px;
    text-transform: uppercase;
}

.mma-wsp-intro__podtytul {
    font-size: 18px;
    color: var(--mma-wsp-text);
    line-height: 1.7;
    margin: 0 0 32px;
}

/* CTA wyśrodkowany horyzontalnie w obrębie lewej kolumny (desktop) */
.mma-wsp-intro__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mma-wsp-intro__text > .mma-wsp-btn {
    align-self: center;
}

.mma-wsp-intro__img-wrap {
    border-radius: var(--mma-wsp-radius);
    overflow: hidden;
    border: 3px solid #f5c518;
    box-shadow: var(--mma-wsp-shadow);
}

.mma-wsp-intro__img {
    width: 100%;
    height: auto;
    display: block;
}

.mma-wsp-intro__video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--mma-wsp-radius);
    overflow: hidden;
}

.mma-wsp-intro__video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* --------------------------------------------------------------------------
   SEKCJA 2 — Co robimy (kafelki)
   -------------------------------------------------------------------------- */
.mma-wsp-oferta {
    padding: var(--mma-wsp-section-py) 0;
}

.mma-wsp-oferta__grid {
    display: grid;
    gap: 24px;
}

.mma-wsp-oferta__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mma-wsp-oferta__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.mma-wsp-oferta__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.mma-wsp-kafelek {
    position: relative;
    border-radius: var(--mma-wsp-radius);
    border: 1px solid var(--mma-wsp-border);
    padding: 32px 24px;
    box-shadow: var(--mma-wsp-shadow);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mma-wsp-kafelek:hover {
    transform: translateY(-4px);
    box-shadow: var(--mma-wsp-shadow-hover);
}

.mma-wsp-kafelek__ikona {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.mma-wsp-kafelek__ikona img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mma-wsp-kafelek__tytul {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--mma-wsp-navy);
    margin: 0;
    text-transform: uppercase;
}

.mma-wsp-kafelek__podtytul {
    font-size: 13px;
    font-weight: 600;
    color: var(--mma-wsp-gold-dark);
    margin: -8px 0 0;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mma-wsp-kafelek__opis {
    font-size: 15px;
    color: var(--mma-wsp-muted);
    line-height: 1.6;
    margin: 0;
}

.mma-wsp-kafelek__link {
    position: absolute;
    inset: 0;
    border-radius: var(--mma-wsp-radius);
    z-index: 1;
}

/* --------------------------------------------------------------------------
   SEKCJA 3 — Dlaczego my (przewagi)
   -------------------------------------------------------------------------- */
.mma-wsp-przewagi {
    padding: var(--mma-wsp-section-py) 0;
}

.mma-wsp-przewagi__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
}

.mma-wsp-przewaga {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.mma-wsp-przewaga--ikona-gora {
    flex-direction: column;
}

.mma-wsp-przewaga--ikona-prawo {
    flex-direction: row-reverse;
}

.mma-wsp-przewaga__numer {
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: var(--mma-wsp-gold);
    line-height: 1;
    flex-shrink: 0;
    min-width: 56px;
}

.mma-wsp-przewaga__ikona {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.mma-wsp-przewaga__ikona img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mma-wsp-przewaga__tytul {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--mma-wsp-navy);
    margin: 0 0 10px;
    text-transform: uppercase;
}

.mma-wsp-przewaga__opis {
    font-size: 15px;
    color: var(--mma-wsp-text);
    line-height: 1.7;
}

.mma-wsp-przewaga__opis p {
    margin: 0 0 8px;
}

.mma-wsp-przewaga__opis p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   SEKCJA 4 — Jak to działa (kroki poziomo)
   -------------------------------------------------------------------------- */
.mma-wsp-kroki {
    padding: var(--mma-wsp-section-py) 0;
}

.mma-wsp-kroki__track {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    position: relative;
}

.mma-wsp-krok {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 0;
    position: relative;
}

.mma-wsp-krok__head {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    position: relative;
    margin-bottom: 20px;
}

.mma-wsp-krok__circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--mma-wsp-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(26,26,46,.25);
}

.mma-wsp-krok__nr {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--mma-wsp-gold);
}

.mma-wsp-krok__icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.mma-wsp-krok__arrow {
    flex: 1;
    height: 2px;
    background: var(--mma-wsp-navy);
    opacity: .25;
    position: relative;
    margin: 0 4px;
}

.mma-wsp-krok__arrow::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--mma-wsp-navy);
    opacity: .4;
}

.mma-wsp-krok__tytul {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--mma-wsp-navy);
    margin: 0 0 8px;
    text-transform: uppercase;
    padding: 0 8px;
}

.mma-wsp-krok__opis {
    font-size: 14px;
    color: var(--mma-wsp-text);
    line-height: 1.5;
    margin: 0;
    padding: 0 8px;
    opacity: .8;
}

/* --------------------------------------------------------------------------
   SEKCJA 5 — Realizacja (case study)
   -------------------------------------------------------------------------- */
.mma-wsp-realizacja {
    padding: var(--mma-wsp-section-py) 0;
}

/* Karta projektu */
.mma-wsp-real-card {
    background: var(--mma-wsp-white);
    border: 1px solid var(--mma-wsp-border);
    border-radius: var(--mma-wsp-radius);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 64px;
    box-shadow: var(--mma-wsp-shadow);
}

.mma-wsp-real-card__logo img {
    max-width: 120px;
    max-height: 60px;
    object-fit: contain;
}

.mma-wsp-real-card__tytul {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--mma-wsp-navy);
    margin: 0 0 6px;
    text-transform: uppercase;
}

.mma-wsp-real-card__klient {
    font-size: 15px;
    color: var(--mma-wsp-muted);
    margin: 0;
}

.mma-wsp-real-card__dane {
    display: flex;
    gap: 32px;
    margin-left: auto;
    flex-wrap: wrap;
}

.mma-wsp-real-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.mma-wsp-real-fact__label {
    font-size: 12px;
    color: var(--mma-wsp-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mma-wsp-real-fact__value {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--mma-wsp-navy);
}

/* Timeline */
.mma-wsp-real-timeline {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-bottom: 64px;
}

.mma-wsp-timeline-item {
    display: grid;
    grid-template-columns: 56px 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
}

.mma-wsp-timeline-item--reverse {
    direction: rtl;
}
.mma-wsp-timeline-item--reverse > * {
    direction: ltr;
}

.mma-wsp-timeline-item--full {
    grid-template-columns: 56px 1fr;
}

.mma-wsp-timeline-item__nr {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mma-wsp-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mma-wsp-timeline-item__nr span {
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--mma-wsp-navy);
}

.mma-wsp-timeline-item__naglowek {
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--mma-wsp-navy);
    margin: 0 0 16px;
    text-transform: uppercase;
}

.mma-wsp-timeline-item__opis {
    font-size: 16px;
    color: var(--mma-wsp-text);
    line-height: 1.75;
}

.mma-wsp-timeline-item__opis p {
    margin: 0 0 12px;
}

.mma-wsp-timeline-item__img-wrap {
    border-radius: var(--mma-wsp-radius);
    overflow: hidden;
    border: 3px solid #f5c518;
    box-shadow: var(--mma-wsp-shadow);
}

.mma-wsp-timeline-item__img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.mma-wsp-timeline-item__video-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--mma-wsp-radius);
    overflow: hidden;
}

.mma-wsp-timeline-item__video-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* Mockup telefonu */
.mma-wsp-phone-mockup {
    display: flex;
    justify-content: center;
}

.mma-wsp-phone-mockup__frame {
    width: 240px;
    background: #111;
    border-radius: 36px;
    padding: 16px 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 2px #333;
    position: relative;
}

.mma-wsp-phone-mockup__notch {
    width: 80px;
    height: 20px;
    background: #111;
    border-radius: 0 0 14px 14px;
    margin: 0 auto 8px;
    position: relative;
    z-index: 2;
}

.mma-wsp-phone-mockup__screen {
    border-radius: 24px;
    overflow: hidden;
    background: #000;
}

.mma-wsp-phone-mockup__screen img {
    width: 100%;
    height: auto;
    display: block;
}

/* Galeria */
.mma-wsp-real-galeria {
    margin-bottom: 64px;
}

.mma-wsp-real-galeria__naglowek {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--mma-wsp-navy);
    text-transform: uppercase;
    margin: 0 0 24px;
    text-align: center;
}

.mma-wsp-real-galeria__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.mma-wsp-real-galeria__item {
    border-radius: var(--mma-wsp-radius-sm);
    overflow: hidden;
    aspect-ratio: 4/3;
    border: 3px solid #f5c518;
}

.mma-wsp-real-galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Opinia */
.mma-wsp-real-opinia {
    margin-bottom: 48px;
}

.mma-wsp-real-opinia__quote {
    background: var(--mma-wsp-gray);
    border-left: 5px solid var(--mma-wsp-gold);
    border-radius: 0 var(--mma-wsp-radius) var(--mma-wsp-radius) 0;
    padding: 32px 40px;
    margin: 0;
    font-size: 17px;
    font-style: italic;
    color: var(--mma-wsp-text);
    line-height: 1.7;
}

.mma-wsp-real-opinia__autor {
    margin-top: 16px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    color: var(--mma-wsp-navy);
}

/* Mostek */
.mma-wsp-real-mostek {
    text-align: center;
    font-size: 18px;
    color: var(--mma-wsp-text);
    line-height: 1.7;
    max-width: 720px;
    margin: 0 auto;
    padding-top: 16px;
}

/* --------------------------------------------------------------------------
   SEKCJA 6 — FAQ (style sekcji — accordion reuse z mma-faq.css)
   -------------------------------------------------------------------------- */
.mma-wsp-faq {
    padding: var(--mma-wsp-section-py) 0;
}

/* Klasy mma-faq-item__* są już obsługiwane przez mma-faq.css */

/* --------------------------------------------------------------------------
   SEKCJA 7 — Formularz kontaktowy
   -------------------------------------------------------------------------- */
.mma-wsp-formularz {
    padding: var(--mma-wsp-section-py) 0;
}

.mma-wsp-formularz__inner {
    max-width: 720px;
}

.mma-wsp-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mma-wsp-form__row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.mma-wsp-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mma-wsp-form__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--mma-wsp-navy);
}

.mma-wsp-form__required {
    color: #dc2626;
}

.mma-wsp-form__input,
.mma-wsp-form__textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--mma-wsp-border);
    border-radius: var(--mma-wsp-radius-sm);
    font-size: 15px;
    color: var(--mma-wsp-text);
    background: var(--mma-wsp-white);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    font-family: inherit;
}

.mma-wsp-form__input:focus,
.mma-wsp-form__textarea:focus {
    outline: none;
    border-color: var(--mma-wsp-gold);
    box-shadow: 0 0 0 3px rgba(254,192,9,.2);
}

.mma-wsp-form__textarea {
    resize: vertical;
    min-height: 140px;
}

.mma-wsp-form__footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mma-wsp-form__submit {
    align-self: flex-start;
}

.mma-wsp-form__status {
    font-size: 14px;
    min-height: 20px;
    margin: 0;
}

.mma-wsp-form__status.is-success { color: #16a34a; }
.mma-wsp-form__status.is-error   { color: #dc2626; }

.mma-wsp-form__note {
    font-size: 13px;
    color: var(--mma-wsp-muted);
    margin: 16px 0 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   RESPONSYWNOŚĆ — tablet + telefon identycznie (max-width: 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    :root {
        --mma-wsp-padding-h:  20px;
        --mma-wsp-section-py: 52px;
    }

    /* Intro — mobile/tablet: tytuł → zdjęcie → opis → CTA (wycentrowany) */
    .mma-wsp-intro__grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .mma-wsp-intro--reverse .mma-wsp-intro__grid {
        direction: ltr;
    }
    .mma-wsp-intro__text {
        display: contents;
    }
    .mma-wsp-intro__haslo    { order: 1; }
    .mma-wsp-intro__media    { order: 2; }
    .mma-wsp-intro__podtytul { order: 3; }
    .mma-wsp-intro__text > .mma-wsp-btn,
    .mma-wsp-intro__grid > .mma-wsp-btn {
        order: 4;
        align-self: center;
        margin: 0 auto;
    }

    /* Oferta — zawsze 2 kolumny na mobile */
    .mma-wsp-oferta__grid--cols-3,
    .mma-wsp-oferta__grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Przewagi — 1 kolumna */
    .mma-wsp-przewagi__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Kroki — pionowo */
    .mma-wsp-kroki__track {
        flex-direction: column;
        gap: 32px;
        align-items: flex-start;
    }

    .mma-wsp-krok {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
    }

    .mma-wsp-krok__head {
        flex-direction: column;
        width: auto;
        margin-bottom: 0;
        gap: 0;
    }

    .mma-wsp-krok__arrow {
        display: none;
    }

    /* Realizacja timeline — 1 kolumna */
    .mma-wsp-timeline-item {
        grid-template-columns: 40px 1fr;
    }

    .mma-wsp-timeline-item__media {
        grid-column: 2;
        grid-row: 3;
    }

    .mma-wsp-timeline-item--reverse {
        direction: ltr;
    }

    .mma-wsp-real-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 24px;
    }

    .mma-wsp-real-card__dane {
        margin-left: 0;
        gap: 20px;
    }

    .mma-wsp-real-galeria__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mma-wsp-phone-mockup__frame {
        width: 180px;
    }

    /* Formularz — 1 kolumna */
    .mma-wsp-form__row--2col {
        grid-template-columns: 1fr;
    }

    .mma-wsp-formularz__inner {
        max-width: 100%;
    }
}

/* ==========================================================================
   WYMIARY GRAFIK — v0.2.1
   ========================================================================== */

/* SEKCJA 1 — Intro: zdjęcie po prawej */
.mma-wsp-intro__img {
    width: 100%;
    max-width: 1200px;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

/* SEKCJA 2 — Kafelki: ikony */
.mma-wsp-kafelek__ikona {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
}

.mma-wsp-kafelek__ikona img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* SEKCJA 3 — Przewagi: ikony */
.mma-wsp-przewaga__ikona {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.mma-wsp-przewaga__ikona img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* SEKCJA 4 — Kroki: ikony w kółku */
.mma-wsp-krok__icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

/* SEKCJA 5 — Realizacja: logo klienta */
.mma-wsp-real-card__logo img {
    width: 300px;
    max-width: 300px;
    height: 120px;
    object-fit: contain;
    display: block;
}

/* SEKCJA 5 — Realizacja: etapy — obraz zwykły */
.mma-wsp-timeline-item__img-wrap img {
    width: 100%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* SEKCJA 5 — Realizacja: etapy — screen w mockupie telefonu */
.mma-wsp-phone-mockup__screen img {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    display: block;
}

/* SEKCJA 5 — Realizacja: galeria końcowa */
.mma-wsp-real-galeria__item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.mma-wsp-real-galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Mobile — skalowanie grafik */
@media (max-width: 991px) {
    .mma-wsp-kafelek__ikona {
        width: 80px;
        height: 80px;
    }

    .mma-wsp-real-card__logo img {
        width: 160px;
        height: 64px;
    }

    .mma-wsp-timeline-item__img-wrap img {
        aspect-ratio: 4 / 3;
    }
}

/* ==========================================================================
   KAFELKI — wymuś 3 kolumny v0.2.4
   ========================================================================== */
.mma-wsp-oferta__grid--cols-4 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
    .mma-wsp-oferta__grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   KAFELKI — poprawki v0.2.5
   ========================================================================== */

/* Wyśrodkowanie całego kafelka */
.mma-wsp-kafelek {
    align-items: center;
    text-align: center;
}

/* Wyśrodkowanie ikony */
.mma-wsp-kafelek__ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

/* Odstęp pod tytułem */
.mma-wsp-kafelek__tytul {
    margin: 0 0 10px;
}

/* Odstęp pod podtytułem */
.mma-wsp-kafelek__podtytul {
    margin: 0 0 16px;
}

/* Odstęp nad opisem */
.mma-wsp-kafelek__opis {
    margin: 0;
}

/* ==========================================================================
   fix4 (2026-04-27) — REGRESJE WIZUALNE Z BRIEFU KLIENTA
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX3 — Realizacja: logo klienta wypełnia kolumnę banera, etykiety lewo.
   Wcześniej `.mma-wsp-real-card__logo img` miało stałe 300×120 (L984) i było
   wyśrodkowane w karcie z `align-items: center`. Klient: „logo ma być możliwie
   jak największe, na tyle na ile pozwoli baner". Etykiety/wartości miały
   `text-align: center` — klient: „mają być wyrównane do lewej w swoich kolumnach".
   -------------------------------------------------------------------------- */
.mma-wsp-real-card {
    align-items: stretch !important; /* kolumna logo rośnie do wysokości karty */
}

.mma-wsp-real-card__logo {
    flex: 0 0 auto;
    width: clamp(180px, 22vw, 280px);
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Override starszego boksu logo (L984–990) — `width:300px; height:120px`. */
.mma-wsp-real-card__logo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Etykiety i wartości danych projektu — wyrównanie do lewej. */
.mma-wsp-real-fact {
    text-align: left;
    align-items: flex-start;
}

@media (max-width: 991px) {
    .mma-wsp-real-card__logo {
        width: 100%;
        min-height: 120px;
    }
    .mma-wsp-real-card__logo img {
        height: 120px !important;
    }
}

/* --------------------------------------------------------------------------
   FIX5 — Kroki: kółka idealnie wycentrowane nad tekstem; strzałki absolute.
   Wcześniej `.mma-wsp-krok__head` miał `justify-content: center` z dwoma
   dziećmi: circle (64px) + arrow (`flex: 1`). Skutek: dla kroków 1–4 circle
   był dosunięty do lewej krawędzi kolumny (bo arrow rozpychał się na całą
   szerokość po prawej), a krok 5 (last) miał circle wycentrowane. Tekst
   pod każdym krokiem (`text-align: center` z `.mma-wsp-krok`) był więc
   zdesynchronizowany z kółkiem dla 1–4.
   Fix: arrow → `position: absolute`, biegnie od `calc(50% + 32px + 8px)`
   (prawa krawędź circle + odstęp) headu poprzedniego kroku do lewej krawędzi
   circle następnego. Circle zawsze w środku kolumny.
   -------------------------------------------------------------------------- */
.mma-wsp-krok__head {
    justify-content: center !important;
    position: relative !important;
}

.mma-wsp-krok__circle {
    position: relative;
    z-index: 2;
}

.mma-wsp-krok__arrow {
    position: absolute !important;
    top: 50% !important;
    left: calc(50% + 32px + 8px) !important;  /* radius circle (32) + odstęp */
    right: calc(-50% + 32px + 8px) !important; /* dociągnięcie do circle następnego kroku */
    height: 2px !important;
    background: var(--mma-wsp-navy) !important;
    opacity: .25 !important;
    transform: translateY(-50%) !important;
    flex: none !important; /* nadpisuje `flex: 1` z bazy L414 */
    margin: 0 !important;
    pointer-events: none;
}

.mma-wsp-krok--last .mma-wsp-krok__arrow {
    display: none !important;
}

@media (max-width: 991px) {
    /* Mobile — strzałka i tak jest `display: none` z bazy L885; circle wraca do flex column. */
    .mma-wsp-krok__head {
        justify-content: flex-start !important;
    }
}

/* --------------------------------------------------------------------------
   FIX6 — Hero CTA na /wspolpraca/ — 1:1 jak `.mma-home-hero-btn--primary` z home.
   Wzorzec: template-glowna.php L2473–2504 (pill 100px, Oswald 20/600/1.5px,
   padding 18×48, gold #f5c518 + 3px solid white border, hover gold-dark
   z translateY(-2px) + box-shadow + opacity .93).
   Aktualnie `.mma-wsp-btn.mma-wsp-btn--primary` ma rounded-square 8px + 16/600/.04em
   + padding 14×32 — desync wizualny.
   Override scoped wyłącznie do hero (`.mma-wsp-intro`), żeby nie ruszyć innych
   `.mma-wsp-btn--primary` w innych sekcjach (np. formularz).
   -------------------------------------------------------------------------- */
.mma-wsp-intro .mma-wsp-btn.mma-wsp-btn--primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 18px 48px !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 100px !important;
    background: #f5c518 !important;
    color: #1a1a1a !important;
    /* fix5 (2026-04-27): klient nie chce białej ramki — `3px solid #ffffff` → `0`.
       Reszta atrybutów (typografia/padding/radius/hover) bez zmian. */
    border: 0 !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease !important;
}

.mma-wsp-intro .mma-wsp-btn.mma-wsp-btn--primary:hover,
.mma-wsp-intro .mma-wsp-btn.mma-wsp-btn--primary:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35) !important;
    opacity: 0.93 !important;
    background: #e6b800 !important;
    color: #1a1a1a !important;
}

@media (max-width: 1024px) {
    .mma-wsp-intro .mma-wsp-btn.mma-wsp-btn--primary {
        width: 60% !important;
        min-width: 200px !important;
        max-width: 100% !important;
        font-size: clamp(14px, 1.8vw, 18px) !important;
        padding: clamp(14px, 1.6vw, 16px) clamp(20px, 3.2vw, 40px) !important;
    }
}

/* --------------------------------------------------------------------------
   fix6 (2026-04-27)
   P1 — „Co tworzymy" mobile = 1 kolumna (jeden kafelek na wiersz).
   Wcześniej:
     - L234–236: desktop `cols-2 → 2`, `cols-3 → 3`, `cols-4 → 4`.
     - L871–874 (@media ≤991px): `cols-3, cols-4 → repeat(2, 1fr)`.
     - L1063–1065 (desktop override): `cols-4 → repeat(3, 1fr)`.
     - L1067–1071 (@media ≤991px): `cols-4 → repeat(2, 1fr)`.
   Teraz w mobile (≤991px) wszystkie warianty `cols-2/3/4` → `1fr`.
   `!important` — żeby przebić L1067–1071 (`cols-4` 2-col mobile).
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .mma-wsp-oferta__grid--cols-2,
    .mma-wsp-oferta__grid--cols-3,
    .mma-wsp-oferta__grid--cols-4 {
        grid-template-columns: 1fr !important;
    }
}

/* --------------------------------------------------------------------------
   fix6 (2026-04-27)
   P2 — „Realizacja": informacja „Czas realizacji" przeniesiona z prawej
   kolumny faktów (`.mma-wsp-real-card__dane`) do lewej meta-kolumny
   (`.mma-wsp-real-card__meta`) — pod „Klient: …". Markup: PHP
   `section-realizacja.php` v0.3.0 (foreach `dane_projektu` izoluje wiersz
   o etykiecie zawierającej „czas realizacji" i renderuje w meta).
   Tu — tylko typografia, żeby pasowała wizualnie do `__klient`.
   Wymiary banera (`.mma-wsp-real-card` padding/gap/min-height oraz
   kolumny `__logo`/`__meta`/`__dane`) — **bez zmian**.
   -------------------------------------------------------------------------- */
.mma-wsp-real-card__czas {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mma-wsp-muted);
}

.mma-wsp-real-card__czas-label {
    color: var(--mma-wsp-muted);
}

.mma-wsp-real-card__czas-value {
    font-weight: 700;
    color: var(--mma-wsp-text);
}

/* ==========================================================================
   fix7 (2026-04-27) — REGRESJE WIZUALNE Z BRIEFU KLIENTA — /wspolpraca/
   ========================================================================== */

/* --------------------------------------------------------------------------
   fix7 P1 — Galeria realizacji: lightbox + cursor/hover.
   Klient: „zdjęcia w galerii mają się powiększać po kliknięciu, zgodnie
   z stylem z home". Rozwiązanie: 1:1 jak `/o-nas/` (template-parts/onas/
   section-galeria.php) — `data-full` + `#mmaWspGaleriaLb` + IIFE JS
   scope'owany do `.mma-wsp-real-galeria`. CSS lightboxa kopiowany z
   `mma-onas.css` L688–739 (mma-onas.css nie jest enqueued na /wspolpraca/).
   -------------------------------------------------------------------------- */
.mma-wsp-real-galeria__item {
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.mma-wsp-real-galeria__item:hover,
.mma-wsp-real-galeria__item:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    outline: none;
}

.mma-galeria-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.mma-galeria-lightbox.open {
    display: flex;
}
.mma-galeria-lightbox .mma-galeria-lb-frame {
    display: inline-block;
    max-width: min(90vw, 100%);
    max-height: 88vh;
    line-height: 0;
}
.mma-galeria-lightbox .mma-galeria-lb-frame img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.mma-galeria-lb-close {
    position: absolute;
    top: 20px;
    right: 28px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 48px;
    line-height: 1;
    cursor: pointer;
    padding: 0 8px;
    transition: color .2s ease;
}
.mma-galeria-lb-close:hover,
.mma-galeria-lb-close:focus-visible {
    color: #fff;
    outline: none;
}

/* --------------------------------------------------------------------------
   fix7 P2 — Nad cytatem opinii nagłówek „Opinia klienta" w typografii
   identycznej jak nagłówek galerii (Oswald 24/600/uppercase/navy/center,
   margin 0 0 24px). Markup: `section-realizacja.php` v0.4.0.
   -------------------------------------------------------------------------- */
.mma-wsp-real-opinia__naglowek {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--mma-wsp-navy);
    text-transform: uppercase;
    margin: 0 0 24px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   fix7 P4 — Tekst mostka w ramce identycznej jak baner `Dane projektu`
   (`.mma-wsp-real-card` L493–503: białe tło + border 1px var(--mma-wsp-border)
   + radius var(--mma-wsp-radius) + padding 32×40). Bazowa reguła L743–751
   miała `text-align: center; max-width: 720px; margin: 0 auto; padding-top: 16px`
   bez ramki. Tutaj dodajemy boks (zachowując dotychczasową typografię
   i wyśrodkowanie), żeby tekst „Twój projekt też może tak wyglądać…" wyglądał
   jak druga karta — zgodnie ze screenem klienta.
   -------------------------------------------------------------------------- */
.mma-wsp-real-mostek {
    background: var(--mma-wsp-white);
    border: 1px solid var(--mma-wsp-border);
    border-radius: var(--mma-wsp-radius);
    padding: 32px 40px;
    /* zachowujemy text-align:center, font-size:18px, max-width:720px,
       margin:0 auto z bazy L743–751 */
    padding-top: 32px; /* override `padding-top: 16px` z bazy — w ramce trzymamy równy padding */
}

@media (max-width: 991px) {
    .mma-wsp-real-mostek {
        padding: 24px;
    }
}

/* --------------------------------------------------------------------------
   fix7 P5 — Opinia z opcjonalnym logo. Pole ACF `opinia_logo`
   (`inc/mma-wspolpraca-fields.php` v0.3.0). PHP dodaje `.has-logo` do
   `<blockquote>` + opakowuje treść+autora w `.__body`.
   Desktop: logo lewo (100×100 contain) + body prawo. Mobile: kolumna
   wyśrodkowana, logo (80×80) nad cytatem.
   Bez logo: render bez zmian (klasa `.has-logo` nie dodana → brak flex).
   -------------------------------------------------------------------------- */
.mma-wsp-real-opinia__quote.has-logo {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.mma-wsp-real-opinia__logo {
    flex: 0 0 auto;
    width: 100px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.mma-wsp-real-opinia__logo img {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    box-sizing: border-box;
}

.mma-wsp-real-opinia__body {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 991px) {
    .mma-wsp-real-opinia__quote.has-logo {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    .mma-wsp-real-opinia__logo {
        width: 80px;
    }
    .mma-wsp-real-opinia__logo img {
        max-height: 80px;
    }
}

/* --------------------------------------------------------------------------
   fix7 P6 — Większe odstępy w meta-kolumnie banera „Dane projektu".
   Klient: „większe odstępy między tytułem, klientem i czasem realizacji".
   Bazowe wartości:
     - `.mma-wsp-real-card__tytul` L511–518: `margin: 0 0 6px`
     - `.mma-wsp-real-card__klient` L520–524: `margin: 0`
     - `.mma-wsp-real-card__czas` L1297–1302 (fix6): `margin: 6px 0 0`
   Po fix7:
     - tytuł 0 0 14
     - klient 0 0 12
     - czas 0 (bo klient ma teraz margin-bottom 12 — wystarczy)
   -------------------------------------------------------------------------- */
.mma-wsp-real-card__tytul {
    margin: 0 0 14px;
}

.mma-wsp-real-card__klient {
    margin: 0 0 12px;
}

.mma-wsp-real-card__czas {
    margin: 0;
}

/* ==========================================================================
   fix8 (2026-04-27) — REGRESJE WIZUALNE Z BRIEFU KLIENTA — /wspolpraca/
   ========================================================================== */

/* --------------------------------------------------------------------------
   fix8 P1 — Lightbox galerii 1:1 ze stroną główną.
   Source of truth: `template-glowna.php` L2156–2189 (style inline w sekcji
   `.mma-home-galeria`):
     - overlay rgba(0,0,0,0.92) (NIE 0.85 jak fix7)
     - cursor: zoom-out na overlay
     - <img> bezpośrednio w lightbox: max-width 90vw, max-height 88vh,
       border 4px solid #f5c518, border-radius 12, box-shadow 60px gold,
       cursor: default
     - .mma-galeria-lb-close: top 20, right 28, color #f5c518, font-size 36,
       weight 700, hover white
   Markup home: `<div class="mma-galeria-lightbox"> <button>×</button>
     <img></div>` (NIE ma `__lb-frame` wrappera).
   Markup `/wspolpraca/` (`section-realizacja.php` v0.4.0): używa
   `<div class="mma-galeria-lb-frame"><img></div>` — żeby uniknąć przebudowy
   markupu, zostawiamy frame ale **przechodzimy stylem przez frame na img**
   (czyli `__quote-frame img { border: 4px solid gold }` — fix8 dotyczy
   wewnętrznego `<img>`).

   SCOPE: selektory celują w `#mmaWspGaleriaLb` (ID lightboxa wstrzykniętego
   w `section-realizacja.php` v0.4.0) — NIE wpływają na `/o-nas/`
   (`#mmaOnasGaleriaLb`) ani na home (`#mmGaleriaLb` w `template-glowna.php`).
   -------------------------------------------------------------------------- */
#mmaWspGaleriaLb.mma-galeria-lightbox {
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
    padding: 0;
}
#mmaWspGaleriaLb .mma-galeria-lb-frame {
    max-width: 90vw;
    max-height: 88vh;
    line-height: 0;
    cursor: default;
}
#mmaWspGaleriaLb .mma-galeria-lb-frame img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border: 4px solid #f5c518;
    border-radius: 12px;
    box-shadow: 0 0 60px rgba(245, 197, 24, 0.3);
    cursor: default;
}
#mmaWspGaleriaLb .mma-galeria-lb-close {
    top: 20px;
    right: 28px;
    color: #f5c518;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
}
#mmaWspGaleriaLb .mma-galeria-lb-close:hover,
#mmaWspGaleriaLb .mma-galeria-lb-close:focus-visible {
    color: #fff;
    outline: none;
}

/* --------------------------------------------------------------------------
   fix8 P2 — Logo opinii pod cytatem, w jednej linii z autorem.
   Markup `section-realizacja.php` v0.5.0:
     <blockquote class="__quote (.has-logo?)">
         <div class="__tresc">cytat WYSIWYG</div>
         <footer class="__footer">
             <div class="__logo"><img></div>     (gdy is set ACF)
             <div class="__autor">— Imię Nazwisko (firma)</div>
         </footer>
     </blockquote>
   `__quote` zachowuje bazowe style (gray bg, gold border-left, padding 32×40)
   z L750–760 — bo NIE ma teraz flexa (klasa `.has-logo` zostaje, ale flex
   reguła z fix7 P5 jest poniżej **nadpisywana** przez fix8 — patrz reset).
   Reszta CSS fix7 P5 (`__logo`, `__body`) traktujemy jako fallback / dead
   code; nie usuwam by uniknąć regresji w razie gdyby cache trzymał stary HTML.

   RESET FIX7 P5: nie chcemy flex layoutu na `<blockquote>`, bo footer ma być
   na pełnej szerokości pod cytatem.
   -------------------------------------------------------------------------- */
.mma-wsp-real-opinia__quote.has-logo {
    /* override fix7 P5: NIE flex */
    display: block;
}

.mma-wsp-real-opinia__footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

/* `__logo` w footerze (mniejsze niż fix7 100×100, bo dzieli linię z autorem) */
.mma-wsp-real-opinia__footer .mma-wsp-real-opinia__logo {
    flex: 0 0 auto;
    width: 80px;
    height: auto;
    display: block;
}
.mma-wsp-real-opinia__footer .mma-wsp-real-opinia__logo img {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    box-sizing: border-box;
}

/* Autor w footerze — bazowa typografia z L762–768 (margin-top 16, font-size 14,
   italic→normal, weight 600, navy). `<div class="__autor">` po fix8 (zamiast
   `<footer class="__autor">`), więc bazowa reguła `.mma-wsp-real-opinia__autor`
   nadal działa (selektor po klasie). Ale `margin-top: 16` z bazy jest teraz
   redundantny (dzieli go z `__footer.margin-top`). Reset: */
.mma-wsp-real-opinia__footer .mma-wsp-real-opinia__autor {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    /* font-size/weight/color: dziedziczone z bazy L762–768 */
}

@media (max-width: 991px) {
    .mma-wsp-real-opinia__footer {
        gap: 12px;
        flex-wrap: wrap;
    }
    .mma-wsp-real-opinia__footer .mma-wsp-real-opinia__logo {
        width: 64px;
    }
    .mma-wsp-real-opinia__footer .mma-wsp-real-opinia__logo img {
        max-height: 64px;
    }
}

/* --------------------------------------------------------------------------
   fix8 P3 — Mostek: większa czcionka + żółta ramka + szerokość 1:1 z opinią.
   Klient (screen): tekst „Twój projekt też może tak wyglądać…" ma:
     - większą czcionkę (z 18 → 22),
     - żółtą ramkę (z gray-1px → gold-2px),
     - szerokość taką samą jak ramka opinii (`__quote` nie ma `max-width`,
       więc pełna szerokość kontenera). Bazowa reguła L771–779 ma
       `max-width: 720px` — override do 100%.
   Override fix7 P4 (`mma-wsp-real-mostek` border + radius + padding zachowane,
   tylko border kolor + szerokość + font-size zmienione).
   -------------------------------------------------------------------------- */
.mma-wsp-real-mostek {
    border: 2px solid var(--mma-wsp-gold);
    max-width: 100%;
    font-size: 22px;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .mma-wsp-real-mostek {
        font-size: 18px;
        line-height: 1.6;
    }
}

/* ==========================================================================
   fix9 (2026-04-27) — REGRESJE WIZUALNE Z BRIEFU KLIENTA — /wspolpraca/
   3 punkty:
     P1 — Logo opinii (banner Zabawowo) bez białego back-fillu.
     P2 — Autor wieloliniowy + bez `— ` (CSS bez zmian, tylko PHP/ACF).
     P3 — Drugi przycisk „Opisz nam swój pomysł" pod mostkiem (1:1 z hero).
   ========================================================================== */

/* --------------------------------------------------------------------------
   fix9 P1 — Logo opinii (footer) bez białego tła + bez paddingu + bez radius.
   Override fix8 L1654–1664 (`.mma-wsp-real-opinia__footer
   .mma-wsp-real-opinia__logo img { background: #fff; padding: 6; radius: 8 }`).
   Selektor identyczny — kolejność w pliku decyduje, fix9 wygrywa.
   -------------------------------------------------------------------------- */
.mma-wsp-real-opinia__footer .mma-wsp-real-opinia__logo img {
    background: transparent;
    padding: 0;
    border-radius: 0;
    /* width / height / max-height / object-fit / display — pozostaje z fix8 */
}

/* --------------------------------------------------------------------------
   fix9 P3 — Drugi przycisk CTA pod mostkiem.
   Markup `section-realizacja.php` v0.6.0:
     <div class="mma-wsp-real-mostek-cta">
       <a class="mma-wsp-btn mma-wsp-btn--primary" href="#formularz">…</a>
     </div>
   Reguły hero (`.mma-wsp-intro .mma-wsp-btn--primary` L1278–1306) są
   scope'owane do hero — nie aktywują się tutaj. Kopiujemy WARTOŚCI 1:1 z
   nowym scope `.mma-wsp-real-mostek-cta .mma-wsp-btn--primary` żeby
   przycisk wyglądał IDENTYCZNIE (pill 100px, Oswald 20/600, letter-spacing
   1.5, padding 18×48, gold #f5c518, border 0, hover translate -2 + box-shadow
   + bg #e6b800).
   -------------------------------------------------------------------------- */
.mma-wsp-real-mostek-cta {
    display: flex;
    justify-content: center;
    margin: 24px 0 0 0;
}

.mma-wsp-real-mostek-cta .mma-wsp-btn.mma-wsp-btn--primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 18px 48px !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 100px !important;
    background: #f5c518 !important;
    color: #1a1a1a !important;
    border: 0 !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease !important;
}

.mma-wsp-real-mostek-cta .mma-wsp-btn.mma-wsp-btn--primary:hover,
.mma-wsp-real-mostek-cta .mma-wsp-btn.mma-wsp-btn--primary:focus-visible {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35) !important;
    opacity: 0.93 !important;
    background: #e6b800 !important;
    color: #1a1a1a !important;
}

@media (max-width: 1024px) {
    .mma-wsp-real-mostek-cta .mma-wsp-btn.mma-wsp-btn--primary {
        width: 60% !important;
        min-width: 200px !important;
        max-width: 100% !important;
        font-size: clamp(14px, 1.8vw, 18px) !important;
        padding: clamp(14px, 1.6vw, 16px) clamp(20px, 3.2vw, 40px) !important;
    }
}

@media (max-width: 991px) {
    .mma-wsp-real-mostek-cta {
        margin: 20px 0 0 0;
    }
}

/* ==========================================================================
   fix10 (2026-04-27) — REGRESJE WIZUALNE Z BRIEFU KLIENTA — /wspolpraca/
   2 punkty:
     P1 — Hero H2 wieloliniowy (CSS bez zmian — tylko PHP `nl2br` + ACF
          `text → textarea`).
     P2 — Drugi przycisk CTA (fix9 P3) ma być DOKŁADNIE w połowie odległości
          między ramką mostka a tytułem sekcji FAQ — bez „obniżania" sekcji
          FAQ. Override `margin-top` na `.mma-wsp-real-mostek-cta` (z 24 → 92
          desktop / 20 → 64 mobile) + redukcja `padding-bottom` na
          `.mma-wsp-realizacja` (z var(--mma-wsp-section-py)=80/52 → 12) tak,
          żeby skompensować zwiększony margin-top — łączna wysokość sekcji
          Realizacja przed FAQ pozostaje taka sama (FAQ NIE schodzi niżej).
          Symetria: distance(frame_bottom→CTA_top) = distance(CTA_bottom→
          FAQ_title_top) = 92px desktop / 64px mobile.
   ========================================================================== */

/* fix10 P2 — przesuń CTA do środka odstępu mostek↔FAQ.
   Override `.mma-wsp-real-mostek-cta { margin: 24px 0 0 0 }` z fix9 (L1796). */
.mma-wsp-real-mostek-cta {
    margin-top: 92px;
}

/* fix10 P2 — kompensata: redukcja padding-bottom Realizacji żeby FAQ NIE
   przesunęło się niżej. Override bazowej L559–561
   `.mma-wsp-realizacja { padding: var(--mma-wsp-section-py) 0 }` (kolejność
   w pliku decyduje — później wygrywa, bez `!important`).
   - desktop: 80 → 12 (różnica 68 = wzrost margin-top CTA z 24 do 92).
   - mobile (≤991, var=52): 52 → 12 (różnica 40 ≈ wzrost mobile z 20 do 64).
   Mała asymetria mobile (40 vs 44) jest kosmetycznie nieistotna,
   trzymamy stałą wartość 12 dla prostoty. */
.mma-wsp-realizacja {
    padding-bottom: 12px;
}

@media (max-width: 991px) {
    .mma-wsp-real-mostek-cta {
        margin-top: 64px;
    }
    /* .mma-wsp-realizacja padding-bottom 12px — bez zmiany, działa też mobile. */
}

/* ==========================================================================
   fix11 (2026-04-28) — REGRESJE WIZUALNE Z BRIEFU KLIENTA — /wspolpraca/
   3 punkty:
     P1 — CTA box-shadow ucięty przez sąsiadującą sekcję FAQ → z-index Realizacji.
     P2 — Footer opinii (logo + autor) wyrównany do prawej.
     P3 — Hero H2 większy na mobile (prawie cała szerokość ekranu).
   ========================================================================== */

/* fix11 P1 — Sekcja Realizacji NAD sekcją FAQ w stack-order, żeby cień
   drugiego CTA (`.mma-wsp-real-mostek-cta .mma-wsp-btn--primary:hover`,
   `box-shadow: 0 10px 28px rgba(0,0,0,0.35)` — fix9 P3 L1825) NIE był
   ucinany przez tło sekcji FAQ. `.mma-wsp-section` L168 ma już
   `position: relative` (więc z-index zadziała bez `position` override).
   FAQ bez z-index = default 0 (auto), Realizacja z-index 2 — Realizacja
   wyżej w stack-order. Cień CTA (część Realizacji) maluje się NAD FAQ.
   Brak ruszania geometrii (margin-top 92/64, padding-bottom 12 z fix10 P2
   zachowane). */
.mma-wsp-realizacja {
    z-index: 2;
}

/* fix11 P2 — Footer opinii wyrównany do PRAWEJ.
   Override fix8 P2 L1687–1692 (`__footer { display: flex; align-items:
   center; gap: 16; margin-top: 16 }` — bez justify-content = flex-start).
   Override fix8 P2 L1718–1722 (`__autor { flex: 1 1 auto; min-width: 0;
   margin: 0 }` — autor rozciągał się na całą szerokość, text-align left).
   Wynik (desktop): [empty space][logo 80px][autor right-aligned] dosunięte
   do prawej krawędzi `<blockquote class="__quote">`. Mobile (≤991, fix8
   L1725 `flex-wrap: wrap; gap: 12` zachowane) — `justify-content: flex-end`
   dziedziczy się z desktop, działa też w wrap. */
.mma-wsp-real-opinia__footer {
    justify-content: flex-end;
}

.mma-wsp-real-opinia__footer .mma-wsp-real-opinia__autor {
    flex: 0 0 auto;
    text-align: right;
}

/* fix11 P3 — Hero H2 (`.mma-wsp-intro__haslo`) większy TYLKO na mobile.
   Bazowa L280 (desktop): `font-size: clamp(30px, 4.5vw, 52px)`. Na mobile
   4.5vw ≈ 17–19px → floor 30px wygrywa = mały H2 + dużo whitespace.
   Klient: H2 prawie na całą szerokość ekranu na mobile.
   Fix: `clamp(34px, 9vw, 48px)` w `@media (max-width: 991px)`.
   - 393px viewport: 9vw = 35.37px (active range).
   - 430px viewport: 9vw = 38.7px.
   - 360px viewport: 9vw = 32.4 → floor 34 wygrywa.
   Tekst H2 wypełnia ~85–90% szerokości viewport (przy padding-h 20px mobile
   z `:root` `--mma-wsp-padding-h: 20px` L956). `nl2br` z fix10 P1 zachowany. */
@media (max-width: 991px) {
    .mma-wsp-intro__haslo {
        font-size: clamp(34px, 9vw, 48px);
        line-height: 1.15;
    }
}

/* Mobile ≤767: CTA „Opisz nam swój pomysł” — jedna linia, dopasowanie do szerokości przycisku (hero + mostek) */
@media (max-width: 767px) {
    .mma-wsp-intro .mma-wsp-btn.mma-wsp-btn--primary,
    .mma-wsp-real-mostek-cta .mma-wsp-btn.mma-wsp-btn--primary {
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        font-size: clamp(12px, 3.6vw, 16px) !important;
        letter-spacing: 0.45px !important;
        padding: 16px 22px !important;
        min-height: 48px !important;
        line-height: 1.1 !important;
    }
}