/*
 * styles.css
 * Оформление в стиле "Джунгли" для Клуба Инвестиционных Игр "Srebrny Denar"
 * Автор: Gemini
 */

/* =========================================================================
   I. Переменные CSS (Цветовая Палитра)
   ========================================================================= */

:root {
    /* Основные цвета джунглей */
    --kolor-ciemna-zielen: #22574A; /* Глубокий, темный лесной зеленый (для фона) */
    --kolor-srednia-zielen: #387661; /* Средний зеленый (для акцентов) */
    --kolor-jasna-zielen: #50C878;  /* Изумрудный/светлый зеленый (для кнопок/ссылок) */

    /* Натуральные и земляные оттенки */
    --kolor-ziemia: #964B00;       /* Теплый коричневый / Цвет коры (для разделителей) */
    --kolor-piasek: #F5F5DC;       /* Светлый, кремовый/песочный (для светлых блоков, фона) */

    /* Акцентные тропические цвета (для контраста и призыва к действию) */
    --kolor-akcent-pomarancz: #FF8C00; /* Ярко-оранжевый (для CTA) */
    --kolor-akcent-czerwien: #B03060;  /* Глубокий малиновый/красный */

    /* Цвета текста - всегда контрастные */
    --kolor-tekst-ciemny: #1E1E1E; /* Почти черный для светлых фонов */
    --kolor-tekst-jasny: var(--kolor-piasek); /* Светлый для темных фонов */

    /* Шрифты (стандартные системные - без Google Fonts) */
    --czcionka-naglowek: 'Georgia', 'Times New Roman', serif;
    --czcionka-tresc: 'Arial', 'Helvetica Neue', sans-serif;
}

/* =========================================================================
   II. Общие стили и Сброс (Reset)
   ========================================================================= */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--czcionka-tresc);
    line-height: 1.6;
    color: var(--kolor-tekst-ciemny);
    background-color: var(--kolor-piasek); /* Светлый фон всей страницы */
}

/* Общий контейнер для центрирования контента */
.kontener {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 15px;
}

h1, h2, h3 {
    font-family: var(--czcionka-naglowek);
    margin-bottom: 15px;
    line-height: 1.2;
}

h1 { font-size: 2.2em; color: var(--kolor-akcent-czerwien); }
h2 { font-size: 1.8em; color: var(--kolor-srednia-zielen); }
h3 { font-size: 1.3em; color: var(--kolor-ciemna-zielen); }

p {
    margin-bottom: 20px;
}

/* Горизонтальная линия в стиле "кора" */
hr {
    border: none;
    height: 3px;
    background-color: var(--kolor-ziemia);
    margin: 40px 0;
}

/* =========================================================================
   III. Стили Кнопок (CTA)
   ========================================================================= */

.przycisk-gora, .przycisk {
    display: inline-block;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s;
    text-transform: uppercase;
}

/* Кнопка в хедере (самая главная) */
.przycisk-gora {
    background-color: var(--kolor-akcent-pomarancz); /* Яркий тропический акцент */
    color: var(--kolor-tekst-ciemny);
    box-shadow: 0 4px 0 var(--kolor-ziemia);
    margin-top: 20px;
}

.przycisk-gora:hover {
    background-color: #FF7F00; /* Немного темнее при наведении */
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--kolor-ziemia);
}

/* Стандартная кнопка (в форме подписки, м.б. в футере) */
.przycisk {
    background-color: var(--kolor-jasna-zielen); /* Изумрудный зеленый */
    color: var(--kolor-tekst-ciemny);
}

.przycisk:hover {
    background-color: var(--kolor-srednia-zielen);
    color: var(--kolor-tekst-jasny);
}

/* =========================================================================
   IV. Стили Блоков (Контрастное разделение)
   ========================================================================= */

.sekcja {
    padding: 60px 0;
    background-color: var(--kolor-piasek); /* Светлый фон */
    color: var(--kolor-tekst-ciemny);
}

.sekcja-jasna {
    padding: 60px 0;
    background-color: #E0EEDD; /* Очень светлый, почти белый с зеленым оттенком */
    color: var(--kolor-tekst-ciemny);
}

.sekcja-ciemna {
    padding: 60px 0;
    background-color: var(--kolor-ciemna-zielen); /* Глубокий темный фон джунглей */
    color: var(--kolor-tekst-jasny); /* Контрастный светлый текст */
}

.sekcja-ciemna h2, .sekcja-ciemna h3 {
    color: var(--kolor-jasna-zielen);
}

/* Блок 1: Хедер */
header {
    background-color: var(--kolor-srednia-zielen); /* Фон с зеленым оттенком */
    color: var(--kolor-tekst-jasny);
    padding: 80px 0 60px;
    text-align: center;
    /* Можно добавить фоновый паттерн в виде стилизованных листьев SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%2322574A' fill-opacity='0.4' d='M0 100C3.333 88.333 6.667 76.667 10 65s6.667-23.333 10-35 6.667-23.333 10-35c3.333-11.667 6.667-23.333 10-35H0V100zM50 100c3.333-11.667 6.667-23.333 10-35s6.667-23.333 10-35 6.667-23.333 10-35c3.333-11.667 6.667-23.333 10-35H50V100z'/%3E%3C/svg%3E");
    background-size: 50px 50px;
}

header h1 {
    color: var(--kolor-tekst-jasny);
    text-shadow: 2px 2px var(--kolor-ciemna-zielen);
}

header h2 {
    color: var(--kolor-jasna-zielen);
    margin-top: -10px;
}

/* Блок 6: Адрес и карта */
.sekcja-adres {
    padding: 50px 0;
    background-color: var(--kolor-ciemna-zielen);
    color: var(--kolor-tekst-jasny);
    text-align: center;
}

.sekcja-adres address {
    font-style: normal;
    font-size: 1.2em;
    margin-bottom: 25px;
    color: var(--kolor-jasna-zielen);
}

.mapa-kontener {
    margin-top: 20px;
    border: 5px solid var(--kolor-ziemia);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    line-height: 0; /* Убираем лишний отступ под iframe */
}

/* Блок 7: Футер */
footer {
    background-color: var(--kolor-tekst-ciemny); /* Очень темный/черный для максимального контраста */
    color: var(--kolor-piasek);
    padding: 20px 0;
    text-align: center;
    font-size: 0.85em;
}

.domainName {
    font-weight: bold;
    color: var(--kolor-jasna-zielen); /* Подсвечиваем доменное имя */
}

/* =========================================================================
   V. Стили Элементов
   ========================================================================= */

/* Стили для формы подписки (Блок 2) */
.formularz-subskrypcja, .formularz-opinia {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 450px;
    margin: 30px auto 0;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон для темного блока */
    border-radius: 8px;
}

.sekcja-ciemna label {
    color: var(--kolor-jasna-zielen);
    font-weight: bold;
}

input[type="email"], input[type="text"], textarea {
    padding: 12px;
    border: 2px solid var(--kolor-srednia-zielen);
    border-radius: 5px;
    font-size: 1em;
    width: 100%;
    background-color: var(--kolor-piasek);
    color: var(--kolor-tekst-ciemny);
}

/* Стили для продуктов (Блок 3) */
.lista-produktow {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
}

.produkt {
    padding: 20px;
    border-left: 5px solid var(--kolor-akcent-pomarancz);
    background-color: var(--kolor-jasna-zielen);
    color: var(--kolor-tekst-ciemny);
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.produkt h3 {
    color: var(--kolor-tekst-ciemny);
    margin-top: 0;
}

/* Стили для специалистов (Блок 4) */
.lista-specjalistow {
    display: grid;
    gap: 30px;
    text-align: center;
}

.specjalista {
    padding: 20px;
    background-color: var(--kolor-srednia-zielen);
    color: var(--kolor-tekst-jasny);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.specjalista h3 {
    color: var(--kolor-akcent-pomarancz);
}

/* Стили для отзывов (Блок 5) */
.lista-opinii {
    display: grid;
    gap: 20px;
}

.opinia {
    background-color: var(--kolor-piasek);
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--kolor-akcent-czerwien);
    font-style: italic;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.opinia p {
    margin-bottom: 10px;
}

.opinia footer {
    font-style: normal;
    font-weight: bold;
    color: var(--kolor-srednia-zielen);
    background-color: transparent; /* Переопределяем стиль из глобального футера */
    padding: 0;
    text-align: right;
}

/* =========================================================================
   VI. Медиа-запросы (Мобильная версия)
   ========================================================================= */

@media (max-width: 992px) {
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }

    .kontener {
        padding: 25px 10px;
    }

    .sekcja, .sekcja-jasna, .sekcja-ciemna {
        padding: 40px 0;
    }

    /* Продукты - 2 колонки */
    .lista-produktow {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    /* Специалисты - 2 колонки */
    .lista-specjalistow {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 576px) {
    h1 { font-size: 1.6em; }
    h2 { font-size: 1.3em; }

    /* Продукты, Специалисты, Отзывы - 1 колонка */
    .lista-produktow, .lista-specjalistow, .lista-opinii {
        grid-template-columns: 1fr;
    }

    .przycisk-gora, .przycisk {
        padding: 10px 20px;
        width: 100%; /* Кнопки на полную ширину на мобильных */
    }

    /* Уменьшение отступов для плотности контента */
    .sekcja, .sekcja-jasna, .sekcja-ciemna {
        padding: 30px 0;
    }

    /* Формы */
    .formularz-subskrypcja, .formularz-opinia {
        padding: 15px;
    }
}