/* --- Achievements Page Styles (Minimalist & Elegant) --- */

.achievements-page-section {
    padding: 50px 0;
}

.achievements-section-header { /* For WORKSHOPS & ACADEMIC ACHIEVEMENTS titles */
    margin-bottom: 30px;
    padding-bottom: 10px; /* Space for underline */
    position: relative;
}

.achievements-section-header h2 {
    font-size: 1.8rem; /* Slightly smaller than main page title */
    font-weight: 400;
    color: #24292e;
    text-transform: uppercase; /* As in the image */
    letter-spacing: 0.5px;
    margin-bottom: 0;
    display: inline-block; /* For the underline to fit content */
}

.achievements-section-header::after { /* Underline for section titles */
    content: '';
    position: absolute;
    left: 0; /* Align to the left of the title */
    bottom: 0;
    width: 100%; /* Full width of the container or adjust as needed */
    max-width: 400px; /* Max width for the underline */
    height: 1px;
    background-color: #586069; /* Darker grey for the line */
}

body.dark-mode .achievements-section-header h2 {
    color: #c9d1d9;
}
body.dark-mode .achievements-section-header::after {
    background-color: #8b949e;
}

.achievements-list {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;
}

.achievements-list li {
    font-size: 1rem;
    color: #424a51;
    margin-bottom: 12px;
    padding-left: 25px; /* Space for custom bullet */
    position: relative;
    line-height: 1.6;
}

.achievements-list li::before {
    content: "\F282"; /* Bootstrap Icon: dot, or use a simple bullet: • (\2022) */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 5px;
    top: 2px; /* Adjust vertical alignment */
    color: #0056b3; /* Accent color for bullets */
    font-size: 0.8rem; /* Size of the bullet icon */
}

body.dark-mode .achievements-list li {
    color: #b1bac4;
}
body.dark-mode .achievements-list li::before {
    color: #58a6ff;
}

/* Specific styling for workshop details if needed */
.workshop-details, .achievement-details {
    /* Can add specific styling here if parts of the text need to be different */
}
.workshop-details .organizer, .achievement-details .score-rank {
    /* font-style: italic; */
    /* color: #6a737d; */ /* Slightly muted color */
}
/* body.dark-mode .workshop-details .organizer,
body.dark-mode .achievement-details .score-rank {
    color: #8b949e;
} */

/* Add some space between the two main sections */
.workshops-group {
    margin-bottom: 50px;
}


/* Responsive adjustments */
@media (max-width: 767px) {
    .achievements-section-header h2 {
        font-size: 1.5rem;
    }
    .achievements-list li {
        font-size: 0.95rem;
    }
}