/* ==========================================================================
   MEDIA QUERIES (RWD) DLA STRONY marta.horbulewicz.pl
   Podejście Desktop-First - układ zwija się od tabletów po małe smartfony
   ========================================================================== */
img {
    max-width: 100%;
    height: auto;
}

/* --- 1. EKRANY PONIŻEJ 1024px (Małe laptopy, tablety w poziomie) --- */
@media screen and (max-width: 1024px) {
    /* Zmniejszamy szerokość głównych kontenerów i dodajemy marginesy boczne */
    .container, .wrapper, main {
        width: 90%;
        margin: 0 auto;
    }

    /* Portfolio: Przejście z dużego układu do np. 3 kolumn */
    .gallery-grid, .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Sekcje "O mnie" i "Kontakt": Zmniejszenie marginesów wewnętrznych */
    .about-section, .contact-section {
        gap: 30px;
        padding: 40px 0;
    }
}

/* --- 2. EKRANY PONIŻEJ 768px (Tablety pionowo i większe smartfony) --- */
@media screen and (max-width: 768px) {
    /* Nagłówek i Nawigacja: Układamy logo i linki jeden pod drugim */
    header, .header-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        /*text-align: center;*/
        padding: 20px 0;
    }

    nav ul, .nav-menu {
        display: flex;
        flex-direction: column; /* Linki nawigacyjne jeden pod drugim */
        gap: 15px;
        margin-top: 15px;
        padding: 0;
    }

    /* Portfolio: Zmniejszenie z 3 kolumn na 2 kolumny */
    .gallery-grid, .gallery {
        grid-template-columns: 1fr;
    }

    /* Sekcja "O mnie": Tekst nad zdjęciem lub zdjęcie nad tekstem */
    .about-section, .about-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .about-text {
        width: 100%;
        order: 2; /* Tekst spada pod zdjęcie (wymaga Flexboxa) */
    }

    .about-image {
        width: 80%;
        max-width: 400px;
        margin-bottom: 20px;
        order: 1; /* Zdjęcie ładuje się na górze na smartfonach */
    }

    /* Sekcja "Kontakt": Formularz ("Wyślij wiadomość") nad danymi kontaktowymi */
    .contact-section, .contact-wrapper {
        display: flex;
        flex-direction: column;
    }

    .contact-form, .contact-info {
        width: 100%;
        margin-bottom: 30px;
    }
}

/* --- 3. EKRANY PONIŻEJ 576px (Standardowe i małe smartfony) --- */
@media screen and (max-width: 576px) {
    /* Poprawki typografii (zapobiega to rozsadzaniu ekranu przez za duży tekst) */
    body {
        font-size: 14px;
    }

    h1, .section-title {
        font-size: 1.8rem;
        text-align: center;
    }

    h2, .section-subtitle {
        font-size: 1.4rem;
        text-align: center;
    }

    /* Portfolio: 1 kolumna na małych ekranach komórek - zdjęcia maksymalnie czytelne */
    .gallery-grid, .gallery {
        grid-template-columns: 1fr;
    }

    /* Pola formularza i przyciski: 100% szerokości, ułatwia to wpisywanie na komórce */
    input, textarea, button, .submit-btn {
        width: 100%;
        box-sizing: border-box;
    }

    /* Stopka */
    footer, .site-footer {
        text-align: center;
        padding: 20px 10px;
        font-size: 12px;
    }
}