/* Nutrition Detail Page Styles */

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

.food-items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .food-items-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .food-items-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.expanded {
    max-height: 500px;
    transition: max-height 0.3s ease-in;
}

/* Mobile-specific adjustments */
@media (max-width: 767px) {
    .hero-breadcrumbs {
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        z-index: 30;
    }
    
    .page-title-section {
        padding: 1rem;
    }
    
    .main-content-section {
        padding: 1rem;
    }
    
    .card-padding {
        padding: 1.5rem;
    }
} 

.progress-bar-width {
    width: min(100%, calc(var(--percentage) * 1%));
}