/* ═══════════════════════════════════════════════════════════════════════
   MODUŁ · ZAKRES PRAKTYKI
   ═══════════════════════════════════════════════════════════════════════

   Kod i style przeniesione 1:1 z makiety `adwokates.ewitryna.one/www/`,
   sekcja `#w5-home-oferta` (wariant ciemny „w5").

   ── DLACZEGO KLASY MAJĄ PRZEDROSTEK `zp-` ────────────────────────────
   W oryginale sekcja korzysta z nazw ogólnych: `.lbl`, `.of`, `.dz`,
   `.ob`, `.lista`. Moduł staje w cudzym serwisie, gdzie takie nazwy mogą
   już coś znaczyć — dlatego każda dostaje przedrostek, a cała reszta
   (wartości, kolejność, punkty łamania) zostaje bez zmian.

   Zmienne motywu makiety wpisane wprost w korzeń modułu — moduł ma
   wyglądać tak samo niezależnie od serwisu, w którym stanie.
   ═══════════════════════════════════════════════════════════════════════ */

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

.zp-modul {
    /* Paleta wariantu `w5` z makiety, co do znaku. */
    --bg: #0F1013;
    --bg2: #17191E;
    --ink: #F2F0EA;
    --ink2: #A9ACB3;
    --gold: #B89562;
    --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;
    /* `.w5 section{padding:104px 0}` + `.wrap{width:min(1200px,100% - 48px)}`
       złożone w jedno: moduł nie ma osobnego opakowania na szerokość. */
    padding: 104px max(24px, calc((100% - 1200px) / 2));
}

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

.zp-modul .zp-modul__lbl {
    display: block;
    margin-bottom: 16px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.zp-modul .zp-modul__tytul {
    margin: 0 0 22px;
    color: #fff;
    font-family: Marcellus, Georgia, serif;
    font-size: clamp(34px, 4.2vw, 56px);
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.05;
}

.zp-modul .zp-of {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 80px;
    align-items: start;
}

.zp-modul .zp-dz, .zp-modul .zp-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.zp-modul .zp-dz li {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    color: #fff;
    font-family: Marcellus, serif;
    font-size: clamp(20px, 2vw, 27px);
}

/* Złota kreska na końcu wiersza. Ozdoba, nie treść — stąd `::after`. */
.zp-modul .zp-dz li::after {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 22px;
    height: 1px;
    background: var(--gold);
}

.zp-modul .zp-intro {
    margin: 0 0 28px;
    max-width: 60ch;
    color: var(--ink2);
}

.zp-modul .zp-ob h3 {
    margin: 0 0 14px;
    color: var(--goldl);
    font-family: Marcellus, Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: .01em;
}

.zp-modul .zp-ob li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink2);
    font-size: 15.5px;
}

@media (max-width: 900px) {
.zp-modul .zp-of { grid-template-columns: 1fr; }
.zp-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. */
.zp-modul ul li { padding-left: 0 !important; }
.zp-modul ul li::before { content: none !important; }

/* `display` też trzeba odzyskać — motyw wymusza `table`. */
.zp-modul .zp-dz li { display: flex !important; }

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