/* style.css - KOMPLETNY KOD CSS */

/* ZAPOBIEGANIE BŁĘDOM SZEROKOŚCI STRONY */
/* Upewnia się, że żaden element nie wyjdzie poza krawędzie widocznego obszaru */
*, *::before, *::after {
    box-sizing: border-box; /* Kluczowe! Wlicza padding i border do szerokości */
}

html, body {
    /* Dodatkowy reset zapobiegający poziomemu przewijaniu */
    overflow-x: hidden; 
}

/* 1. Zmienne i Style Globalne */
:root {
    --kolor-akcentu: #cc0000; /* CZERWONY */
    --kolor-ciemny: #1c1c1c;
    --kolor-jasny: #ffffff;
    --kolor-tla-1: #f4f4f4; /* Jasne tło */
    --kolor-tla-2: #e9e9e9; /* Tło lekko szare (na przemian) */
}

html {
    /* Włącza animację płynnego przewijania dla całej strony */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif; /* NAPRAWIONA CZCIONKA */
    background-color: var(--kolor-tla-1);
    line-height: 1.5;
    color: var(--kolor-ciemny);
}

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* 2. Style dla HEADER i NAV (BIAŁY NAGŁÓWEK, CZERWONE ZAKŁADKI) */
header {
    background-color: var(--kolor-jasny); /* BIAŁY */
    color: var(--kolor-ciemny); /* CZARNY TEKST NAGŁÓWKA */
    padding: 20px 0;
    text-align: center;
    
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Delikatny cień */
}

/* Style dla Nawigacji (MENU) */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Układ poziomy */
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav a {
    color: var(--kolor-akcentu); /* CZERWONE ZAKŁADKI */
    text-decoration: none;
    padding: 5px 10px;
    transition: color 0.3s;
    font-weight: 600;
}

nav a:hover {
    color: #990000; /* Ciemniejszy czerwony na najechaniu */
}

header h1 {
    margin: 0;
    padding: 0 20px;
}

/* Styl dla elementu logo w nagłówku */
.logo-header {
    /* Ustawia maksymalną wysokość loga. Zmień 40px na potrzebną wartość. */
    max-height: 75px; 
    
    /* Zapewnia skalowanie proporcjonalne */
    width: auto; 
    
    /* Wyśrodkowuje logo w pionie, jeśli są inne elementy */
    vertical-align: middle; 
}


/* 3. Style dla Sekcji Głównych */
main section {
    /* KLUCZOWE WŁAŚCIWOŚCI: Sekcja ma co najmniej wysokość okna przeglądarki */
    min-height: 100vh;
    
    /* Dodatkowy górny padding, by treść nie była pod stałym headerem */
    padding: 100px 50px 50px 50px; 
    box-sizing: border-box;
    
    /* Centrowanie treści w sekcji */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center;
}

/* AKCENT: Kolor nagłówków sekcji */
main h2 {
    color: var(--kolor-akcentu);
    margin-bottom: 30px; 
}

/* Kolory tła sekcji */
#studio { 
    min-height: 100vh;
    background-color: #333; 
    background-image: url('images/studio.jpg'); 
    background-size: cover !important; 
    background-position: center center !important; 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    color: var(--kolor-jasny); 
}

/* NAPRAWIONO TŁO DLA OFERTY I CENNIKA (ABY BYŁO SZARE) */
#oferta { background-color: var(--kolor-tla-2); }
#uslugi { background-color: var(--kolor-tla-2); } /* ZMIENIONO: Tło cennika teraz szare */
/* --- KONIEC POPRAWKI TŁA --- */

#zalety { background-color: var(--kolor-ciemny); 
    color: var(--kolor-jasny); }
#galeria-sukcesow { background-color: var(--kolor-tla-1); }

/* Upewnij się, że nagłówek jest biały i czytelny */
#studio h2 {
    color: var(--kolor-jasny); 
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); 
}

/* Definicja prawej kolumny w style.css */
.prawa-kolumna {
    flex: 1; 
    text-align: left;
    background-color: rgba(0, 0, 0, 0.4); /* Półprzezroczyste tło dla lepszej czytelności na zdjęciu */
    padding: 20px;
    border-radius: 8px;
}

/* Definicja układu kolumn */
.studio-content {
    display: flex; 
    gap: 50px; 
    max-width: 1100px; 
    width: 90%;
    /* ... inne style ... */
}

/* 4. Style dla Oferty i Korzyści */
.oferta-lista, .korzysci-lista {
    list-style: none;
    padding: 0;
    max-width: 800px;
    text-align: left;
    margin-top: 20px;
}

.oferta-lista li, .korzysci-lista li {
    background-color: var(--kolor-jasny);
    padding: 20px;
    margin-bottom: 15px;
    /* AKCENT: Ramka boczna w kolorze akcentu */
    border-left: 5px solid var(--kolor-akcentu);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
    
.oferta-lista strong, .korzysci-lista strong {
    display: block;
    font-size: 1.4em;
    color: var(--kolor-akcentu); /* AKCENT: Tekst w kolorze akcentu */
    margin-bottom: 5px;
}

/* Styl dla siatki korzyści */
.korzysci-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin-top: 30px;
}

.korzysci-grid li {
    flex: 1 1 45%; 
    min-width: 300px;
    text-align: center;
    padding: 15px;
}

/* 5. STYLE DLA CENNIKA */
.cennik-tabela {
    width: 100%;
    max-width: 700px;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-top: 30px;
    text-align: left;
}

.cennik-tabela th, .cennik-tabela td {
    padding: 15px 20px;
    vertical-align: middle;
}

.cennik-tabela tr {
    background-color: var(--kolor-jasny);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
    
.cennik-tabela tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.cennik-tabela td:first-child {
    font-weight: 600;
    color: var(--kolor-ciemny);
    width: 70%;
}

.cennik-tabela td:last-child {
    font-weight: 700;
    color: var(--kolor-akcentu); /* AKCENT: Cena w kolorze akcentu */
    font-size: 1.2em;
    text-align: right;
}

.cennik-tabela thead {
    display: none;
}

/* 6. STYLE DLA FOOTERA I KONTAKTU */
footer {
    background-color: #333;
    color: white;
    padding: 30px 50px;
    text-align: center;
}

#kontakt {
    min-height: 50vh;
    background-color: #222;
    color: white;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#kontakt h3 {
    color: var(--kolor-akcentu);
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* 7. STYL DLA PRZYCISKU "ZAPISZ SIĘ" NA DOLE SEKCJI (CTA) */
.cta-button-bottom {
    background-color: var(--kolor-akcentu); 
    color: var(--kolor-jasny) !important; 
    text-decoration: none;
    padding: 15px 30px; 
    border: none;
    border-radius: 8px; 
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    
    /* Wyrównanie i centrowanie */
    margin-top: 40px; 
    display: block; 
    width: fit-content; /* Szerokość dopasowana do tekstu */
    margin-left: auto;
    margin-right: auto; /* To wyśrodkowuje element blokowy */
    
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 
}

.cta-button-bottom:hover {
    background-color: #990000;
    transform: translateY(-2px);
}

/* 9. STYLA DLA FORMULARZA KONTAKTOWEGO */
.formularz-kontaktowy {
    width: 100%;
    max-width: 500px; 
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1); 
    border-radius: 8px;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.formularz-kontaktowy input[type="text"],
.formularz-kontaktowy input[type="email"],
.formularz-kontaktowy input[type="tel"],
.formularz-kontaktowy textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9); 
    color: var(--kolor-ciemny);
    font-size: 16px;
    transition: border-color 0.3s;
}

.formularz-kontaktowy textarea {
    resize: vertical; 
}

.formularz-kontaktowy input:focus,
.formularz-kontaktowy textarea:focus {
    border-color: var(--kolor-akcentu); 
    outline: none;
}

/* Styl dla przycisku Wyślij */
.przycisk-glowny {
    background-color: var(--kolor-akcentu);
    color: var(--kolor-jasny);
    text-decoration: none;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.3s;
    width: 100%; 
    margin-top: 10px;
}

.przycisk-glowny:hover {
    background-color: #990000;
    transform: translateY(-2px);
}

.uwaga-rodo {
    font-size: 0.8em;
    color: #aaa;
    margin-top: 15px;
    text-align: center;
}
/* 10. STYL DLA IKON SPOŁECZNOŚCIOWYCH (INSTAGRAM) */

.social-links {
    margin-top: 25px;
}

.social-icon {
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    width: 65px; 
    height: 65px;
    border-radius: 50%; 
    font-size: 24px; 
    text-decoration: none;
    transition: all 0.3s;
    margin: 0 10px; 
    color: var(--kolor-jasny); 
}

/* Styl specyficzny dla Instagrama: użyjemy koloru akcentu */
.instagram-icon {
    background-color: var(--kolor-akcentu); 
    border: 2px solid var(--kolor-akcentu);
}

.instagram-icon:hover {
    background-color: transparent; 
    color: var(--kolor-akcentu); 
    transform: scale(1.1);
}
/* 11. STYLE DLA GALERII SUKCESÓW - UKŁAD 4 KOLUMNY I KONTROLA ROZMIARU */

.galeria-grid-4 {
    /* Wymuszamy układ siatki z 4 równymi kolumnami */
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    
    gap: 15px; /* Odstęp między zdjęciami */
    width: 100%; 
    max-width: 1200px; 
    margin: 30px auto; /* Wyśrodkowanie */
    padding: 0 20px;
}

.galeria-grid-4 img {
    /* KLUCZOWE: Wymusza, by każde zdjęcie zajęło 100% szerokości swojej kolumny */
    width: 100%; 
    
    /* Ustawia stałą proporcję 1:1, by wszystkie były kwadratowe */
    aspect-ratio: 1 / 1; 
    
    /* Upewnia się, że obrazek wypełnia i nie jest rozciągnięty, nawet jeśli jest bardzo duży */
    object-fit: cover; 
    
    border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.galeria-grid-4 img:hover {
    transform: scale(1.03); 
}

/* Dostosowanie dla tabletów (2 kolumny) */
@media (max-width: 900px) {
    .galeria-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Dostosowanie dla telefonów (1 kolumna) - ZMIENIAMY TĘ SEKCJE */
@media (max-width: 550px) {
    .galeria-grid-4 {
        grid-template-columns: repeat(2, 1fr); /* ZMIENIONE NA 2 KOLUMNY */
        padding: 0 10px;
        gap: 10px; /* Opcjonalnie: zmniejsz odstęp na małym ekranie */
    }
}
/* Zmiany tylko dla urządzeń mobilnych (ekrany o szerokości do 550px) */
@media (max-width: 550px) {
    /* Zmniejszenie górnego paddingu (odsuwającego treść od headera) */
    main section {
        padding: 80px 15px 30px 15px; /* Mniejszy padding góra/dół i boki */
    }

    /* Zmniejszenie czcionki w nagłówkach na małych ekranach */
    h2 {
        font-size: 1.8em;
    }
}



/* --- STYLE DLA NAWIGACJI MOBILNEJ (HAMBURGER) --- */

/* 1. STYLIZACJA PRZYCISKU HAMBURGERA (DOMYŚLNIE UKRYTY DLA DESKTOPU) */
.hamburger {
    /* Ustawienie porządku w headerze (flexbox) */
    order: 3; 
    
    /* Wygląd */
    background: none;
    border: none;
    color: var(--kolor-akcentu); /* Czerwony kolor ikonki */
    font-size: 30px;
    padding: 10px 20px;
    cursor: pointer;
    
    /* KLUCZOWE: DOMYŚLNIE UKRYTY NA DUŻYCH EKRANACH */
    display: none; 
    
    z-index: 1001; 
}


/* 2. ZMIANA UKŁADU NAGŁÓWKA NA MOBILE (PONIŻEJ 1000px) */
@media (max-width: 1000px) {
    
    /* POKAŻ PRZYCISK HAMBURGERA */
    .hamburger {
        display: block; /* Pokaż tylko na ekranach poniżej 1000px */
    }

    /* Zmień HEADER: Ustaw, aby logo i hamburger były po bokach */
    header {
        justify-content: space-between; /* Rozsuń logo i hamburger */
        padding: 10px 20px; /* Dodaj padding po bokach */
    }
    
    /* UKRYJ NAWIGACJĘ DESKTOPOWĄ DOMYŚLNIE NA TELEFONIE */
    .menu-desktop {
        display: none; 
        
        /* Pozycja dla menu, gdy zostanie aktywowane */
        position: absolute;
        top: 85px; /* Poniżej stałego nagłówka */
        left: 0;
        width: 100%;
        background-color: var(--kolor-ciemny); /* Tło menu mobilnego */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    /* POKAZANIE MENU PRZEZ JAVASCRIPT */
    .menu-desktop.active {
        display: block; /* Pokaż, gdy klasa 'active' jest dodana przez JS */
    }
    
    /* Stylizacja listy w menu mobilnym */
    .menu-desktop ul {
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
    }
    
    .menu-desktop ul li {
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .menu-desktop a {
        display: block;
        padding: 15px 0;
        color: var(--kolor-jasny); 
        font-size: 1.1em;
        font-weight: 500;
    }
    
    .menu-desktop a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}
/* NOWA ZMIANA: Zmniejszenie logo poniżej 430px o 10% (z 75px na 67.5px) */
@media (max-width: 430px) {
    .logo-header {
        max-height: 67.5px;
    }
}