/* =================================================================== */
/* POPRAWKI CSS DLA URZĄDZEŃ MOBILNYCH - PROBLEMY Z PRZESUNIĘCIAMI    */
/* =================================================================== */

/* 1. GLOBALNE POPRAWKI - DODAJ NA POCZĄTKU PLIKU */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background: #0a0f1f;
    overflow-x: hidden; /* KLUCZOWE - zapobiega poziomemu przewijaniu */
    position: relative;
    min-height: 100vh;
    width: 100%; /* Dodane */
}

/* 2. POPRAWKI DLA KONTENERÓW - ZASTĄP ISTNIEJĄCE */

/* === EKRANY PONIŻEJ 992px (Tablety i duże telefony) === */
@media (max-width: 992px) {
    /* --- Sekcja Hero --- */
    .hero {
        height: auto;
        min-height: 100vh;
        flex-direction: column;
        text-align: center;
        padding: 100px 15px 50px; /* ZMIENIONO z 20px na 15px */
        width: 100%; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }
    
    .hero-content {
        max-width: 100%;
        margin-top: 150px;
        padding: 20px 15px; /* ZMIENIONO - dodano horizontal padding */
        background: rgba(10, 15, 30, 0.7);
        border-radius: 10px;
        width: 100%; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }

    /* --- Sekcja O Mnie (POPRAWIONA) --- */
    .about-container {
        margin: 0 auto;
        padding: 0 15px; /* ZMIENIONO z 20px na 15px */
        width: 100%; /* DODANO */
        max-width: 100%; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }
    
    .about-content {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        width: 100%; /* DODANO */
    }
    
    .about-text {
        width: 100%;
        max-width: 100%; /* DODANO */
        margin: 0; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }
    
    .about-gallery-container {
        width: 100%;
        height: 500px;
        max-height: 500px;
        margin: 0; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }

    /* --- Sekcja Usługi --- */
    .coaching-container {
        max-width: 100%; /* DODANO */
        padding: 0 15px; /* ZMIENIONO */
        box-sizing: border-box; /* DODANO */
    }
    
    .coaching-grid {
        grid-template-columns: 1fr;
        gap: 30px; /* ZMNIEJSZONO */
        width: 100%; /* DODANO */
    }
    
    .coaching-offer {
        max-width: 600px;
        margin: 0 auto 30px auto; /* ZMNIEJSZONO margines */
        width: 100%; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }

    /* --- Sekcja Rezerwacja --- */
    .booking-container {
        padding: 0 15px;
        max-width: 100%;
        width: 100%; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }
    
    .booking-grid {
        flex-direction: column;
        gap: 30px;
        width: 100%;
        margin: 0; /* DODANO */
    }
    
    .booking-calendar, .booking-form {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
        padding: 20px 15px; /* ZMIENIONO padding */
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 50, 0.3);
        border: 1px solid rgba(65, 105, 225, 0.3);
        box-sizing: border-box; /* DODANO */
    }

    /* --- Sekcja Współpraca --- */
    .collaboration-container {
        max-width: 500px;
        margin: 0 auto;
        padding: 0 15px; /* ZMIENIONO */
        width: 100%; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }
    
    .collaboration-content {
        flex-direction: column;
        min-height: auto;
        gap: 30px;
        width: 100%;
        margin: 0; /* DODANO */
    }
    
    .collaboration-text {
        width: 100%;
        flex: auto;
        text-align: center;
        background: rgba(16, 22, 46, 0.8);
        border-radius: 15px;
        padding: 25px 15px; /* ZMIENIONO padding */
        border: 1px solid rgba(65, 105, 225, 0.3);
        box-shadow: 0 8px 25px rgba(0, 0, 50, 0.3);
        box-sizing: border-box;
        margin: 0; /* DODANO */
    }

    /* --- Sekcja Kontakt --- */
    .contact-container {
        max-width: 100%; /* DODANO */
        padding: 0 15px; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        width: 100%; /* DODANO */
    }
    
    .contact-form-wrapper,
    .contact-info-wrapper {
        max-width: 600px;
        margin: 0 auto;
        padding: 30px 20px; /* ZMIENIONO padding */
        width: 100%; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }
}

/* === EKRANY PONIŻEJ 768px (Standardowe telefony) === */
@media (max-width: 768px) {
    /* Wszystkie główne kontenery */
    .about-section,
    .coaching-section,
    .booking-section,
    .collaboration-section,
    .contact-section {
        padding-left: 10px; /* DODANO */
        padding-right: 10px; /* DODANO */
        width: 100%; /* DODANO */
        overflow-x: hidden; /* DODANO */
    }
    
    /* Główne kontenery sekcji */
    .about-container,
    .coaching-container,
    .booking-container,
    .collaboration-container,
    .contact-container {
        padding-left: 10px; /* DODANO */
        padding-right: 10px; /* DODANO */
        margin-left: auto; /* DODANO */
        margin-right: auto; /* DODANO */
        max-width: 100%; /* DODANO */
        width: 100%; /* DODANO */
        box-sizing: border-box; /* DODANO */
    }

    /* --- Sekcja O Mnie (DODATKOWE POPRAWKI) --- */
    .about-gallery-container {
        height: 400px; /* ZMNIEJSZONO dla telefonów */
        max-height: 400px;
        margin: 0; /* DODANO */
    }
    
    .about-text {
        padding: 20px 15px; /* ZMIENIONO padding */
        margin: 0; /* DODANO */
    }

    /* --- Sekcja Współpraca --- */
    .collaboration-text {
        padding: 25px 15px; /* ZMIENIONO padding */
        margin: 0; /* DODANO */
    }
    
    .collaboration-image, .collaboration-gallery-container {
        height: 350px;
        margin: 0; /* DODANO */
    }

    /* --- Sekcja Kontakt --- */
    .contact-form-wrapper,
    .contact-info-wrapper {
        padding: 25px 15px; /* ZMIENIONO padding */
        margin: 0 auto; /* POPRAWIONO */
    }
}

/* === EKRANY PONIŻEJ 576px (Mniejsze telefony) === */
@media (max-width: 576px) {
    /* Dodatkowe zmniejszenie paddingów dla najmniejszych ekranów */
    body {
        padding: 0; /* DODANO */
        margin: 0; /* DODANO */
    }
    
    /* --- Sekcja Hero --- */
    .hero {
        padding: 100px 10px 50px; /* ZMNIEJSZONO padding */
    }
    
    .hero-content {
        padding: 15px 10px; /* ZMNIEJSZONO padding */
        margin-left: 5px; /* DODANO */
        margin-right: 5px; /* DODANO */
    }

    /* --- Wszystkie główne kontenery --- */
    .about-container,
    .coaching-container,
    .booking-container,
    .collaboration-container,
    .contact-container {
        padding: 0 5px; /* JESZCZE MNIEJSZY PADDING */
    }

    /* --- Sekcja O Mnie --- */
    .about-text {
        padding: 20px 10px; /* ZMNIEJSZONO padding */
        border-radius: 15px;
    }
    
    .about-gallery-container {
        height: 300px; /* JESZCZE MNIEJSZA WYSOKOŚĆ */
        max-height: 300px;
        border-radius: 15px;
    }

    /* --- Sekcja Rezerwacja --- */
    .booking-calendar,
    .booking-form {
        padding: 15px 10px; /* ZMNIEJSZONO padding */
        border-radius: 10px;
        margin: 0 5px; /* DODANO marginesy */
    }

    /* --- Sekcja Współpraca --- */
    .collaboration-container {
        padding: 0 5px; /* ZMNIEJSZONO padding */
    }
    
    .collaboration-text {
        padding: 20px 10px; /* ZMNIEJSZONO padding */
    }
    
    .collaboration-image, .collaboration-gallery-container {
        height: 250px; /* ZMNIEJSZONO wysokość */
    }

    /* --- Sekcja Kontakt --- */
    .contact-form-wrapper,
    .contact-info-wrapper {
        padding: 20px 10px; /* ZMNIEJSZONO padding */
        border-radius: 15px;
        margin: 0 5px; /* DODANO marginesy */
    }
}

/* === EKRANY PONIŻEJ 480px (Najmniejsze telefony) === */
@media (max-width: 480px) {
    /* Maksymalne zmniejszenie dla bardzo małych ekranów */
    .collaboration-container {
        padding: 0 5px; /* MINIMALNY PADDING */
    }
    
    .collaboration-text {
        padding: 15px 8px; /* MINIMALNY PADDING */
    }
    
    /* Wszystkie inne kontenery */
    .about-container,
    .coaching-container,
    .booking-container,
    .contact-container {
        padding: 0 5px; /* MINIMALNY PADDING */
    }
    
    /* Poprawki dla elementów, które mogą się wystawać */
    .hero-content,
    .about-text,
    .coaching-offer,
    .booking-calendar,
    .booking-form,
    .contact-form-wrapper,
    .contact-info-wrapper {
        margin-left: 2px; /* MINIMALNE MARGINESY */
        margin-right: 2px;
        max-width: calc(100% - 4px); /* ZAPOBIEGA WYSTAWANIU */
    }
}

/* 3. DODATKOWE ZABEZPIECZENIA PRZECIWKO WYSTAWANIU */

/* Ukrywa wszystko co wystaje poziomo */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Zapobiega problemom z flexbox na małych ekranach */
@media (max-width: 768px) {
    .hero-content,
    .about-content,
    .collaboration-content,
    .contact-grid,
    .booking-grid {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* === POPRAWKI DLA MENU MOBILNEGO === */

/* Menu desktop - pozostaje bez zmian */
.menu-container {
    background: rgba(10, 15, 30, 0.7);
    backdrop-filter: blur(15px);
    padding: 15px 5%;
    box-shadow: 0 5px 20px rgba(0, 0, 50, 0.3);
    border: 1px solid rgba(65, 105, 225, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

/* MENU MOBILNE - POPRAWIONE */
@media (max-width: 992px) {
    /* UKRYJ DESKTOP MENU */
    .menu-container {
        display: none !important;
    }
    
    /* POKAŻ HAMBURGER BUTTON */
    .menu-toggle {
        display: block !important;
        cursor: pointer;
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 1001;
        background: rgba(10, 15, 30, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 12px;
        border-radius: 4px;
        width: 50px;
        height: 50px;
    }
    
    .menu-toggle span {
        display: block;
        width: 25px;
        height: 2px;
        background: white;
        margin: 5px 0;
        transition: all 0.3s ease;
    }
    
    /* ANIMACJA HAMBURGER -> X */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* MOBILNE MENU OVERLAY */
    .mobile-menu-container {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #0a0f1f;
        z-index: 1000;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .mobile-menu-container.active {
        transform: translateX(0);
    }
    
    /* LISTA MENU MOBILNEGO */
    .mobile-menu {
        padding: 80px 20px 20px;
        height: 100%;
        box-sizing: border-box;
        list-style: none;
        margin: 0;
    }
    
    .mobile-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    /* LINKI W MENU MOBILNYM */
    .menu-item {
        display: block !important;
        padding: 20px 0;
        text-align: center;
        font-size: 1.5rem;
        color: white;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .menu-item.active {
        color: royalblue;
        font-weight: bold;
    }
    
    .menu-item:hover {
        background: rgba(65, 105, 225, 0.1);
        color: #a7c7ff;
    }
    
    /* WYŁĄCZ DESKTOP EFEKTY W MENU MOBILNYM */
    .mobile-menu .highlight,
    .mobile-menu .menu-item::before,
    .mobile-menu .menu-item::after {
        display: none !important;
    }
    
    /* ZABLOKUJ SCROLL GDY MENU OTWARTE */
    body.menu-open {
        overflow: hidden;
    }
}

/* UKRYJ MOBILE MENU NA DESKTOP */
@media (min-width: 993px) {
    .menu-toggle {
        display: none !important;
    }
    
    .mobile-menu-container {
        display: none !important;
    }
}

/* 4. NAPRAW PROBLEMY Z POPUP NA MOBILNYCH */
@media (max-width: 768px) {
    .popup-container {
        padding: 25px 15px; /* ZMNIEJSZONO padding */
        max-width: calc(100% - 30px); /* ZAPOBIEGA WYSTAWANIU */
        margin: 0 15px; /* DODANO marginesy */
        position: relative;
    }
}

@media (max-width: 480px) {
    .popup-container {
        padding: 20px 10px; /* JESZCZE MNIEJSZY PADDING */
        max-width: calc(100% - 20px);
        margin: 0 10px;
    }
}

/* =================================================================== */
/* ✅ POPRAWKI BŁĘDÓW NA URZĄDZENIACH MOBILNYCH (Wklej na końcu)     */
/* =================================================================== */

/* === Poprawki dla tabletów i większości telefonów (do 768px) === */
@media (max-width: 768px) {

    /**
     * 1. Sekcja "Droga do formy" -> Zmniejszenie czcionki w etapach
     * Problem: Tekst "wspólne ustalenia" wychodził poza kontener.
     */
    .timeline-content h3 {
        font-size: 1.2rem; /* Zmniejszono z 1.5rem */
    }

    /**
     * 2. Sekcja "Usługi" -> Poprawka zawijania tekstu i paddingu
     * Problem: Tekst "prowadzenie online" wychodził poza kontener.
     */
    .coaching-offer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .offer-title {
        font-size: 1.6rem; /* Zmniejszenie czcionki nagłówka */
    }

    /**
     * 3. Sekcja "Współpraca" -> Zmniejszenie czcionki nagłówka
     * Problem: Nagłówek "współpraca z papito energy" był ucięty z prawej strony.
     */
    .collaboration-text h2 {
        font-size: 1.9rem; /* Zmniejszono z 2.5rem */
        line-height: 1.3;      /* Lepsze odstępy między liniami po zawinięciu */
    }

    /**
     * 4. Sekcja "Współpraca" -> Zwiększenie wysokości slidera
     * Problem: Slider ucinał zdjęcia od dołu.
     */
    .collaboration-gallery-container {
        height: 380px; /* Zwiększono delikatnie z 350px */
    }

    /**
     * 5. Sekcja "Kontakt" -> Naprawa uciętych kontenerów
     * Problem: Kontenery formularza i danych kontaktowych były ucięte.
     * Ta reguła gwarantuje, że kontenery nie będą szersze niż ekran
     * i ukryje ewentualne wewnętrzne przepełnienia.
     */
    .contact-form-wrapper,
    .contact-info-wrapper {
        overflow-x: hidden;
    }
}

/* === Dodatkowe poprawki dla mniejszych telefonów (do 576px) === */
@media (max-width: 576px) {

    /* Dalsze zmniejszenie czcionek dla lepszej czytelności */
    .timeline-content h3 {
        font-size: 1.1rem;
    }

    .offer-title {
        font-size: 1.4rem;
    }

    .collaboration-text h2 {
        font-size: 1.6rem;
    }

    /**
     * Sekcja "Współpraca" -> Korekta wysokości slidera dla małych ekranów
     */
    .collaboration-gallery-container {
        height: 280px; /* Zwiększono z 250px */
    }
}

/* =================================================================== */
/* ✅ OSTATECZNE POPRAWKI MOBILNE (Wklej na końcu pliku)            */
/* =================================================================== */

/* === Poprawki dla tabletów i telefonów (do 768px) === */
@media (max-width: 768px) {

    /**
     * 1. Sekcja "Współpraca" -> Znaczące zwiększenie wysokości slidera
     * Problem: Slider wciąż był za niski i ucinał zdjęcia.
     * Zgodnie z prośbą, wysokość została wyraźnie zwiększona.
     */
    .collaboration-gallery-container {
        height: 420px; /* Znacznie zwiększono z poprzedniej wartości */
    }

    /**
     * 2. Sekcja "Kontakt" -> Zmniejszenie nagłówka "social media"
     * Problem: Tekst "Znajdź nas..." wychodził poza kontener.
     */
    .social-media h4 {
        font-size: 1.1rem; /* Zmniejszono, aby tekst się mieścił */
        padding: 0 10px;   /* Dodano mały margines boczny dla bezpieczeństwa */
    }
}

/* === Poprawki dla mniejszych telefonów (do 576px) === */
@media (max-width: 576px) {

    /**
     * Sekcja "Współpraca" -> Korekta wysokości slidera dla małych ekranów
     */
    .collaboration-gallery-container {
        height: 340px; /* Również znacznie zwiększono dla najmniejszych ekranów */
    }

    /**
     * Sekcja "Kontakt" -> Dalsze zmniejszenie nagłówka "social media"
     */
    .social-media h4 {
        font-size: 1rem;
    }
}

/* =================================================================== */
/* ✅ FINALNE POPRAWKI - OSIĄGNIĘCIA I NAGŁÓWEK OPINII              */
/* =================================================================== */

/* === SEKCJA O MNIE - Poprawka tekstu w osiągnięciach === */
@media (max-width: 768px) {
    
    /* Poprawka dla tekstu "zaangażowania" w osiągnięciach */
    .achievement-text {
        font-size: 0.85rem; /* Zmniejszono tylko delikatnie */
        line-height: 1.3;
        text-align: center;
    }
    
    /* Dodatkowe zabezpieczenie dla kontenerów osiągnięć */
    .achievement-item {
        max-width: 100%;
        padding: 0 3px; /* Minimalny padding */
        box-sizing: border-box;
    }
    
    .achievements {
        padding: 0 5px; /* Minimalny padding */
        gap: 15px;
    }
}

/* === POPRAWKA NAGŁÓWKA OPINII - BEZ ŁAMANIA SŁÓW === */
@media (max-width: 768px) {
    
    /* Nagłówek opinii - delikatnie zmniejszony żeby się mieścił w jednej linii */
    .reviews-title {
        font-size: 1.75rem !important; /* Delikatnie zmniejszono */
        padding: 0 10px;
        margin-bottom: 20px;
        white-space: nowrap; /* UNIEMOŻLIWIA ŁAMANIE LINII */
        overflow: hidden; /* Ukrywa wystający tekst zamiast łamać */
        text-overflow: ellipsis; /* Dodaje ... jeśli tekst za długi */
    }
    
    /* Zapewnienie odstępów nagłówek-podtytuł */
    .section-title {
        margin-bottom: 20px !important;
        padding: 0 10px;
    }
    
    .section-subtitle {
        margin-top: 0;
        margin-bottom: 30px;
        padding: 0 10px;
    }
    
    .reviews-subtitle {
        margin-top: 0;
        margin-bottom: 30px;
        padding: 0 15px;
    }
}

/* === POPRAWKI DLA MNIEJSZYCH EKRANÓW === */
@media (max-width: 576px) {
    
    /* Jeszcze mniejszy tekst w osiągnięciach */
    .achievement-text {
        font-size: 0.8rem;
    }
    
    /* Nagłówek opinii dla małych ekranów */
    .reviews-title {
        font-size: 1.5rem !important;
        margin-bottom: 25px !important;
        padding: 0 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .section-title {
        margin-bottom: 25px !important;
        padding: 0 8px;
    }
    
    .section-subtitle,
    .reviews-subtitle {
        margin-bottom: 35px;
        padding: 0 8px;
    }
}

@media (max-width: 480px) {
    
    /* Minimalne rozmiary dla bardzo małych ekranów */
    .achievement-text {
        font-size: 0.75rem;
    }
    
    .achievements {
        gap: 10px;
        padding: 0 3px;
    }
    
    .achievement-item {
        padding: 0 2px;
    }
    
    /* Nagłówek opinii dla bardzo małych ekranów */
    .reviews-title {
        font-size: 1.3rem !important;
        margin-bottom: 30px !important;
        padding: 0 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .section-title {
        margin-bottom: 30px !important;
        padding: 0 5px;
    }
    
    .section-subtitle,
    .reviews-subtitle {
        margin-bottom: 40px;
        padding: 0 5px;
    }
}