/* ═══════════════════════════════════════════════════════════════════════
   MODUŁ · WSPÓŁPRACOWNICY
   ═══════════════════════════════════════════════════════════════════════

   Kod i style przeniesione 1:1 z makiety `adwokates.ewitryna.one/www/`,
   sekcja `#w5-home-zespol`, część `<ul class="wsp">`.

   ── NAZWY KLAS ───────────────────────────────────────────────────────
   Przedrostek `wp-` i nic poza nim. Dwa moduły z tej samej rodziny mogą
   stanąć na jednej stronie, więc żadna nazwa nie może się powtórzyć
   między modułami — `zakres_praktyki` używa `zp-`, `kancelarie_tworza`
   `kt-`, ten `wp-`. Wszystkie reguły są dodatkowo zamknięte w korzeniu
   modułu, więc nie sięgają poza własny blok.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:wght@300;400;600&display=swap');

.wp-modul {
    --bg: #0F1013;
    --ink: #F2F0EA;
    --ink2: #A9ACB3;
    --goldl: #D6B67E;
    --line: #2B2E36;

    background: var(--bg);
    color: var(--ink);
    font-family: 'Source Sans 3', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    padding: 104px max(24px, calc((100% - 1200px) / 2));
}

.wp-modul * { box-sizing: border-box; }

/* W makiecie ten nagłówek ma style wpisane przy znaczniku
   (`margin-top:48px;font-size:24px;color:#fff`) — przenosimy je tutaj,
   bo sekcja jest samodzielnym modułem i odstępu od góry pilnuje sam. */
.wp-modul .wp-modul__tytul {
    margin: 0;
    color: #fff;
    font-family: Marcellus, Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: .01em;
}

.wp-modul .wp-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px 40px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.wp-modul .wp-lista li {
    padding-top: 14px;
    /* Kreska NAD pozycją: w projekcie oddziela wiersz od nagłówka
       i od wiersza wyżej, a pod ostatnią nic nie ma. */
    border-top: 1px solid var(--line);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s;
}

.wp-modul .wp-lista b {
    display: block;
    color: #fff;
    font-family: Marcellus, serif;
    font-size: 19px;
    font-weight: 400;
}

.wp-modul .wp-lista span {
    color: var(--goldl);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.wp-modul .wp-lista p {
    margin: 6px 0 0;
    color: var(--ink2);
    font-size: 14px;
}

@media (max-width: 900px) {
.wp-modul { padding-block: 64px; }
}

/* ── ODPORNOŚĆ NA STYLE SERWISU ────────────────────────────────────────
   Motyw CMS-a ubiera KAŻDĄ listę w treści we własny punktor:

     .block ul:not(.pagination):not(.resp-tabs-list):not(.select2-selection__rendered) li
         { display: table; padding-left: 2rem; position: relative }
     … li::before { content: "●" }

   Ta reguła ma szczegółowość (0,4,2) — wyższą niż cokolwiek, co moduł
   napisze o WŁASNYCH klasach. A moduł ma wyglądać tak samo w każdym
   motywie, w którym stanie. Stąd `!important`, wyłącznie w tym jednym
   miejscu i wyłącznie na tym, co motyw narzuca: punktor i wcięcie.
   W oryginale makiety listy są czyste — bez kropek. */
.wp-modul ul li { padding-left: 0 !important; }
.wp-modul ul li::before { content: none !important; }

/* `display` też trzeba odzyskać — motyw wymusza `table`. */
.wp-modul .wp-lista li { display: block !important; }