/* Definicja Palety Kolorów (Pole Truskawek) */
:root {
    --kolor-ciemna-zieleń: #1E4F25; /* Liście - głęboka zieleń dla tekstu/tła ciemnych sekcji */
    --kolor-jasna-zieleń: #A0C36B; /* Pędy/Tło - jasna, pastelowa zieleń */
    --kolor-truskawka: #D13E42; /* Truskawka/Akcent - intensywna czerwień */
    --kolor-kremowy: #FFFDF9; /* Kwiaty/Światło - tło główne, neutralny krem */
    --kolor-ziemia: #5C4033; /* Ziemia - ciemny brąz dla stopki/kontrastu */
    --kolor-cien: rgba(0, 0, 0, 0.1);
}

/* 1. Podstawowe Ustawienia i Reset */
/* Używamy podstawowych, bezpiecznych (systemowych) czcionek bez ładowania zewnętrznych */
body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.6;
    background-color: var(--kolor-kremowy);
    /* Ograniczenie szerokości body i centrowanie */
    max-width: 1090px;
    margin: 0 auto;
    color: var(--kolor-ciemna-zieleń); /* Domyślny kolor tekstu */
    box-shadow: 0 0 15px var(--kolor-cien); /* Subtelny cień na bocznych krawędziach */
}

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

h1, h2, h3 {
    color: var(--kolor-truskawka); /* Nagłówki w kolorze truskawki */
    margin-bottom: 0.5em;
    line-height: 1.2;
}

a {
    color: var(--kolor-truskawka);
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: var(--kolor-ciemna-zieleń);
}

/* 2. Style Wspólne dla Sekcji (Kontrastowe Rozdzielenie) */
section, header {
    padding: 30px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
}

/* Ustawienie Tła dla Nieparzystych Sekcji (Jasna Zieleń - Pędy) */
section:nth-of-type(odd) {
    background-color: var(--kolor-jasna-zieleń);
    color: var(--kolor-ciemna-zieleń);
}

/* Ustawienie Tła dla Parzystych Sekcji (Kremowy - Kwiaty/Tło Główne) */
section:nth-of-type(even) {
    background-color: var(--kolor-kremowy);
    color: var(--kolor-ciemna-zieleń);
    border: 1px solid var(--kolor-jasna-zieleń);
}

/* 3. BLOK 1: Oferta i Zaproszenie (Hero) */
.hero {
    background: linear-gradient(135deg, var(--kolor-jasna-zieleń) 0%, var(--kolor-ciemna-zieleń) 100%);
    color: var(--kolor-kremowy); /* Jasny tekst na ciemnym tle */
    min-height: 470px; /* Minimalna wysokość bloku */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    border-radius: 0; /* Brak zaokrąglenia na górze strony */
}

.hero h1 {
    color: white; /* Biały nagłówek dla kontrastu */
    font-size: 2.5em;
    margin-bottom: 0.3em;
    text-shadow: 1px 1px 3px var(--kolor-cien);
}

.hero p {
    font-size: 1.2em;
    margin-bottom: 1.5em;
    max-width: 700px;
}

/* Stylizacja Linku-Przycisku w BLOKU 1 */
.przycisk-glowny {
    display: inline-block;
    background-color: var(--kolor-truskawka); /* Czerwona Truskawka */
    color: var(--kolor-kremowy);
    padding: 15px 30px;
    border-radius: 50px; /* Zaokrąglony kształt truskawki */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 3px solid var(--kolor-truskawka);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
}

.przycisk-glowny:hover {
    background-color: var(--kolor-kremowy);
    color: var(--kolor-truskawka);
    border-color: var(--kolor-truskawka);
    transform: translateY(-2px);
}

/* 4. BLOK 2: Formularz Zapisu */
.newsletter {
    text-align: center;
    background-color: var(--kolor-kremowy); /* Kremowe tło */
    border: 2px dashed var(--kolor-jasna-zieleń); /* Granica przypominająca pędy */
}

.newsletter form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.newsletter input[type="email"] {
    padding: 12px 15px;
    border: 2px solid var(--kolor-jasna-zieleń);
    border-radius: 8px;
    flex-grow: 1;
    max-width: 350px;
    transition: border-color 0.3s;
}

.newsletter input[type="email"]:focus {
    border-color: var(--kolor-truskawka);
    outline: none;
}

/* Stylizacja Przycisku Subskrybuj */
.newsletter button[type="submit"] {
    background-color: var(--kolor-ciemna-zieleń); /* Ciemnozielony */
    color: var(--kolor-kremowy);
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.newsletter button[type="submit"]:hover {
    background-color: var(--kolor-jasna-zieleń);
    color: var(--kolor-ciemna-zieleń);
}

/* 5. BLOK 3: Produkty i Artykuł */
.lista-produktow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.produkt {
    padding: 20px;
    border: 1px solid var(--kolor-ciemna-zieleń);
    border-radius: 6px;
    background-color: var(--kolor-kremowy);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.produkt:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px var(--kolor-cien);
}

.produkt h3 {
    color: var(--kolor-ciemna-zieleń);
    font-size: 1.1em;
}

.cena {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: var(--kolor-truskawka);
    font-style: italic;
}

/* Wyróżnienie Artykułu */
.artykul-tematyczny {
    background-color: var(--kolor-ciemna-zieleń); /* Ciemnozielone tło */
    color: var(--kolor-kremowy); /* Jasny tekst */
    padding: 30px;
    border-radius: 8px;
    margin-top: 40px;
}

.artykul-tematyczny h2 {
    color: var(--kolor-jasna-zieleń); /* Jasnozielony nagłówek */
    border-bottom: 2px solid var(--kolor-jasna-zieleń);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.artykul-tematyczny p {
    margin-bottom: 1em;
    text-align: justify;
}

/* 6. BLOK 4: Specjaliści */
.lista-mentorow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
    text-align: center;
}

.mentor {
    padding: 15px;
    background-color: var(--kolor-kremowy);
    border: 1px solid var(--kolor-jasna-zieleń);
    border-radius: 6px;
}

.mentor h3 {
    color: var(--kolor-ciemna-zieleń);
    margin-bottom: 0.3em;
}

/* 7. BLOK 5: Opinie */
.opinie {
    background-color: var(--kolor-jasna-zieleń);
}

.lista-opinii {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.opinia {
    background-color: var(--kolor-kremowy);
    padding: 20px;
    border-left: 5px solid var(--kolor-truskawka); /* Akcent truskawkowy */
    border-radius: 4px;
}

blockquote {
    font-style: italic;
    margin: 0 0 10px 0;
    color: var(--kolor-ciemna-zieleń);
}

cite {
    display: block;
    text-align: right;
    font-weight: bold;
    color: var(--kolor-truskawka);
}

.zostaw-opinie {
    margin-top: 30px;
    text-align: center;
}

/* 8. BLOK 6: Lokalizacja i Mapa */
.lokalizacja {
    text-align: center;
    background-color: var(--kolor-kremowy);
}

address {
    font-style: normal;
    margin-bottom: 20px;
    font-size: 1.1em;
    color: var(--kolor-ciemna-zieleń);
}

.mapa-wrapper {
    overflow: hidden;
    padding-top: 56.25%; /* Stosunek 16:9 dla responsywności (jeśli iframe nie jest 100% wysokości) */
    position: relative;
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--kolor-cien);
}

.mapa-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 9. BLOK 7: Stopka */
footer {
    background-color: var(--kolor-ziemia); /* Ciemny brąz - ziemia */
    color: var(--kolor-kremowy);
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
    margin-top: 20px;
    border-radius: 0 0 8px 8px;
}

.domainName {
    /* Utrzymujemy zgodnie z instrukcją: bez zmian w kodzie, ale stylizujemy dla kontrastu */
    font-style: italic;
    opacity: 0.8;
}

/* 10. Wersja Mobilna (Media Queries) */
@media (max-width: 768px) {

    body {
        margin: 0; /* Pełna szerokość na małych ekranach */
        box-shadow: none;
    }

    section, header {
        padding: 20px 15px;
        margin-bottom: 15px;
    }

    /* Dopasowanie formularza do mniejszego ekranu */
    .newsletter form {
        flex-direction: column;
        align-items: center;
    }

    .newsletter input[type="email"] {
        max-width: 100%;
        margin-bottom: 10px;
    }

    /* Zmniejszenie nagłówków */
    .hero h1 {
        font-size: 2em;
    }

    /* Dopasowanie siatek do jednego elementu na wiersz */
    .lista-produktow, .lista-mentorow, .lista-opinii {
        grid-template-columns: 1fr;
    }

    .przycisk-glowny {
        padding: 12px 25px;
        font-size: 0.9em;
    }

    /* Usunięcie stosunku 16:9 dla mapy, aby utrzymać stałą wysokość w pionie */
    .mapa-wrapper {
        padding-top: 0;
        height: 300px; /* Stała wysokość na mobile */
    }

    .mapa-wrapper iframe {
        position: static;
    }
}