/* ==========================================================================
   Opis redakcyjny — karta produktu (F-043) i kategoria (F-077)
   Jedna typografia dla obu miejsc: nagłówek z kreską akcentu, kolumna tekstu,
   listy z kropką, tabele danych, FAQ na natywnym <details>. Treść siedzi w
   `.serwis-opis`, nagłówek sekcji to `.serwis-opis__tytul`; odstępy sekcji
   zostają przy stronach (`.serwis-product__desc-wrap`, `.serwis-shop__desc`).
   ========================================================================== */

.serwis-opis {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sb-ink);
}
.serwis-opis p {
    margin: 0 0 1em;
}
.serwis-opis ul,
.serwis-opis ol {
    margin: 0 0 1em 1.4em;
}
.serwis-opis h2,
.serwis-opis h3 {
    font-weight: 800;
    color: var(--sb-ink);
    margin: 1.8em 0 0.6em;
}
.serwis-opis h2 { font-size: 1.4rem; }
.serwis-opis h3 { font-size: 1.15rem; }

/* `h2.` — w kategorii tytuł jest pierwszym H2 treści i musi wygrać z `.serwis-opis h2`. */
h2.serwis-opis__tytul {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--sb-ink);
    margin: 0 0 24px !important; /* Blocksy nadaje nagłówkom własny margines */
    letter-spacing: -0.005em;
    position: relative;
    padding-bottom: 16px;
}
h2.serwis-opis__tytul::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    background: var(--sb-accent);
}
@media (max-width: 768px) {
    h2.serwis-opis__tytul { font-size: 1.3rem; }
}

/* Kolumna tekstu trzyma czytelną długość wiersza; tabele danych jadą pełną
   szerokością sekcji, bo to materiał do skanowania wzrokiem. Miara w px, nie
   w `ch` — inaczej lead (większy font) łamałby wspólną krawędź akapitów. */
.serwis-opis {
    --sb-desc-measure: 680px;
}
.serwis-opis > p,
.serwis-opis > ul,
.serwis-opis > ol,
.serwis-opis > h2,
.serwis-opis > h3,
.serwis-opis > .wp-block-details {
    max-width: var(--sb-desc-measure);
}
.serwis-opis a {
    color: var(--sb-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.serwis-opis a:hover { text-decoration-thickness: 2px; }

.serwis-desc__lead {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--sb-ink);
}

.serwis-opis ul {
    margin-left: 0 !important;
    padding-left: 0;
    list-style: none;
}
.serwis-opis ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}
.serwis-opis ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--sb-accent);
}

/* Tabele danych — wiersze rozdzielone linią, bez zebry i obramowania kratki */
.serwis-desc__table {
    margin: 0 0 1.4em;
    overflow-x: auto;
}
/* Blocksy obramowuje komórki z każdej strony — zerujemy, zostaje tylko linia wiersza */
.serwis-desc__table table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    font-size: 0.94rem;
    line-height: 1.5;
}
.serwis-desc__table th,
.serwis-desc__table td {
    padding: 12px 16px 12px 0;
    text-align: left;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--sb-border-soft);
}
.serwis-desc__table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sb-muted);
    border-bottom: 2px solid var(--sb-ink);
    white-space: nowrap;
}
.serwis-desc__table tbody td:first-child { font-weight: 600; }
.serwis-desc__table tbody tr:last-child th,
.serwis-desc__table tbody tr:last-child td { border-bottom: none; }

/* Tabela wariantów: nazwa i liczby wąsko, opis konstrukcji bierze resztę.
   Proporcje mają sens dopiero przy 4+ kolumnach — przy trzech (format/indeks/cena)
   pierwsza kolumna musi wziąć tyle, ile potrzebuje jej etykieta. */
.serwis-desc__table thead th:nth-child(1):nth-last-child(n+4) { width: 15%; }
.serwis-desc__table thead th:nth-child(2):nth-last-child(n+3) { width: 14%; }
.serwis-desc__table thead th:nth-child(4):nth-last-child(n+1) { width: 12%; }

/* Tabela klucz–wartość: pierwsza kolumna to <th> w wierszu */
.serwis-desc__table--specs {
    max-width: var(--sb-desc-measure);
}
.serwis-desc__table--specs th {
    width: 38%;
    font-weight: 600;
    color: var(--sb-muted);
}
.serwis-desc__table--specs td { font-weight: 600; }

/* FAQ — akordeon na natywnym <details>, bez JS */
.serwis-desc__faq {
    border-bottom: 1px solid var(--sb-border-soft);
    padding: 0;
}
.serwis-desc__faq + .serwis-desc__faq { margin-top: 0; }
.serwis-desc__faq summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 32px 16px 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--sb-ink);
    position: relative;
}
.serwis-desc__faq summary::-webkit-details-marker { display: none; }
.serwis-desc__faq summary::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--sb-accent);
    border-bottom: 2px solid var(--sb-accent);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.18s;
}
.serwis-desc__faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.serwis-desc__faq[open] summary { padding-bottom: 4px; }
.serwis-desc__faq summary:hover { color: var(--sb-accent); }
.serwis-desc__faq > p {
    margin: 0 0 18px !important;
    padding-right: 32px;
    color: var(--sb-muted);
}

/* Zastrzeżenia i przypisy pod tabelami */
.serwis-desc__note {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--sb-muted);
}

@media (max-width: 768px) {
    .serwis-desc__lead { font-size: 1.02rem; }
    .serwis-desc__table--specs th { width: 46%; }
    .serwis-desc__table th,
    .serwis-desc__table td { padding: 10px 12px 10px 0; font-size: 0.9rem; }

    /* Tabela wariantów rozkłada się na bloki — 4 kolumny na 343px to albo
       przewijanie w poziomie, albo ucięte kolumny. Kolejność w DOM:
       1 wariant, 2 wymiary, 3 konstrukcja, 4 waga → siatka je przestawia. */
    .serwis-desc__table--variants thead { display: none; }
    .serwis-desc__table--variants table,
    .serwis-desc__table--variants tbody { display: block; }
    .serwis-desc__table--variants tr {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: start;
        column-gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid var(--sb-border-soft);
    }
    .serwis-desc__table--variants tr:last-child { border-bottom: none; }
    .serwis-desc__table--variants td {
        padding: 0;
        border: 0;
    }
    .serwis-desc__table--variants td:nth-child(1) {
        grid-area: 1 / 1 / 2 / 3;
        font-weight: 700;
        margin-bottom: 2px;
    }
    .serwis-desc__table--variants td:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .serwis-desc__table--variants td:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
    .serwis-desc__table--variants td:nth-child(2)::after {
        content: "·";
        margin-left: 14px;
        color: var(--sb-border);
    }
    .serwis-desc__table--variants td:nth-child(3) {
        grid-area: 3 / 1 / 4 / 3;
        margin-top: 4px;
        color: var(--sb-muted);
    }
}