/* Komentarz: Resetowanie podstawowych stylów */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* * Komentarz: Użycie systemowych, bezszeryfowych czcionek
 * o charakterze technicznym/przemysłowym (Sans-Serif)
 * lub monospaced dla bardziej "maszynowego" efektu, bez Google Fonts.
 */
:root {
    /* Paleta kolorów "Fabryka Traktorów": Ciemna, kontrastowa, z akcentami rdzy/ostrzeżenia */
    --kolor-tlo-glowny: #1A1A1A; /* Ciemny grafit/węgiel */
    --kolor-tlo-akcent: #333333; /* Ciemniejsza stal */
    --kolor-tekst-jasny: #F0F0F0; /* Biały/jasna stal */
    --kolor-tekst-ciemny: #1A1A1A;
    --kolor-akcent-rdza: #C04A00; /* Rdza/Pomarańcz ostrzegawczy */
    --kolor-akcent-surowy: #A8A8A8; /* Surowa stal/cement */

    /* Marginesy i paddingi */
    --padding-sekcja: 60px 20px;
    --promien-zaokraglenia: 0px; /* Styl industrialny - brak zaokrągleń */
}

body {
    font-family: 'Arial Black', Gadget, Arial, sans-serif; /* Industrialny, mocny krój */
    line-height: 1.6;
    background-color: #0D0D0D; /* Super ciemne tło poza body */
    color: var(--kolor-tekst-jasny);

    /* Wymagana maksymalna szerokość i centrowanie */
    max-width: 1090px;
    margin: 0 auto;

    /* Komentarz: Dodanie delikatnego "tekstury" w tle */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------- */
/* Globalne elementy i nagłówki */
/* ---------------------------------------------------- */

h1, h2, h3 {
    font-family: 'Impact', 'Franklin Gothic Bold', 'Arial Black', sans-serif;
    color: var(--kolor-akcent-rdza);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    border-bottom: 3px solid var(--kolor-akcent-surowy);
    padding-bottom: 5px;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }

section {
    padding: var(--padding-sekcja);
    margin-bottom: 15px;
    border: 1px solid var(--kolor-tlo-akcent);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------- */
/* BLOK 1: Oferta sprzedaży (Wysokość min 470px) */
/* ---------------------------------------------------- */

header {
    background-color: var(--kolor-akcent-surowy); /* Jaśniejsza, surowa stal */
    color: var(--kolor-tekst-ciemny);
    min-height: 470px; /* Wymagana minimalna wysokość */
    padding: var(--padding-sekcja);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    /* Akcenty industrialne - imitacja blachy */
    border-bottom: 8px double var(--kolor-akcent-rdza);

}

header h1 {
    color: var(--kolor-akcent-rdza);
    text-shadow: 1px 1px 0px var(--kolor-tlo-glowny);
    border-color: var(--kolor-tlo-glowny);
}

header p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* Ozdobna link-przycisk w Bloku 1 */
.przycisk-zapisu {
    display: inline-block;
    background-color: var(--kolor-akcent-rdza);
    color: var(--kolor-tekst-jasny);
    padding: 15px 30px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    border: 3px solid var(--kolor-tlo-glowny); /* Kontrastowa ramka */
    transition: background-color 0.3s, transform 0.1s;
    box-shadow: 4px 4px 0px var(--kolor-tlo-glowny); /* Efekt 3D/Wytłoczenie */
}

.przycisk-zapisu:hover {
    background-color: #E05A00; /* Jaśniejsza rdza na hover */
    transform: translateY(-2px); /* Delikatne uniesienie */
    box-shadow: 6px 6px 0px var(--kolor-tlo-glowny);
}

/* ---------------------------------------------------- */
/* Kontrastowe kolory dla bloków (Mieszanie ciemnego/jasnego tła) */
/* ---------------------------------------------------- */

/* Ciemne bloki (Tło węgiel, tekst jasny) */
#specjalisci, #opinie, #formularz-zapisu, footer {
    background-color: var(--kolor-tlo-glowny);
    color: var(--kolor-tekst-jasny);
}

/* Jasne/Akcentowe bloki (Tło surowa stal/ciemny cement, tekst ciemny/rdzawy) */
#opinia, #produkty, #dzialalnosc, #kontakt {
    background-color: var(--kolor-tlo-akcent);
    color: var(--kolor-tekst-jasny);
}

/* Nagłówki w jasnych/ciemnych blokach */
#opinia h2, #produkty h2, #dzialalnosc h2, #kontakt h2 {
    color: var(--kolor-akcent-rdza); /* Rdzawy akcent na nagłówkach */
}

/* ---------------------------------------------------- */
/* BLOKI: Produkty, Opinie, Specjaliści (Układ siatki) */
/* ---------------------------------------------------- */

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

.produkt, .opinia, .specjalista {
    background-color: var(--kolor-tlo-glowny);
    padding: 20px;
    border: 2px solid var(--kolor-akcent-rdza);
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.4);
}

.opinia p {
    font-style: italic;
    border-left: 5px solid var(--kolor-akcent-surowy);
    padding-left: 10px;
    margin-bottom: 10px;
}

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

.specjalista .rola {
    display: block;
    color: var(--kolor-akcent-surowy);
    font-size: 0.9em;
    margin-top: 5px;
}

/* ---------------------------------------------------- */
/* Artykuł tematyczny (Wyróżnienie) */
/* ---------------------------------------------------- */

#artykul {
    background-color: var(--kolor-tlo-glowny); /* Ciemniejsze tło w bloku produktów */
    padding: 30px;
    margin-top: 40px;
    border: 5px solid var(--kolor-akcent-rdza);
    box-shadow: 0 0 20px rgba(192, 74, 0, 0.5); /* Żarzący się efekt rdzy */
}

#artykul h3 {
    color: var(--kolor-tekst-jasny);
    background-color: var(--kolor-akcent-rdza);
    padding: 10px;
    margin: -30px -30px 20px -30px; /* Rozciągnięcie nagłówka */
    text-align: center;
}

#artykul p {
    text-align: justify;
}

/* ---------------------------------------------------- */
/* BLOK 2 & 5.2: Formularze i Przyciski */
/* ---------------------------------------------------- */

label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: var(--kolor-akcent-surowy);
    text-transform: uppercase;
    font-size: 0.8em;
}

input[type="email"],
input[type="text"],
textarea {
    width: 100%;
    padding: 15px;
    margin-top: 5px;
    background-color: var(--kolor-tekst-jasny); /* Jasne pole wejściowe */
    color: var(--kolor-tekst-ciemny);
    border: 2px solid var(--kolor-akcent-rdza);
    font-family: monospace; /* Monospace dla 'technicznego' wyglądu */
    font-size: 1em;
    outline: none;
}

/* Globalny styl dla wszystkich przycisków typu submit */
button[type="submit"], .przycisk-subskrybuj {
    width: 100%;
    padding: 15px;
    margin-top: 30px;
    background-color: var(--kolor-akcent-surowy); /* Kolor stali */
    color: var(--kolor-tekst-ciemny);
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    border: 3px solid var(--kolor-akcent-rdza);
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 3px 3px 0px var(--kolor-akcent-rdza);
}

button[type="submit"]:hover, .przycisk-subskrybuj:hover {
    background-color: var(--kolor-akcent-rdza); /* Zamiana na kolor rdzy na hover */
    color: var(--kolor-tekst-jasny);
    box-shadow: 0px 0px 0px var(--kolor-akcent-rdza);
    transform: translate(3px, 3px); /* Wciśnięcie przycisku */
}

/* ---------------------------------------------------- */
/* BLOK 6: Kontakt i Mapa */
/* ---------------------------------------------------- */

.mapa-container {
    margin-top: 20px;
    border: 5px solid var(--kolor-akcent-rdza); /* Ramka 'techniczna' wokół mapy */
}

/* Styl dla Iframe (widget Google Maps) */
.mapa-container iframe {
    display: block;
}

/* ---------------------------------------------------- */
/* BLOK 7: Stopka */
/* ---------------------------------------------------- */

footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8em;
    border-top: 8px double var(--kolor-akcent-rdza); /* Podwójna linia 'spawu' */
}

footer p {
    margin: 0;
    color: var(--kolor-akcent-surowy);
}

/* ---------------------------------------------------- */
/* Responsywność (Mobilna Wersja) */
/* ---------------------------------------------------- */

@media (max-width: 768px) {

    /* Zmniejszenie marginesów i paddingów */
    :root {
        --padding-sekcja: 40px 15px;
    }

    h1 { font-size: 2em; }
    h2 { font-size: 1.5em; }

    /* Układ siatki na urządzeniach mobilnych - jeden element na kolumnę */
    .lista-produktow, .lista-opinii, .lista-specjalistow {
        grid-template-columns: 1fr;
    }

    /* Dopasowanie nagłówka artykułu */
    #artykul h3 {
        padding: 15px 10px;
        margin: -30px -15px 20px -15px;
    }

    /* Dopasowanie cienia przycisku do mniejszych ekranów */
    .przycisk-zapisu {
        box-shadow: 2px 2px 0px var(--kolor-tlo-glowny);
    }

    .przycisk-zapisu:hover {
        box-shadow: 3px 3px 0px var(--kolor-tlo-glowny);
    }

    /* Wciśnięcie przycisków w formularzach */
    button[type="submit"], .przycisk-subskrybuj {
        box-shadow: 2px 2px 0px var(--kolor-akcent-rdza);
    }
}

/* Komentarz: Styl dla elementu span w stopce (jeśli kiedyś miałby być użyty) */
.domainName {
    display: block; /* Przeniesienie na nową linię w razie potrzeby */
    color: var(--kolor-akcent-rdza);
    font-weight: bold;
}