.wcrs-accordion {
    display: flex;
    flex-direction: column;
}

.wcrs-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    list-style: none;
}

/* Domyślny trójkąt Safari/Chrome zastępujemy własnym znacznikiem. */
.wcrs-accordion__summary::-webkit-details-marker {
    display: none;
}

.wcrs-accordion__title {
    margin: 0;
    text-wrap: balance;
}

/* Tytuł + opcjonalny podtytuł jako jedna kolumna nagłówka */
.wcrs-accordion__heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wcrs-accordion__subtitle {
    display: block;
}

/* Numeracja z licznika, nie z tytułu — przestawienie karty w repeaterze
   przenumerowuje się samo i zostaje zgodne z mapą treści. */
.wcrs-accordion--numbered {
    counter-reset: wcrs-accordion;
}

.wcrs-accordion--numbered .wcrs-accordion__title::before {
    counter-increment: wcrs-accordion;
    content: counter(wcrs-accordion) ". ";
}

/* Daszek wskazuje w górę, więc zwinięta karta odwraca go w dół — w stronę
   treści, która się pokaże. Odwrócenie jest natychmiastowe: animowany półobrót
   czytał się jak kręcenie się ikony wokół własnej osi. */
.wcrs-accordion__marker {
    flex: 0 0 auto;
    width: 14px;
    height: auto;
    fill: currentColor;
    transform: scaleY(-1);
}

.wcrs-accordion__item[open] .wcrs-accordion__marker {
    transform: none;
}

.wcrs-accordion__panel > * + * {
    margin-top: 24px;
}

/* Rytm treści z edytora (WYSIWYG): motyw daje akapitom odstęp pod spodem,
   więc listy i śródtytuły dostają to samo — inaczej akapit po liście albo
   nagłówek „Oferty” sklejały się z ostatnim punktem. */
.wcrs-accordion__content > :is(ul, ol) {
    margin-bottom: 24px;
}

.wcrs-accordion__content > :is(h2, h3, h4, h5, h6) {
    margin-top: 32px;
    margin-bottom: 8px;
}

.wcrs-accordion__content > :first-child {
    margin-top: 0;
}

.wcrs-accordion__content > :last-child {
    margin-bottom: 0;
}

/* Rozwijanie jak w akordeonie Elementora — treść zjeżdża, zamiast skakać.
   Natywne <details> potrafi to bez JS-u: ::details-content jest animowalne,
   a `interpolate-size` pozwala dojechać do wysokości `auto`, której inaczej
   nie da się interpolować. Przeglądarka bez obsługi tych własności po prostu
   otwiera kartę natychmiast — bez błędu i bez pustego miejsca. */
.wcrs-accordion {
    interpolate-size: allow-keywords;
}

@supports selector(::details-content) {
    .wcrs-accordion__item::details-content {
        block-size: 0;
        overflow: hidden;
        transition:
            block-size 300ms ease,
            content-visibility 300ms allow-discrete;
    }

    .wcrs-accordion__item[open]::details-content {
        block-size: auto;
    }
}

/* Kto prosił system o ograniczenie ruchu, dostaje przełączenie bez animacji. */
@media (prefers-reduced-motion: reduce) {
    .wcrs-accordion__item::details-content {
        transition: none;
    }
}

/* Zaokrąglone rogi karty przycinają tła nagłówka i treści — bez tego kolorowe
   tło wychodziłoby poza łuk obramowania. */
.wcrs-accordion__item {
    overflow: hidden;
}

/* Kotwica pod przyklejonym nagłówkiem — bez tego link z mapy treści przewija
   pozycję pod pasek. */
.wcrs-accordion__item {
    scroll-margin-top: 96px;
}