/* ============================================
   HOME PAGE STYLES
   ============================================ */

/* Header and navigation pull shared styles from style.css */

/* Main Container - Index */
.index-container {
  position: relative;
  width: 1446px;
  flex: 1;
  margin: 0 auto;
  background: #FFFFFF;
  overflow: visible;
  padding-bottom: 100px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Smooth anchor scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* Navigation - Projects and Papers reuse shared styles from style.css */

/* Overview Label */
.overview-label {
  position: absolute;
  left: 300px;
  top: 287px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 99.985%;
  color: #2C5DFE;
  white-space: pre;
  margin: 0;
}

/* Main Title */
.main-title {
  position: absolute;
  width: 782px;
  height: 343px;
  left: 300px;
  top: 344px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 56px;
  line-height: 64px;
  color: #00040D;
  margin: 0;
}

.main-title .highlight {
  color: #2C5DFE;
}

/* Mission Text */
.mission-text {
  position: absolute;
  width: 872px;
  height: 256px;
  left: 300px;
  top: 716px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 48px;
  color: #00030B;
  margin: 0;
}

/* Blue Section - Rectangle 65 */
.blue-section {
  position: absolute;
  width: 1071px;
  height: 560px;
  left: calc(8.33% + 65.5px); /* ~186px */
  top: 965px;
  background: #2C5DFE;
  box-shadow: 0px 16px 47.7px rgba(23, 2, 80, 0.07);
}

/* Blue Text - positioned absolutely relative to container, not blue-section */
.blue-text {
  position: absolute;
  width: 458px;
  height: 403px;
  left: calc(16.67% + 59px); /* ~300px from container left */
  top: 1096px; /* absolute from container top */
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: #F5F5F5;
  z-index: 10;
}

.blue-text p {
  margin: 0;
  margin-bottom: 0;
}

/* Common Section Styles - unified layout for every section */
.specialization-section,
.projects-section,
.team-section {
  position: absolute;
  width: 849px;
  left: calc(16.67% + 67px); /* ~308px */
}

/* Section Titles - shared heading formatting */
.specialization-section .specialization-label,
.projects-title,
.team-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 99.985%;
  color: #2C5DFE;
  margin: 0;
  margin-bottom: 40px;
}

.specialization-section .specialization-label {
  white-space: pre;
  margin-bottom: 20px;
}

/* Specialization Section Content */
.specialization-section .specialization-content {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: #000014;
}

.specialization-section .specialization-content p {
  margin: 0;
  margin-bottom: 16px;
}

.specialization-section .specialization-content p:last-child {
  margin-bottom: 0;
}

/* Projects Section */
.project-item {
  margin-bottom: 60px;
}

.project-item:last-child {
  margin-bottom: 0;
}

.project-title {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: #00040D;
  margin: 0;
  margin-bottom: 16px;
}

.project-description {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: #000014;
  margin: 0;
}

/* Team Section */
.team-member {
  margin-bottom: 40px;
}

.team-member:last-child {
  margin-bottom: 0;
}

.team-member-name {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: #00040D;
  margin: 0;
  margin-bottom: 12px;
}

.team-member-description {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  color: rgba(0, 4, 13, 0.6);
  font-style: italic;
  margin: 0;
  position: relative;
}

.team-member-description::before {
  content: '"';
}

.team-member-description::after {
  content: '"';
}

.team-member-email {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: #00040D;
  margin: 0;
  margin-top: 8px;
  text-decoration: none;
  display: block;
}

.team-member-email:hover {
  text-decoration: underline;
}

/* Footer uses the shared styles from style.css */
/* Position is updated dynamically inside load-content.js */

/* ============================================
   RESPONSIVE LAYOUT
   ============================================ */

@media (max-width: 1440px) {
  .index-container {
    width: 100%;
    padding: 0 40px;
  }
  
  .overview-label,
  .main-title,
  .mission-text {
    left: 40px !important;
  }

  /* Shift the blue section as well */
  .blue-section {
    left: 40px !important;
    width: calc(100% - 80px) !important;
  }
  
  .blue-text {
    left: 80px !important;
  }
  
  .specialization-section,
  .projects-section,
  .team-section {
    left: 80px !important;
    width: calc(100% - 160px) !important;
  }
}

@media (max-width: 1024px) {
  .index-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }

  /* Reset absolute positioning */
  .overview-label,
  .main-title,
  .mission-text,
  .blue-section,
  .blue-text,
  .specialization-section,
  .projects-section,
  .team-section {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0;
    left: auto !important;
    top: auto !important;
  }

  /* Adjustments */
  .overview-label {
    margin-top: 40px;
  }

  .main-title {
    font-size: 48px;
    line-height: 56px;
  }

  .mission-text {
    font-size: 28px;
    line-height: 40px;
  }

  /* Special Blue Section Handling for Mobile */
  .blue-section {
    display: none; /* Hide the standalone rectangle */
  }

  .blue-text {
    background: #2C5DFE;
    padding: 40px 20px;
    margin-left: -20px; /* Stretch full-bleed across the viewport */
    width: calc(100% + 40px) !important;
    box-sizing: border-box;
    color: #F5F5F5;
  }

  .specialization-section,
  .projects-section,
  .team-section {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .main-title {
    font-size: 36px;
    line-height: 44px;
  }

  .mission-text {
    font-size: 20px;
    line-height: 30px;
  }

  .blue-text {
    font-size: 18px;
    line-height: 28px;
  }

  .specialization-section .specialization-content,
  .project-description,
  .team-member-description,
  .team-member-email {
    font-size: 16px;
    line-height: 24px;
  }

  .project-title,
  .team-member-name {
    font-size: 20px;
    line-height: 28px;
  }
}