/* Base Reset */
* { box-sizing: border-box; }

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f8fafc; 
    margin: 0; 
    color: #333; 
    font-size: 16px;
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
img { max-width: 100%; height: auto; display: block; }

/* --- LAYOUT HELPERS --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Grid Systems */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; }
/* Grid-4: Used for Achievers & News (4 cols desktop, 1 col mobile) */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* --- SECTIONS (The "White Box" Look) --- */
/* This is the part that was missing! */
.section { 
    margin-bottom: 60px; 
    background: #ffffff;  /* White Background */
    padding: 30px;        /* Inner Spacing */
    border-radius: 10px;  /* Rounded Corners */
    border: 1px solid #e2e8f0; /* Subtle Grey Border */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Slight Drop Shadow */
}

.section-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 30px; 
    border-bottom: 2px solid #eee; 
    padding-bottom: 10px; 
}

.section-title { 
    font-size: 1.5em; 
    color: #1e293b; 
    margin: 0; 
    font-weight: 700; 
    border-bottom: 3px solid #2563eb; 
    display: inline-block; 
    margin-bottom: -12px; 
    padding-bottom: 7px; 
}

/* --- BUTTONS --- */
.btn { 
    padding: 10px 20px; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: 600; 
    font-size: 14px;
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
}
.btn-primary { background-color: #2563eb; color: white; }
.btn-primary:hover { background-color: #1d4ed8; }
.btn-secondary { background-color: #64748b; color: white; }

/* --- CARDS --- */
.card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: 0.3s;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.card-img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.card-date { font-size: 12px; color: #94a3b8; font-weight: bold; text-transform: uppercase; margin-bottom: 10px; display: block; }
.card-title { font-size: 18px; font-weight: bold; color: #1e293b; margin: 0 0 10px 0; line-height: 1.4; }
.card-text { font-size: 14px; color: #64748b; margin-bottom: 20px; flex: 1; }
.card-link { color: #2563eb; font-weight: bold; text-transform: uppercase; font-size: 13px; margin-top: auto; }

/* --- EMPTY STATES --- */
.empty-state {
    text-align: center;
    padding: 50px;
    color: #64748b;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed #cbd5e1;
}

/* --- ICONS HELPER --- */
.icon-small { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }

/* --- HERO & HEADER (Keep existing styles) --- */
.hero-title { font-size: 48px; font-weight: 800; margin: 0 0 15px 0; }
.header-actions { display: flex; gap: 20px; align-items: center; font-size: 14px; }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Stack Grids on Mobile */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 30px; }
    
    .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .header-actions { display: flex; gap: 10px; }
    .login-box { padding: 20px; margin: 0 15px; }
}