/*
 * Typografia bloku treści banera (cms.SlideBlock.content — HTML z edytora XPress)
 * + stałe przyciski pod treścią. Jeden arkusz dla trzech miejsc, żeby edycja była WYSIWYG:
 *   1. sklep (index.html, .hero-slide-block) — wariant wg media query (≥1024 px = desktop),
 *   2. podgląd w MIS (kwadraciki slide_position_editor.js) — wymuszony .sbc--desktop / .sbc--mobile,
 *   3. wnętrze TinyMCE (body_class „slide-block-content sbc--desktop”) — tam _slide_block_card.html
 *      nadpisuje tło i kolory na jasne (edycja czytelna przy każdym kolorze tekstu).
 *
 * Rozmiary w em od bazy bloku (--sbc-base: 20 px desktop / 16 px mobile), dlatego rozmiary
 * czcionek w edytorze są w em (font_size_formats) — skalują się razem z blokiem na mobile.
 * Szerokość bloku to osobne ustawienie (desktop_width / mobile_width). h3/h2/p odtwarzają dawny układ
 * etykieta/tytuł/opis (migracja cms.0036).
 */
.slide-block-content {
    --sbc-base: 16px;
    --sbc-h1: 2.6em;
    --sbc-h2: 2.25em;
    --sbc-h3: 0.875em;
    --sbc-muted: #dbeafe;
    font-size: var(--sbc-base);
    line-height: 1.5;
    overflow-wrap: break-word;
}
@media (min-width: 1024px) {
    .slide-block-content {
        --sbc-base: 20px;
        --sbc-h1: 4.2em;
        --sbc-h2: 3.6em;
        --sbc-h3: 0.7em;
    }
}
.slide-block-content.sbc--desktop { --sbc-base: 20px; --sbc-h1: 4.2em; --sbc-h2: 3.6em; --sbc-h3: 0.7em; }
.slide-block-content.sbc--mobile { --sbc-base: 16px; --sbc-h1: 2.6em; --sbc-h2: 2.25em; --sbc-h3: 0.875em; }
.slide-block-content.sbc--dark { --sbc-muted: rgba(20, 55, 88, 0.8); }

.slide-block-content h1,
.slide-block-content h2 { font-weight: 900; line-height: 1; letter-spacing: -0.05em; margin: 0 0 0.15em; }
.slide-block-content h1 { font-size: var(--sbc-h1); }
.slide-block-content h2 { font-size: var(--sbc-h2); }
.slide-block-content h3 {
    font-size: var(--sbc-h3); font-weight: 700; line-height: 1.4; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--xero-accent, #0096db); margin: 0 0 0.85em;
}
.slide-block-content h4 { font-size: 1.5em; font-weight: 800; line-height: 1.2; margin: 0 0 0.3em; }
.slide-block-content h5 { font-size: 1.2em; font-weight: 700; line-height: 1.3; margin: 0 0 0.3em; }
.slide-block-content h6 { font-size: 1em; font-weight: 700; margin: 0 0 0.3em; }
.slide-block-content p { margin: 0.8em 0 0; color: var(--sbc-muted); }
.slide-block-content ul, .slide-block-content ol { margin: 0.6em 0 0 1.25em; color: var(--sbc-muted); }
.slide-block-content ul { list-style: disc; }
.slide-block-content ol { list-style: decimal; }
.slide-block-content a { text-decoration: underline; }
.slide-block-content strong, .slide-block-content b { font-weight: 800; }
.slide-block-content img { max-width: 100%; height: auto; display: inline-block; }
.slide-block-content > :first-child,
.slide-block-content .sbc-text > :first-child { margin-top: 0; }

/* Przyciski — sztywny wygląd, niezależny od treści XPress */
.slide-block-content .sbc-buttons { display: flex; flex-wrap: wrap; gap: 0.75em; margin-top: 1.5em; }
.slide-block-content .sbc-buttons[data-align="center"] { justify-content: center; }
.slide-block-content .sbc-buttons[data-align="right"] { justify-content: flex-end; }
.slide-block-content .sbc-btn {
    display: inline-block; font-size: clamp(13px, 0.8em, 18px); font-weight: 700; line-height: 1.5;
    padding: 1em 2em; border-radius: 0.75rem; text-align: center; text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.slide-block-content .sbc-btn--primary { background: #fff; color: var(--xero-navy, #143758); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); }
.slide-block-content .sbc-btn--primary:hover { background: var(--xero-accent, #0096db); color: #fff; }