/*
 * matWeb - fundament wizualny rebrandingu (Etap A)
 * =================================================
 *
 * Ten plik NIE zmienia wygladu zadnej istniejacej sekcji.
 * Zawiera wylacznie:
 *   1. tokeny (CSS custom properties) w :root,
 *   2. narzedzia z prefiksem .mw-*, ktore beda uzywane od Etapu B.
 *
 * Zasada: dopoki zaden szablon nie doda klasy .mw-*, strona wyglada
 * dokladnie tak, jak przed wdrozeniem tego pliku. Dzieki temu Etap A
 * jest w calosci odwracalny i nie moze wywolac regresji.
 *
 * NIE dopisuj tu stylow konkretnych sekcji - one ida do custom.css albo
 * do wlasnych plikow etapowych. Ten plik ma zostac systemem, nie zlepkiem.
 *
 * Stary custom.css zostaje nietkniety i ladowany PRZED tym plikiem.
 */


/* ==========================================================================
   1. TOKENY
   ========================================================================== */

:root {

    /* --- Kolory marki -------------------------------------------------- */

    /* Glowny niebieski - CTA, akcenty, aktywne stany. */
    --mw-color-primary: #2AA5D4;
    /* Ciemniejszy wariant - hover przyciskow i kolor linkow tekstowych.
       Na bialym tle ma kontrast 4.6:1, wiec nadaje sie pod tekst.
       Sam --mw-color-primary ma 2.6:1 i NIE nadaje sie na tekst. */
    --mw-color-primary-strong: #1B7FA8;
    /* Delikatne tlo akcentowe - plakietki, ikony, podswietlenia. */
    --mw-color-primary-soft: #EAF6FB;

    /* Granat marki - ciemne sekcje, stopka, tekst podstawowy. */
    --mw-color-dark: #0B1622;

    /* Bursztyn - wylacznie gwiazdki ocen. Nie uzywac jako akcentu UI. */
    --mw-color-star: #F5A623;


    /* --- Powierzchnie -------------------------------------------------- */

    --mw-color-bg: #FFFFFF;
    /* Ledwie widoczny chlodny odcien - tlo hero i naglowkow podstron. */
    --mw-color-bg-subtle: #FBFDFE;
    --mw-color-surface: #FFFFFF;
    /* Tlo sekcji przeplatanych z bialymi. */
    --mw-color-surface-alt: #F6FAFC;
    --mw-color-surface-dark: var(--mw-color-dark);


    /* --- Tekst --------------------------------------------------------- */

    --mw-color-text: #0B1622;
    /* Akapity wiodace i opisy sekcji. */
    --mw-color-text-muted: #4E6070;
    /* Tekst w kartach - o pol tonu lzejszy. */
    --mw-color-text-subtle: #5B6B7A;
    /* Etykiety, daty, podpisy. Kontrast 3.0:1 - tylko tekst pomocniczy. */
    --mw-color-text-faint: #93A3AF;

    /* Tekst na ciemnym tle. */
    --mw-color-text-on-dark: #FFFFFF;
    --mw-color-text-on-dark-muted: #A9BDC9;
    --mw-color-text-on-dark-faint: #6E8B9C;


    /* --- Obramowania --------------------------------------------------- */

    --mw-color-border: #E5EDF3;
    /* Cienkie linie rozdzielajace - listy, separatory sekcji. */
    --mw-color-border-soft: #EDF3F7;
    /* Obramowanie interaktywne - przyciski secondary, pola formularza. */
    --mw-color-border-strong: #D9E6EE;
    --mw-color-border-on-dark: rgba(255, 255, 255, .16);


    /* --- Zaokraglenia -------------------------------------------------- */

    --mw-radius-xs: 6px;
    --mw-radius-sm: 10px;
    --mw-radius-md: 14px;   /* przyciski */
    --mw-radius-lg: 18px;   /* karty */
    --mw-radius-xl: 22px;   /* duze panele */
    --mw-radius-pill: 999px;


    /* --- Cienie --------------------------------------------------------
       Wszystkie sa mocno przesuniete w dol i rozmyte, z ujemnym spreadem -
       maja sugerowac uniesienie, a nie rysowac ramke. */

    --mw-shadow-sm: 0 6px 18px -12px rgba(11, 22, 34, .40);
    --mw-shadow-md: 0 28px 46px -30px rgba(11, 22, 34, .42);
    --mw-shadow-lg: 0 46px 90px -40px rgba(11, 22, 34, .42);
    /* Poswiata pod przyciskiem primary - jedyne miejsce z kolorowym cieniem. */
    --mw-shadow-primary: 0 16px 30px -16px rgba(42, 165, 212, .85);


    /* --- Typografia ----------------------------------------------------
       Sora i Manrope sa hostowane lokalnie w custom/fonts/ i deklarowane
       w custom/css/fonts.css (ladowanym przez matweb_rebrand_fonts_source).
       Zadne zadanie nie idzie do Google.

       Kroje trafiaja na strone WYLACZNIE przez klasy .mw-* - nie sa
       narzucane globalnie, wiec stary uklad dalej uzywa Nunito z custom.css.

       Fallbacki dobrane pod ksztalt docelowych krojow: Sora i Manrope to
       geometryczne bezszeryfowe o duzej wysokosci x, wiec system-ui
       (Segoe UI na Windows, SF na macOS) jest najblizszym zamiennikiem
       na czas ladowania (font-display: swap). */

    --mw-font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mw-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Skala - mobile-first przez clamp(). Dolna wartosc to rozmiar przy
       390px, gorna przy >=1240px. Srodkowa jednostka vw dobrana tak, zeby
       naglowek nie wychodzil poza ekran przy najwezszym wariancie. */

    --mw-text-h1: clamp(32px, 6.2vw, 66px);
    --mw-text-h2: clamp(26px, 3.6vw, 44px);
    --mw-text-h3: clamp(19px, 1.8vw, 22px);
    --mw-text-h4: clamp(17px, 1.4vw, 19px);
    --mw-text-lead: clamp(16.5px, 1.5vw, 18.5px);
    --mw-text-body: 16px;
    --mw-text-small: 14.5px;
    --mw-text-eyebrow: 12.5px;
    --mw-text-button: 16px;

    --mw-leading-tight: 1.06;   /* H1 */
    --mw-leading-snug: 1.16;    /* H2 / H3 */
    --mw-leading-normal: 1.65;  /* tekst ciagly */

    --mw-tracking-tight: -.03em;   /* H1 */
    --mw-tracking-snug: -.025em;   /* H2 */
    --mw-tracking-wide: .16em;     /* etykiety wersalikowe */

    --mw-weight-regular: 400;
    --mw-weight-medium: 500;
    --mw-weight-semibold: 600;
    --mw-weight-bold: 700;


    /* --- Uklad ---------------------------------------------------------- */

    --mw-container: 1240px;
    --mw-container-narrow: 1000px;  /* FAQ, dlugi tekst */

    /* Margines boczny kontenera. 20px na telefonie, 32px od ~800px w gore.
       Prototyp mial sztywne 32px, przez co na 390px na tresc zostawalo
       326px - i siatki o minimum 340-360px wychodzily poza ekran. */
    --mw-gutter: clamp(20px, 4vw, 32px);

    /* Odstep pionowy sekcji. */
    --mw-section-y: clamp(64px, 8vw, 110px);
    --mw-section-y-tight: clamp(48px, 6vw, 88px);

    /* Odstepy w siatkach. */
    --mw-gap-sm: clamp(12px, 1.5vw, 16px);
    --mw-gap: clamp(16px, 2vw, 24px);
    --mw-gap-lg: clamp(32px, 5vw, 72px);

    /* Minimalna szerokosc kolumny w .mw-grid - nadpisywana modyfikatorami. */
    --mw-grid-min: 260px;

    --mw-transition: 160ms ease;
}


/* Punkty zlamania (CSS nie pozwala uzyc zmiennych w @media, wiec sa tu
   tylko jako dokumentacja - wartosci powtarzaja sie w regulach nizej):

     --mw-bp-sm:  480px
     --mw-bp-md:  768px
     --mw-bp-lg: 1024px
     --mw-bp-xl: 1440px
*/


/* ==========================================================================
   2. NARZEDZIA
   ==========================================================================
   Wszystko z prefiksem .mw-. Nic nie dziala na golych selektorach
   elementow, wiec nie moze wplynac na istniejacy markup.
   ========================================================================== */

.mw-container,
.mw-section,
.mw-grid,
.mw-btn {
    /* Bootstrap ustawia to globalnie, ale nie chcemy od niego zalezec. */
    box-sizing: border-box;
}


/* --- Kontener ---------------------------------------------------------- */

.mw-container {
    width: 100%;
    max-width: var(--mw-container);
    margin-inline: auto;
    padding-inline: var(--mw-gutter);
}

.mw-container--narrow {
    max-width: var(--mw-container-narrow);
}

/* Kontener bez ograniczenia szerokosci - do sekcji z wlasnym tlem. */
.mw-container--full {
    max-width: none;
}


/* --- Sekcja ------------------------------------------------------------ */

.mw-section {
    padding-block: var(--mw-section-y);
}

.mw-section--tight {
    padding-block: var(--mw-section-y-tight);
}

/* Jasne tlo przeplatajace - z wloskami u gory i dolu, jak w projekcie. */
.mw-section--alt {
    background: var(--mw-color-surface-alt);
    border-block: 1px solid var(--mw-color-border-soft);
}

/* Ciemna sekcja. Ustawia komplet kolorow tekstu, zeby nie trzeba bylo
   nadpisywac ich po kazdym elemencie z osobna. */
.mw-section--dark {
    background: var(--mw-color-surface-dark);
    color: var(--mw-color-text-on-dark);
}

.mw-section--dark .mw-eyebrow {
    color: #7FB4CB;
}

.mw-section--dark .mw-lead,
.mw-section--dark .mw-muted {
    color: var(--mw-color-text-on-dark-muted);
}

.mw-section--dark .mw-small {
    color: var(--mw-color-text-on-dark-faint);
}


/* --- Siatka ------------------------------------------------------------
   min() jest tu istotny: bez niego kolumna o minimum 340px nie zejdzie
   ponizej 340px i wypchnie tresc poza ekran przy 390px. Z min(100%, X)
   siatka na waskim ekranie zwija sie do jednej kolumny. */

.mw-grid {
    display: grid;
    gap: var(--mw-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mw-grid-min)), 1fr));
}

/* Karty w rzedzie - im wiecej kolumn docelowo, tym mniejsze minimum. */
.mw-grid--cards { --mw-grid-min: 240px; }
.mw-grid--wide  { --mw-grid-min: 300px; }

/* Uklad dwudzielny (tekst + obraz). Na telefonie zawsze jedna kolumna. */
.mw-grid--split {
    --mw-grid-min: 320px;
    gap: var(--mw-gap-lg);
    align-items: center;
}


/* --- Typografia -------------------------------------------------------- */

.mw-h1,
.mw-h2,
.mw-h3,
.mw-h4 {
    font-family: var(--mw-font-display);
    color: inherit;
    text-wrap: balance;
    margin: 0;
}

.mw-h1 {
    font-size: var(--mw-text-h1);
    font-weight: var(--mw-weight-bold);
    line-height: var(--mw-leading-tight);
    letter-spacing: var(--mw-tracking-tight);
}

.mw-h2 {
    font-size: var(--mw-text-h2);
    font-weight: var(--mw-weight-bold);
    line-height: var(--mw-leading-snug);
    letter-spacing: var(--mw-tracking-snug);
}

.mw-h3 {
    font-size: var(--mw-text-h3);
    font-weight: var(--mw-weight-semibold);
    line-height: 1.3;
    letter-spacing: -.015em;
}

.mw-h4 {
    font-size: var(--mw-text-h4);
    font-weight: var(--mw-weight-semibold);
    line-height: 1.35;
    letter-spacing: -.01em;
}

/* Etykieta nad naglowkiem. Swiadomie <div>/<span>, nie naglowek -
   nie moze rozbijac hierarchii H1/H2/H3 (Etap 2A). */
.mw-eyebrow {
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-eyebrow);
    font-weight: var(--mw-weight-bold);
    letter-spacing: var(--mw-tracking-wide);
    text-transform: uppercase;
    color: var(--mw-color-primary);
}

.mw-lead {
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-lead);
    line-height: var(--mw-leading-normal);
    color: var(--mw-color-text-muted);
    text-wrap: pretty;
    /* Ok. 65 znakow - dlugosc wiersza, ktora czyta sie najlatwiej. */
    max-width: 62ch;
}

.mw-body {
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-body);
    line-height: var(--mw-leading-normal);
    color: var(--mw-color-text-subtle);
}

.mw-small {
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-small);
    line-height: 1.6;
    color: var(--mw-color-text-faint);
}

.mw-muted { color: var(--mw-color-text-muted); }


/* --- Przyciski ---------------------------------------------------------
   Jedna baza + trzy warianty. Wysokosc 48px to minimalny cel dotykowy
   rekomendowany przez WCAG 2.2 (2.5.8) - prototyp mial 46-56px. */

.mw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--mw-radius-md);
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-button);
    font-weight: var(--mw-weight-bold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--mw-transition),
        border-color var(--mw-transition),
        color var(--mw-transition),
        transform var(--mw-transition);
}

.mw-btn:focus-visible {
    outline: 2px solid var(--mw-color-primary);
    outline-offset: 3px;
}

.mw-btn[disabled],
.mw-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary - jeden na sekcje. */
.mw-btn--primary {
    background: var(--mw-color-primary);
    color: #fff;
    box-shadow: var(--mw-shadow-primary);
}

.mw-btn--primary:hover,
.mw-btn--primary:focus-visible {
    background: var(--mw-color-primary-strong);
    color: #fff;
    transform: translateY(-1px);
}

/* Secondary - obrys na jasnym tle. */
.mw-btn--secondary {
    background: var(--mw-color-surface);
    border-color: var(--mw-color-border-strong);
    color: var(--mw-color-text);
}

.mw-btn--secondary:hover,
.mw-btn--secondary:focus-visible {
    border-color: var(--mw-color-primary);
    color: var(--mw-color-primary-strong);
}

/* Ciemny - na jasnym tle tam, gdzie primary bylby zbyt krzykliwy. */
.mw-btn--dark {
    background: var(--mw-color-dark);
    color: #fff;
}

.mw-btn--dark:hover,
.mw-btn--dark:focus-visible {
    background: var(--mw-color-primary);
    color: #fff;
}

/* Duzy - CTA w hero. */
.mw-btn--lg {
    min-height: 56px;
    padding: 16px 30px;
}

/* Kompaktowy - CTA w naglowku. 44px to nadal poprawny cel dotykowy. */
.mw-btn--compact {
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 14.5px;
}

/* Link tekstowy ze strzalka. Bez tla i bez min-height jako blok -
   zachowuje sie jak tekst, ale ma pelny cel dotykowy w pionie. */
.mw-btn--text {
    min-height: 44px;
    padding: 10px 2px;
    background: none;
    border: none;
    border-radius: var(--mw-radius-xs);
    font-size: var(--mw-text-small);
    color: var(--mw-color-primary-strong);
}

.mw-btn--text:hover,
.mw-btn--text:focus-visible {
    color: var(--mw-color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Warianty na ciemnym tle. */
.mw-section--dark .mw-btn--secondary {
    background: transparent;
    border-color: var(--mw-color-border-on-dark);
    color: #fff;
}

.mw-section--dark .mw-btn--secondary:hover,
.mw-section--dark .mw-btn--secondary:focus-visible {
    border-color: #fff;
    color: #fff;
}

.mw-section--dark .mw-btn--text {
    color: #7FD3F3;
}


/* --- Powierzchnia karty ------------------------------------------------ */

.mw-card {
    box-sizing: border-box;
    background: var(--mw-color-surface);
    border: 1px solid var(--mw-color-border);
    border-radius: var(--mw-radius-lg);
    padding: clamp(22px, 3vw, 30px);
}

.mw-card--raised {
    box-shadow: var(--mw-shadow-md);
}


/* ==========================================================================
   3. RESPONSYWNOSC
   ==========================================================================
   Wiekszosc skalowania robi clamp(), wiec punktow zlamania jest malo -
   i to jest zamierzone. Media query dokladamy tylko tam, gdzie plynna
   zmiana nie wystarcza.
   ========================================================================== */

/* >= 768px: karty moga byc wezsze, bo jest je gdzie ulozyc. */
@media (min-width: 768px) {

    .mw-grid--cards { --mw-grid-min: 220px; }
}

/* >= 1024px: uklad dwudzielny rozjezdza sie na dwie kolumny dopiero tutaj,
   zeby na tablecie w pionie tekst i obraz nie byly sciesnione. */
@media (min-width: 1024px) {

    .mw-grid--split { --mw-grid-min: 380px; }
}


/* Redukcja ruchu - wylaczamy przejscia i przesuniecia w warstwie .mw-*.
   Nie dotykamy animacji spoza rebrandingu. */
@media (prefers-reduced-motion: reduce) {

    .mw-btn {
        transition: none;
    }

    .mw-btn:hover,
    .mw-btn:focus-visible {
        transform: none;
    }
}


/* ==========================================================================
   4. NAGLOWEK  (Etap B)
   ==========================================================================
   Odwzorowanie naglowka z Claude Design. Stare reguly z custom.css
   (header, .home header, #main-header, #logo-img, #mob-floater) sa wylaczone
   selektorem :not(.mw-header) - patrz komentarz w custom.css.
   ========================================================================== */

:root {
    /* Wysokosc naglowka - uzywana przez panel mobilny do wyliczenia
       maksymalnej wysokosci. Zmiana w jednym miejscu. */
    --mw-header-h: 76px;
}

.mw-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #E7EEF3;
    transition: background-color var(--mw-transition), box-shadow var(--mw-transition);
}

/* Przegladarki bez backdrop-filter dostaja pelne tlo - inaczej tresc strony
   przebijalaby przez polprzezroczysty pasek. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .mw-header {
        background: #fff;
    }
}

/* Subtelna reakcja na scroll: pasek robi sie bardziej kryjacy i dostaje
   delikatny cien. Zadnego zmniejszania logo ani podmiany kolorow. */
.mw-header--scrolled {
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 30px -24px rgba(11, 22, 34, .55);
}

.mw-header__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--mw-header-h);
    padding-block: 14px;
}

.mw-header__brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: auto;
}

.mw-header__logo {
    display: block;
    height: 30px;
    width: auto;
}

.mw-header__logo-text {
    font-family: var(--mw-font-display);
    font-weight: var(--mw-weight-bold);
    font-size: 20px;
    color: var(--mw-color-text);
}

.mw-header__cta {
    flex: 0 0 auto;
}


/* --- Nawigacja: wspolne ------------------------------------------------ */

.mw-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-nav__list a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--mw-radius-sm);
    font-family: var(--mw-font-body);
    font-size: 14.5px;
    font-weight: var(--mw-weight-semibold);
    letter-spacing: .01em;
    white-space: nowrap;
    color: #3F5162;
    text-decoration: none;
    transition: background-color var(--mw-transition), color var(--mw-transition);
}

.mw-nav__list a:hover {
    background: #F1F7FB;
    color: var(--mw-color-text);
}

.mw-nav__list a:focus-visible,
.mw-nav__phone:focus-visible,
.mw-nav-toggle:focus-visible {
    outline: 2px solid var(--mw-color-primary);
    outline-offset: 2px;
}

/* Biezaca strona - WordPress dokleja te klasy sam. */
.mw-nav__list .current-menu-item > a,
.mw-nav__list .current_page_item > a {
    color: var(--mw-color-primary);
}

.mw-nav__phone {
    font-family: var(--mw-font-body);
    font-size: 14.5px;
    font-weight: var(--mw-weight-bold);
    white-space: nowrap;
    color: var(--mw-color-text);
    text-decoration: none;
    transition: color var(--mw-transition);
}

.mw-nav__phone:hover {
    color: var(--mw-color-primary);
}


/* --- Hamburger --------------------------------------------------------- */

.mw-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: var(--mw-color-surface);
    border: 1px solid var(--mw-color-border-strong);
    border-radius: 12px;
    color: var(--mw-color-text);
    cursor: pointer;
    transition: border-color var(--mw-transition), background-color var(--mw-transition);
}

.mw-nav-toggle:hover {
    border-color: var(--mw-color-primary);
}

/* Trzy kreski zbudowane ze srodkowego elementu i dwoch pseudoelementow.
   Po otwarciu skladaja sie w krzyzyk. */
.mw-nav-toggle__bars,
.mw-nav-toggle__bars::before,
.mw-nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--mw-transition), opacity var(--mw-transition), background-color var(--mw-transition);
}

.mw-nav-toggle__bars {
    position: relative;
}

.mw-nav-toggle__bars::before,
.mw-nav-toggle__bars::after {
    position: absolute;
    left: 0;
    content: "";
}

.mw-nav-toggle__bars::before { transform: translateY(-6px); }
.mw-nav-toggle__bars::after  { transform: translateY(6px); }

.mw-header--nav-open .mw-nav-toggle__bars         { background: transparent; }
.mw-header--nav-open .mw-nav-toggle__bars::before { transform: rotate(45deg); }
.mw-header--nav-open .mw-nav-toggle__bars::after  { transform: rotate(-45deg); }


/* --- Nawigacja mobilna (< 1024px) --------------------------------------
   Panel jest display:none, gdy zamkniety - dzieki temu linki nie lapia
   focusu przy tabowaniu, bez zadnych tabindex="-1" w markupie.
   Wartosc 1024px musi byc taka sama jak w custom/js/custom.js. */

@media (max-width: 1023.98px) {

    .mw-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 4px;
        padding: 12px var(--mw-gutter) 20px;
        background: var(--mw-color-surface);
        border-bottom: 1px solid var(--mw-color-border);
        box-shadow: var(--mw-shadow-md);
        /* Dluga lista nie moze wyjsc poza ekran - panel scrolluje sie sam,
           a strona pod spodem zostaje przewijalna (nie blokujemy body). */
        max-height: calc(100vh - var(--mw-header-h));
        max-height: calc(100dvh - var(--mw-header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mw-header--nav-open .mw-nav {
        display: flex;
    }

    .mw-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .mw-nav__list a {
        padding: 13px 12px;
        font-size: 16px;
    }

    .mw-nav__phone {
        margin-top: 10px;
        padding: 13px 12px;
        border-top: 1px solid var(--mw-color-border-soft);
        font-size: 17px;
    }

    .mw-header__cta {
        width: 100%;
        margin-top: 6px;
    }
}


/* --- Nawigacja desktopowa (>= 1024px) ---------------------------------- */

@media (min-width: 1024px) {

    .mw-nav {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Projekt trzyma menu nieco dalej od pary telefon + CTA (20px),
       a te dwa elementy blisko siebie (12px). */
    .mw-nav__list {
        margin-right: 8px;
    }

    .mw-nav-toggle {
        display: none;
    }
}


/* ==========================================================================
   5. HERO  (Etap B)
   ==========================================================================
   Shortcode [hero_image] renderuje sie wewnatrz <div class="container">
   z index.php, dlatego sekcja musi wyjsc na pelna szerokosc okna. Ten sam
   zabieg stosuje juz motyw w klasie .full-width.
   ========================================================================== */

.mw-hero {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    background: var(--mw-color-bg-subtle);
    border-bottom: 1px solid var(--mw-color-border-soft);
    text-align: left;
}

/* PRZEJSCIE HERO -> PIERWSZA SEKCJA TRESCI
   Przyczyna zbyt duzej pustki byla podwojna, nie jedna:
     1. legacy .pd-top { padding-top: 80px } (40px ponizej 768px) siedzi
        w tresci strony DWA RAZY - raz na .wp-block-columns, drugi raz na
        zagniezdzonej w niej .wp-block-column. Gutenberg dostal te klase na
        obu poziomach, wiec padding sie sumowal: 80 + 80 = 160px.
     2. do tego dochodzil dolny padding .mw-hero__inner (104px na 1440px).
   Razem 264px. Zerujemy wewnetrzna, zdublowana polowke i ustawiamy jedna
   swiadoma wartosc na wrapperze. Selektor jest zakotwiczony w .mw-hero
   (sasiad bezposredni), wiec dotyka wylacznie tego jednego przejscia -
   pozostale bloki .pd-top na stronie zostaja nietkniete.
   Bez ujemnych marginesow: to jest usuniecie duplikatu, nie maskowanie. */

.mw-hero + .wp-block-columns.pd-top {
    padding-top: clamp(48px, 5vw, 72px);
}

.mw-hero + .wp-block-columns.pd-top > .wp-block-column.pd-top {
    padding-top: 0;
}


/* Dekoracja: siatka linii przesuwajaca sie w pionie. */
.mw-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(#E5EFF5 1px, transparent 1px),
        linear-gradient(90deg, #E5EFF5 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: .7;
    animation: mwGrid 9s linear infinite;
}

/* Dekoracja: poswiata w kolorze marki. */
.mw-hero__glow {
    position: absolute;
    top: -160px;
    right: -120px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(42, 165, 212, .34), rgba(42, 165, 212, 0) 68%);
    animation: mwBlob 16s ease-in-out infinite;
}

.mw-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
    /* Dol jest nizszy od gory celowo: pod hero stoi wlasna linia (border-bottom
       sekcji), wiec odstep do niej nie musi byc taki jak do headera, ktory
       zadnej linii nie ma. Bylo clamp(64px, 8vw, 104px) - razem z paddingiem
       nastepnej sekcji dawalo 264px pustki na 1440px. */
    padding-block: clamp(56px, 7vw, 96px) clamp(52px, 5.6vw, 80px);
    animation: mwIn .5s ease both;
}


/* --- Kolumna z tekstem -------------------------------------------------- */

.mw-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 7px 14px 7px 10px;
    border: 1px solid #DCE9F1;
    border-radius: var(--mw-radius-pill);
    background: var(--mw-color-surface);
    box-shadow: var(--mw-shadow-sm);
    font-family: var(--mw-font-body);
    font-size: 13px;
    font-weight: var(--mw-weight-semibold);
    color: var(--mw-color-primary-strong);
}

.mw-hero__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mw-color-primary);
    flex: 0 0 auto;
}

.mw-hero__title {
    margin: 22px 0 0;
    font-family: var(--mw-font-display);
    font-weight: var(--mw-weight-bold);
    /* Prototyp: clamp(40px, 4.6vw, 66px) z twardymi <br> po trzech wierszach.
       Rozbite na dwa zakresy, bo naglowek ma tu dwie rozne szerokosci:
       ponizej 1024px stoi na calej szerokosci kontenera, powyzej - w wezszej
       kolumnie obok wizualizacji. Jedna formula obslugujaca oba przypadki
       albo dawala za maly tekst na tablecie, albo lamala go na cztery
       wiersze na desktopie.
       Ta wartosc dotyczy ukladu jednokolumnowego (< 1024px). */
    font-size: clamp(34px, 5.6vw, 46px);
    line-height: 1.04;
    letter-spacing: var(--mw-tracking-tight);
    color: var(--mw-color-text);
    text-wrap: balance;
}

/* Wyrozniona koncowka H1 ma sie roznic od reszty naglowka WYLACZNIE kolorem.
   Wymusza to komplet "inherit", bo legacy custom.css trafia w ten <span>
   dwiema globalnymi regulami na selektorze elementowym:
     - "body, p, h1..h6, span, li { font-family: 'Nunito', sans-serif }"
       podmienialo kroj na Nunito (naglowek jest w Sora),
     - "p, span, li { font-size: 16px }" zbijalo koncowke do 16px.
   Deklaracja bezposrednia na elemencie zawsze wygrywa z dziedziczeniem,
   niezaleznie od specyficznosci, wiec samo poleganie na inheritance
   nie wystarcza - kazda z tych wlasciwosci musi byc odzyskana jawnie.
   Pozostale (font-style, line-height, letter-spacing, font-weight) sa tu
   dopisane profilaktycznie, zeby kolejna globalna regula na "span" nie
   rozjechala naglowka po cichu. */
.mw-hero__accent {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: var(--mw-color-primary);
}

.mw-hero__lead {
    max-width: 520px;
    margin: 24px 0 0;
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-lead);
    line-height: var(--mw-leading-normal);
    color: var(--mw-color-text-muted);
    text-wrap: pretty;
}

.mw-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}


/* --- Statystyki --------------------------------------------------------
   Siatka zamiast flexa: przy 390px uklada sie w dwie kolumny zamiast
   sciskac trzy pozycje w jednym rzedzie. */

.mw-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 20px 28px;
    max-width: 560px;
    margin: 44px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid #E7EEF3;
    list-style: none;
}

.mw-hero__stat {
    margin: 0;
}

.mw-hero__stat-value {
    display: block;
    font-family: var(--mw-font-display);
    font-size: 26px;
    font-weight: var(--mw-weight-bold);
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--mw-color-text);
}

/* Pozycja tekstowa (nie liczba) - mniejszy stopien, zeby nie lamala sie
   na dwa wiersze i optycznie rownowazyla sie z liczbami obok. */
.mw-hero__stat-value--text {
    font-size: 19px;
    letter-spacing: -.01em;
}

/* j.w. - bez inherit gwiazdka spadlaby do 16px obok 26px liczby. */
.mw-hero__star {
    font-size: inherit;
    color: var(--mw-color-star);
}

.mw-hero__stat-label {
    display: block;
    margin-top: 3px;
    font-family: var(--mw-font-body);
    font-size: 13.5px;
    line-height: 1.45;
    color: #6B7B89;
}


/* --- Wizualizacja ------------------------------------------------------- */

.mw-hero__visual {
    position: relative;
}

.mw-hero__card {
    display: block;
    overflow: hidden;
    background: var(--mw-color-surface);
    border: 1px solid #E1EBF2;
    border-radius: 20px;
    box-shadow: var(--mw-shadow-lg);
    color: inherit;
    text-decoration: none;
    transition: transform var(--mw-transition), box-shadow var(--mw-transition);
}

.mw-hero__card:hover {
    transform: translateY(-4px);
}

.mw-hero__card:focus-visible {
    outline: 2px solid var(--mw-color-primary);
    outline-offset: 4px;
}

/* Pasek nad obrazem. W prototypie byla tu atrapa okna przegladarki
   (trzy kropki + pasek adresu). Materialem, ktorym dysponujemy, sa zdjecia
   mockupow z laptopem - atrapa okna wokol zdjecia laptopa dawalaby mockup
   w mockupie, wiec pasek niesie realna informacje o realizacji.
   Wysokosc, kolory i proporcje paska sa zachowane z projektu. */
.mw-hero__card-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: #F7FAFC;
    border-bottom: 1px solid #EBF1F6;
}

.mw-hero__card-eyebrow {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: var(--mw-radius-xs);
    background: var(--mw-color-primary-soft);
    font-family: var(--mw-font-body);
    font-size: 11px;
    font-weight: var(--mw-weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mw-color-primary-strong);
}

.mw-hero__card-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-family: var(--mw-font-body);
    font-size: 13px;
    font-weight: var(--mw-weight-semibold);
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #5B6B7A;
}

.mw-hero__card-arrow {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--mw-color-primary-strong);
    transition: transform var(--mw-transition);
}

.mw-hero__card:hover .mw-hero__card-arrow {
    transform: translateX(3px);
}

.mw-hero__card-media {
    display: block;
    /* Prototyp mial sztywne 380px. Proporcja zamiast wysokosci sprawia, ze
       kadr jest ten sam niezaleznie od tego, ktora realizacja tu trafi. */
    aspect-ratio: 16 / 9;
    background: var(--mw-color-surface-alt);
}

.mw-hero__card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mw-hero__float {
    position: absolute;
    left: 16px;
    bottom: -20px;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--mw-color-dark);
    color: var(--mw-color-text-on-dark);
    box-shadow: 0 24px 48px -20px rgba(11, 22, 34, .7);
    animation: mwFloat 6s ease-in-out infinite;
}

.mw-hero__float-label {
    display: block;
    font-family: var(--mw-font-body);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8FB9CD;
}

.mw-hero__float-value {
    display: block;
    margin-top: 4px;
    font-family: var(--mw-font-display);
    font-size: 24px;
    font-weight: var(--mw-weight-bold);
    line-height: 1.1;
}


/* --- Hero: warstwa mobilna --------------------------------------------- */

@media (max-width: 599.98px) {

    /* CTA na pelna szerokosc - wygodniejszy cel dotykowy i rowna kolumna
       zamiast dwoch przyciskow roznej dlugosci obok siebie. */
    .mw-hero__actions {
        gap: 12px;
    }

    .mw-hero__actions .mw-btn {
        width: 100%;
    }

    .mw-hero__title {
        max-width: none;
    }

    .mw-hero__stats {
        gap: 18px 20px;
        margin-top: 36px;
        padding-top: 24px;
    }

    .mw-hero__float {
        left: 12px;
        bottom: -16px;
        padding: 13px 17px;
    }

    .mw-hero__float-value {
        font-size: 20px;
    }
}

/* Ponizej 1024px wizualizacja stoi pod tekstem, wiec potrzebuje troche
   powietrza na plywajaca plakietke. */
@media (max-width: 1023.98px) {

    .mw-hero__visual {
        margin-bottom: 24px;
    }
}

/* Od 1024px kolumna tekstu jest nieco szersza od wizualizacji. Prototyp mial
   1fr / 1fr, ale przy tym podziale naglowek lamal sie na cztery wiersze
   zamiast trzech - a to trzywierszowy uklad jest tu calym pomyslem. */
@media (min-width: 1024px) {

    .mw-hero__inner {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }

    /* Uklad dwukolumnowy: gorna wartosc 60px zamiast 66px z prototypu.
       Przy 66px najdluzszy wiersz ("Strony internetowe,") ma 640px i nie
       miesci sie w kolumnie tekstu - w prototypie wychodzil poza nia
       i byl przycinany przez overflow sekcji. */
    .mw-hero__title {
        font-size: clamp(40px, 4.2vw, 60px);
    }
}

/* Tablet poziomy / maly laptop. Podzial 1.08 / 0.92 z reguly wyzej daje tu
   kolumne tekstu szerokosci ~491px, a to o kilkadziesiat pikseli za malo na
   dwie rzeczy naraz:
     - przyciski CTA (256 + 14 + 264 = 534px) zawijaly sie jeden pod drugi,
     - .mw-hero__stats (auto-fit, minmax 150px) schodzilo z trzech kolumn na
       dwie, przez co "Lekkie i szybkie" zostawalo samo w drugim rzedzie.
   Przesuwamy podzial na 1.5 / 1 i sciagamy gap do 40px: kolumna tekstu ma
   wtedy 552px na 1024px, wiec CTA mieszcza sie obok siebie z zapasem, a
   auto-fit samo wraca do trzech kolumn (3 x 150 + 2 x 28 = 506 < 552).
   Wizualizacja traci na tym 50px (418 -> 368) i nadal jest czytelna.
   Zakres konczy sie na 1199.98px - od 1200px oryginalny podzial ma juz
   dosc miejsca i zostaje bez zmian. */
@media (min-width: 1024px) and (max-width: 1199.98px) {

    .mw-hero__inner {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 40px;
    }
}


/* ==========================================================================
   6. ANIMACJE
   ========================================================================== */

@keyframes mwGrid {
    from { transform: translateY(0); }
    to   { transform: translateY(-64px); }
}

@keyframes mwBlob {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-40px, 30px) scale(1.15); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes mwFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes mwIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Wejscie sekcji strony glownej. Osobne od mwIn, bo mwIn animuje hero
   przy starcie strony i moze byc strojone niezaleznie. */
@keyframes mwReveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

    .mw-hero__grid,
    .mw-hero__glow,
    .mw-hero__float,
    .mw-hero__inner {
        animation: none;
    }

    .mw-hero__card,
    .mw-hero__card-arrow,
    .mw-nav-toggle__bars,
    .mw-nav-toggle__bars::before,
    .mw-nav-toggle__bars::after,
    .mw-header {
        transition: none;
    }

    .mw-hero__card:hover {
        transform: none;
    }
}


/* ==========================================================================
   7. STRONA GLOWNA  (Etap B2)
   ==========================================================================
   Sekcje renderowane przez front-page.php + template-parts/home/*.

   RYTM TLA - swiadomie naprzemienny, zeby dluga strona nie byla jedna
   plaszczyzna. Zmieniajac kolejnosc sekcji w front-page.php trzeba
   sprawdzic, czy dwa sasiadujace bloki nie maja tego samego tla:

     hero      bg-subtle       (Etap B)
     about     bialy
     features  surface-alt
     offer     bialy
     process   ciemny          <- przerywnik
     work      bialy
     counters  bialy, waski, z wloskiem u gory (czyta sie jak ciag dalszy work)
     reviews   surface-alt
     faq       bialy, waski kontener
     cta       surface-alt
     blog      bialy
     footer    granatowy       (legacy)

   KOLIZJE Z LEGACY CSS, ktore trzeba bylo obejsc:
     - "body, p, h1..h6, span, li { font-family: Nunito }" - selektor
       elementowy (0,0,1), wiec kazda klasa .mw-* go przebija. Dlatego
       kazdy element tekstowy w szablonach ma klase. Jedyne wyjatki to
       <p> w odpowiedzi FAQ i markup generowany przez CF7 - obslugiwane
       nizej regulami potomnymi.
     - "p, span, li { font-size: 16px }" - j.w.
     - "h2 { font-size: 41px; line-height: 48px; margin-bottom: 20px }" -
       przebite przez .mw-h2 z Etapu A.
   ========================================================================== */


/* --- Wspolne ----------------------------------------------------------- */

.mw-main {
    font-family: var(--mw-font-body);
    color: var(--mw-color-text);
}

/* Tresc tylko dla czytnikow ekranu (naglowek sekcji licznikow). */
.mw-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Naglowek sekcji: etykieta + H2 po lewej, link "wszystkie ..." po prawej.
   flex-end zamiast center, bo link ma sie rownac z DOLNA linia naglowka. */
.mw-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    flex-wrap: wrap;
    margin-bottom: clamp(34px, 4vw, 48px);
}

.mw-section-head__text {
    max-width: 640px;
}

.mw-section-head .mw-eyebrow {
    margin: 0;
}

.mw-section-head .mw-h2 {
    margin-top: 14px;
}

/* Link "Wszystkie realizacje" znika ponizej 768px - pod siatka stoi juz
   przycisk prowadzacy w to samo miejsce, a dwa identyczne CTA obok siebie
   na telefonie to szum. */
.mw-section-head__link {
    flex: 0 0 auto;
}

.mw-section-head--center {
    justify-content: center;
    text-align: center;
}

.mw-section-head--center .mw-section-head__text {
    margin-inline: auto;
}

.mw-section-head--center .mw-lead {
    margin-inline: auto;
}


/* --- 7.1 Nasza firma ---------------------------------------------------- */

.mw-about__inner {
    display: grid;
    gap: var(--mw-gap-lg);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.mw-about__media {
    position: relative;
    border-radius: var(--mw-radius-xl);
    overflow: hidden;
    border: 1px solid var(--mw-color-border);
    box-shadow: var(--mw-shadow-lg);
    /* Prototyp mial sztywne 440px. Proporcja zamiast wysokosci, zeby
       zdjecie nie bylo przycinane inaczej na kazdej szerokosci. */
    aspect-ratio: 4 / 3;
}

.mw-about__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mw-about__title {
    margin-top: 14px;
}

.mw-about__text {
    margin: 20px 0 0;
}

.mw-about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}


/* --- 7.2 Korzysci ------------------------------------------------------- */

.mw-features__title {
    max-width: 620px;
}

.mw-features__grid {
    display: grid;
    gap: var(--mw-gap);
    grid-template-columns: 1fr;
    margin: clamp(34px, 4vw, 52px) 0 0;
    padding: 0;
    list-style: none;
}

.mw-feature {
    background: var(--mw-color-surface);
    border: 1px solid var(--mw-color-border);
    border-radius: var(--mw-radius-lg);
    padding: clamp(22px, 2.6vw, 28px);
    transition: transform var(--mw-transition), box-shadow var(--mw-transition), border-color var(--mw-transition);
}

.mw-feature:hover {
    transform: translateY(-5px);
    box-shadow: var(--mw-shadow-md);
    border-color: #CFE3EE;
}

.mw-feature__no {
    display: block;
    font-family: var(--mw-font-display);
    font-size: 14px;
    font-weight: var(--mw-weight-bold);
    letter-spacing: .04em;
    color: var(--mw-color-primary);
}

.mw-feature__title {
    font-family: var(--mw-font-display);
    font-size: 19px;
    font-weight: var(--mw-weight-semibold);
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--mw-color-text);
    margin: 14px 0 0;
}

.mw-feature__text {
    font-family: var(--mw-font-body);
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--mw-color-text-subtle);
    margin: 10px 0 0;
}


/* --- 7.3 Oferta --------------------------------------------------------- */

.mw-offer__grid {
    display: grid;
    gap: var(--mw-gap);
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-offer-card {
    display: flex;
}

.mw-offer-card__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--mw-color-surface);
    border: 1px solid var(--mw-color-border);
    border-radius: var(--mw-radius-xl);
    padding: clamp(24px, 3vw, 32px);
    color: var(--mw-color-text);
    text-decoration: none;
    transition: transform var(--mw-transition), box-shadow var(--mw-transition), border-color var(--mw-transition);
}

/* Uniesienie tylko dla kart, ktore sa linkiem - karta bez linku nie
   powinna udawac klikalnej. */
.mw-offer-card--link .mw-offer-card__inner:hover,
.mw-offer-card--link .mw-offer-card__inner:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--mw-shadow-md);
    border-color: #CFE3EE;
    color: var(--mw-color-text);
}

.mw-offer-card__no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 13px;
    background: var(--mw-color-primary-soft);
    font-family: var(--mw-font-display);
    font-size: 16px;
    font-weight: var(--mw-weight-bold);
    color: var(--mw-color-primary);
}

.mw-offer-card__title {
    font-family: var(--mw-font-display);
    font-size: clamp(19px, 1.7vw, 22px);
    font-weight: var(--mw-weight-semibold);
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--mw-color-text);
    margin: 20px 0 0;
}

.mw-offer-card__text {
    font-family: var(--mw-font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--mw-color-text-subtle);
    margin: 10px 0 0;
}

.mw-offer-card__more {
    margin-top: auto;
    padding-top: 20px;
    font-family: var(--mw-font-body);
    font-size: 14.5px;
    font-weight: var(--mw-weight-bold);
    color: var(--mw-color-primary-strong);
}

.mw-offer__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: clamp(36px, 4vw, 52px);
    text-align: center;
}

.mw-offer__cta-note {
    margin: 0;
}

.mw-offer .mw-section-head__text {
    max-width: 960px;
}

.mw-offer__intro {
    max-width: 760px;
    margin-top: 14px;
}

.mw-offer-card--primary .mw-offer-card__inner {
    background: var(--mw-color-primary-soft);
    border-color: #CFE3EE;
}

.mw-offer-card--primary .mw-offer-card__title {
    font-size: clamp(22px, 2vw, 28px);
}

.mw-offer-card--primary .mw-offer-card__text {
    max-width: 820px;
}


/* --- 7.4 Proces --------------------------------------------------------- */

.mw-process {
    position: relative;
    overflow: hidden;
}

.mw-process__glow {
    position: absolute;
    top: -200px;
    left: -140px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(42, 165, 212, .32), rgba(42, 165, 212, 0) 66%);
    animation: mwBlob 20s ease-in-out infinite;
    pointer-events: none;
}

.mw-process__inner {
    position: relative;
}

.mw-process__grid {
    display: grid;
    gap: clamp(26px, 3vw, 32px);
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.mw-step {
    border-top: 2px solid var(--mw-color-border-on-dark);
    padding-top: 22px;
}

.mw-step__no {
    display: block;
    font-family: var(--mw-font-display);
    font-size: 13px;
    font-weight: var(--mw-weight-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mw-color-primary);
}

.mw-step__title {
    font-family: var(--mw-font-display);
    font-size: 20px;
    font-weight: var(--mw-weight-semibold);
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--mw-color-text-on-dark);
    margin: 12px 0 0;
}

.mw-step__text {
    font-family: var(--mw-font-body);
    font-size: 14.5px;
    line-height: 1.66;
    color: var(--mw-color-text-on-dark-muted);
    margin: 8px 0 0;
}


/* --- 7.5 Realizacje ----------------------------------------------------- */

.mw-work__grid {
    display: grid;
    gap: var(--mw-gap);
    grid-template-columns: 1fr;
}

.mw-work__more {
    display: flex;
    justify-content: center;
    margin-top: clamp(28px, 3.5vw, 40px);
}

/* Kafel realizacji. Uzywany w trzech miejscach (strona glowna, listing
   /projekty, odpowiedzi AJAX), wiec wszystkie reguly musza dzialac bez
   zadnego kontekstu nadrzednego - stad brak prefiksu .mw-main. */
.mw-work-card {
    margin: 0;
    min-width: 0;
}

.mw-work-card__link {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--mw-color-border);
    border-radius: var(--mw-radius-lg);
    background: var(--mw-color-surface-alt);
    text-decoration: none;
    /* Stala proporcja daje rowne rzedy niezaleznie od proporcji zdjec -
       wczesniej kafle mialy rozne wysokosci i siatka byla porwana. */
    aspect-ratio: 4 / 3;
    transition: transform var(--mw-transition), box-shadow var(--mw-transition), border-color var(--mw-transition);
}

.mw-work-card__link:hover,
.mw-work-card__link:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--mw-shadow-md);
    border-color: #CFE3EE;
}

.mw-work-card__link:focus-visible {
    outline: 2px solid var(--mw-color-primary);
    outline-offset: 3px;
}

.mw-work-card__media {
    position: absolute;
    inset: 0;
    display: block;
}

.mw-work-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 400ms ease;
}

.mw-work-card__link:hover .mw-work-card__img {
    transform: scale(1.04);
}

/* Pasek z opisem. Gradient zamiast pelnej przeslony z legacy (.overlay
   mial rgba(0,0,0,.5) na CALYM kaflu i pojawial sie tylko na hover -
   na dotyku tytul byl wiec niedostepny). Teraz widac go zawsze. */
.mw-work-card__body {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 44px 18px 16px;
    background: linear-gradient(to top, rgba(6, 14, 22, .88) 12%, rgba(6, 14, 22, .58) 52%, rgba(6, 14, 22, 0) 100%);
    color: #fff;
}

.mw-work-card__cat {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--mw-radius-pill);
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: var(--mw-font-body);
    font-size: 11.5px;
    font-weight: var(--mw-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

.mw-work-card__title {
    font-family: var(--mw-font-display);
    font-size: 18px;
    font-weight: var(--mw-weight-semibold);
    letter-spacing: -.01em;
    line-height: 1.25;
    color: #fff;
    margin: 0;
    /* Tytuly realizacji to zwykle jedno slowo (nazwa firmy), ale
       dlugie nazwy nie moga rozpychac kafla. */
    overflow-wrap: anywhere;
}

.mw-work-card__arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--mw-color-text);
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--mw-transition), transform var(--mw-transition);
}

.mw-work-card__link:hover .mw-work-card__arrow,
.mw-work-card__link:focus-visible .mw-work-card__arrow {
    opacity: 1;
    transform: none;
}


/* --- 7.6 Liczniki ------------------------------------------------------- */

/* Waski pas doklejony wizualnie do sekcji realizacji: wlosek u gory,
   brak wlaska u dolu. Czyta sie jak podsumowanie portfolio, a nie
   jak osobna sekcja - dzieki temu trzy biale bloki z rzedu nie zlewaja sie
   w jedna plaszczyzne. */
.mw-counters {
    padding-block: clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--mw-color-border-soft);
}

.mw-counters__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-counter {
    text-align: center;
}

.mw-counter__value {
    font-family: var(--mw-font-display);
    font-size: clamp(38px, 5vw, 60px);
    font-weight: var(--mw-weight-bold);
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--mw-color-text);
    margin: 0;
}

.mw-counter__label {
    font-family: var(--mw-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--mw-color-text-muted);
    margin: 10px 0 0;
}


/* --- 7.7 Opinie Google -------------------------------------------------- */

/* UWAGA: nizej stylujemy WYLACZNIE otoczenie widgetu. Wnetrze (karty opinii,
   awatary, gwiazdki) renderuje wtyczka Trustindex wlasnym CSS-em i celowo
   go nie nadpisujemy - kazda taka regula pekłaby przy aktualizacji wtyczki.
   Jedyne, co robimy z samym widgetem, to wysrodkowanie go w kontenerze. */

.mw-reviews__score {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: clamp(32px, 4vw, 44px);
}

.mw-reviews__value {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--mw-font-display);
    font-size: clamp(48px, 6vw, 72px);
    font-weight: var(--mw-weight-bold);
    letter-spacing: -.04em;
    line-height: .95;
    color: var(--mw-color-text);
    margin: 0;
}

.mw-reviews__max {
    font-family: var(--mw-font-body);
    font-size: 15px;
    font-weight: var(--mw-weight-bold);
    letter-spacing: 0;
    color: var(--mw-color-text-faint);
}

.mw-reviews__stars {
    font-size: 22px;
    letter-spacing: .08em;
    color: var(--mw-color-star);
    margin: 10px 0 0;
}

.mw-reviews__note {
    font-family: var(--mw-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--mw-color-text-subtle);
    margin: 12px 0 0;
}

.mw-reviews__widget {
    margin-inline: auto;
}


/* --- 7.8 FAQ ------------------------------------------------------------ */

.mw-faq__title {
    text-align: center;
}

.mw-faq__list {
    margin-top: clamp(34px, 4vw, 48px);
    border-top: 1px solid var(--mw-color-border);
}

.mw-faq__item {
    border-bottom: 1px solid var(--mw-color-border);
}

/* Domyslny trojkat <summary> - usuwany w obu skladniach, bo Safari
   do dzis potrzebuje wariantu -webkit-. */
.mw-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 2px;
    cursor: pointer;
    list-style: none;
    transition: color var(--mw-transition);
}

.mw-faq__q::-webkit-details-marker {
    display: none;
}

.mw-faq__q:hover,
.mw-faq__item[open] .mw-faq__q {
    color: var(--mw-color-primary-strong);
}

.mw-faq__q:focus-visible {
    outline: 2px solid var(--mw-color-primary);
    outline-offset: 2px;
    border-radius: var(--mw-radius-xs);
}

.mw-faq__q-text {
    font-family: var(--mw-font-display);
    font-size: clamp(16.5px, 1.6vw, 19px);
    font-weight: var(--mw-weight-semibold);
    letter-spacing: -.01em;
    line-height: 1.35;
    color: inherit;
}

/* Plus rysowany CSS-em, ktory po otwarciu zamienia sie w minus.
   Bez glifu i bez ikony z pliku. */
.mw-faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.mw-faq__icon::before,
.mw-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--mw-color-primary);
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform var(--mw-transition), opacity var(--mw-transition);
}

.mw-faq__icon::before {
    width: 16px;
    height: 2px;
}

.mw-faq__icon::after {
    width: 2px;
    height: 16px;
}

.mw-faq__item[open] .mw-faq__icon::after {
    transform: translate(-50%, -50%) scaleY(0);
    opacity: 0;
}

.mw-faq__a {
    padding: 0 44px 24px 2px;
    max-width: 760px;
}

/* <p> bez klasy - jedyne miejsce w szablonach strony glownej, gdzie
   trzeba przebic legacy "p { font-family: Nunito; font-size: 16px }". */
.mw-faq__a p {
    font-family: var(--mw-font-body);
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--mw-color-text-muted);
    margin: 0;
}


/* --- 7.9 Koncowe CTA ---------------------------------------------------- */

.mw-cta__inner {
    display: grid;
    gap: var(--mw-gap-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    align-items: stretch;
}

.mw-cta__copy .mw-h2 {
    margin-top: 14px;
}

.mw-cta__lead {
    margin: 18px 0 0;
}

.mw-cta__channels {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.mw-channel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--mw-color-surface);
    border: 1px solid var(--mw-color-border);
    border-radius: var(--mw-radius-md);
    color: var(--mw-color-text);
    text-decoration: none;
    transition: border-color var(--mw-transition), transform var(--mw-transition);
}

.mw-channel:hover,
.mw-channel:focus-visible {
    border-color: var(--mw-color-primary);
    color: var(--mw-color-text);
    transform: translateY(-2px);
}

.mw-channel__label {
    flex: 0 0 84px;
    font-family: var(--mw-font-display);
    font-size: 12.5px;
    font-weight: var(--mw-weight-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mw-color-primary);
}

.mw-channel__value {
    font-family: var(--mw-font-body);
    font-size: 17px;
    font-weight: var(--mw-weight-bold);
    /* Jawny line-height, a nie "normal". Kafel WhatsAppa ma tu flexa
       (ikona + tekst), a przy "normal" kontener flex liczy wysokosc linii
       inaczej niz zwykly blok - kafel wychodzil o 1px nizszy od telefonu
       i e-maila. Przy jawnej wartosci wszystkie trzy maja identyczna
       wysokosc, niezaleznie od tego, co jest w srodku. */
    line-height: 1.35;
    overflow-wrap: anywhere;
}


/* --- 7.10 Formularz (Contact Form 7) ------------------------------------
   Stylujemy markup, ktory generuje wtyczka - stad selektory potomne
   zamiast klas w szablonie. Nie modyfikujemy definicji formularza w bazie.

   Legacy reguly #wpcf7-f223-o1/-o2 (bialy tekst na przezroczystym tle)
   zostaly w custom.css zawezone do stopki - patrz komentarz w tamtym pliku.
   Dzieki temu ponizsze klasy nie musza walczyc ze specyficznoscia ID. */

.mw-form {
    background: var(--mw-color-surface);
    border: 1px solid var(--mw-color-border);
    border-radius: var(--mw-radius-xl);
    padding: clamp(24px, 3vw, 36px);
    box-shadow: var(--mw-shadow-lg);
}

/* Naglowek pochodzi z tresci formularza CF7 ("Dowiedz sie wiecej...").
   Nie usuwamy go z bazy - przejmujemy tylko jego wyglad. */
.mw-form h3 {
    font-family: var(--mw-font-display);
    font-size: 20px;
    font-weight: var(--mw-weight-semibold);
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--mw-color-text);
    margin: 0 0 4px;
}

.mw-form hr {
    height: 1px;
    border: 0;
    background: var(--mw-color-border);
    margin: 16px 0 20px;
    opacity: 1;
}

.mw-form p {
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-body);
    color: var(--mw-color-text-muted);
    margin: 0 0 14px;
}

.mw-form input[type="email"],
.mw-form input[type="text"],
.mw-form input[type="tel"],
.mw-form select,
.mw-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 17px;
    border: 1px solid #E1EAF1;
    border-radius: 13px;
    background: var(--mw-color-bg-subtle);
    font-family: var(--mw-font-body);
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--mw-color-text);
    transition: border-color var(--mw-transition), background-color var(--mw-transition);
}

.mw-form textarea {
    min-height: 130px;
    resize: vertical;
}

.mw-form input::placeholder,
.mw-form textarea::placeholder {
    color: #91A2AF;
    font-size: 15px;
}

.mw-form input:focus,
.mw-form select:focus,
.mw-form textarea:focus {
    outline: none;
    border-color: var(--mw-color-primary);
    background: var(--mw-color-surface);
}

/* Zgoda RODO - checkbox obok drobnego tekstu. CF7 owija ja w
   <span class="wpcf7-list-item">, ktory domyslnie ma wlasny margines. */
.mw-form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.mw-form .wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}

/* Checkbox zgody RODO.

   "width: auto" dawalo systemowe 13x13 px - ponizej minimum pola dotykowego
   (WCAG 2.5.8 mowi o 24px) i trudne do trafienia kciukiem. Rozmiar jest
   ustawiony TYLKO TUTAJ: wczesniej druga regula probowala go poprawiac
   z nizsza specyficznoscia, przez co checkbox mial 13px szerokosci i 20px
   wysokosci naraz - byl prostokatem.

   accent-color spina go z paleta marki zamiast domyslnego niebieskiego
   przegladarki. */
.mw-form .wpcf7-acceptance input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: 1px;
    accent-color: var(--mw-color-primary);
    cursor: pointer;
}

/* Zgoda RODO. TRESCI NIE RUSZAMY - pochodzi z definicji formularza w bazie
   i jest oswiadczeniem woli, wiec nie jest nasza do przepisywania.
   Zmienia sie wylacznie czytelnosc.

   Bylo: 12.5px w kolorze --mw-color-text-faint (#93A3AF), czyli kontrast
   ok. 2.4:1 na bialym tle - ponizej progu WCAG AA (4.5:1) i grubo ponizej
   tego, co da sie odczytac bez wysilku. Tekst, pod ktorym ktos podpisuje
   sie klikajac checkbox, nie moze byc najslabiej widocznym elementem
   formularza.

   Jest: 13.5px w --mw-color-text-muted (#4E6070), czyli ok. 7.1:1.
   Nadal wyraznie drobniejsza od pol formularza, wiec hierarchia sie nie
   zmienia - tekst po prostu daje sie przeczytac. */
.mw-form .wpcf7-acceptance .wpcf7-list-item-label {
    font-family: var(--mw-font-body);
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--mw-color-text-muted);
}

/* Odnosnik do polityki prywatnosci wewnatrz zgody - musi byc rozpoznawalny
   jako odnosnik, a nie tylko innym odcieniem szarosci. */
.mw-form .wpcf7-acceptance .wpcf7-list-item-label a {
    color: var(--mw-color-primary-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mw-form input[type="submit"] {
    width: 100%;
    min-height: 56px;
    padding: 16px 30px;
    border: 0;
    border-radius: var(--mw-radius-md);
    background: var(--mw-color-primary);
    box-shadow: var(--mw-shadow-primary);
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-button);
    font-weight: var(--mw-weight-bold);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--mw-transition), transform var(--mw-transition);
}

.mw-form input[type="submit"]:hover {
    background: var(--mw-color-primary-strong);
    transform: translateY(-1px);
}

.mw-form input[type="submit"]:focus-visible {
    outline: 2px solid var(--mw-color-primary);
    outline-offset: 3px;
}

/* Informacja o reCAPTCHA na koncu formularza. Ten sam problem co przy
   zgodzie RODO, tylko ostrzejszy: 11.5px w kolorze o kontrascie 2.4:1.
   To informacja o przetwarzaniu danych przez Google - ma byc drobna, ale
   ma dac sie przeczytac. */
.mw-form small {
    display: block;
    margin-top: 14px;
    font-family: var(--mw-font-body);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--mw-color-text-muted);
}

.mw-form small a {
    color: var(--mw-color-primary-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Komunikaty walidacji CF7. */
.mw-form .wpcf7-not-valid-tip {
    font-family: var(--mw-font-body);
    font-size: 13px;
    color: #C0392B;
    margin-top: 6px;
}

.mw-form .wpcf7-response-output {
    font-family: var(--mw-font-body);
    font-size: 14.5px;
    line-height: 1.55;
    border-radius: var(--mw-radius-sm);
    border-width: 1px;
    margin: 18px 0 0;
    padding: 14px 16px;
}

.mw-form .wpcf7-spinner {
    margin: 0 auto;
    display: block;
}


/* --- 7.11 Blog ----------------------------------------------------------

   WSZYSTKIE WARTOSCI PONIZEJ POCHODZA Z PLIKU ZRODLOWEGO REBRANDINGU
   ("MatWeb - strona (offline).html"). To nie jest kolejna interpretacja -
   to przepisanie stylow inline z dwoch widokow tego pliku.

   Sa DWA WIDOKI tych samych danych i celowo wygladaja inaczej:

     .mw-post-card--card  -> widok isHome, sekcja "Blog" na stronie glownej.
        Pionowy kafel w siatce auto-fit minmax(280px, 1fr), obraz na gorze.

     .mw-post-card--row   -> widok isBlog, listing /blog.
        Pozioma pozycja listy: obraz w lewej kolumnie 220-320px, tresc
        w prawej, pozycje jedna pod druga z odstepem 22px.

   Markup jest w obu przypadkach ten sam (post-card.php) - rozni je
   wylacznie klasa modyfikujaca. */


/* --- 7.11.1 Wspolne dla obu widokow ------------------------------------ */

.mw-post-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--mw-color-surface);
    /* #E5EDF3 z pliku zrodlowego = --mw-color-border. */
    border: 1px solid var(--mw-color-border);
    border-radius: 20px;
    color: var(--mw-color-text);
    text-decoration: none;
}

.mw-post-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.mw-post-card__media {
    display: block;
    overflow: hidden;
    background: var(--mw-color-surface-alt);
}

.mw-post-card__body {
    display: flex;
    flex-direction: column;
}

.mw-post-card__date {
    font-family: var(--mw-font-body);
    font-size: 12.5px;
    font-weight: var(--mw-weight-semibold);
    color: var(--mw-color-text-faint);   /* #93A3AF */
}

.mw-post-card__title {
    font-family: var(--mw-font-display);
    font-weight: var(--mw-weight-semibold);
    color: var(--mw-color-text);
    margin: 12px 0 0;
}

.mw-post-card__excerpt {
    display: block;
    font-family: var(--mw-font-body);
    color: var(--mw-color-text-subtle);   /* #5B6B7A */
    margin-top: 12px;
}

.mw-post-card__more {
    display: block;
    font-family: var(--mw-font-body);
    font-size: 14.5px;
    font-weight: var(--mw-weight-bold);
    color: var(--mw-color-primary-strong);   /* #1B7FA8 */
}


/* --- 7.11.2 Widok kafla: sekcja bloga na stronie glownej --------------- */

.mw-posts__grid {
    display: grid;
    gap: var(--mw-gap);
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-post-card--card {
    display: flex;
}

/* Uniesienie i cien dokladnie jak w pliku zrodlowym:
   translateY(-6px) + 0 34px 60px -36px rgba(11,22,34,.42) */
.mw-post-card--card .mw-post-card__link {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mw-post-card--card .mw-post-card__link:hover,
.mw-post-card--card .mw-post-card__link:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 34px 60px -36px rgba(11, 22, 34, .42);
    color: var(--mw-color-text);
}

/* Stala wysokosc 200px, a nie proporcja - tak jest w pliku zrodlowym.
   Dzieki temu wszystkie trzy kafle maja obraz tej samej wysokosci
   niezaleznie od proporcji zdjecia. */
.mw-post-card--card .mw-post-card__media {
    height: 200px;
}

.mw-post-card--card .mw-post-card__link:hover .mw-post-card__img {
    transform: scale(1.04);
}

.mw-post-card--card .mw-post-card__body {
    flex: 1 1 auto;
    padding: 26px 24px 28px;
}

.mw-post-card--card .mw-post-card__title {
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.mw-post-card--card .mw-post-card__excerpt {
    font-size: 14.5px;
    line-height: 1.62;
}

.mw-post-card--card .mw-post-card__more {
    margin-top: auto;
    padding-top: 20px;
}


/* --- 7.11.3 Widok pozycji listy: /blog, archiwa, wyszukiwarka ---------- */

.mw-posts__list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-post-card--row {
    display: block;
}

/* Obraz po lewej (220-320px), tresc po prawej. Wysokosc pozycji wynika
   z wyzszej z dwoch kolumn, wiec przy dlugim tytule rosnie razem z nim. */
.mw-post-card--row .mw-post-card__link {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(260px, 1fr);
    gap: 32px;
    align-items: center;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* W pliku zrodlowym pozycja listy reaguje SAMA RAMKA - bez unoszenia
   i bez cienia. Uniesienie jest zarezerwowane dla kafli na stronie
   glownej, zeby dwa widoki nie zachowywaly sie identycznie. */
.mw-post-card--row .mw-post-card__link:hover,
.mw-post-card--row .mw-post-card__link:focus-visible {
    border-color: var(--mw-color-primary);
    color: var(--mw-color-text);
}

/* 220px z pliku zrodlowego jest tu MINIMUM, a nie sztywna wysokoscia.
   W pliku zrodlowym tytuly sa krotkie, wiec kolumna z trescia nigdy nie
   przerasta obrazu. Prawdziwe tytuly wpisow bywaja dwuwierszowe - przy
   sztywnych 220px obraz zostawal wtedy wysrodkowany, z bialymi pasami nad
   i pod soba. "align-self: stretch" (przebija align-items: center z siatki)
   sprawia, ze kolumna z obrazem zawsze siega gory i dolu pozycji. */
.mw-post-card--row .mw-post-card__media {
    min-height: 220px;
    align-self: stretch;
}

/* Padding tylko z trzech stron - od strony obrazu odstep daje gap: 32px. */
.mw-post-card--row .mw-post-card__body {
    padding: 28px 32px 28px 0;
}

.mw-post-card--row .mw-post-card__title {
    font-size: 24px;
    line-height: 1.28;
    letter-spacing: -.015em;
}

.mw-post-card--row .mw-post-card__excerpt {
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 640px;
}

.mw-post-card--row .mw-post-card__more {
    margin-top: 18px;
}

/* Wpis bez obrazka wyrozniajacego - tresc zajmuje cala szerokosc pozycji,
   zamiast zostawiac pusta kolumne po lewej. */
.mw-post-card--row .mw-post-card__link:not(:has(.mw-post-card__media)) {
    grid-template-columns: 1fr;
}

.mw-post-card--row .mw-post-card__link:not(:has(.mw-post-card__media)) .mw-post-card__body {
    padding: 28px 32px;
}


/* --- 7.11.4 Listing /blog: sekcja -------------------------------------
   Padding sekcji 88px u gory / 110px u dolu - wartosci z pliku zrodlowego
   (section style="padding:88px 32px 110px"), przeskalowane clampem, zeby
   na telefonie nie zjadaly pol ekranu. */

.mw-blog-listing {
    padding-block: clamp(40px, 5vw, 88px) var(--mw-section-y);
}

.mw-blog-listing .mw-work-listing__more {
    padding-bottom: 0;
    margin-top: clamp(28px, 3.5vw, 44px);
}


/* --- 7.12 Listing /projekty (skutek uboczny wspolnego kafla) ------------
   Kafel realizacji jest wspolny dla strony glownej i listingu, wiec listing
   dostaje nowy wyglad automatycznie. Trzeba przy tym wylaczyc stary uklad:
   .masonry ustawia column-count: 3, a .project-tiles bylo flexem z .item
   plywajacym na 25% szerokosci.

   NIE ZMIENIAMY PRZY TYM MARKUPU listingu ani handlerow AJAX-a - siatka
   przyjmuje kafle doklejane przez "Zobacz wiecej" i filtr kategorii tak
   samo jak te renderowane serwerowo. */


/* --- 7.12.-1 Pasek administratora WordPressa ----------------------------

   Widoczne TYLKO DLA ZALOGOWANYCH. #wpadminbar jest przypiety na sztywno
   do gornej krawedzi okna, wiec element sticky z "top: 0" chowa sie pod
   nim. Zanim naprawilismy przyklejanie (sekcja nizej), nie bylo tego widac,
   bo naglowek po prostu odjezdzal do gory razem z trescia.

   Progi sa te same, ktore stosuje sam WordPress: pasek ma 32px na szerokich
   ekranach, 46px ponizej 783px, a ponizej 601px przestaje byc przypiety
   i przewija sie razem ze strona - wtedy zadne przesuniecie nie jest
   potrzebne. Odwiedzajacy niezalogowany nie ma klasy .admin-bar na <body>,
   wiec dla niego nic sie nie zmienia. */

body.admin-bar .mw-header {
    top: 32px;
}

body.admin-bar .mw-work-filter,
body.admin-bar #portfolio-menu.scrolled-header {
    top: calc(var(--mw-header-h) + 32px);
}

@media (max-width: 782px) {

    body.admin-bar .mw-header {
        top: 46px;
    }

    body.admin-bar .mw-work-filter,
    body.admin-bar #portfolio-menu.scrolled-header {
        top: calc(var(--mw-header-h) + 46px);
    }
}

@media (max-width: 600px) {

    /* Pasek przestaje byc przypiety - naglowek wraca na gorna krawedz. */
    body.admin-bar .mw-header {
        top: 0;
    }

    body.admin-bar .mw-work-filter,
    body.admin-bar #portfolio-menu.scrolled-header {
        top: var(--mw-header-h);
    }
}


/* --- 7.12.0 WARUNEK DZIALANIA "position: sticky" W CALYM SERWISIE -------

   Legacy custom.css otwiera plik regula "body, html { overflow-x: hidden }".
   Ma ona sens (blokuje poziome przewijanie, gdy cokolwiek wystaje poza
   ekran), ale ma skutek uboczny, ktory ZABIJAL KAZDY ELEMENT STICKY
   w serwisie - nie tylko pasek filtrow, rowniez naglowek strony.

   Mechanizm: gdy "overflow-x" jest inny niz visible, a "overflow-y"
   zostaje domyslne, przegladarka wylicza "overflow-y: auto". Body staje sie
   wtedy WLASNYM kontenerem przewijania. Dla elementu sticky najblizszym
   przewijanym przodkiem przestaje byc okno, a staje sie body - ktore samo
   nigdy sie nie przewija, bo przewija sie dokument. Element nie ma wiec
   wzgledem czego sie przykleic i zachowuje sie jak zwykly static.
   Sprawdzone na renderowanej stronie: przed ta poprawka #mw-header
   odjezdzal do gory razem z trescia.

   "overflow-x: clip" tnie tak samo, ale NIE tworzy kontenera przewijania:
   clip i visible moga wystepowac razem, wiec overflow-y zostaje visible
   i sticky dziala.

   @supports, bo przegladarka bez obslugi "clip" ma zostac przy wersji
   z custom.css - lepiej brak przyklejania niz poziomy pasek przewijania. */

@supports (overflow: clip) {

    html,
    body {
        overflow-x: clip;
    }
}


.mw-work-filter {
    position: sticky;
    top: var(--mw-header-h);
    /* Ponizej naglowka (z-index: 60), powyzej kafli. */
    z-index: 50;
    padding-block: clamp(18px, 2.2vw, 26px);
    /* Nieprzezroczyste tlo jest tu WARUNKIEM DZIALANIA, a nie ozdoba:
       przez przezroczysty pasek widac by bylo przesuwajace sie pod nim
       kafle, dokladnie za napisami filtrow. */
    background: var(--mw-color-bg);
    transition: box-shadow var(--mw-transition), border-color var(--mw-transition);
    border-bottom: 1px solid transparent;
}

/* Przypiety pasek - delikatna kreska i cien pokazuja, ze tresc plynie pod
   nim. Selektor z ID przebija legacy "#portfolio-menu.scrolled-header",
   ktore ustawialo position/bottom/left/right. */
#portfolio-menu.scrolled-header {
    position: sticky;
    top: var(--mw-header-h);
    /* Zerowanie legacy: bottom/right/left: 0 przy sticky probowalyby
       przypiac pasek rownoczesnie do dolu i do boku okna. */
    inset-inline: auto;
    bottom: auto;
    background: var(--mw-color-bg);
    border-top: 0;
    border-bottom: 1px solid var(--mw-color-border-soft);
    box-shadow: 0 10px 30px -24px rgba(11, 22, 34, .55);
    /* Wysokosc paska MUSI byc taka sama w obu stanach, inaczej w momencie
       przypiecia listing podskakuje. Legacy zmienialo ja z 40px na 12px. */
    padding-block: clamp(18px, 2.2vw, 26px);
}

/* Legacy "#portfolio-menu.scrolled-header ul { padding: 15px 0 !important }"
   dokladalo 30px wysokosci dopiero po przypieciu - stad musi tu byc
   !important, zeby pasek nie zmienial wysokosci w trakcie przewijania. */
#portfolio-menu.scrolled-header ul.cat-list {
    padding: 0 !important;
    margin: 0 !important;
}

.project-tiles.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--mw-gap);
    /* .masonry z legacy ustawia column-count: 3 - przy siatce trzeba to zdjac,
       inaczej Grid i uklad wielokolumnowy walcza o te same dzieci. */
    column-count: initial;
    /* Legacy .project-tiles wymusza padding-right: 10px !important. */
    padding-right: var(--mw-gutter) !important;
    padding-left: var(--mw-gutter) !important;
    padding-bottom: var(--mw-section-y-tight);
}

/* Shortcode [portfolio_home] nie jest juz uzywany na stronie glownej
   (sekcje renderuje template-parts/home/portfolio.php), ale zostaje
   zarejestrowany. Gdyby ktos wstawil go na innej podstronie, kafle maja
   trafic w siatke, a nie w legacy .d-flex z plywajacymi .item. */
.short-portfolio-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--mw-gap);
}

.mw-work-listing__more {
    display: flex;
    justify-content: center;
    padding-bottom: var(--mw-section-y);
}

/* Prace graficzne (logo, wizytowki, plakaty) maja bardzo rozne proporcje.
   Na listingu pokazujemy je w calosci - kadrowanie 4:3 obcinaloby np. logo.
   Na stronie glownej zostaje "cover", bo tam liczy sie rowny rytm siatki.

   FINAL POLISH - "top" zamiast "center" w object-position.
   Zmiana dotyczy WYLACZNIE listingu; strona glowna zostaje nietknieta.

   "contain" sprawia, ze nic nie jest przyciete geometrycznie, ale przy
   wysrodkowaniu wolne miejsce (efekt roznicy proporcji) rozklada sie po
   rowno na gore i na dol - a na dole stoi gradient z kategoria i tytulem,
   ktory zakrywa ok. 54% wysokosci kadru. Pomiar dziesieciu kafli listingu:
   realizacje z kategorii "Strony internetowe" maja proporcje 1.90 przy
   kaflu 1.33, czyli 30% wolnego miejsca - polowa tego zapasu wisiala nad
   obrazem bezuzytecznie, a dol projektu chowal sie pod napisem.

   Wyrownanie do gory przesuwa CALY zapas pod podpis: przy proporcji 1.90
   obraz ma 145px w kadrze 207px, wiec zostaje 62px luzu - mniej wiecej
   tyle, ile ma nieprzezroczysta czesc gradientu. Projekt przestaje byc
   przez nia zaslaniany.

   To jedna deklaracja: rozmiar kafla, siatka, overlay, hover i typografia
   zostaja bez zmian, obraz nie jest deformowany ani skalowany.

   OGRANICZENIE: realizacje o proporcji bliskiej 4:3 (czesc wizytowek) nie
   maja zadnego zapasu do przesuniecia, wiec u nich podpis nadal lezy na
   zdjeciu - tak samo jak przed zmiana. Poprawa tego wymagalaby przebudowy
   samego kafla, a ta zostala odrzucona. */
.project-tiles .mw-work-card__img {
    object-fit: cover;
    object-position: center top;
    background: var(--mw-color-surface);
}

/* Filtr kategorii. Te same selektory co w custom.css - rebrand.css jest
   ladowany pozniej, wiec przy rownej specyficznosci wygrywaja te reguly. */
ul.cat-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 0;
}

ul.cat-list li {
    margin: 0;
    padding: 0;
    border: 1px solid var(--mw-color-border-strong);
    border-radius: var(--mw-radius-pill);
    background: var(--mw-color-surface);
    transition: background-color var(--mw-transition), border-color var(--mw-transition);
}

ul.cat-list li a {
    display: block;
    padding: 10px 18px;
    font-family: var(--mw-font-body);
    font-size: 14.5px;
    font-weight: var(--mw-weight-semibold);
    color: var(--mw-color-text-muted);
}

ul.cat-list li:hover {
    background: var(--mw-color-primary-soft);
    border-color: var(--mw-color-primary);
    transition: background-color var(--mw-transition);
}

ul.cat-list li a:hover {
    color: var(--mw-color-primary-strong) !important;
}

ul.cat-list li.active {
    background: var(--mw-color-dark);
    border-color: var(--mw-color-dark);
}

ul.cat-list li.active a {
    color: #fff;
}


/* --- 7.12.1 Filtr kategorii na telefonie: pasek przewijany w poziomie ---

   DESKTOP I TABLET ZOSTAJA BEZ ZMIAN - ponizsze reguly zyja wylacznie
   ponizej 768px.

   Dziewiec plakietek zawijalo sie na 390px w CZTERY rzedy i zjadalo ok.
   380px wysokosci ekranu, czyli niemal polowe widoku. Do tego pasek jest
   sticky, wiec ta sciana filtrow jechala razem z trescia i zaslaniala
   kafle, ktore mialy byc przewijane.

   Zamiast zmieniac wyglad plakietek (zmniejszac tekst, skracac nazwy),
   uklad zmienia sie na jeden rzad przewijany palcem. Plakietki zostaja
   dokladnie takie same - ta sama wysokosc, padding, kolory i stan aktywny.

   flex-wrap: nowrap + overflow-x: auto to caly mechanizm. Ujemny margines
   w polaczeniu z paddingiem tej samej wielkosci wysuwa pasek na pelna
   szerokosc ekranu, ale trzyma pierwsza plakietke rowno z trescia strony -
   dzieki temu widac, ze pasek "wychodzi" poza krawedz i da sie go przesunac,
   a rzad nie konczy sie w polowie ekranu.

   Sam pasek scrolluje sie wewnetrznie, wiec NIE dokłada poziomego
   przewijania calej stronie (documentElement zostaje bez overflow). */

@media (max-width: 767.98px) {

    #portfolio-menu ul.cat-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        /* Przewijanie paska nie ma "przeskakiwac" na cala strone, gdy palec
           dojedzie do konca listy. */
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        /* CELOWO BEZ scroll-snap. Przy scroll-snap-type: x proximity
           przegladarka wyrownuje poczatek pierwszej plakietki do krawedzi
           SNAPPORTU, czyli ignoruje padding-inline paska - pasek startowal
           przesuniety o kilka pikseli, a pierwsza plakietka lezala na samej
           krawedzi ekranu zamiast rowno z trescia strony. Swobodne
           przewijanie jest tu i naturalniejsze w dotyku, i przewidywalne. */
        /* Pasek przewijania chowamy - na dotyku i tak go nie ma, a na
           desktopie te reguly nie obowiazuja. */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* !important przebija legacy custom.css (mobilna sekcja):
             ul.cat-list { padding-left: 5px !important; padding-right: 5px !important }
           Bez tego pasek dostawal 5px zamiast pelnego marginesu i pierwsza
           plakietka nie rownala sie z kaflami pod nia. Przy dwoch
           deklaracjach !important decyduje specyficznosc, a selektor
           z ID jest mocniejszy. */
        margin-inline: calc(var(--mw-gutter) * -1);
        padding-inline: var(--mw-gutter) !important;
        /* Miejsce na cien/obrys plakietki przy krancach paska. */
        padding-block: 2px;
    }

    /* Legacy dokladalo plakietkom "margin: 0 5px 15px 5px" - dolne 15px
       robilo w jednym rzedzie martwa przestrzen pod paskiem, a boczne 5px
       rozjezdzalo sie z gapem siatki. Odstepy niesie teraz wylacznie
       gap: 10px z reguly bazowej. */
    #portfolio-menu ul.cat-list::-webkit-scrollbar {
        display: none;
    }

    #portfolio-menu ul.cat-list li {
        /* Bez tego flex sciskalby plakietki, zeby zmiescic je w jednym
           rzedzie - a teksty maja NIE byc sciskane. */
        flex: 0 0 auto;
        /* Legacy dokladalo "margin: 0 5px 15px 5px" - dolne 15px robilo
           martwa przestrzen pod jednorzedowym paskiem, a boczne 5px
           rozjezdzalo sie z gapem. Odstepy niesie teraz sam gap: 10px. */
        margin: 0;
    }

    #portfolio-menu ul.cat-list li a {
        white-space: nowrap;
    }
}


/* --- 7.13 Wejscie sekcji w widok ---------------------------------------

   ZASADA NADRZEDNA: ANIMACJA NIGDY NIE MOZE UKRYC TRESCI.

   Typowy wzorzec "reveal" trzyma element na opacity: 0 i czeka, az JS doda
   klase. Jesli ta klasa z jakiegokolwiek powodu nie zostanie dodana -
   IntersectionObserver nie zdazy, inny skrypt zdejmie klase, wystapi blad
   JS wyzej w kolejce - sekcja zostaje NIEWIDOCZNA NA STALE. Przy pierwszej
   wersji tej sekcji dokladnie to sie zdarzylo (dwie sekcje wyszly puste
   na zrzutach), wiec wzorzec zostal odwrocony.

   Tutaj element jest widoczny domyslnie. Klasa .is-revealed nie odslania
   go, tylko URUCHAMIA KLATKI KLUCZOWE, ktore zaczynaja sie od opacity: 0.
   Efekt dla uzytkownika jest identyczny (sekcja wplywa przy wejsciu
   w widok), ale najgorszy mozliwy scenariusz to brak animacji, a nie brak
   tresci. Bez JS-a, przy bledzie JS-a i w czytnikach ekranu tresc jest
   po prostu na miejscu. */

[data-mw-reveal].is-revealed {
    animation: mwReveal 520ms ease both;
}


/* ==========================================================================
   8. RESPONSYWNOSC STRONY GLOWNEJ  (Etap B2)
   ==========================================================================
   Mobile-first: wszystkie siatki wyzej sa jednokolumnowe. Tutaj tylko je
   rozszerzamy. Nic nie jest "zmniejszonym desktopem".
   ========================================================================== */

/* --- do 767px: skracamy strone na telefonie ---------------------------- */
@media (max-width: 767.98px) {

    /* Link "Wszystkie realizacje ->" w naglowku sekcji dubluje przycisk
       stojacy pod siatka. Na telefonie zostaje sam przycisk. */
    .mw-section-head__link {
        display: none;
    }

    /* Szesc kafli realizacji jedno pod drugim to ok. 2000px scrolla.
       Na telefonie pokazujemy cztery - reszta jest o jedno tapniecie dalej,
       pod przyciskiem "Zobacz wszystkie realizacje".
       display:none sprawia, ze przegladarka nie pobiera tez ich obrazow
       (sa oznaczone loading="lazy"). */
    .mw-work__grid > .mw-work-card:nth-child(n + 5) {
        display: none;
    }

    /* Kafle realizacji sa na telefonie glownym nosnikiem tresci - 16:10
       zamiast 4:3 skraca kazdy o ok. 40px, nie tracac czytelnosci. */
    .mw-work-card__link {
        aspect-ratio: 16 / 10;
    }

    .mw-faq__a {
        padding-right: 8px;
    }

    /* Karta formularza na pelna szerokosc kontenera - na 360px ramka
       z duzym paddingiem zjadala zbyt wiele miejsca. */
    .mw-form {
        padding: 22px 18px 26px;
    }

    /* --- SKRACANIE STRONY NA TELEFONIE ---------------------------------
       Pomiar pierwszej wersji na 390px: 13 763px calej strony, z czego
       oferta 1856px, blog 1820px, korzysci 1421px. Ponizsze reguly tna to
       o ok. 1000px, nie usuwajac zadnej informacji poza zajawka wpisu
       (tytul, data i "Czytaj wiecej" zostaja). */

    /* Korzysci: ciasniejsze karty. */
    .mw-feature {
        padding: 18px 18px 20px;
    }

    .mw-feature__title {
        margin-top: 10px;
    }

    /* Oferta: numer wchodzi w jedna linie z tytulem zamiast stac nad nim.
       Oszczedza ok. 60px na karcie, czyli ok. 360px na sekcji. */
    .mw-offer-card__inner {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-areas:
            "no    title"
            "text  text"
            "more  more";
        align-items: center;
        column-gap: 14px;
        row-gap: 0;
        padding: 20px;
    }

    .mw-offer-card__no {
        grid-area: no;
    }

    .mw-offer-card__title {
        grid-area: title;
        margin: 0;
    }

    .mw-offer-card__text {
        grid-area: text;
        margin-top: 12px;
    }

    .mw-offer-card__more {
        grid-area: more;
    }

    /* Kafle kontaktu: etykieta nad wartoscia zamiast obok.
       Przy ukladzie poziomym na wartosc zostawalo ok. 215px i adres
       "kontakt@matweb.com.pl" lamal sie w srodku slowa ("...com.p / l").
       W pionie ma cala szerokosc karty. */
    .mw-channel {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 14px 18px;
    }

    .mw-channel__label {
        flex: 0 0 auto;
    }

    .mw-channel__value {
        font-size: 16.5px;
    }

    /* Blog na telefonie.

       POZYCJA LISTY (/blog) sklada sie do pionu: obraz na gorze, tresc pod
       nim. Dwie kolumny po 220px nie mieszcza sie na 390px szerokosci, wiec
       proba ich utrzymania konczy sie sciśnietym obrazkiem i lamanym co
       drugie slowo tytulem. Zajawka ZOSTAJE - w pozycji listy jest jedynym
       tekstem poza tytulem i realnie pomaga wybrac wpis. */
    .mw-post-card--row .mw-post-card__link,
    .mw-post-card--row .mw-post-card__link:not(:has(.mw-post-card__media)) {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mw-post-card--row .mw-post-card__media {
        height: 190px;
    }

    .mw-post-card--row .mw-post-card__body,
    .mw-post-card--row .mw-post-card__link:not(:has(.mw-post-card__media)) .mw-post-card__body {
        padding: 22px 22px 24px;
    }

    .mw-post-card--row .mw-post-card__title {
        font-size: 20px;
    }

    /* KAFEL (strona glowna) - w jednej kolumnie zajawka tez zostaje;
       kafel i tak jest wtedy szeroki na caly ekran. */
    .mw-post-card--card .mw-post-card__media {
        height: 190px;
    }

    .mw-post-card--card .mw-post-card__more {
        padding-top: 16px;
    }
}


/* --- od 600px: dwie kolumny ------------------------------------------- */
@media (min-width: 600px) {

    .mw-features__grid,
    .mw-offer__grid,
    .mw-work__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mw-offer-card--primary {
        grid-column: 1 / -1;
    }

    /* Sekcja bloga na stronie glownej: auto-fit minmax(280px, 1fr) - wprost
       z pliku zrodlowego rebrandingu. Przy trzech wpisach daje to dwie
       kolumny na tablecie i trzy od ok. 1000px szerokosci kontenera. */
    .mw-posts__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    }

    .mw-process__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mw-counters__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* --- od 1024px: uklad docelowy ----------------------------------------- */
@media (min-width: 1024px) {

    /* Szesc pozycji w trzech kolumnach = dwa pelne rzedy. Przy auto-fit
       wychodzilo 4 + 2 i ostatni rzad wisial. */
    .mw-features__grid,
    .mw-work__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mw-offer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mw-process__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Kolumna z tekstem szersza od zdjecia - tak jak w hero. */
    .mw-about__inner {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    }

    /* Formularz nieco szerszy niz kolumna z danymi kontaktowymi. */
    .mw-cta__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    }
}


/* --- Redukcja ruchu ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    /* Tresc jest widoczna tak czy inaczej - wylaczamy sama animacje. */
    [data-mw-reveal].is-revealed {
        animation: none;
    }

    .mw-process__glow {
        animation: none;
    }

    .mw-feature,
    .mw-offer-card__inner,
    .mw-work-card__link,
    .mw-work-card__img,
    .mw-work-card__arrow,
    .mw-post-card__link,
    .mw-post-card__img,
    .mw-channel,
    .mw-faq__icon::before,
    .mw-faq__icon::after,
    .mw-form input[type="submit"] {
        transition: none;
    }

    .mw-feature:hover,
    .mw-offer-card--link .mw-offer-card__inner:hover,
    .mw-work-card__link:hover,
    .mw-post-card__link:hover,
    .mw-channel:hover,
    .mw-form input[type="submit"]:hover {
        transform: none;
    }

    .mw-work-card__link:hover .mw-work-card__img,
    .mw-post-card__link:hover .mw-post-card__img {
        transform: none;
    }
}


/* ==========================================================================
   9. PODSTRONY  (Etap C - site-wide)
   ==========================================================================
   Zadnej nowej stylistyki: wszystko ponizej sklada sie z tokenow i klas
   uzytych juz na stronie glownej (.mw-section, .mw-h2, .mw-btn, .mw-card,
   .mw-feature, .mw-work-card, .mw-post-card). Dochodza tylko trzy rzeczy,
   ktorych strona glowna nie potrzebowala:

     .mw-page-hero  - lzejszy odpowiednik hero dla kazdej podstrony,
     .mw-prose      - typografia dla tresci z edytora (the_content()),
     .mw-footer     - stopka.
   ========================================================================== */


/* --- 9.0 Domkniecie krojow ----------------------------------------------
   Legacy custom.css ma regule na golych elementach:
     body, p, h1..h6, span, li { font-family: Nunito }
   Kazdy element z klasa .mw-* przebija ja sam, ale KONTENERY bez wlasnego
   font-family (np. <li class="mw-feature">, <a> owijajace karte, <li>
   pozycji menu w stopce) lapaly Nunito i przekazywaly je dalej wszystkiemu,
   co nie ma wlasnej klasy.

   Widocznego tekstu to nie psulo - w kazdej karcie tekst siedzi
   w oklasowanym dziecku - ale wystarczylby jeden nieoklasowany <span>
   w przyszlosci, zeby kroj sie rozjechal. Domykamy to na listach i linkach.

   CELOWO NIE MA TU "p": .mw-counter__value i .mw-reviews__value to akapity
   uzywajace kroju DISPLAY, a regula ".mw-main p" (0,1,1) przebilaby ich
   klase (0,1,0) i zbila liczniki do Manrope. */

.mw-main ul,
.mw-main ol,
.mw-main li,
.mw-main a,
.mw-footer ul,
.mw-footer ol,
.mw-footer li,
.mw-footer a {
    font-family: inherit;
}

/* Znaki graficzne (gwiazdki ocen, strzalki w kartach) - jedyne miejsca,
   gdzie legacy Nunito faktycznie dotykalo widocznej tresci. */
.mw-hero__star,
.mw-hero__card-arrow,
.mw-work-card__arrow,
.mw-reviews__stars {
    font-family: var(--mw-font-body);
}


/* --- 9.1 Naglowek podstrony -------------------------------------------- */

.mw-page-hero {
    position: relative;
    overflow: hidden;
    background: var(--mw-color-bg-subtle);
    border-bottom: 1px solid var(--mw-color-border-soft);
}

/* Ta sama siatka co w hero strony glownej, ale bez animacji: na podstronie
   ma byc tlem, a nie atrakcja. */
.mw-page-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(#E5EFF5 1px, transparent 1px),
        linear-gradient(90deg, #E5EFF5 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: .55;
    pointer-events: none;
}

.mw-page-hero__inner {
    position: relative;
    padding-block: clamp(48px, 6vw, 84px) clamp(44px, 5.5vw, 76px);
}

.mw-page-hero--center {
    text-align: center;
}

.mw-page-hero--center .mw-lead {
    margin-inline: auto;
}

.mw-page-hero__eyebrow {
    margin: 0 0 14px;
}

/* Naglowki podstron sa krotsze niz H1 strony glownej i nie maja obok
   wizualizacji - dlatego wlasna, mniejsza skala zamiast --mw-text-h1. */
.mw-page-hero__title {
    font-size: clamp(30px, 4.4vw, 52px);
    max-width: 20ch;
}

.mw-page-hero--center .mw-page-hero__title {
    margin-inline: auto;
}

.mw-page-hero__lead {
    margin: 18px 0 0;
}

.mw-page-hero__meta {
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-small);
    color: var(--mw-color-text-faint);
    margin: 16px 0 0;
}

.mw-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.mw-page-hero--center .mw-page-hero__actions {
    justify-content: center;
}


/* --- 9.2 Tresc z edytora ------------------------------------------------
   .mw-prose obejmuje wszystko, co wychodzi z the_content(): polityke
   prywatnosci, wpisy bloga i opisy realizacji. Tresci NIE zmieniamy -
   zmienia sie wylacznie to, jak wygladaja.

   Selektory sa potomne (np. ".mw-prose p"), zeby przebic legacy
   "p, span, li { font-size: 16px }" i "body, p, h1..h6 { font-family: Nunito }",
   ktore celuja w gole elementy. */

.mw-prose {
    font-family: var(--mw-font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--mw-color-text-muted);
    /* Ok. 70 znakow w wierszu - gorna granica komfortu czytania. */
    max-width: 72ch;
}

.mw-prose > *:first-child {
    margin-top: 0;
}

.mw-prose > *:last-child {
    margin-bottom: 0;
}

.mw-prose p,
.mw-prose ul,
.mw-prose ol,
.mw-prose blockquote,
.mw-prose figure,
.mw-prose table {
    font-family: var(--mw-font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--mw-color-text-muted);
    margin: 0 0 22px;
}

.mw-prose h2,
.mw-prose h3,
.mw-prose h4,
.mw-prose h5,
.mw-prose h6 {
    font-family: var(--mw-font-display);
    color: var(--mw-color-text);
    letter-spacing: -.02em;
    /* Duzy odstep GORNY, maly dolny - naglowek ma sie kleic do swojego
       akapitu, a nie wisiec miedzy dwoma blokami tekstu. */
    margin: 44px 0 14px;
    text-wrap: balance;
}

.mw-prose h2 {
    font-size: clamp(24px, 2.4vw, 30px);
    line-height: 1.22;
    margin-bottom: 20px;
}

.mw-prose h3 {
    font-size: clamp(20px, 1.9vw, 23px);
    line-height: 1.3;
    font-weight: var(--mw-weight-semibold);
}

.mw-prose h4,
.mw-prose h5,
.mw-prose h6 {
    font-size: 18px;
    line-height: 1.35;
    font-weight: var(--mw-weight-semibold);
    margin-top: 34px;
}

.mw-prose a {
    color: var(--mw-color-primary-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.mw-prose a:hover {
    color: var(--mw-color-primary);
}

.mw-prose strong,
.mw-prose b {
    font-weight: var(--mw-weight-bold);
    color: var(--mw-color-text);
}

.mw-prose ul,
.mw-prose ol {
    padding-left: 22px;
}

/* Legacy "li { list-style: none }" zabiera punktory calej witrynie.
   W tresci artykulu lista bez znacznikow jest nieczytelna, wiec je wracamy. */
.mw-prose ul li {
    list-style: disc;
}

.mw-prose ol li {
    list-style: decimal;
}

.mw-prose li {
    font-family: var(--mw-font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--mw-color-text-muted);
    margin-bottom: 8px;
}

.mw-prose img,
.mw-prose iframe,
.mw-prose video {
    max-width: 100%;
    height: auto;
    border-radius: var(--mw-radius-lg);
}

.mw-prose figure img {
    display: block;
}

.mw-prose figcaption {
    font-family: var(--mw-font-body);
    font-size: 13.5px;
    color: var(--mw-color-text-faint);
    margin-top: 10px;
}

.mw-prose blockquote {
    padding-left: 20px;
    border-left: 3px solid var(--mw-color-primary);
    font-style: normal;
    color: var(--mw-color-text);
}

.mw-prose hr {
    height: 1px;
    border: 0;
    background: var(--mw-color-border);
    opacity: 1;
    margin: 40px 0;
}

.mw-prose table {
    width: 100%;
    border-collapse: collapse;
    /* Szeroka tabela przewija sie w swoim pudelku, a nie rozpycha strony. */
    display: block;
    overflow-x: auto;
}

.mw-prose th,
.mw-prose td {
    border: 1px solid var(--mw-color-border);
    padding: 10px 14px;
    text-align: left;
}

.mw-prose code,
.mw-prose kbd {
    font-size: .92em;
    background: var(--mw-color-surface-alt);
    border: 1px solid var(--mw-color-border);
    border-radius: var(--mw-radius-xs);
    padding: 2px 6px;
}


/* --- 9.3 Wpis bloga ----------------------------------------------------- */

.mw-article__cover {
    margin: clamp(-40px, -4vw, -28px) 0 0;
    border-radius: var(--mw-radius-xl);
    overflow: hidden;
    border: 1px solid var(--mw-color-border);
    box-shadow: var(--mw-shadow-lg);
    /* Ujemny margines wciaga obraz na granice naglowka - ten sam chwyt,
       ktory na stronie glownej laczy hero z pierwsza sekcja. */
    position: relative;
    z-index: 1;
    aspect-ratio: 16 / 9;
}

.mw-article__cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mw-article__body {
    padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 80px);
}

.mw-article__pages {
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-small);
    margin-top: 28px;
}

.mw-page {
    padding-block: clamp(44px, 5.5vw, 76px);
}


/* --- 9.4 CTA na koncu wpisu / realizacji / podstrony -------------------- */

.mw-postcta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 48px);
    flex-wrap: wrap;
}

.mw-postcta .mw-h2 {
    margin-top: 12px;
    max-width: 18ch;
}

.mw-postcta__lead {
    margin: 14px 0 0;
    max-width: 46ch;
}

.mw-postcta__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 auto;
}


/* --- 9.5 Pojedyncza realizacja ------------------------------------------ */

.mw-project__cover {
    margin: clamp(-40px, -4vw, -28px) 0 0;
    border-radius: var(--mw-radius-xl);
    overflow: hidden;
    border: 1px solid var(--mw-color-border);
    box-shadow: var(--mw-shadow-lg);
    background: var(--mw-color-surface-alt);
    position: relative;
    z-index: 1;
}

/* Bez sztywnej proporcji: realizacje to i zrzuty stron (szerokie),
   i wizytowki czy logotypy (kwadratowe). Kadrowanie obcieloby polowe
   z nich, wiec obraz zachowuje wlasne proporcje. */
.mw-project__cover-img {
    display: block;
    width: 100%;
    height: auto;
}

.mw-project__grid {
    display: grid;
    gap: var(--mw-gap-lg);
    grid-template-columns: 1fr;
    align-items: start;
}

.mw-project__heading {
    margin-bottom: 18px;
}

.mw-project__subheading {
    font-family: var(--mw-font-display);
    font-size: 19px;
    font-weight: var(--mw-weight-semibold);
    letter-spacing: -.01em;
    color: var(--mw-color-text);
    margin: 34px 0 14px;
}

.mw-project__features {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-project__features li {
    position: relative;
    padding-left: 28px;
    font-family: var(--mw-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--mw-color-text-muted);
}

/* Znacznik rysowany CSS-em - pola ACF miewaja wlasne punktory ("•", "-"),
   ktore helper matweb_realizacja_features() zdejmuje, zeby nie bylo dwoch. */
.mw-project__features li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mw-color-primary);
}

.mw-project__facts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--mw-color-surface);
    border: 1px solid var(--mw-color-border);
    border-radius: var(--mw-radius-xl);
    padding: clamp(22px, 2.6vw, 28px);
    box-shadow: var(--mw-shadow-sm);
}

.mw-project__fact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mw-project__fact-label {
    font-family: var(--mw-font-display);
    font-size: 12px;
    font-weight: var(--mw-weight-bold);
    letter-spacing: var(--mw-tracking-wide);
    text-transform: uppercase;
    color: var(--mw-color-primary);
}

.mw-project__fact-value {
    font-family: var(--mw-font-body);
    font-size: 16.5px;
    font-weight: var(--mw-weight-semibold);
    color: var(--mw-color-text);
}

.mw-project__fact-link {
    font-family: var(--mw-font-body);
    font-size: 16px;
    font-weight: var(--mw-weight-semibold);
    color: var(--mw-color-primary-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.mw-project__fact-link:hover {
    color: var(--mw-color-primary);
}

.mw-project__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mw-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid var(--mw-color-border-strong);
    border-radius: var(--mw-radius-pill);
    background: var(--mw-color-surface);
    font-family: var(--mw-font-body);
    font-size: 13.5px;
    font-weight: var(--mw-weight-semibold);
    color: var(--mw-color-text-muted);
    text-decoration: none;
    transition: border-color var(--mw-transition), color var(--mw-transition), background-color var(--mw-transition);
}

.mw-chip:hover {
    border-color: var(--mw-color-primary);
    background: var(--mw-color-primary-soft);
    color: var(--mw-color-primary-strong);
}

.mw-project__cta {
    width: 100%;
}


/* --- 9.6 Galeria realizacji ---------------------------------------------
   Zastepuje legacy .grid-gallery-portfolio. Fancybox (data-fancybox)
   dziala bez zmian - jest kolejkowany globalnie w inc/enqueue.php. */

.mw-gallery {
    display: grid;
    gap: var(--mw-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.mw-gallery__item {
    display: block;
    overflow: hidden;
    border: 1px solid var(--mw-color-border);
    border-radius: var(--mw-radius-lg);
    background: var(--mw-color-surface);
    aspect-ratio: 4 / 3;
    transition: transform var(--mw-transition), box-shadow var(--mw-transition), border-color var(--mw-transition);
}

.mw-gallery__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--mw-shadow-md);
    border-color: #CFE3EE;
}

.mw-gallery__item:focus-visible {
    outline: 2px solid var(--mw-color-primary);
    outline-offset: 3px;
}

/* contain, nie cover: w galeriach realizacji sa wizytowki, logotypy
   i plakaty o skrajnie roznych proporcjach - kadrowanie ucielo by projekt. */
.mw-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* --- 9.7 Warianty siatek dla podstron ----------------------------------- */

.mw-features__grid--three,
.mw-features__grid--four,
.mw-work__grid--three {
    grid-template-columns: 1fr;
}

/* Karta korzysci bez numeru (strona Kontakt) - tytul nie ma nad soba
   nic, wiec nie potrzebuje gornego marginesu. */
.mw-feature__title--flush {
    margin-top: 0;
}

/* Archiwa i wyniki wyszukiwania korzystaja z tego samego listingu co
   /blog (.mw-posts__list), ale moga zawierac ROWNIEZ realizacje - a kafel
   realizacji jest <article>, wiec szablon owija go w <li class="mw-archive__item">.
   Ten <li> nie jest .mw-post-card, wiec musi dostac wlasna szerokosc. */
.mw-archive__list .mw-archive__item {
    width: 100%;
}

.mw-archive__item {
    display: block;
    min-width: 0;
}

.mw-notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}


/* --- 9.8 Paginacja ------------------------------------------------------ */

.mw-pagination {
    margin-top: clamp(36px, 4vw, 52px);
}

.mw-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mw-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--mw-color-border-strong);
    border-radius: var(--mw-radius-md);
    background: var(--mw-color-surface);
    font-family: var(--mw-font-body);
    font-size: 15px;
    font-weight: var(--mw-weight-semibold);
    color: var(--mw-color-text-muted);
    text-decoration: none;
    transition: border-color var(--mw-transition), color var(--mw-transition);
}

.mw-pagination .page-numbers:hover {
    border-color: var(--mw-color-primary);
    color: var(--mw-color-primary-strong);
}

.mw-pagination .page-numbers.current {
    background: var(--mw-color-dark);
    border-color: var(--mw-color-dark);
    color: #fff;
}


/* --- 9.9 Social --------------------------------------------------------- */

.mw-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-social__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 15px;
    border: 1px solid var(--mw-color-border-strong);
    border-radius: var(--mw-radius-pill);
    font-family: var(--mw-font-body);
    font-size: 14px;
    font-weight: var(--mw-weight-semibold);
    color: var(--mw-color-text-muted);
    text-decoration: none;
    transition: border-color var(--mw-transition), color var(--mw-transition);
}

.mw-social__link:hover {
    border-color: var(--mw-color-primary);
    color: var(--mw-color-primary-strong);
}

.mw-contact__social {
    margin-top: 30px;
}

.mw-contact__social-label {
    margin: 0 0 12px;
}


/* --- 9.10 Stopka --------------------------------------------------------
   Legacy "footer p, footer a, footer { color: #fff }" (0,0,2) dziala tu
   na nasza korzysc - stopka jest ciemna. Reguly ponizej i tak sa bardziej
   szczegolowe, wiec nic sie nie bije. */

.mw-footer {
    background: var(--mw-color-dark);
    color: var(--mw-color-text-on-dark);
    /* Punkt odniesienia dla "font-family: inherit" z sekcji 9.0 - bez tego
       dziedziczenie szlo az do <body>, gdzie legacy ustawia Nunito. */
    font-family: var(--mw-font-body);
    padding-top: clamp(48px, 6vw, 76px);
}

.mw-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 4vw, 48px);
    padding-bottom: clamp(36px, 4.5vw, 56px);
}

.mw-footer__logo-link {
    display: inline-block;
}

/* Logo jest kolorowe na jasnym tle naglowka. Na granacie potrzebuje
   rozjasnienia - inwersja z korekta odcienia daje czytelna, biala wersje
   bez wgrywania drugiego pliku. */
.mw-footer__logo {
    display: block;
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .95;
}

.mw-footer__logo-text {
    font-family: var(--mw-font-display);
    font-size: 21px;
    font-weight: var(--mw-weight-bold);
    color: #fff;
}

.mw-footer__tagline {
    font-family: var(--mw-font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--mw-color-text-on-dark-muted);
    margin: 18px 0 0;
    max-width: 42ch;
}

.mw-footer__social {
    margin-top: 22px;
}

.mw-footer .mw-social__link {
    border-color: var(--mw-color-border-on-dark);
    color: var(--mw-color-text-on-dark-muted);
}

.mw-footer .mw-social__link:hover {
    border-color: #fff;
    color: #fff;
}

.mw-footer__heading {
    font-family: var(--mw-font-display);
    font-size: 13px;
    font-weight: var(--mw-weight-bold);
    letter-spacing: var(--mw-tracking-wide);
    text-transform: uppercase;
    color: var(--mw-color-text-on-dark-faint);
    margin: 0 0 16px;
}

.mw-footer__list {
    display: flex;
    flex-direction: column;
    /* 6px zamiast 10px, bo linki dostaly wlasny padding-block (nizej).
       Rytm listy zostaje ten sam, rosnie tylko pole dotykowe. */
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-footer__list li {
    list-style: none;
    margin: 0;
}

.mw-footer__list a {
    /* inline-block + padding, bo goly <a> mial na telefonie 23px wysokosci
       (sam line-height). WCAG 2.5.8 przechodzilo wylacznie dzieki wyjatkowi
       "spacing"; teraz cel ma ~31px i miesci sie w regule bez wyjatku.
       Uklad sie nie zmienia - te 8px odbieramy z gap listy. */
    display: inline-block;
    padding-block: 4px;
    font-family: var(--mw-font-body);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--mw-color-text-on-dark-muted);
    text-decoration: none;
    transition: color var(--mw-transition);
    overflow-wrap: anywhere;
}

.mw-footer__list a:hover,
.mw-footer__list a:focus-visible {
    color: #fff;
}

/* Pozycja menu odpowiadajaca biezacej stronie. */
.mw-footer__list .current-menu-item > a {
    color: #fff;
}

.mw-footer__cta-text {
    font-family: var(--mw-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--mw-color-text-on-dark-muted);
    margin: 0 0 18px;
    max-width: 34ch;
}

.mw-footer__cta-btn {
    width: 100%;
    /* Etykieta "Zamów darmową wycenę" ma ok. 200px - w kolumnie stopki
       lamala sie na dwie linie i przycisk wygladal na przypadkowy. */
    white-space: nowrap;
}

.mw-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-block: 22px;
    border-top: 1px solid var(--mw-color-border-on-dark);
}

.mw-footer__copy {
    font-family: var(--mw-font-body);
    font-size: 13.5px;
    color: var(--mw-color-text-on-dark-faint);
    margin: 0;
}

.mw-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-footer__legal li {
    list-style: none;
}

.mw-footer__legal a {
    /* Jak w .mw-footer__list a: goly <a> przy 13.5px mial 18px wysokosci.
       inline-block + padding podnosi cel do 24px wymaganych przez
       WCAG 2.5.8, nie ruszajac przy tym rytmu paska. */
    display: inline-block;
    padding-block: 3px;
    font-family: var(--mw-font-body);
    font-size: 13.5px;
    color: var(--mw-color-text-on-dark-faint);
    text-decoration: none;
    transition: color var(--mw-transition);
}

.mw-footer__legal a:hover {
    color: #fff;
}


/* ==========================================================================
   10. RESPONSYWNOSC PODSTRON  (Etap C)
   ========================================================================== */

@media (max-width: 767.98px) {

    /* Obraz wpisu i realizacji: bez wciagania pod naglowek - na waskim
       ekranie ujemny margines tylko sciska tresc. */
    .mw-article__cover,
    .mw-project__cover {
        margin-top: 0;
        border-radius: var(--mw-radius-lg);
    }

    .mw-postcta__actions {
        width: 100%;
    }

    .mw-postcta__actions .mw-btn {
        width: 100%;
    }

    /* Panel z faktami o realizacji ma na telefonie stac POD opisem,
       a nie nad nim - opis jest wazniejszy. */
    .mw-project__grid {
        display: flex;
        flex-direction: column;
    }

    .mw-project__aside {
        order: 2;
    }

    .mw-gallery {
        grid-template-columns: 1fr;
    }
}


@media (min-width: 600px) {

    .mw-features__grid--three,
    .mw-features__grid--four,
    .mw-work__grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mw-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mw-footer__cta-btn {
        width: auto;
    }
}


@media (min-width: 1024px) {

    .mw-features__grid--three,
    .mw-work__grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mw-features__grid--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Opis realizacji dostaje wiecej miejsca niz panel z faktami. */
    .mw-project__grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    }

    /* Marka szersza od trzech kolumn linkow. */
    .mw-footer__inner {
        /* Ostatnia kolumna szersza od pozostalych - miesci przycisk CTA
           w jednej linii. */
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .7fr) minmax(0, .95fr) minmax(0, 1.2fr);
    }
}


@media (prefers-reduced-motion: reduce) {

    .mw-chip,
    .mw-gallery__item,
    .mw-social__link,
    .mw-footer__list a,
    .mw-footer__legal a,
    .mw-pagination .page-numbers {
        transition: none;
    }

    .mw-gallery__item:hover {
        transform: none;
    }
}


/* ==========================================================================
   11. DOSTEPNOSC  (FINAL POLISH)
   ==========================================================================
   Poprawki wynikajace z audytu na renderowanych stronach. Zadna z nich nie
   zmienia ukladu ani kolorystyki - rosna wylacznie pola dotykowe i pojawia
   sie link pomijajacy nawigacje.
   ========================================================================== */

/* --- 11.1 Link "przejdz do tresci" --------------------------------------
   Pierwszy element w tabulacji. Niewidoczny do momentu zlapania fokusu,
   potem wjezdza w lewy gorny rog. Bez niego uzytkownik klawiatury musial
   przejsc przez caly naglowek (logo + 5 pozycji menu + telefon + CTA)
   na kazdej podstronie, zanim dotarl do tresci. */

.mw-skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 200;
    display: inline-block;
    padding: 12px 20px;
    border-radius: 0 0 var(--mw-radius-md) var(--mw-radius-md);
    background: var(--mw-color-dark);
    color: #fff;
    font-family: var(--mw-font-body);
    font-size: 15px;
    font-weight: var(--mw-weight-semibold);
    text-decoration: none;
    transition: top var(--mw-transition);
}

.mw-skip-link:focus {
    top: 0;
    color: #fff;
}


/* --- 11.2 Pola dotykowe ponizej 24px (WCAG 2.5.8) ----------------------- */

/* Telefon w naglowku mial 111x19 px. Nawigacja jest flexem z
   align-items: center, wiec wyzszy link tylko centruje sie w pasku -
   wysokosc naglowka sie nie zmienia. */
.mw-nav__phone {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-block: 3px;
}

/* Link do adresu strony na karcie realizacji: 370x22 px. */
.mw-project__fact-link {
    padding-block: 2px;
    min-height: 24px;
}


/* --- 11.3 Formularze Contact Form 7 ------------------------------------- */

/* Rozmiar checkboksa zgody RODO jest ustawiony w sekcji 7.10 - tam, gdzie
   stoi reszta stylow formularza. Trzymanie go w dwoch miejscach o roznej
   specyficznosci juz raz dalo prostokat 13x20 px. */

/* Etykieta zgody obok checkboxa - powiekszamy realny obszar klikalny. */
.wpcf7-acceptance .wpcf7-list-item-label {
    cursor: pointer;
}

/* Odnosniki do polityki Google pod formularzem mialy 15px wysokosci. */
.wpcf7 .blue-txt,
.mw-form small a {
    display: inline-block;
    padding-block: 5px;
}


/* --- 11.4 Widoczny fokus na calym serwisie ------------------------------
   Rebranding stylizowal :focus-visible punktowo. Ta regula jest siatka
   bezpieczenstwa: kazdy element interaktywny, ktory nie ma wlasnego stylu
   fokusu, dostaje kontrastowy pierscien. :focus-visible (a nie :focus)
   oznacza, ze mysz nie zostawia obwodek - widza go tylko uzytkownicy
   klawiatury. */

.mw-main a:focus-visible,
.mw-header a:focus-visible,
.mw-footer a:focus-visible,
.mw-page-hero a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--mw-color-primary);
    outline-offset: 3px;
    border-radius: var(--mw-radius-sm);
}

/* Na ciemnym tle granatowym niebieski pierscien ma za maly kontrast. */
.mw-section--dark a:focus-visible,
.mw-footer a:focus-visible,
.mw-footer button:focus-visible {
    outline-color: #fff;
}


/* ==========================================================================
   12. FORMULARZE: PODZIAL ROL + WHATSAPP  (FINAL POLISH)
   ==========================================================================
   Strona glowna dostala KROTKI formularz oddzwonienia (jedno pole),
   a /kontakt/ PELNY formularz opisu projektu. Ta sekcja daje im dwie
   rozne oprawy i stylizuje przycisk WhatsAppa.
   ========================================================================== */

/* --- 12.1 WhatsApp jako kafel kanalu kontaktu ---------------------------

   POPRZEDNIA WERSJA BYLA BLEDEM. WhatsApp dostal wlasny, maly przycisk
   pigulkowy stojacy POD lista kanalow - obok dwoch duzych kafli "TELEFON"
   i "E-MAIL". Trzy rownorzedne sposoby kontaktu wygladaly wiec jak dwie
   pozycje listy i doklejony pod nia guzik.

   Plik zrodlowy rebrandingu ("MatWeb - strona (offline).html", widok
   isContact) rozstrzyga to jednoznacznie: telefon, WhatsApp i e-mail to
   TRZY IDENTYCZNE <a> w jednej kolumnie - ten sam padding (20px 24px),
   to samo tlo (#fff), ta sama ramka (1px solid #E5EDF3), ten sam radius
   i etykieta w kolumnie stalej szerokosci. WhatsApp jest wiec teraz
   zwyklym .mw-channel i dziedziczy CALA geometrie po rodzenstwie -
   szerokosc, wysokosc, radius, ramke i odstepy. Ponizej dochodzi
   WYLACZNIE kolor ikony i reakcja na hover.

   STAN SPOCZYNKU jest nie do odroznienia od telefonu i e-maila:
   biale tlo, neutralna ramka --mw-color-border, ta sama etykieta.
   Jedynym akcentem jest mala zielona ikona przy wartosci.

   HOVER/FOCUS: dopiero wtedy wchodzi zielen - ramka w kolorze kanalu
   i bardzo lekkie (8%) zielone tlo. Po zjechaniu kursorem kafel wraca
   do neutralnego wygladu. Uniesienie o 2px dziedziczy po .mw-channel,
   wiec ruch jest ten sam co przy pozostalych kafelkach. */

.mw-channel--whatsapp {
    --mw-wa: #1FA855;          /* ciemniejszy wariant zieleni WhatsAppa -
                                  #25D366 na bieli ma kontrast 1.9:1, czyli
                                  ponizej progu dla elementow graficznych */
    --mw-wa-tint: rgba(31, 168, 85, .08);

    /* Tlo dopisane wprost, zeby przejscie hover -> spoczynek bylo
       animowane w obie strony (background-color musi miec wartosc
       poczatkowa, inaczej powrot jest skokowy). */
    background: var(--mw-color-surface);
    transition: border-color var(--mw-transition),
                background-color var(--mw-transition),
                transform var(--mw-transition);
}

.mw-channel--whatsapp:hover,
.mw-channel--whatsapp:focus-visible {
    border-color: var(--mw-wa);
    background: var(--mw-wa-tint);
}

/* Fokus klawiatury dostaje pierscien w kolorze kanalu - domyslna siatka
   bezpieczenstwa z sekcji 11.4 rysowalaby tu niebieski. */
.mw-channel--whatsapp:focus-visible {
    outline: 3px solid var(--mw-wa);
    outline-offset: 3px;
}

/* Ikona jest wstawiona W LINII TEKSTU, a nie przez flexa.
   Flex tworzy tu wlasny kontekst formatowania i liczy wysokosc z wysokosci
   elementow, a nie z line-height - przez co kafel WhatsAppa wychodzil
   o 1.35px nizszy od telefonu i e-maila. Jako element inline ikona siedzi
   w tym samym pudelku linii co zwykly tekst, wiec wszystkie trzy kafle
   maja identyczna wysokosc co do piksela.

   18px < wysokosc linii (22.95px), wiec ikona nie rozpycha wiersza. */
.mw-channel__icon {
    display: inline-block;
    vertical-align: -3px;
    margin-right: 8px;
    color: var(--mw-wa);
}


/* --- 12.2 Krotki formularz oddzwonienia (strona glowna) -----------------
   Jedno pole, wiec karta nie moze byc tak wysoka jak pelny formularz -
   inaczej w dwukolumnowym ukladzie zostaje pusty prostokat. */

.mw-form--compact {
    align-self: stretch;
}

.mw-form__title {
    margin: 0 0 6px;
    font-family: var(--mw-font-display);
    font-size: var(--mw-text-h3);
    font-weight: var(--mw-weight-bold);
    line-height: var(--mw-leading-snug);
    letter-spacing: var(--mw-tracking-snug);
    color: var(--mw-color-text);
}

.mw-form__note {
    margin: 0 0 22px;
    font-family: var(--mw-font-body);
    font-size: var(--mw-text-small);
    line-height: 1.55;
    color: var(--mw-color-text-muted);
}

/* Przycisk krotkiego formularza na calej szerokosci - to jedyna akcja
   w tej karcie, wiec nie ma powodu, zeby jej szukac. */
.mw-form--compact .wpcf7-submit {
    width: 100%;
}


/* --- 12.3 Pelny formularz na /kontakt/ ----------------------------------
   Piec pol zamiast trzech, wiec odstepy musza byc rowne, a pole opisu
   projektu na tyle wysokie, zeby zachecalo do napisania czegos wiecej
   niz jednego zdania. */

.mw-contact .wpcf7-form textarea {
    min-height: 150px;
}


/* --- 12.3.1 Wybor uslugi: wlasna lista rozwijana ------------------------

   Systemowy <select> jest jedynym polem formularza, ktorego ROZWINIETEJ
   listy nie da sie wystylowac - <option> rysuje system operacyjny, wiec po
   kliknieciu wyskakiwalo surowe menu Windows z wlasnym krojem i niebieskim
   zaznaczeniem. Zamkniete pole wygladalo jak reszta formularza, otwarte
   nie mialo z nim nic wspolnego.

   Zastepuje je wlasny combobox (custom/js/custom.js, ostatnia sekcja):
   przycisk z aktualnym wyborem + panel listy ze zwyklych elementow.

   NATYWNE POLE ZOSTAJE i to ono jest wysylane - jest tylko schowane.
   Bez JavaScriptu klasa .mw-select-native nigdy nie powstaje, wiec lista
   rozwijana dziala jak dotad (styl zamknietego pola na koncu sekcji).

   Wymiary przycisku sa CELOWO identyczne z .mw-form input: ten sam padding
   (15px 17px), ta sama ramka (#E1EAF1), ten sam radius (13px) i to samo
   tlo (--mw-color-bg-subtle). Pole ma wygladac jak kolejny wiersz
   formularza, a nie jak wstawka. */

.mw-form .mw-select-native {
    /* Akapit z ukrytym polem ma zerowa wysokosc, wiec jego dolny margines
       zrobilby przerwe bez powodu. Zostaje w drzewie, zeby ewentualny
       komunikat walidacji CF7 mial gdzie sie wyswietlic. */
    margin: 0;
}

.mw-form .mw-select-native select {
    display: none;
}

.mw-select {
    position: relative;
    margin: 0 0 14px;
}


/* --- pole zamkniete ----------------------------------------------------- */

.mw-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 17px;
    border: 1px solid #E1EAF1;
    border-radius: 13px;
    background: var(--mw-color-bg-subtle);
    font-family: var(--mw-font-body);
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--mw-color-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--mw-transition), background-color var(--mw-transition);
}

.mw-select__trigger:hover {
    border-color: var(--mw-color-border-strong);
}

/* Otwarty i zafokusowany wygladaja tak samo jak input w stanie :focus -
   biale tlo i niebieska ramka (za wzorem z pliku rebrandingu). */
.mw-select__trigger:focus-visible,
.mw-select.is-open .mw-select__trigger {
    outline: none;
    border-color: var(--mw-color-primary);
    background: var(--mw-color-surface);
}

/* Sam fokus klawiatury dostaje dodatkowo pierscien - inaczej nie dalby sie
   odroznic od stanu otwartego. */
.mw-select__trigger:focus-visible {
    box-shadow: 0 0 0 3px rgba(42, 165, 212, .22);
}

.mw-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-select__arrow {
    flex: 0 0 auto;
    color: var(--mw-color-primary);
    transition: transform var(--mw-transition);
}

.mw-select.is-open .mw-select__arrow {
    transform: rotate(180deg);
}


/* --- panel z lista ------------------------------------------------------ */

.mw-select__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--mw-color-surface);
    border: 1px solid var(--mw-color-border);
    border-radius: 13px;
    box-shadow: 0 26px 50px -30px rgba(11, 22, 34, .45);
}

.mw-select__option {
    margin: 0;
    padding: 11px 13px;
    border-radius: 9px;
    font-family: var(--mw-font-body);
    font-size: 15px;
    line-height: 1.45;
    color: var(--mw-color-text);
    cursor: pointer;
    /* Legacy "li { list-style: none }" juz to robi, ale panel ma dzialac
       niezaleznie od tego, co zostanie z custom.css. */
    list-style: none;
}

/* Pozycja pod kursorem albo wskazana strzalkami. JEDNA klasa na oba
   przypadki - mysz i klawiatura pokazuja dokladnie ten sam stan, wiec
   nie da sie doprowadzic do dwoch podswietlen naraz. */
.mw-select__option.is-active {
    background: var(--mw-color-primary-soft);
}

/* Pozycja aktualnie WYBRANA - delikatny niebieski akcent i grubszy tekst.
   Zadnego systemowego pelnego wypelnienia. */
.mw-select__option[aria-selected="true"] {
    color: var(--mw-color-primary-strong);
    font-weight: var(--mw-weight-semibold);
}

.mw-select__option[aria-selected="true"].is-active {
    background: var(--mw-color-primary-soft);
}


/* --- wariant bez JavaScriptu -------------------------------------------
   Zamknieta lista natywna nadal ma wlasna strzalke w kolorze marki
   zamiast szarej systemowej. */

.mw-form select.wpcf7-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232aa5d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px 16px;
    padding-right: 46px;
}


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

@media (max-width: 767.98px) {

    /* Kafel WhatsAppa nie potrzebuje juz wlasnej reguly mobilnej - jest
       zwyklym .mw-channel, wiec zawija sie razem z telefonem i e-mailem
       (patrz regula .mw-channel w tej samej sekcji). */
}


/* =========================================================
   Landing: Strony internetowe dla firm
   ========================================================= */

.mw-service-page .mw-service-heading {
    max-width: 820px;
    margin-inline: auto;
    margin-bottom: clamp(36px, 5vw, 60px);
    text-align: center;
}

.mw-service-page .mw-service-heading .mw-lead {
    max-width: 720px;
    margin-inline: auto;
}

.mw-service-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

.mw-service-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mw-service-card {
    min-height: 220px;
    padding: clamp(28px, 3vw, 38px);
    background: var(--mw-color-surface, #fff);
    border: 1px solid var(--mw-color-border-soft, #e3edf3);
    border-radius: 20px;
    text-align: center;
}

.mw-service-card__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 32px;
    margin-bottom: 20px;
    padding-inline: 10px;
    border-radius: 9px;
    background: #eaf8fd;
    color: #2aa5d4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}

.mw-service-card h3 {
    margin: 0 0 12px;
    font-family: var(--mw-font-display);
    font-size: clamp(19px, 2vw, 23px);
    line-height: 1.2;
}

.mw-service-card p {
    margin: 0;
    color: var(--mw-color-text-muted);
    line-height: 1.7;
}

.mw-service-checks {
    max-width: 980px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.mw-service-check {
    position: relative;
    padding: 24px 26px 24px 62px;
    background: #fff;
    border: 1px solid var(--mw-color-border-soft, #e3edf3);
    border-radius: 16px;
}

.mw-service-check::before {
    content: "✓";
    position: absolute;
    left: 24px;
    top: 24px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf8fd;
    color: #2aa5d4;
    font-weight: 800;
}

.mw-service-check strong,
.mw-service-check span {
    display: block;
}

.mw-service-check strong {
    margin-bottom: 6px;
    font-family: var(--mw-font-display);
    font-size: 17px;
}

.mw-service-check span {
    color: var(--mw-color-text-muted);
    line-height: 1.6;
}

.mw-service-audience {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.mw-service-audience li {
    padding: 14px 22px;
    background: #fff;
    border: 1px solid var(--mw-color-border-soft, #e3edf3);
    border-radius: 999px;
    font-weight: 650;
}

.mw-service-page .mw-work .mw-section-head {
    display: block;
    text-align: center;
}

.mw-service-page .mw-work .mw-section-head__text {
    max-width: 760px;
    margin-inline: auto;
}

.mw-service-page .mw-work .mw-section-head__link {
    margin-top: 18px;
}

.mw-service-page .mw-process .mw-section-head {
    justify-content: center;
    text-align: center;
}

.mw-service-page .mw-process .mw-section-head__text {
    max-width: 780px;
    margin-inline: auto;
}

.mw-service-page .mw-process__intro {
    margin-inline: auto;
}

.mw-service-page .mw-faq__title {
    text-align: center;
}

@media (max-width: 860px) {
    .mw-service-cards--3,
    .mw-service-checks {
        grid-template-columns: 1fr;
    }

    .mw-service-card {
        min-height: auto;
    }
}

/* Landing stron WWW — ciaśniejsze przejście: realizacje -> dla kogo */
.mw-service-page .mw-work {
    padding-bottom: clamp(36px, 4vw, 56px);
}

.mw-service-page .mw-service-for {
    padding-top: clamp(44px, 5vw, 64px);
}

/* Landing sklepy internetowe — dwie dostępne realizacje e-commerce */
.page-id-4862 .mw-work__grid {
    max-width: 760px;
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
    .page-id-4862 .mw-work__grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* Opieka i rozwój strony — kontrolowane łamanie hero */
.page-id-4866 .mw-page-hero__title {
    white-space: pre-line;
}

/* Opieka i rozwój strony — równy układ odbiorców 3 + 3 */
.page-id-4866 .mw-service-audience {
    max-width: 760px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-id-4866 .mw-service-audience li {
    text-align: center;
}

@media (max-width: 700px) {
    .page-id-4866 .mw-service-audience {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .page-id-4866 .mw-service-audience {
        grid-template-columns: 1fr;
    }
}

/* Landingi usługowe — równy układ kapsułek "Dla kogo?" */
.mw-service-page .mw-service-audience {
    max-width: 760px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.mw-service-page .mw-service-audience li {
    width: 100%;
    text-align: center;
}

@media (max-width: 700px) {
    .mw-service-page .mw-service-audience {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .mw-service-page .mw-service-audience {
        grid-template-columns: 1fr;
    }
}

/* Opieka i rozwój strony — równy układ odbiorców 3 + 3 */
.page-id-4866 .mw-service-audience {
    max-width: 760px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-id-4866 .mw-service-audience li {
    text-align: center;
}

@media (max-width: 700px) {
    .page-id-4866 .mw-service-audience {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .page-id-4866 .mw-service-audience {
        grid-template-columns: 1fr;
    }
}

/* Opieka i rozwój strony — kontrolowane łamanie hero */
.page-id-4866 .mw-page-hero__title {
    white-space: pre-line;
}

/* =========================================================
   Grafika dla firmy — slider realizacji
   ========================================================= */

.mw-graphic-showcase .mw-service-heading {
    margin-bottom: 28px;
}

.mw-graphic-slider__controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.mw-graphic-slider__arrow {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--mw-color-border-soft, #e3edf3);
    border-radius: 50%;
    background: #fff;
    color: var(--mw-color-text, #16232b);
    font-size: 20px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.mw-graphic-slider__arrow:hover {
    border-color: #2aa5d4;
    background: #eaf8fd;
}

.mw-graphic-slider {
    overflow: hidden;
}

.mw-graphic-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 40px) / 3);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-block: 4px 12px;
}

.mw-graphic-slider__track::-webkit-scrollbar {
    display: none;
}

.mw-graphic-slider__item {
    min-width: 0;
    scroll-snap-align: start;
}

.mw-graphic-slider__label {
    display: inline-flex;
    margin-bottom: 12px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #eaf8fd;
    color: #2aa5d4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.mw-graphic-slider__item .mw-work-card {
    height: calc(100% - 42px);
}

@media (max-width: 900px) {
    .mw-graphic-slider__track {
        grid-auto-columns: calc((100% - 16px) / 2);
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .mw-graphic-slider__track {
        grid-auto-columns: 88%;
        gap: 14px;
    }
}


/* Grafika dla firmy — boczne strzałki slidera */

.mw-graphic-slider-shell {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 16px;
}

.mw-graphic-slider-shell .mw-graphic-slider__arrow {
    position: static;
    flex: 0 0 auto;
}

.mw-graphic-slider-shell .mw-graphic-slider__prev {
    justify-self: start;
}

.mw-graphic-slider-shell .mw-graphic-slider__next {
    justify-self: end;
}

@media (max-width: 600px) {

    .mw-graphic-slider-shell {
        display: block;
        position: relative;
    }

    .mw-graphic-slider-shell .mw-graphic-slider__arrow {
        position: absolute;
        top: 50%;
        z-index: 5;
        width: 42px;
        height: 42px;
        transform: translateY(-50%);
        box-shadow: 0 4px 18px rgba(18, 35, 45, .12);
    }

    .mw-graphic-slider-shell .mw-graphic-slider__prev {
        left: 8px;
    }

    .mw-graphic-slider-shell .mw-graphic-slider__next {
        right: 8px;
    }
}

/* Grafika dla firmy — odstęp portfolio -> druk */
.page-id-4868 .mw-graphic-showcase {
    padding-bottom: clamp(32px, 4vw, 48px);
}

.page-id-4868 .mw-graphic-showcase + .mw-section {
    padding-top: clamp(40px, 4.5vw, 56px);
}


/* Grafika dla firmy — spójny rytm sekcji jak na pozostałych landingach */
.page-id-4868 .mw-graphic-showcase {
    padding-bottom: clamp(36px, 4vw, 56px);
}

.page-id-4868 .mw-graphic-showcase + .mw-section {
    padding-top: clamp(44px, 5vw, 64px);
}


/* Kontakt — klikalne usługi */

.mw-contact-services__grid {
    max-width: 980px;
    margin: 36px auto 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.mw-contact-service {
    grid-column: span 2;
    min-width: 0;
}

.mw-contact-service:nth-child(4) {
    grid-column: 2 / span 2;
}

.mw-contact-service:nth-child(5) {
    grid-column: 4 / span 2;
}

.mw-contact-service__link {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid var(--mw-color-border-soft, #e3edf3);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.mw-contact-service__link:hover {
    transform: translateY(-3px);
    border-color: #2aa5d4;
    box-shadow: 0 12px 30px rgba(18, 35, 45, .07);
}

.mw-contact-service__no {
    margin-bottom: 18px;
    color: #2aa5d4;
    font-size: 12px;
    font-weight: 700;
}

.mw-contact-service h3 {
    margin: 0 0 10px;
}

.mw-contact-service p {
    margin: 0 0 18px;
}

.mw-contact-service__more {
    margin-top: auto;
    color: #2aa5d4;
    font-weight: 700;
    font-size: 13px;
}

@media (max-width: 800px) {
    .mw-contact-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mw-contact-service,
    .mw-contact-service:nth-child(4),
    .mw-contact-service:nth-child(5) {
        grid-column: auto;
    }
}

@media (max-width: 520px) {
    .mw-contact-services__grid {
        grid-template-columns: 1fr;
    }
}


/* Kontakt — poprawny układ 3 + 2 kart usług */

@media (min-width: 801px) {
    .page-id-329 .mw-contact-services__grid {
        column-gap: 16px;
        row-gap: 28px;
        align-items: stretch;
    }

    .page-id-329 .mw-contact-service:nth-child(4) {
        grid-column: 2 / span 2;
        grid-row: 2;
    }

    .page-id-329 .mw-contact-service:nth-child(5) {
        grid-column: 4 / span 2;
        grid-row: 2;
    }
}


/* Kontakt — FINALNY układ kart usług 3 + 2 */
@media (min-width: 801px) {

    .page-id-329 .mw-contact-services__grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 28px;
        align-items: stretch;
    }

    .page-id-329 .mw-contact-service:nth-child(1) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .page-id-329 .mw-contact-service:nth-child(2) {
        grid-column: 3 / span 2;
        grid-row: 1;
    }

    .page-id-329 .mw-contact-service:nth-child(3) {
        grid-column: 5 / span 2;
        grid-row: 1;
    }

    .page-id-329 .mw-contact-service:nth-child(4) {
        grid-column: 2 / span 2;
        grid-row: 2;
        margin-top: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .page-id-329 .mw-contact-service:nth-child(5) {
        grid-column: 4 / span 2;
        grid-row: 2;
        margin-top: 0 !important;
        position: static !important;
        transform: none !important;
    }

}

/* Kontakt — naprawa przelewania kart między rzędami */
.page-id-329 .mw-contact-service {
    min-width: 0;
    height: 100%;
}

.page-id-329 .mw-contact-service__link {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

@media (min-width: 801px) {
    .page-id-329 .mw-contact-services__grid {
        row-gap: 28px !important;
    }
}


/* =========================================================
   Portfolio — główne filtry + podkategorie grafiki
   ========================================================= */

.page-id-242 .mw-work-filter__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.page-id-242 .cat-list--main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.page-id-242 .mw-work-filter__sub {
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(18, 35, 45, .08);
}

.page-id-242 .mw-work-filter__sub.is-visible {
    display: flex;
}

.page-id-242 .mw-work-filter__sub-label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: #65747d;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-id-242 .cat-list--sub {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.page-id-242 .cat-list--sub .cat-list_item {
    font-size: 13px;
}

@media (max-width: 700px) {

    .page-id-242 .mw-work-filter__sub {
        align-items: stretch;
        flex-direction: column;
    }

    .page-id-242 .mw-work-filter__sub-label {
        text-align: center;
    }

    .page-id-242 .cat-list--main,
    .page-id-242 .cat-list--sub {
        justify-content: center;
    }
}


/*
 * CTA: po usunięciu informacji o reCAPTCHA krótki formularz callback
 * ma naturalną wysokość zamiast rozciągać się do wysokości lewej kolumny.
 * Na desktopie jest wycentrowany pionowo względem danych kontaktowych.
 */
@media (min-width: 768px) {
    .mw-cta__form {
        align-self: end;
    }
}