/*
==========================================================================
   Wszystkie Style dla Urządzeń Mobilnych (do 768px) - WERSJA POPRAWIONA
========================================================================== 
*/

/* Media Query - te style aktywują się tylko na ekranach o szerokości do 768px */
@media (max-width: 768px) {

    /* --- GŁÓWNY UKŁAD I TYPOGRAFIA --- */
    .main-content {
        padding: 20px 15px;
    }
    h1 {
        font-size: 2rem;
    }


    /* --- NAWIGACJA MOBILNA (HAMBURGER) --- */
    
    /* Ukrywamy menu w wersji desktopowej */
    .main-nav-desktop { 
        display: none; 
    }
    
    /* Pokazujemy przycisk "hamburger" */
    .mobile-menu-toggle { 
        display: block; 
    }
    
    /* Gdy menu jest OTWARTE - animujemy przycisk "hamburger" w "X" */
    .mobile-menu-toggle.is-open .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .mobile-menu-toggle.is-open .bar:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.is-open .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    
    /* --- PORTFOLIO (wspólne dla obu wersji) --- */

    /* WSZYSTKIE siatki stają się jednokolumnowe */
    .portfolio-grid {
        grid-template-columns: 1fr !important; /* !important dla pewności */
        grid-auto-rows: 280px;
    }
    
    /* WSZYSTKIE kafelki (szerokie, wysokie) stają się standardowe */
    .kafelek-poziomy, .kafelek-pionowy {
        grid-column: span 1 !important; /* !important dla pewności */
        grid-row: span 1 !important;    /* !important dla pewności */
    }
}