/* ========== GLOBALNE ========== */

:root {
    --rc-blue: #e0f2fe;      /* kolor jak w podbitym kwadracie */
    --rc-border: #e0f2fe;
    --rc-page-bg: #f5f7fb;
    --rc-text: #111111;
}

body {
    margin: 0;
    background-color: var(--rc-page-bg);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--rc-text);
    font-size: 18px;     /* 18 px wszędzie */
    line-height: 1.6;
}

.rc-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
}

.rc-wrapper * {
    box-sizing: border-box;
}

/* ========== SEKCJE – KARTY + NAPRZEMIENNE TŁA ========== */

/* KAŻDA sekcja = karta z ramką */
.rc-section {
    margin: 0 auto 32px;
    padding: 24px 24px;
    border: 1px solid var(--rc-border);
    border-radius: 16px;
    background-color: var(--rc-blue);  /* 1,3,5,7,9... niebieskie */
}

/* Sekcje parzyste (2,4,6,8...) – białe */
.rc-section:nth-of-type(even) {
    background-color: #ffffff;
}

/* S8 – karta z podbitym kwadratem ma być biała (tak jak S2,4,6) */
.rc-section.rc-section-highlight {
    background-color: #ffffff;
}

/* Domyślne wyrównanie tekstu */
.rc-section h1,
.rc-section h2,
.rc-section h3,
.rc-section p,
.rc-section ol {
    text-align: center;
}

/* Tekst w sekcjach split (S2–S7) wyrównany do strony kolumny */
.rc-section-split h2,
.rc-section-split p,
.rc-section-split ul {
    text-align: left;
}

/* Obrazki globalnie responsywne */
.rc-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========== S1 – BANER ========== */

.rc-section-banner {
    padding: 0;
    overflow: hidden; /* obrazek dziedziczy zaokrąglenie karty */
}

.rc-banner-inner {
    display: flex;
    justify-content: center;
}

.rc-banner-media {
    width: 100%;
}

.rc-banner-image {
    width: 100%;
    height: auto;
}

/* ========== S2–S7 – ZDJĘCIE + TEKST ========== */

.rc-section-split {
    padding: 24px 24px;
}

/* Rdzeń wewnątrz karty */
.rc-section-split .rc-split {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Kolumna ze zdjęciem – dokładnie połowa sekcji */
.rc-split-media {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
}

/* Kolejność + wyrównanie obrazka względem osi pionowej */
.rc-split--left-image .rc-split-media {
    order: 0;
    justify-content: flex-end;   /* obrazek bliżej środka */
}
.rc-split--left-image .rc-split-content {
    order: 1;
}

.rc-split--right-image .rc-split-media {
    order: 1;
    justify-content: flex-start; /* obrazek bliżej środka */
}
.rc-split--right-image .rc-split-content {
    order: 0;
}

/* Sam obrazek */
.rc-split-image {
    max-width: 280px;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* Odstępy obrazka:
   - od osi środkowej: 3 px
   - od zewnętrznej krawędzi: 5 px */
.rc-split--left-image .rc-split-image {
    margin-right: 3px;  /* przy środku */
    margin-left: 1px;   /* przy zewnętrznej */
}

.rc-split--right-image .rc-split-image {
    margin-left: 5px;   /* przy środku */
    margin-right: 2px;  /* przy zewnętrznej */
}

/* Kolumna z tekstem – druga połowa sekcji */
.rc-split-content {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/* Nagłówki w splitach – większe */
.rc-split-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
}

/* Tekst w splitach – dziedziczy 18px z body */
.rc-split-text {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

/* ========== S8 – PODBITY KWADRAT (USP) ========== */

.rc-section-highlight {
    padding: 24px 24px;
}

/* Niebieski „podbity kwadrat” wewnątrz białej karty */
.rc-highlight-box {
    max-width: 1200px;           /* węższy rdzeń = efekt „podbicia” */
    margin: 0 auto;
    padding: 24px 20px;
    background-color: var(--rc-blue);
    border-radius: 16px;
}

.rc-highlight-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px;
}

/* Tekst S8 dziedziczy 18px, tylko porządkujemy marginesy */
.rc-highlight-text {
    margin: 0;
}

/* ========== S9 – TABELA DANYCH TECHNICZNYCH ========== */

.rc-section-specs {
    padding: 24px 24px 28px;
}

.rc-specs-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
}

/* wrapper pozwala przewijać w poziomie na małych ekranach */
.rc-specs-table-wrapper {
    overflow-x: auto;
}

/* pełna „tabelka techniczna” jak wcześniej, ale z 18 px */
.rc-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.6;
}

.rc-specs-table th,
.rc-specs-table td {
    border: 1px solid #d1d5db;
    padding: 8px 10px;
    text-align: center;
}

.rc-specs-table thead {
    background-color: #f3f4f6;
}

.rc-specs-table tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

/* ========== RESPONSYWNOŚĆ ========== */

@media (max-width: 768px) {

    .rc-section {
        padding: 20px 16px;
        margin-bottom: 24px;
    }

    .rc-section-split .rc-split {
        flex-direction: column;
        max-width: 100%;
    }

    .rc-split-media,
    .rc-split-content {
        flex: 1 1 100%;
        justify-content: center;
    }

    .rc-split-image {
        max-width: 220px;
    }

    .rc-split-title,
    .rc-highlight-title,
    .rc-specs-title {
        font-size: 22px;
    }
	ol {
  text-align: left;
}
}