/* ----------------------------------------------------------------
   0. Ustawienia globalne i fonty
   ---------------------------------------------------------------- */

/* Definicja palety kolorów inspirowanej polskimi kilimami (głęboka czerwień, granat, biel, złoty akcent) */
:root {
    --kolor-tla-glowny: #F7F7F7; /* Bardzo jasny, prawie biały */
    --kolor-glowny: #0D1E3A; /* Głęboki Granat (Symbol stabilności, profesjonalizmu) */
    --kolor-akcentowy: #B31E3D; /* Szlachetna Czerwień (Symbol pasji, energii) */
    --kolor-akcentowy-jasny: #F0A0A0; /* Łagodna Czerwień/Róż (Dla subtelnych wzorów) */
    --kolor-kontrast: #FFFFFF; /* Biały */
    --kolor-szczegoly: #D4A76A; /* Złoty Beż (Akcent premium, nawiązanie do starych nici) */
    --kolor-cien: #00000015; /* Subtelny cień */
}

/* Użycie rzadziej spotykanej czcionki systemowej dla nagłówków i bezpiecznej, czytelnej dla treści */
body {
    /* Ograniczenie szerokości i centrowanie zgodnie z wymogiem */
    max-width: 1090px;
    margin: 0 auto;
    background-color: var(--kolor-tla-glowny);
    color: var(--kolor-glowny);
    /* Rzadkie, ale systemowe fonty szeryfowe i bezszeryfowe */
    font-family: 'Segoe UI', 'Tahoma', 'Verdana', sans-serif;
    line-height: 1.6;
    box-shadow: 0 0 40px var(--kolor-cien); /* Efekt "dywanu" na podłodze */
}

/* Styl dla wszystkich nagłówków w stylu bardziej dekoracyjnym (jeśli dostępny) */
h1, h2, h3 {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: var(--kolor-akcentowy);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--kolor-akcentowy-jasny);
    margin-top: 40px;
}

/* ----------------------------------------------------------------
   1. Blok 1: Oferta i Zaproszenie (Header) - Wysokość i Tło
   ---------------------------------------------------------------- */
header {
    min-height: 470px; /* Minimalna wysokość zgodnie z wymogiem */
    background-color: var(--kolor-glowny); /* Tło Granat */
    color: var(--kolor-kontrast); /* Tekst Biały */
    padding: 60px 20px;
    text-align: center;
    /* Dekoracja w stylu 'Pasa Kilimowego' - geometryczny wzór na dole */
    border-bottom: 20px solid var(--kolor-akcentowy);
    position: relative;
    overflow: hidden;
}

header::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 20px;
    /* Nawiązanie do wzorów geometrycznych na kilimach (np. zygzaki) */
    background: repeating-linear-gradient(
        45deg,
        var(--kolor-szczegoly),
        var(--kolor-szczegoly) 5px,
        var(--kolor-kontrast) 5px,
        var(--kolor-kontrast) 10px
    );
    z-index: 1;
}

header h1 {
    color: var(--kolor-kontrast);
    font-size: 2.5em;
    margin-bottom: 15px;
    border-bottom: none;
}

header p {
    font-size: 1.2em;
    max-width: 700px;
    margin: 0 auto 30px;
}

/* Ozdobna link-przycisk w pierwszym bloku */
.przycisk-wezwanie {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--kolor-akcentowy); /* Czerwień */
    color: var(--kolor-kontrast);
    text-decoration: none;
    font-weight: bold;
    border: 3px solid var(--kolor-szczegoly); /* "Złota" ramka */
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
    text-transform: uppercase;
    box-shadow: 4px 4px 0px var(--kolor-szczegoly); /* Efekt 3D */
}

.przycisk-wezwanie:hover {
    background-color: #C0392B; /* Ciemniejsza Czerwień */
    transform: translateY(-2px);
    box-shadow: 6px 6px 0px var(--kolor-szczegoly);
}

/* ----------------------------------------------------------------
   2. Sekcje Główne (Main) - Kontrastowe Bloki
   ---------------------------------------------------------------- */
main {
    padding: 20px;
}

section {
    padding: 40px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid var(--kolor-akcentowy-jasny);
    box-shadow: 0 5px 15px var(--kolor-cien);
}

/* Stylizacja dla kontrastowego podziału bloków (nieparzyste/parzyste) */
section:nth-child(odd) {
    background-color: var(--kolor-kontrast);
    color: var(--kolor-glowny);
}

section:nth-child(even) {
    background-color: var(--kolor-glowny);
    color: var(--kolor-kontrast);
}

section:nth-child(even) h2,
section:nth-child(even) h3 {
    color: var(--kolor-szczegoly); /* Złoty Beż na Ciemnym Tle */
    border-bottom-color: var(--kolor-akcentowy);
}

/* ----------------------------------------------------------------
   3. Blok 3: Produkty i Artykuł
   ---------------------------------------------------------------- */

/* Lista Produktów (5 szt.) */
.lista-produktow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.produkt-szkielet {
    background-color: var(--kolor-tla-glowny);
    color: var(--kolor-glowny);
    padding: 15px;
    border-left: 5px solid var(--kolor-akcentowy);
    box-shadow: 0 2px 5px var(--kolor-cien);
}
.produkt-szkielet h3 {
    color: var(--kolor-akcentowy);
    margin-top: 0;
    border-bottom: none;
    font-size: 1.1em;
}

/* Wyraźne Wyodrębnienie Artykułu */
.artykul-tematyczny {
    margin-top: 50px;
    padding: 30px;
    background-color: #EAEAEA; /* Subtelne tło, aby go wyróżnić */
    border: 2px dashed var(--kolor-akcentowy); /* Ramka w stylu rzemieślniczym */
    border-radius: 10px;
}
.artykul-tematyczny h2 {
    color: var(--kolor-glowny);
    border-bottom: 2px solid var(--kolor-akcentowy);
}

/* ----------------------------------------------------------------
   4. Bloki 4 & 5: Specjaliści i Opinie
   ---------------------------------------------------------------- */

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

.specjalista-szkielet, .opinia-szkielet {
    padding: 15px;
    border: 1px solid var(--kolor-szczegoly);
    border-radius: 5px;
    text-align: center;
    background-color: #1A3150; /* Ciemniejszy akcent dla specjalistów/opinii na jasnym tle */
    color: var(--kolor-kontrast);
}
.specjalista-szkielet h3, .opinia-szkielet h3 {
    color: var(--kolor-akcentowy-jasny);
    margin-top: 0;
    border-bottom: none;
    font-size: 1.1em;
}

/* ----------------------------------------------------------------
   5. Blok 2: Formularz i Przyciski
   ---------------------------------------------------------------- */
.formularz-zapisu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 30px;
    background-color: var(--kolor-kontrast);
    border: 5px solid var(--kolor-akcentowy); /* Ramka w kolorze akcentu */
    border-radius: 8px;
    max-width: 500px;
    margin: 30px auto 0;
    color: var(--kolor-glowny);
}

.formularz-zapisu label {
    font-weight: bold;
    font-size: 1.1em;
}

.formularz-zapisu input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--kolor-glowny);
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box; /* Ważne dla responsywności! */
}

/* Stylizacja przycisku subskrypcji */
.przycisk-subskrybuj, .przycisk-opinia {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--kolor-akcentowy);
    color: var(--kolor-kontrast);
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    text-transform: uppercase;
    text-decoration: none;
}

.przycisk-subskrybuj:hover, .przycisk-opinia:hover {
    background-color: var(--kolor-glowny);
}

/* ----------------------------------------------------------------
   6. Blok 6 & 7: Lokalizacja i Stopka
   ---------------------------------------------------------------- */

#kontakt-i-lokalizacja {
    background-color: var(--kolor-kontrast);
    text-align: center;
}

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

.mapa-kontener {
    margin-top: 20px;
    border: 5px solid var(--kolor-glowny); /* Ramka dla widgetu mapy */
}

iframe {
    display: block; /* Usuwa domyślny dolny margines dla obrazów/iframe'ów */
}

footer {
    background-color: var(--kolor-glowny);
    color: var(--kolor-szczegoly); /* Kolor Złoty Beż w stopce */
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
    border-top: 5px solid var(--kolor-akcentowy); /* Górna krawędź jak pas kilimu */
}

/* Styl dla wymaganej, ale niezmodyfikowanej klasy w stopce */
.domainName {
    font-style: italic;
    color: var(--kolor-kontrast);
}

/* ----------------------------------------------------------------
   7. Media Queries (Wersja Mobilna)
   ---------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Ogólne zmniejszenie paddingów dla mniejszych ekranów */
    body {
        box-shadow: none;
    }
    main {
        padding: 10px;
    }
    section {
        padding: 20px 10px;
    }

    /* Dopasowanie siatek do jednej kolumny */
    .lista-produktow,
    .lista-specjalistow,
    .galeria-opinii {
        grid-template-columns: 1fr;
    }

    /* Zmniejszenie nagłówków */
    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.5em;
    }

    /* Dopasowanie formularza */
    .formularz-zapisu {
        padding: 20px;
    }
}