/* Секція */
.specs-section {
    background-color: var(--brand-blue); /* З base_color.css */
    color: var(--color-white); /* З base_color.css */
    padding: 0 20px 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Заголовок секції */
.specs-section h2 {
    color: var(--color-white); /* З base_color.css */
    text-align: center;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    margin-top: 50px;
    max-width: 100%;
}

.specs-section caption {
    padding: 10px 15px 8px;
}

/* Таблиця (загальні стилі) */
.specs-section table {
    width: 100%;
    color: var(--FOSS-Blue-text); /* З base_color.css, #023f88 */
    font: 400 14px Arial, sans-serif;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}

.specs-section table td {
    padding: 10px 15px 8px;
    vertical-align: top;
    line-height: 1.4;
}

/* 1. Заголовки таблиць (Перший рядок у кожній таблиці) */
.specs-section table tr:first-child  {
    background-color: #c8d2d5; /* Сірий фон для заголовка */
/*    font-weight: 700;*/
}

/* 2. Стиль для заголовка розділу: центрування */
/* Це перший рядок другої таблиці */
.specs-section > br + .specs-section table tr:first-child td {
    text-align: center;
}

/* 3. Рядки даних: чергування кольорів */

/* Базовий фон для всіх рядків, починаючи з другого (2, 3, 4, 5...) */
/* Встановлює другий рядок як світлий/білий (Light) */
.specs-section table tr:nth-child(n+2) ,caption {
    background-color: var(--color-bg-light); /* Общий светло-серый/белый фон */
}

/* Альтернативні рядки (3, 5, 7, ... - непарні після заголовка) */
/* Встановлює кожен наступний непарний рядок як сірий.
   Рядки 1 і 2 мають спеціальні стилі, це починається з 3. */
.specs-section table tr:nth-child(2n+3) {
    background-color: #c8d2d5; /* Сірий фон для чергування */
}

/* Адаптивні стилі */
@media (max-width: 768px) {
    .specs-section h2 {
        font-size: 32px;
        margin-bottom: 30px;
    }
    .specs-section table td {
        padding: 8px 10px 6px;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .specs-section table tr {
        border-bottom: 1px solid #aaa;
    }

    /* Перетворюємо мітки на жирний текст для кращої читабельності на мобільних пристроях */
    /* Застосовується до першої комірки в будь-якому рядку, крім рядка заголовка таблиці */
    .specs-section table tr:not(:first-child) td:first-child {
        font-weight: 700;
        color: #000;
        padding-bottom: 0;
    }

    /* Спеціальна обробка для рядка заголовка таблиці на мобільному */
    .specs-section table tr:first-child td {
        font-weight: 700;
        color: var(--FOSS-Blue-text);
        padding-top: 10px;
    }

    /* Для другої таблиці, де перший рядок є заголовком розділу, також застосовуємо спеціальний стиль */
    .specs-section > br + .specs-section table tr:first-child td {
        font-weight: 700;
        color: var(--FOSS-Blue-text);
        padding-top: 10px;
        text-align: center;
    }
}