/*
========================================
   ON GREENS™ - Specialized Nutrition (v1.0)
   Specific Layout for 4-Panel Journey
   Reference: image_13.png / image_19.png Panel 4
========================================
*/

/* 1. Page Subheader Structure */
.collection-title {
    font-size: 1.4rem;
    color: var(--color-green);
    margin-bottom: var(--spacing-lg); /* increased breathing room before panels */
    text-transform: uppercase;
    font-weight: 500;
}

/* 2. The 4-Panel structure (Side-by-Side Flex) */
/* This container also hosts the glowing 'Visual Thread' implemented below */
.nutrition-panels {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0 var(--spacing-lg) 0; /* consistent breathing room */
    position: relative; /* required for the thread layering */
}

/* Individual Panel Rules */
.nutrition-panel {
    flex: 1; /* evenly balanced panels */
    background-color: var(--color-white); /* clean White space */
    border-radius: 8px; /* subtle consistent rounding */
    box-shadow: var(--shadow-soft); /* diffused light shadow */
    overflow: hidden; /* ensures photo rounding is consistent */
    display: flex;
    flex-direction: column;
    z-index: 10; /* ensures content sits above the thread */
}

/* 3. Panel Visual Elements */
.panel-icon {
    font-size: 2.5rem; /* large placeholder icon */
    padding: var(--spacing-sm) 0 0 0;
    margin-bottom: var(--spacing-xs);
}

.collection-image {
    width: 100%;
    height: 250px; /* fixed height image blocks */
    object-fit: cover; /* image stays framed correctly */
}

.panel-content {
    padding: var(--spacing-md) var(--spacing-sm); /* increased internal spacing for readable blocks */
}

.panel-content h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
    line-height: 1.2;
}

.panel-content p {
    color: var(--color-text);
    font-size: 1rem; /* slightly smaller body text for 4-panel width constraint */
    max-width: 250px; /* limits width for readable blocks within panels */
    margin-left: auto;
    margin-right: auto;
}

/* 4. Color-Coded Panel Identities */

/* Children (Soft Sky Blues / Gentle Greens) */
.children-vibe .panel-icon { color: #A4D1E5; } 
.children-vibe h3 { color: #4F86A2; } 
.children-vibe p { color: #3A6679; } 
.children-vibe { border-bottom: 5px solid #A4D1E5; } 

/* Teens (Energetic Burnt Oranges) */
.teens-vibe .panel-icon { color: #E99B78; } 
.teens-vibe h3 { color: #A6654A; } 
.teens-vibe p { color: #8A4F35; } 
.teens-vibe { border-bottom: 5px solid #E99B78; } 

/* Adults (Deep Grounded Teals) */
.adults-vibe .panel-icon { color: #69AFA2; } 
.adults-vibe h3 { color: #3A786B; } 
.adults-vibe p { color: #2A5D52; } 
.adults-vibe { border-bottom: 5px solid #69AFA2; } 

/* Care (Soft Lavender / Warm Creams) */
.care-vibe .panel-icon { color: #C9A4D1; } 
.care-vibe h3 { color: #8A658E; } 
.care-vibe p { color: #6F4F73; } 
.care-vibe { border-bottom: 5px solid #C9A4D1; } 


/* 5. The Visual Thread (Glowing light gradient) */
/* Implemented as a pseudo-element under the panels */
.nutrition-panels::before {
    content: '';
    position: absolute;
    bottom: -15px; /* positioning under the panels */
    left: 10%;
    width: 80%; /* extends across the main sequence */
    height: 10px; /* very thin, glowing line */
    background: linear-gradient(90deg, 
        rgba(164, 209, 229, 0.5) 0%,   /* Children Soft Blue */
        rgba(233, 155, 120, 0.5) 25%,  /* Teens Burnt Orange */
        rgba(105, 175, 162, 0.5) 50%,  /* Adults Deep Teal */
        rgba(201, 164, 209, 0.5) 75%,  /* Care Soft Lavender */
        rgba(105, 175, 162, 0) 100%    /* dissolves to company Teal */
    );
    border-radius: 10px;
    filter: blur(4px); /* soft, diffused glow quality */
    z-index: 1; /* sits behind the panels */
}

/* Center Utility Class */
.text-center {
    text-align: center;
}

/* ========================================
   6. Mobile Responsiveness
======================================== */
@media screen and (max-width: 900px) {
    .collection-title {
        font-size: 1.1rem !important;
        margin-bottom: 2rem !important;
    }

    .nutrition-panels {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3rem !important;
        padding: 1.5rem 0 3rem 0 !important;
        width: 100% !important;
    }

    .nutrition-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1.5rem !important;
    }

    .collection-image {
        width: 100% !important;
        height: 250px !important;
    }

    .panel-content p {
        max-width: 100% !important; 
        padding: 0 1rem !important;
    }

    /* Hide the horizontal visual thread on mobile to prevent layout breaking */
    .nutrition-panels::before {
        display: none !important;
    }
}