/* Responsive CSS for Protein Goblin */
/* This file provides responsive breakpoints and mobile-first styles */

@media (max-width: 768px) {
    .recipe-content-grid {
        grid-template-columns: 1fr !important;
    }
    
    .recipe-header h1 {
        font-size: 1.8rem !important;
    }
    
    .recipe-meta-bar {
        font-size: 0.9rem !important;
        flex-direction: column;
        gap: 10px !important;
    }
    
    .instruction-step {
        font-size: 16px !important;
        flex-direction: column;
        gap: 10px !important;
    }
    
    .ingredient-item {
        font-size: 16px !important;
    }
    
    .related-recipes-grid {
        grid-template-columns: 1fr !important;
    }
    
    .nav-menu {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
}

@media (max-width: 480px) {
    .recipe-header h1 {
        font-size: 1.5rem !important;
    }
    
    .nutrition-grid {
        grid-template-columns: 1fr !important;
    }
}