/* --- Home Page Styles --- */

.home-hero-section {
    padding: 60px 0 80px; /* More padding for hero */
    /* background: #f8f9fa; */ /* Optional light background */
    /* For a subtle gradient background: */
    /* background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
}

body.dark-mode .home-hero-section {
    /* background: #1c2128; */ /* Darker background */
    /* background: linear-gradient(135deg, #1c2128 0%, #22272e 100%); */
}

.hero-content {
    text-align: center;
}

.profile-picture-placeholder {
    width: 200px;  /* Desired width of the circular frame */
    height: 200px; /* Desired height of the circular frame */
    border-radius: 50%; /* Makes it circular */
    background-color: #e9ecef; /* Fallback/background if image is transparent or fails to load */
    margin: 0 auto 30px auto; /* Centers the placeholder div itself */
    display: flex; /* Use flexbox for easy centering of the child image */
    align-items: center; /* Vertically centers the image */
    justify-content: center; /* Horizontally centers the image */
    border: 5px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden; /* CRUCIAL: Clips the image to the circular bounds */
}

.profile-picture-placeholder img {
    width: 100%;  /* Makes the image fill the width of the placeholder */
    height: 100%; /* Makes the image fill the height of the placeholder */
    object-fit: cover; /* IMPORTANT: Scales the image to maintain its aspect ratio while filling the element’s entire content box. Any part of the image that overflows will be clipped. This is usually what you want for profile pictures. */
    /* Alternative for object-fit:
       object-fit: contain; /* Scales the image to fit within the content box while preserving aspect ratio. Might leave empty space if image isn't square. */
       /* object-fit: scale-down; /* Displays the image as if 'none' or 'contain' were specified, whichever would result in a smaller concrete object size. */
    display: block; /* Removes any potential extra space below the image */
}

/* Placeholder icon styles (if image fails to load or isn't there yet) */
/* We can hide this if an image is present using more specific CSS or keep it as a fallback */
.profile-picture-placeholder i {
    font-size: 5rem;
    color: #adb5bd;
    /* display: none; /* Initially hide if you always expect an image */
}

/* Dark mode adjustments for the placeholder */
body.dark-mode .profile-picture-placeholder {
    background-color: #30363d;
    border-color: #22272e;
}
body.dark-mode .profile-picture-placeholder i {
    color: #6a737d;
}


.hero-content h1 { /* Name */
    font-size: 2.8rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 8px;
}
.hero-content .tagline { /* Your title/current focus */
    font-size: 1.3rem;
    font-weight: 300;
    color: #495057;
    margin-bottom: 25px;
}
.hero-contact-info {
    font-size: 1rem;
    color: #586069;
    margin-bottom: 30px;
}
.hero-contact-info a {
    color: #0056b3;
    text-decoration: none;
    margin: 0 10px;
}
.hero-contact-info a:hover {
    text-decoration: underline;
}


body.dark-mode .hero-content h1 {
    color: #f0f6fc;
}
body.dark-mode .hero-content .tagline {
    color: #c9d1d9;
}
body.dark-mode .hero-contact-info {
    color: #8b949e;
}
body.dark-mode .hero-contact-info a {
    color: #58a6ff;
}


.home-section {
    padding: 50px 0;
}
.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    color: #343a40;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #0056b3; /* Accent color */
    border-radius: 2px;
}

body.dark-mode .section-title {
    color: #e9ecef;
}
body.dark-mode .section-title::after {
    background-color: #58a6ff;
}

.home-objective p, .home-research-interests p, .home-highlights p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #495057;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
body.dark-mode .home-objective p,
body.dark-mode .home-research-interests p,
body.dark-mode .home-highlights p {
    color: #b1bac4;
}

.home-research-interests ul {
    list-style: none;
    padding: 0;
    text-align: center;
}
.home-research-interests ul li {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 8px 15px;
    margin: 5px;
    border-radius: 20px; /* Pill shape */
    font-size: 0.9rem;
    font-weight: 500;
}
body.dark-mode .home-research-interests ul li {
    background-color: #30363d;
    color: #c9d1d9;
}

.home-cta .btn {
    font-size: 1.1rem;
    padding: 12px 30px;
}