/* Shared by the Resources, Lectures, Interactive Models, Templates and course pages.
   Loaded after site.css and before the page's own <style>. */
body { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--navy-dark); line-height: 1.6; }
.page-header { background: linear-gradient(135deg, #ffffff 0%, #f4f7f9 55%, #e7eef4 100%); text-align: center; border-bottom: 1px solid var(--border-color); }
.page-header h1 { font-size: 2.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.page-header h1 span { font-size: 2.5rem; }
.content { max-width: 1000px; margin: 0 auto; padding: 3rem 2rem; }
.section-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--accent-blue); }
.philosophy-box { background-color: var(--navy-light); border-width: 1px; border-style: solid; border-radius: 10px; padding: 2rem; margin-bottom: 3rem; box-shadow: var(--card-shadow); }
.philosophy-box h3 { color: var(--text-primary); font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }
.philosophy-box p { color: var(--text-secondary); line-height: 1.8; font-size: 0.95rem; margin-bottom: 1rem; }
.philosophy-box p:last-child { margin-bottom: 0; }
.courses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.course-card { background-color: var(--navy-light); border-width: 1px; border-style: solid; border-radius: 8px; padding: 1.5rem; box-shadow: var(--card-shadow); transition: all 0.3s ease; opacity: 0; animation: fadeInUp 0.6s ease forwards; }
.course-card:nth-child(1) { animation-delay: 0.1s; }
.course-card:nth-child(2) { animation-delay: 0.2s; }
.course-card:nth-child(3) { animation-delay: 0.3s; }
.course-card:nth-child(4) { animation-delay: 0.4s; }
.course-card:nth-child(5) { animation-delay: 0.5s; }
.course-card:hover { border-color: var(--accent-teal); transform: translateY(-4px); }
.course-code { color: var(--accent-blue); font-size: 0.8rem; font-weight: 600; margin-bottom: 0.5rem; display: inline-block; background-color: rgba(4, 32, 76, 0.07); padding: 0.35rem 0.75rem; border-radius: 4px; }
.course-title { color: var(--text-primary); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.course-role { color: var(--accent-teal); font-weight: 600; font-size: 0.9rem; }
.courses-section { margin-bottom: 3rem; }
footer { padding: 2rem; text-align: center; font-size: 0.9rem; }
.social-icons { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem; }
.social-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; border-width: 2px; border-style: solid; transition: all 0.3s ease; font-weight: 600; }
@media (max-width: 768px) {
    nav ul { gap: 1rem; font-size: 0.85rem; }
    .page-header h1 { font-size: 1.8rem; }
    .courses-grid { grid-template-columns: 1fr; }
    .course-title { font-size: 1.05rem; }
}
.publication-card, .publication-item, .talk-item, .education-card, .timeline-content, .contact-detail-box, .contact-form-section, .contact-details-section, .research-box { box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.05), 6px 10px 22px rgba(0, 0, 0, 0.10); }
.btn { padding: 0.45rem 1rem; border-radius: 6px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; cursor: pointer; border: none; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.82rem; display: inline-block; }
.btn-primary { background-color: #61b77c; color: #1b1b1a; border: 2px solid #61b77c; font-weight: 700; }
.btn-primary:hover { background-color: #4da068; border-color: #4da068; color: #1b1b1a; transform: translateY(-2px); }
.btn-secondary { background-color: transparent; color: #0056a4; border: 2px solid #0056a4; }
.btn-secondary:hover { background-color: #0056a4; color: #ffffff; transform: translateY(-2px); }
.resource-card { background-color: #ffffff; border: 1px solid #e6ebef; border-radius: 10px; padding: 2rem; margin-bottom: 2rem; box-shadow: var(--card-shadow); transition: all 0.3s ease; opacity: 0; animation: fadeInUp 0.6s ease forwards; display: grid; grid-template-columns: 320px 1fr; gap: 2.25rem; align-items: center; }
.resource-card:nth-child(1) { animation-delay: 0.1s; }
.resource-card:nth-child(2) { animation-delay: 0.2s; }
.resource-card:nth-child(3) { animation-delay: 0.15s; }
.resource-card:nth-child(4) { animation-delay: 0.2s; }
.resource-card:nth-child(n+5) { animation-delay: 0.25s; }
.section-lede { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.75; margin: -1rem 0 2rem; }
.resource-card:hover { border-color: var(--accent-teal); transform: translateY(-4px); box-shadow: 3px 5px 10px rgba(0,0,0,0.07), 10px 16px 32px rgba(0,0,0,0.15); }
.resource-preview { border: 1px solid #e6ebef; border-radius: 6px; overflow: hidden; background: #f4f7f9; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; }
.resource-preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.resource-preview:hover { border-color: var(--accent-teal); }
.resource-caption { color: #6c757d; font-size: 0.8rem; margin-top: 0.5rem; text-align: center; }
.resource-body h3 { color: var(--text-primary); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.35rem; }
.resource-body .resource-sub { color: var(--accent-teal); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.9rem; }
.resource-body p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.75; margin-bottom: 0.9rem; }
.resource-body ul { margin: 0 0 1.1rem 1.1rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }
.resource-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.resource-tag { color: var(--accent-blue); font-size: 0.75rem; font-weight: 600; background-color: rgba(4, 32, 76, 0.07); padding: 0.3rem 0.7rem; border-radius: 4px; }
.resource-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.resources-note { background-color: #ffffff; border: 1px solid #e6ebef; border-left: 4px solid var(--accent-teal); border-radius: 8px; padding: 1.5rem 1.75rem; box-shadow: var(--card-shadow); color: var(--text-secondary); font-size: 0.95rem; line-height: 1.75; }
.resources-note strong { color: var(--text-primary); }
@media (max-width: 768px) {
    .resource-card { grid-template-columns: 1fr; gap: 1.25rem; }
    .resource-actions .btn { width: 100%; text-align: center; }
}
.crumbs { font-size: 0.9rem; font-weight: 600; margin-bottom: 1.5rem; color: #6c757d; }
.crumbs a { color: #0056a4; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 0.4rem; color: #9aa7b1; }