/* === STYL OGÓLNY === */
html {
    box-sizing: border-box; /* Lepszy model pudełkowy */
    scroll-behavior: smooth; /* Płynne przewijanie do kotwic */
}

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

body {
    /* Używamy bezpiecznych czcionek systemowych, bez Google Fonts */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    background-color: #e0e0e0; /* Tło "na zewnątrz" strony */
    color: #333;

    /* === GŁÓWNY UKŁAD === */
    max-width: 1090px;
    margin: 0 auto;
    padding: 10px; /* Mały odstęp od krawędzi na dużych ekranach */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Główny cień strony */
}

/* === TYPOGRAFIA (NAGŁÓWKI) === */
h1, h2, h3, h4, h5, h6 {
    /* Styl "dywanowy" dobrze komponuje się z czcionkami szeryfowymi */
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

h1 { font-size: 2.8em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.6em; }

p {
    margin-bottom: 15px;
}

a {
    color: #0d47a1; /* Domyślny kolor linku */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === PODSTAWOWA STRUKTURA BLOKÓW === */
header,
section,
footer {
    padding: 50px 40px;
    margin-bottom: 15px; /* Odstęp między "panelami" dywanu */
    border-radius: 4px;
    /* Subtelny cień i obramowanie dla każdego bloku */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #c0c0c0;
}

/* === BLOK 1: HERO (OFERTA) === */
.hero {
    min-height: 470px;
    background-color: #004d40; /* Głęboka zieleń */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Obramowanie imitujące złoty haft na dywanie */
    border: 4px double #fbc02d; /* Złoty kolor */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
}

.hero h1 {
    color: #ffffff;
}

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

/* Przycisk-kotwica w pierwszym bloku */
.przycisk-glowny {
    display: inline-block;
    background-color: #fbc02d; /* Złoty */
    color: #004d40; /* Kolor tekstu dopasowany do tła bloku */
    padding: 15px 35px;
    font-size: 1.1em;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 25px;
    border: 2px solid #f9a825;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.przycisk-glowny:hover {
    background-color: #fdd835; /* Jaśniejszy złoty */
    color: #00332a;
    transform: translateY(-3px); /* Efekt uniesienia */
    text-decoration: none;
}

/* === BLOK 2: NEWSLETTER (FORMULARZ) === */
#formularz-zapisu {
    background-color: #f5f5f5; /* Jasnoszary / beżowy */
    color: #333;
    text-align: center;
    border-top: 5px solid #a1887f; /* Brązowe akcenty */
    border-bottom: 5px solid #a1887f;
}

#formularz-zapisu form {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Aby elementy miały tę samą wysokość */
    margin-top: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#formularz-zapisu input[type='email'] {
    flex-grow: 1; /* Input zajmuje dostępną przestrzeń */
    padding: 15px;
    font-size: 1em;
    border: 2px solid #c0c0c0;
    border-right: none;
    border-radius: 5px 0 0 5px; /* Zaokrąglenie tylko z lewej */
    min-width: 250px;
}

#formularz-zapisu input[type='email']:focus {
    outline: none;
    border-color: #01579b;
    box-shadow: 0 0 5px rgba(1, 87, 155, 0.3);
}

/* Stylizacja przycisku "Subskrybuj" */
#formularz-zapisu button[type='submit'] {
    padding: 15px 30px;
    font-size: 1em;
    font-weight: bold;
    font-family: Arial, sans-serif;
    background-color: #01579b; /* Granatowy */
    color: white;
    border: 2px solid #01579b;
    border-radius: 0 5px 5px 0; /* Zaokrąglenie tylko z prawej */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#formularz-zapisu button[type='submit']:hover {
    background-color: #0277bd; /* Jaśniejszy granatowy */
}

/* === BLOK 3: USŁUGI I ARTYKUŁ === */
.uslugi-i-artykul {
    background-color: #ffffff; /* Czysta biel dla czytelności */
    color: #222;
}

.uslugi ul {
    list-style-type: '✓ '; /* Niestandardowy punktor */
    padding-left: 30px;
    margin-bottom: 20px;
}

.uslugi li {
    padding-left: 10px;
    margin-bottom: 10px;
    font-size: 1.1em;
}

/* Gruba linia oddzielająca, jak szew na dywanie */
.uslugi-i-artykul hr {
    border: 0;
    height: 3px;
    background-color: #e0e0e0;
    margin: 40px 0;
}

/* === WYRÓŻNIENIE ARTYKUŁU === */
.artykul-blogowy {
    background-color: #fdfaf5; /* Lekki kremowy */
    color: #333;
    padding: 35px;
    border-radius: 5px;
    border: 2px solid #e0cda9; /* Beżowe obramowanie */
    /* Cień wewnętrzny dla "zagłębienia" tekstu */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.07);
}

.artykul-blogowy h3 {
    color: #004d40; /* Kolor nagłówka nawiązujący do bloku hero */
    border-bottom: 2px solid #fbc02d; /* Złoty akcent */
    padding-bottom: 10px;
    display: inline-block;
}

/* Lepsza czytelność artykułu */
.artykul-blogowy p {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.1em;
    line-height: 1.7;
}

/* === BLOK 4: SPECJALIŚCI === */
.specjalisci {
    background-color: #01579b; /* Granatowy */
    color: #ffffff;
}

.specjalisci h2 {
    color: #ffffff;
}

.zespol {
    display: grid;
    /* Elastyczna siatka, dopasowująca się do liczby specjalistów */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px; /* Odstęp między kartami */
    margin-top: 20px;
}

.specjalista {
    background-color: rgba(255, 255, 255, 0.05); /* Lekko przezroczyste tło */
    padding: 25px;
    border-radius: 5px;
    border-left: 5px solid #fbc02d; /* Złoty akcent */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.specjalista h3 {
    color: #ffffff;
    margin-bottom: 5px;
}

.specjalista p {
    font-size: 0.95em;
    color: #e0e0e0; /* Jaśniejszy tekst */
    margin-bottom: 0;
}

/* === BLOK 4.1: DZIAŁALNOŚĆ === */
.dzialalnosc {
    background-color: #e0cda9; /* Beżowy/Miodowy */
    color: #3b3b3a;
    /* Obramowanie imitujące ścieg */
    border-top: 3px dashed #a1887f;
    border-bottom: 3px dashed #a1887f;
}

/* === BLOK 5 i 5.2: OPINIE === */
.opinie {
    background-color: #f5f5f5; /* Jasnoszary, jak newsletter */
}

.lista-opinii {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dwie kolumny opinii */
    gap: 20px;
}

.opinia {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #004d40; /* Akcent w kolorze zielonym */
}

.opinia p {
    font-style: italic;
    margin-bottom: 15px;
    color: #444;
}

.opinia footer {
    font-style: normal;
    font-weight: bold;
    color: #004d40;
    text-align: right;
}

/* Sekcja "Zostaw opinię" */
.zostaw-opinie {
    background-color: #fdfaf5; /* Kremowy, jak artykuł */
    text-align: center;
    border: 2px solid #e0cda9;
    margin-top: 20px; /* Oddzielenie od listy opinii */
}

/* === BLOK 6: LOKALIZACJA I MAPA === */
.lokalizacja {
    background-color: #ffffff;
    padding-bottom: 20px; /* Mniejszy padding na dole */
}

.lokalizacja address {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: normal;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fcfcfc;
    border: 1px solid #eee;
}

.mapa-wrapper {
    /* Obramowanie dla mapy */
    border: 5px solid #004d40;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    overflow: hidden; /* Aby zaokrąglić rogi iframe */
    line-height: 0; /* Usuwa dziwny odstęp pod iframe */
}

.mapa-wrapper iframe {
    width: 100%;
    display: block; /* Usuwa odstęp */
    border: 0;
}

/* === BLOK 7: STOPKA === */
footer {
    background-color: #263238; /* Ciemny grafit/łupek */
    color: #e0e0e0;
    text-align: center;
    padding: 30px 20px;
    font-size: 0.9em;
    margin-bottom: 0;
    /* Górne obramowanie - "zakończenie dywanu" */
    border-top: 5px solid #fbc02d;
}

footer p {
    margin-bottom: 0;
}


/* === $$$ WERSJA MOBILNA $$$ === */
@media (max-width: 768px) {
    body {
        padding: 0; /* Usuwamy padding body na mobile */
    }

    /* Zmniejszamy paddingi sekcji na mobile */
    header,
    section,
    footer {
        padding: 30px 20px;
        margin-bottom: 10px;
    }

    h1 { font-size: 2.2em; }
    h2 { font-size: 1.8em; }

    /* Blok Hero - usuwamy minimalną wysokość */
    .hero {
        min-height: auto;
        padding: 50px 20px;
    }

    /* Formularz newslettera - układ kolumnowy */
    #formularz-zapisu form {
        flex-direction: column;
    }

    #formularz-zapisu input[type='email'] {
        border-radius: 5px 5px 0 0; /* Zaokrąglenie górne */
        border-right: 2px solid #c0c0c0;
        text-align: center;
    }

    #formularz-zapisu button[type='submit'] {
        border-radius: 0 0 5px 5px; /* Zaokrąglenie dolne */
        width: 100%;
    }

    /* Opinie - jedna kolumna */
    .lista-opinii {
        grid-template-columns: 1fr;
    }

    /* Specjaliści - jedna kolumna */
    .zespol {
        grid-template-columns: 1fr;
    }

    /* Mniejszy padding dla artykułu */
    .artykul-blogowy {
        padding: 25px;
    }
}