/* ==========================================================================
   Solidstudio — custom.css (globalny CSS motywu)
   Style dodane w ramach migracji treści z Sanity do WordPressa.
   Grupy: Case study · Gated form · Resources · Strony tekstowe.
   ŹRÓDŁO: przeniesione 1:1 z Wygląd → Dostosuj → Dodatkowy CSS (W4, 2026-08-19).
   Nowe reguły dopisujemy TUTAJ, nie w Customizerze.
   ========================================================================== */


/* ==========================================================================
   0. ODZYSKANE ZE style.min.css (2026-08-19) — HOTFIX REGRESJI
   --------------------------------------------------------------------------
   Te 23 reguły były ręcznie DOPISANE na końcu `style.min.css`, poza blokami
   `@layer` — czyli wygrywały z całą resztą motywu. Tyle że `style.min.css` to
   artefakt builda (gulp): build poszedł na nowo, plik wrócił przeminifikowany
   (42 linie -> 3) z trzema nowymi regułami `.nav-is-*`, a ręczny ogon wyparował.
   Serwer dostał nową wersję, `wp_mirror.pull()` wciągnął ją do lustra — dlatego
   `wp_mirror --diff` pokazuje czysto, mimo że CSS jest niepełny.

   Oba zgłoszone objawy mają tę jedną przyczynę (potwierdzone pomiarem na żywej
   stronie PO cofnięciu #2116-2118 — cofnięcie niczego nie naprawiło):
     · Customer stories — bez `.casestudy-slider__item{grid-template-columns:1fr}`
       wraca warstwowa reguła `repeat(2, ...)` z `@layer`, a `__text` odzyskuje
       `padding:3.75rem`. W karcie 414px zostaje 62px na tekst, czyli tytuł
       łamany co słowo. Overlay traci `position:absolute`, staje się trzecim
       elementem gridu i dokłada pusty wiersz.
     · Karty case studies — bez `aspect-ratio:16/9` na `__photo img` okładki
       (są 16:9, z wypalonym tekstem) są kadrowane po bokach.

   Dlatego mieszkają teraz TU, a nie w generowanym pliku: `custom.css` jest
   pisany ręcznie i żaden build go nie nadpisze. Blok stoi na samej górze, bo
   w `style.min.css` był PRZED `custom.css` — kolejność kaskady zostaje więc
   dokładnie ta sama co przed regresją (reguły niżej w tym pliku dalej wygrywają).

   Gdyby ktoś dopisał te reguły z powrotem do `style.min.css`: usunąć stąd,
   żeby nie trzymać dwóch kopii. Wersja z ogonem siedzi w gicie pod
   `git show HEAD:website/theme/assets/styles/style.min.css`.
   ========================================================================== */

.resources__related .post-item__photo img { aspect-ratio: 16 / 9; }

@media (width >= 64rem) {
    .casestudy-single__meta {
        grid-template-columns: minmax(0, 1fr) 27.5rem;
        column-gap: 4rem;
        row-gap: 2rem;
        align-items: start;
    }
    .casestudy-single__about { grid-column: 1; grid-row: 1; }
    .casestudy-single__info { grid-column: 2; grid-row: 1 / span 2; }
    .casestudy-single__logo.full-width { grid-column: 1; grid-row: 2; }
}

.casestudy-single__photo img { aspect-ratio: 16 / 9; }
.casestudy-item__photo img { aspect-ratio: 16 / 9; }
.casestudy-slider__item__photo img { aspect-ratio: 16 / 9; }

/* Logotypy klientów: pliki są znormalizowane optycznie na przezroczystej kanwie 11:4
   (wolna przestrzeń wpalona w plik), więc pudełko ma stały aspekt, a obraz tylko contain. */
.casestudy-item__logo {
    width: 11rem;
    aspect-ratio: 11 / 4;
    height: auto;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.casestudy-slider__item__logo {
    width: 11rem;
    aspect-ratio: 11 / 4;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.casestudy-single__logo {
    width: min(100%, 17.5rem);
    aspect-ratio: 11 / 4;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.casestudy-item__logo img,
.casestudy-slider__item__logo img,
.casestudy-single__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

/* Customer stories — układ pionowy: zdjęcie 16:9 na całej szerokości karty, pod nim
   pionowy stos: logo -> tytuł -> CTA. Karta była projektowana pod zdjęcie portretowe
   w 2 kolumnach, co przy materiale 16:9 z wypalonym nagłówkiem dawało mały obraz. */
.casestudy-slider__item {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1rem;
    align-items: start;
    align-content: start;
}
.casestudy-slider__item__photo { order: -1; align-self: start; display: block; }
.casestudy-slider__item__photo img { width: 100%; border-radius: 16px; }
.casestudy-slider__item__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}
.casestudy-slider__item__head,
.casestudy-slider__item__logo,
.casestudy-slider__item__title,
.casestudy-slider__item__link,
.casestudy-slider__item__number { margin: 0; }
.casestudy-slider__item__number:not(:has(.value, .caption)) { display: none; }

/* Customer stories: klikalna cała karta (wzorzec jak .casestudy-item__link--overlay) */
.casestudy-slider__item { position: relative; }
.casestudy-slider__item__link--overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: block;
}
.casestudy-slider__item:is(:hover, :focus-within) .casestudy-slider__item__title { color: var(--clr-primary); }
.casestudy-slider__item__head { min-height: 4rem; display: flex; align-items: center; }

/* Customer stories na pojedynczej stronie industry: theme ograniczał track slidera do
   78.1875rem (1251px) — relikt starego układu z 1 dużą kartą. Przy presecie „medium"
   (3 karty) track był węższy od kontenera i sekcja nie schodziła do pełnej szerokości. */
body.page-template-template-industry .casestudy-slider__items { width: auto; }

/* Tabela capability (industry5): ikonki to SVG-e o różnym viewBox (24 i 32), a theme dawał
   tylko max-width/max-height:2rem -> jedne renderowały się 24px, inne 32px. Stały slot + contain. */
.industry5__group__item__icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.industry5__group__item__icon img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: left center;
}


/* ==========================================================================
   1. CASE STUDY (single-casestudy.php) — komponenty w treści wpisu
   ========================================================================== */

/* 1.1 Key figures / Outcomes — siatka statystyk */
.cs-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px;
    margin: 2rem 0;
}
.cs-figure {
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.cs-figure__num {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
}
.cs-figure__label {
    margin-top: .5rem;
    color: #6b7280;
}
@media (max-width: 768px) {
    .cs-figures { grid-template-columns: 1fr; }
}

/* 1.2 Cytat klienta (testimonial) */
.cs-quote {
    margin: 2.5rem 0;
    padding: 2rem 2.5rem;
    background: #f4f5fb;
    border-left: 4px solid #2f4bff;
    border-radius: 12px;
}
.cs-quote__text {
    margin: 0 0 1.25rem;
    font-size: 1.2rem;
    line-height: 1.6;
    font-style: italic;
    color: #1a1a2e;
}
.cs-quote__author { font-weight: 700; color: #111; }
.cs-quote__role   { display: block; font-weight: 400; font-size: .95rem; color: #6b7280; }

/* 1.3 Osadzone wideo (YouTube itp.) — responsywne, w szerokości kolumny */
.casestudy-single__text iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 1rem 0;
    border: 0;
}


/* ==========================================================================
   2. GATED FORM (Resources + CTA na wpisach blogowych)
   ========================================================================== */

.gated-form { max-width: 460px; margin: 1.5rem 0; }
.gated-form__form { display: flex; flex-direction: column; gap: .75rem; }
.gated-form__form input {
    padding: .75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
}
.gated-form__form .button { align-self: flex-start; }
.gated-form__msg { margin: .25rem 0 0; color: #b91c1c; }

/* 2.1 Disclaimer (zgoda / newsletter) */
.gated-form__disclaimer { margin: 1rem 0 0; font-size: .78rem; line-height: 1.5; color: #6b7280; }
.gated-form__disclaimer a { color: #2f4bff; text-decoration: underline; }

/* 2.2 Kontaktowy HubSpot form (shortcode [hubspot_contact_form]) */
.hs-contact-form { display: flex; flex-direction: column; gap: 1.25rem; max-width: 640px; }
.hs-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.hs-field { display: flex; flex-direction: column; gap: .45rem; }
.hs-field__label { font-size: .9rem; font-weight: 600; color: #1a1a2e; }
.hs-field__label em { color: #ef4444; font-style: normal; }
.hs-contact-form input,
.hs-contact-form textarea {
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font: inherit;
    background: #fff;
}
.hs-contact-form input:focus,
.hs-contact-form textarea:focus { outline: none; border-color: #2f4bff; }
.hs-contact-form textarea { resize: vertical; min-height: 120px; }
.hs-contact-form .button {
    align-self: stretch;          /* Send na pełną szerokość */
    justify-content: center;
    background: #002AEA;
    color: #fff;
}
.hs-contact-form .button:hover { background: #0022bb; }
.hs-contact-form .button i { color: #fff; }
.hs-contact-form__disclaimer { margin: 0; font-size: .78rem; line-height: 1.5; color: #6b7280; }
.hs-contact-form__disclaimer a { color: #2f4bff; text-decoration: underline; }
.hs-contact-form__msg { margin: .25rem 0 0; }
@media (max-width: 600px) { .hs-contact-form__row { grid-template-columns: 1fr; } }

/* 2.3 Sekcja kontaktowa na industries/products — scalona z CTA, granatowy band
       (reuse .contact1, id #contact-form; gradient/radius 1:1 z .cta-blue--gradient) */
#contact-form {                                    /* granatowy band, jak stary cta-blue */
    margin-top: 64px;
    background: linear-gradient(113deg, #2b406b 66.9%, #486cb5 98.49%);
    border-radius: 24px;
    padding-top: 80px;
    padding-bottom: 80px;
}
#contact-form .container {
    grid-template-columns: 1fr 1fr;               /* form 50/50, na szerokość treści */
    align-items: stretch;                         /* kolumny równej wysokości */
}
#contact-form .contact1__text { display: flex; flex-direction: column; }
#contact-form .contact1__form,
#contact-form .hs-contact-form { max-width: none; width: 100%; }
/* Phone + E-mail obok siebie — ale TYLKO gdy jest na to miejsce.
   Sztywne `1fr 1fr` obowiązywało na każdej szerokości, a lewa kolumna kurczy się
   razem z oknem: przy 1100px tor miał 189px, przy 910px — 172px. Tymczasem
   „contact@solidstudio.io" to jeden nierozrywalny token: przy font-size 1.5rem
   ma 251px, a `width: fit-content` nie zejdzie poniżej max-content, więc adres
   wychodził poza swój tor i wjeżdżał pod kartę formularza (przy 950px na 37px,
   przy 1100px na 29px). Telefon przy <=950px łamał się na dwie linie
   („+48 538 365 / 618"). Psuło się w paśmie ~901-1300px, czyli na typowym
   laptopie — poniżej 900px `.container` i tak schodzi do jednej kolumny.
   `auto-fit` + `minmax(16rem, ...)` (256px > 251px) rozstawia je w dwóch
   kolumnach dopiero, gdy obie mieszczą pełny adres, a wcześniej układa jedna
   pod drugą — bez media query i bez łamania adresu w środku.
   `width: 100%` jest warunkiem działania, nie ozdobą: `.contact1__text` to
   kolumnowy flex z `align-items: flex-start`, więc lista dostawała szerokość
   fit-content (256px) zamiast szerokości kolumny (581px przy 1440) i `auto-fit`
   liczyłby tory z za małego pudełka — dwie kolumny nie włączyłyby się nigdy. */
#contact-form .contact1__items { width: 100%; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 16px 32px; }

/* biały tekst lewej kolumny na granacie */
#contact-form .contact1__subtitle { color: #b9d0ff; }
#contact-form .contact1__title,
#contact-form .contact1__description,
#contact-form .contact1__description li,
#contact-form .contact1__item__value,
#contact-form .contact1__map-link,
#contact-form .contact1__map-link i { color: #fff; }
#contact-form .contact1__item__title { color: rgba(255, 255, 255, .6); }

/* zdjęcie w lewej kolumnie — rośnie do wysokości formularza (równe kolumny), kadr wycentrowany.
   img absolutny, żeby jego natywna wysokość nie rozpychała kolumny. */
#contact-form .contact1__description { margin-bottom: 0; }   /* mniejszy odstęp do zdjęcia */
#contact-form .contact1__photo {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 220px;
    margin: 20px 0;
    border-radius: 16px;
    overflow: hidden;
}
#contact-form .contact1__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* karta formularza — pełna biel, lekki cień (spójnie z flat/material resztą) */
#contact-form .form-container {
    background: #fff;
    box-shadow: 0 10px 40px rgba(10, 18, 40, .18);
}

@media (max-width: 900px) {
    #contact-form { padding-top: 40px; padding-bottom: 40px; }
    #contact-form .container { grid-template-columns: 1fr; }
}


/* ==========================================================================
   3. RESOURCES — pojedynczy zasób (single-resources.php)
   ========================================================================== */

/* 3.1 Layout dwukolumnowy: treść + karta z formularzem */
.resource-single { padding: 2.5rem 0 4rem; }
.resource-single__grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 3rem;
    align-items: start;
}
.resource-single__back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    color: #6b7280;
    text-decoration: none;
    font-weight: 600;
}
.resource-single__type {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .3rem .85rem;
    background: #eef1ff;
    color: #2f4bff;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.resource-single__desc { margin-top: 1rem; font-size: 1.05rem; color: #374151; }
.resource-single__subtitle { margin: 2.5rem 0 0; }

/* 3.2 Lista "What you'll learn" */
.resource-checklist {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: grid;
    gap: .85rem;
}
.resource-checklist li { position: relative; padding-left: 2rem; color: #374151; }
.resource-checklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #2f4bff;
    font-weight: 800;
}

/* 3.3 Karta z okładką + formularzem */
.resource-card {
    position: sticky;
    top: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(17, 24, 39, .06);
}
.resource-card__cover { background: #f4f5fb; padding: 2rem; text-align: center; }
.resource-card__cover img { max-width: 220px; height: auto; }
.resource-card__form { padding: 1.75rem; }
.resource-card__form-title { margin-bottom: 1rem; font-size: 1.25rem; font-weight: 700; }

@media (max-width: 900px) {
    .resource-single__grid { grid-template-columns: 1fr; gap: 2rem; }
    .resource-card { position: static; max-width: 460px; }
}

/* 3.4 "Other resources" — siatka kart */
.resources__related { padding: 3.5rem 0 1rem; }
.resources__related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.resources__related__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.resources__related__items .post-item__photo img { width: 100%; height: auto; }
@media (max-width: 900px) {
    .resources__related__items { grid-template-columns: 1fr; }
}


/* ==========================================================================
   4. STRONY TEKSTOWE (Privacy Policy, Cookies Policy — .text-page)
   ========================================================================== */

.text-page__title,
.text-page__description {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   5. THANK-YOU (contact-us/thank-you · resources/thank-you)
   Reużywa layoutu 404 (.notfound-fold) — patrz template-thankyou.php.
   Poniżej tylko drobne dodatki dla treści z edytora / przycisku pobrania.
   ========================================================================== */

.notfound-fold .button { margin-top: 1.5rem; }
.notfound-fold__link i { margin-left: .5rem; }
.thankyou__file { margin: 1.75rem 0 0; font-weight: 700; }

.blog-single__photo img{ width:100%; aspect-ratio:975/408; object-fit:cover; border-radius:24px; }
.post-item--featured__photo img{ aspect-ratio:853/490; object-fit:cover; object-position:left center; }
.post-item__photo img{ aspect-ratio:589/461; }

/* Blog: pełnoszerokie obrazki w treści (nadpisuje grid 5rem ikony-figury) */
.blog-single__text figure{
    display:block;
    grid-template-columns:none;
    gap:0;
    margin:2rem 0;
}
.blog-single__text figure img{
    width:100%;
    height:auto;
    border-radius:16px;
    place-self:auto;
}

@media (max-width: 63.99rem){

.contact1__form{
        box-shadow:none !important;
        clip-path:none !important;
        border-radius:16px;
    }

.contact1{ padding-inline:16px; }
}

/* Contact card — wewnętrzny padding, żeby treść nie kleiła się do krawędzi granatu */
.contact1 > .container{ padding-inline: 3rem; }

@media (max-width: 63.99rem){
    .contact1 > .container{ padding-inline: 1.5rem; }
    /* formularz nie wybija się na całą szerokość na mniejszych ekranach */
    .contact1__form{ box-shadow:none !important; clip-path:none !important; border-radius:16px; }
}

.page-template-template-resources .post-item__photo img{
    aspect-ratio:16/9 !important;
}

.resource-card__cover{ padding:0 !important; }
.resource-card__cover img{
    width:100%; max-width:100% !important; height:auto; display:block;
}


/* === megamenu wide ===
   Megamenu na szerokich monitorach: panel dryfował na środku ekranu, wąski,
   odklejony od logo i z pustką po prawej. Trzy przyczyny, trzy linijki.

   1. `.header > .container` ustawia `--padding: 0` (bez jednostki), a `.container`
      liczy `width: min(100% - var(--padding), var(--max-width))`. `100% - 0` to
      w CSS niepoprawne działanie (procent minus liczba) -> cała `min()` jest
      invalid -> `width: auto` -> header rozciąga się na całe okno, podczas gdy
      reszta strony trzyma się siatki 1480px. `0px` naprawia matematykę i header
      wraca na tę samą siatkę co sekcje treści. Poniżej ~1540px szerokości okna
      nic się nie zmienia (min() i tak wybiera 100%).
   2. `.megamenu` miało stałą szerokość + `left: calc((100% - width)/2)`, czyli
      centrowanie w kontenerze. Po pkt 1 kontener JEST siatką strony, więc panel
      ma po prostu wypełnić go w całości: `left: 0; width: 100%`.
   3. Hover gubił się w 4px szczeliny: `#main-nav` jest flexem wysokim na 48px
      (przez przycisk "Book live demo"), a `align-items: center` zostawia pozycję
      menu wysoką na 40px z 4px luki nad panelem. Kursor wpadał na `<ul>`,
      `:hover` znikał, panel dostawał `pointer-events: none` i uciekał spod myszy.
      `align-self: stretch` domyka li do dołu headera -> ciągły obszar hoveru.

   Mobile/tablet bez zmian: `.header__nav` ma `display:none` poniżej 1180px,
   megamenu nie istnieje, hamburger idzie swoją ścieżką (parts/modal-hamburger.php).
   ========================================================================== */

.header > .container {
    --padding: 0px;
}

.megamenu {
    left: 0;
    width: 100%;
    padding-top: 1.03675rem;
}

.is-megamenu-parent {
    display: flex;
    align-items: center;
    align-self: stretch;
}


/* === trusted logos ===
   Rząd „Trusted by leading companies…" (parts/trusted-logos.php, 7 miejsc:
   home, ddp, vcp, emobility-consulting, about, industry, slider case studies).

   1. ROZMIAR. Odziedziczona jedna wysokość dla wszystkich dawała „od sasa do
      lasa": proporcje znaków idą od 2.78:1 (Engie) do 12.37:1 (Connected Kerb),
      więc przy równej wysokości szeroki wordmark ma kilkukrotnie większą
      powierzchnię niż zwarte logo. Wysokość i szerokość liczy teraz PHP z
      proporcji pliku (wm_logo_scale) i podaje je tutaj jako --logo-h/--logo-w,
      w jednostkach --logo-base, żeby breakpoint dalej działał jedną zmienną.
      `object-fit: contain` pilnuje, żeby przycięty box (CK) letterboxował
      zamiast rozciągać, i żeby Engie (SVG bez metadanych rastra, proporcja z
      fallbacku) siedziało wyśrodkowane w swoim pudełku.
      Definitywne width/height = zarezerwowany box: przy `height:auto` +
      `max-height` trzy logotypy bez atrybutów wymiarów (Engie, Powy, Hubject)
      mierzyły się na 0x0 do czasu doczytania pliku.

   2. KOLOR. `grayscale(1)` na całym rzędzie jest bezpieczne. `brightness(0)`
      na całym rzędzie NIE JEST: 5 z 8 assetów ma nieprzezroczyste białe tło
      (Siemens i Volvo — PNG z kanałem alfa w całości 255; Powy i Hubject —
      JPEG bez alfy; Engie — SVG z <rect fill="white"> na całym płótnie) i
      zrobiłby z nich czarne klocki. Dostaje je więc TYLKO Connected Kerb,
      który ma realną przezroczystość i jako jedyny jest kolorowy (limonka →
      po samym grayscale wychodzi jasnoszary, stąd uwaga „CK ma być czarne").
      Siemens, Volvo, Powy i Hubject są już czarnym tuszem na białym, więc po
      grayscale wyglądają tak samo jak przedtem.

   3. GreenWay siedział optycznie za wysoko. To nie padding w pliku (jest ciasny),
      tylko pętla descendera w „y": środek masy tuszu wypada na 32.5% wysokości
      kadru zamiast ~50% jak u reszty (Siemens 49.7%, Volvo 49.7%, Powy 47.5%).
      Geometryczne centrowanie flexa jest więc poprawne, a wygląda źle. 11% w dół
      wyrównuje znak do linii sąsiadów; procent (a nie px) skaluje się sam.

   ponytail: reguły w pkt 2 i 3 są przypięte do nazw plików, bo wynikają z tego,
   JAK dany plik został wyeksportowany, a nie z modelu treści. Docelowo: wgrać
   8 znormalizowanych logotypów (przezroczyste tło, czarny znak, ciasny kadr) i
   skasować oba selektory — zostanie samo grayscale jako bezpiecznik.
   ========================================================================== */

/* 8 logotypów w jednej linii potrzebuje ~1092px na same znaki plus odstępy, a
   kontener listy dostaje ~965px przy oknie 1280 i ~1125px przy 1440. Poniżej
   progu rząd i tak się zawija — flex robił to treścią, więc wychodziło 7+1
   albo 6+2. Siatka zawija ZAWSZE po równo: 4+4, a jedna linia włącza się
   dopiero tam, gdzie naprawdę jest miejsce.
   Mobilna baza .9375rem trzyma znaki na tych samych ~12px co przed zmianą
   (0.8 x 15px) — h_max z wm_logo_scale jest mnożnikiem, nie wysokością. */
.trusted-logos__items {
    --logo-base: .9375rem;
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-items: center;
    align-items: center;
    column-gap: .75rem;
    row-gap: 1rem;
}

@media (width >= 64rem) {
    .trusted-logos__items {
        --logo-base: 2rem;
        column-gap: 1.5rem;
        row-gap: 1.25rem;
    }
}

@media (width >= 90rem) {
    .trusted-logos__items {
        grid-template-columns: repeat(8, auto);
        justify-content: space-between;
        column-gap: 1rem;
    }
}

.trusted-logos__item {
    height: calc(var(--logo-h, .85) * var(--logo-base));
    width: calc(var(--logo-w, 3) * var(--logo-base));
    object-fit: contain;
    filter: grayscale(1);
}

/* Siatka bezpieczeństwa, nie martwy kod: łapie limonkowe connected-kerb-logo.png
   (1876) i cs-connected-kerb-logo.png (4315) — oba mają realną przezroczystość,
   więc brightness(0) robi z nich czarny znak, a nie klocek. Galeria niesie dziś
   connected.svg, którego ten selektor NIE łapie (i nie powinien: ma białe tło
   w <rect>, a ścieżki i tak są `fill="black"`). */
.trusted-logos__item[src*="connected-kerb"] {
    filter: brightness(0);
}

/* Nudge łapie greenway-logo.png (4308) i green-way.svg (4204) — oba ciasno
   kadrowane. Celowo NIE łapie cs-green-way-logo.png (4318), który ma dosypany
   padding i jest już optycznie wyśrodkowany. */
.trusted-logos__item[src*="greenway-logo"],
.trusted-logos__item[src$="green-way.svg"] {
    transform: translateY(11%);
}

/* Blog: punktor listy = kropka w kolorze tekstu zamiast dlugiego myslnika
   (feedback Gabrieli + Piotra 2026-08-20). Baza w _wysiwyg.scss: kreska 24x2
   w --clr-gray-400. ul.bullet (ikonki) ma wyzsza specyficznosc i zostaje. */
.wysiwyg ul li:before {
    background-color: currentColor;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 11px;
}