/* src/css/sustainability.css */

.sust-hero {
    width: 100%;
    height: 60vh;
    background-image: url('https://images.unsplash.com/photo-1512418490979-92798cec1380?q=80&w=1600');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}
.sust-hero::after { 
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%; 
    background: rgba(0,0,0,0.4); 
}

.sust-hero-content { 
    position: relative; z-index: 2; max-width: 800px; padding: 20px; 
}
.sust-hero-content h1 { 
    font-family: var(--font-head); font-size: 3.5rem; letter-spacing: 4px; 
    margin-bottom: 15px; font-weight: 300; 
}

.sust-section { padding: 80px 40px; text-align: center; background: #fff; }
.sust-text-block { max-width: 800px; margin: 0 auto; }
.sust-text-block h2 { 
    font-family: var(--font-head); font-size: 2rem; margin-bottom: 20px; 
    letter-spacing: 2px; font-weight: 400; 
}
.sust-divider { height: 2px; width: 60px; background: #000; margin: 20px auto; }
.sust-text-block p { font-size: 16px; line-height: 1.8; color: #444; }

.sust-grid-section { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    max-width: 1200px; 
    margin: 0 auto 80px; 
    gap: 40px; 
    padding: 0 40px;
}
.sust-card { text-align: center; }
.sust-card img { width: 100%; height: 300px; object-fit: cover; margin-bottom: 20px; }
.sust-card h3 { 
    font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 10px; 
    letter-spacing: 1px; font-weight: 600; 
}
.sust-card p { font-size: 14px; line-height: 1.6; color: #666; }

@media (max-width: 768px) {
    .sust-hero-content h1 { font-size: 2rem; }
    .sust-grid-section { grid-template-columns: 1fr; }
}