/* Packaging Page Styles */

/* Base Container */
.packaging-container,
.materials-container {
width: 90%;
max-width: 1400px; /* Made wider to match other professional sections */
margin: 0 auto;
}

.packaging-container {
display: flex;
align-items: center;
gap: 4vw;
}

/* --- Section 1: Safe Packaging --- */
.safe-packaging-section {
padding: 3vw 0; /* Professional spacing */
background-color: #ffffff;
}

.packaging-text {
flex: 1; /* Text gets slightly less space */
display: flex;
flex-direction: column;
gap: 2vw;
}

.packaging-image {
flex: 1.2; /* Image gets more space (bigger) */
display: flex;
justify-content: center;
}

.packaging-image img {
max-width: 100%;
height: auto;
border-radius: 8px; /* Professional sharp corners */
border: 1px solid #e2e8f0; /* Clean border instead of huge shadow */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Minimal corporate shadow */
}

.feature-card {
background: #ffffff;
padding: 2.5vw;
border-radius: 8px; /* Sharp corners */
border: 1px solid #e2e8f0; /* Crisp border */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
display: flex;
gap: 1.5vw;
align-items: flex-start;
transition: all 0.3s ease;
}

.feature-card:hover {
border-color: var(--brand-blue);
box-shadow: 0 4px 12px rgba(0, 58, 93, 0.05);
}

.icon-box {
background: rgba(0, 58, 93, 0.05); /* Solid subtle bg instead of playful gradient */
width: 4vw;
height: 4vw;
min-width: 48px;
min-height: 48px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.icon-box svg {
width: 2.2vw;
height: 2.2vw;
min-width: 24px;
min-height: 24px;
}

.feature-content h2 {
color: var(--brand-blue);
font-size: clamp(18px, 1.5vw, 24px); /* Professional size */
font-weight: 700; /* 700 instead of 800 */
margin: 0 0 0.8vw 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.feature-content h2 span {
color: var(--brand-green);
}

.feature-content p {
color: #475569;
font-size: clamp(15px, 1.1vw, 16px);
line-height: 1.6;
margin: 0;
}

/* --- Section 2: Materials Overview (Bento Grid) --- */
.materials-section {
padding: 3vw 0;
background-color: #f8fafc; 
border-top: 1px solid #e2e8f0; /* Clear section separation */
}

.section-title {
color: var(--brand-blue);
font-size: clamp(22px, 2vw, 32px);
font-weight: 700;
margin: 0 0 3vw 0;
text-transform: uppercase;
letter-spacing: 1px;
}

.section-title span {
color: var(--brand-green);
}

.text-center {
text-align: center;
}

.bento-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2vw;
}

.bento-item {
background: #ffffff;
border-radius: 8px; /* Professional corners */
border: 1px solid #e2e8f0; /* Clean border */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); 
transition: all 0.3s ease;
}

.bento-item:hover {
border-color: var(--brand-blue);
box-shadow: 0 4px 12px rgba(0, 58, 93, 0.05);
}

.content-item {
padding: 2.5vw;
display: flex;
flex-direction: column;
justify-content: center;
}

.image-item {
padding: 0;
overflow: hidden; 
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f0;
}

.image-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
border: none;
}

.bento-item:hover .image-item img {
transform: scale(1.02); /* Very subtle zoom */
}

/* On Desktop, Image goes to right col and spans 2 rows */
@media (min-width: 993px) {
.image-item {
grid-column: 2;
grid-row: 1 / 3; /* Spans row 1 and 2 */
}
}

.card-header {
display: flex;
flex-direction: column;
gap: 1vw;
margin-bottom: 1.2vw;
}

.card-badge {
align-self: flex-start;
background: #f1f5f9;
color: var(--brand-blue);
padding: 0.3vw 0.8vw;
border-radius: 4px; /* Professional rectangle */
font-size: clamp(12px, 0.85vw, 13px);
font-weight: 700;
border: 1px solid #cbd5e1; 
letter-spacing: 0.5px;
}

.card-badge.blue { background: #f0f9ff; border-color: #bae6fd; color: #0284c7; }
.card-badge.green { background: #f7fee7; border-color: #d9f99d; color: #4d7c0f; }
.card-badge.dark { background: #f1f5f9; border-color: #cbd5e1; color: #334155; }

.card-header h3 {
color: var(--brand-blue);
font-size: clamp(16px, 1.2vw, 20px);
font-weight: 700;
margin: 0;
letter-spacing: 0.5px;
}

.content-item p {
color: #475569;
font-size: clamp(14px, 1vw, 16px);
line-height: 1.6;
margin: 0;
}

/* --- Responsive --- */
@media (max-width: 992px) {
.packaging-container {
flex-direction: column;
gap: 6vw;
width: 90%;
}

.packaging-text {
gap: 6vw;
}

.bento-grid {
grid-template-columns: 1fr; /* Single column on mobile */
gap: 4vw;
}

.image-item {
height: 50vw; 
grid-column: auto;
grid-row: auto;
}

.content-item {
text-align: left;
padding: 5vw;
}

.card-badge {
font-size: 14px;
padding: 1vw 2.5vw;
}
}