/* About Us Page */
.about-page { padding: 50px 0 0; }
.about-profile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4%; margin-bottom: 50px; }
.about-profile .profile-text { flex: 0 0 48%; }
.about-profile .profile-text h2 { font-size: 28px; margin-bottom: 20px; }
.about-profile .profile-text p { line-height: 1.75; margin-bottom: 15px; }
.about-profile .profile-text p:first-of-type { font-weight: bold; }
.about-profile .profile-image { flex: 0 0 48%; }
.about-profile .profile-image img { border-radius: 12px; width: 100%; }

/* About Sidebar */
.about-sidebar { list-style: none; padding: 0; }
.about-sidebar li { margin-bottom: 5px; }
.about-sidebar li a {
    display: block; padding: 15px 20px; background: #f5f5f5;
    color: var(--text-primary); font-size: 15px; transition: all .3s; border-radius: 4px;
}
.about-sidebar li a:hover, .about-sidebar li.active a { background: var(--site-color); color: #fff; }

/* Workshop Section */
.workshop-section { background: var(--site-color-dark); padding: 50px 0; margin-top: 50px; }
.workshop-section .index_title { color: #fff; }
.lab-section { padding: 50px 0; }
.image-grid { display: flex; flex-wrap: wrap; gap: 15px; }
.image-grid .grid-item { flex: 0 0 calc(33.333% - 10px); }
.image-grid .grid-item img { width: 100%; border-radius: 8px; }
.image-grid-2col .grid-item { flex: 0 0 calc(50% - 8px); }

/* Honor/Workshop with sidebar */
.about-with-sidebar { padding: 50px 0; }
.about-with-sidebar .sidebar-col { flex: 0 0 25%; max-width: 25%; padding-right: 30px; }
.about-with-sidebar .content-col { flex: 0 0 75%; max-width: 75%; }
.about-with-sidebar .content-col h2 { font-size: 24px; margin-bottom: 25px; }

@media (max-width: 991px) {
    .about-profile .profile-text, .about-profile .profile-image { flex: 0 0 100%; }
    .about-profile .profile-text { margin-bottom: 30px; }
    .about-with-sidebar .sidebar-col { flex: 0 0 100%; max-width: 100%; padding-right: 0; margin-bottom: 20px; }
    .about-with-sidebar .content-col { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 767px) {
    .image-grid .grid-item { flex: 0 0 calc(50% - 8px); }
    .image-grid-2col .grid-item { flex: 0 0 100%; }
}