/* ============================================================================
   CSS VARIABLES
   ============================================================================ */
:root {
  --primary: #1a1a1a;
  --secondary: #4b5563;
  --accent: #2563eb;
  --bg-light: #ffffff;
  --white: #ffffff;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Lato', sans-serif;
}

/* ============================================================================
   RESET & BASE STYLES
   ============================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--secondary);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative; /* Enable positioning for fade pseudo-elements */
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--primary);
  font-weight: 700;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================================
   LAYOUT UTILITIES
   ============================================================================ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 80px 0;
}

.bg-light {
  background-color: var(--bg-light);
}

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

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* ============================================================================
   NAVIGATION BAR
   ============================================================================ */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  height: 70px;
  display: flex;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Fade-out gradient at bottom of navbar for smooth transition to hero section */
#navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 25%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.7) 75%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1001;
}
.nav-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 5px;
}

.logo span {
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
}

.desktop-nav {
  display: flex;
  gap: 30px;
}

.nav-link {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--secondary);
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent);
}

/* Mobile Hamburger Menu */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger .bar {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--primary);
  margin: 5px auto;
  transition: 0.3s;
}

.mobile-nav {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  background: white;
  padding: 20px;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  display: none;
}

.mobile-nav.open {
  display: flex;
}

/* ============================================================================
   HERO VIDEO SECTION
   ============================================================================ */
.hero-video-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: white;
}

/* Fade-in gradient at top of video section (complements navbar fade-out) */
.hero-video-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.98) 15%,
    rgba(255, 255, 255, 0.9) 35%,
    rgba(255, 255, 255, 0.7) 60%,
    rgba(255, 255, 255, 0.4) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 2;
}


.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Video visibility based on MOVIE_VIDEO setting in script.js */
/* Background video mode (MOVIE_VIDEO = false) */
.hero-video-wrapper.use-background-video .movie-video,
.hero-video-wrapper.use-background-video .intro-overlay,
.hero-video-wrapper.use-background-video .skip-button {
  display: none;
}

.hero-video-wrapper.use-background-video .background-video {
  display: block;
}

/* Movie video mode (MOVIE_VIDEO = true) */
.hero-video-wrapper.use-movie-video .background-video {
  display: none;
}

.hero-video-wrapper.use-movie-video .movie-video,
.hero-video-wrapper.use-movie-video .intro-overlay,
.hero-video-wrapper.use-movie-video .skip-button {
  display: block;
}

/* Intro text overlay container (only visible with movie video) */
.intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Intro text styling (animated text overlays for movie video) */
.intro-text {
  position: absolute;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: #FFFFFF;
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.5);
  mix-blend-mode: normal;
  text-shadow: 
    0px 0px 4px rgba(0, 0, 0, 0.9),
    0px 0px 8px rgba(0, 0, 0, 0.8),
    0px 5px 20px rgba(0, 0, 0, 0.7),
    0px 8px 30px rgba(0, 0, 0, 0.6),
    0px 12px 40px rgba(0, 0, 0, 0.5),
    0px 16px 50px rgba(0, 0, 0, 0.4);
}

.intro-text.visible {
  opacity: 1;
  transform: translateY(0);
}

.heart { 
  color: #FF0000; /* Red heart */
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.5); /* Same edge as other text */
  text-shadow: 
    0px 0px 4px rgba(0, 0, 0, 0.9),
    0px 0px 8px rgba(0, 0, 0, 0.8),
    0px 5px 20px rgba(0, 0, 0, 0.7),
    0px 8px 30px rgba(0, 0, 0, 0.6),
    0px 12px 40px rgba(0, 0, 0, 0.5),
    0px 16px 50px rgba(0, 0, 0, 0.4); /* Same shadow as other text */
}

/* Specific Positions */
.center-screen {
  top: 55%; left: 45%;
  transform: translate(-50%, -50%) scale(0.3);
  font-size: clamp(3rem, 8vw, 5rem);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.center-screen.visible { 
  transform: translate(-50%, -50%) scale(1);
}

/* Hi Text */
.top-right {
  top: 15%; right: 7%;
  text-align: right;
  font-size: clamp(2rem, 5vw, 3rem);
}

/* I am Nikolaos Text */
.center-big {
  top: 20%; left: 5%;
  transform: appearance(-50%);
  font-size: clamp(2.5rem, 6vw, 4rem);
  white-space: nowrap;
  animation: fadeIn 0.5s ease-out;
}
/* AI Scientist Text */
.bottom-left {
  bottom: 15%; left: 70%;
  transform: translateX(-50%) translateY(-80px) rotate(-15deg) scale(0.5);
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  max-width: 600px;
  text-align: left;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Larger font size for full screen / large displays */
@media (min-width: 1400px) {
  .bottom-left {
    font-size: clamp(3rem, 6vw, 4.5rem);
  }
}
.bottom-left .no-wrap {
  white-space: nowrap;
}
.bottom-left.visible {
  transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
}

.center-vertical {
  bottom: 10%; right: 5%;
  height: fit-content;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  text-align: right;
  border-right: 5px solid #FFFFFF; /* White border matching acrylic paint */
  padding-right: 20px;
  /* Same shadow as other intro-text elements - inherited from .intro-text class */
}

/* --- SKIP BUTTON --- */
.skip-button {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 25px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.skip-button:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.skip-button:active {
  transform: translateY(0);
}

.skip-button span {
  display: inline-block;
}

/* Hide skip button when final content is shown (only for movie video) */
.hero-video-wrapper.use-movie-video.show-final .skip-button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Final hero content (profile, name, social links) */
.hero-content {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: opacity 1.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-content.hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-content.show {
  opacity: 1;
  pointer-events: all;
}

/* Fade-out gradient at bottom of video section (transition to about section) */
.hero-video-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 40%,
    rgba(255, 255, 255, 0.8) 70%,
    rgba(255, 255, 255, 0.95) 90%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* White overlay when movie video intro completes */
.hero-video-wrapper.use-movie-video.show-final::after {
  top: 0;
  height: 100%;
  background: white;
  background-image: none;
  opacity: 1;
  transition: opacity 1.5s ease;
}

/* Hide video and intro overlay when final content shows (only for movie video) */
.hero-video-wrapper.use-movie-video.show-final .movie-video,
.hero-video-wrapper.use-movie-video.show-final .intro-overlay {
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* For background video, add a subtle overlay to ensure text readability */
.hero-video-wrapper.use-background-video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  z-index: 2;
  pointer-events: none;
}

.profile-wrapper {
  width: 250px; height: 250px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border: 4px solid white;
}
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transform: scale(1.15); }
.final-title { font-size: 3rem; margin-bottom: 5px; }
.hero-subtitle { font-size: 2.5rem; font-weight: 400; color: var(--secondary); margin-bottom: 20px; }

.social-row { display: flex; gap: 15px; justify-content: center; margin-top: 10px; align-items: center; }
.social-row a { color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.social-row a:hover { color: var(--accent); transform: translateY(-3px); }

/* GitLab icon specific styling */
.social-link--gitlab .icon {
  width: 25px;
  height: 25px;
  object-fit: contain;
  display: block;
}

/* GitLab icon in contact section (small-socials) */
.small-socials .social-link--gitlab .icon {
  width: 20px;
  height: 20px;
}

.scroll-down {
  margin-top: 40px; display: flex; flex-direction: column;
  align-items: center; font-size: 0.8rem; color: var(--primary);
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(10px);}
  60% {transform: translateY(5px);}
}

/* ============================================================================
   ABOUT SECTION
   ============================================================================ */
.framed-img {
  border-radius: 4px;
  box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.05);
}

.col-text p {
  margin-bottom: 20px;
}

/* Interactive Career Timeline */
.about-timeline {
  margin-top: 40px;
  position: relative;
  padding-bottom: 400px; /* Reserve space for largest content to prevent layout shift */
}

/* Mobile Dropdown Selector (hidden on desktop) */
.timeline-mobile-select {
  display: none; /* Hidden by default */
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 1rem; /* Larger font for better readability */
  font-weight: 500;
  color: var(--primary);
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 30px;
}

/* Style the dropdown options */
.timeline-mobile-select option {
  font-size: 1.2rem;
  padding: 12px;
  font-family: var(--font-body);
  font-weight: 500;
}

.timeline-mobile-select:hover {
  border-color: var(--accent);
}

.timeline-mobile-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.timeline-details {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  min-height: 350px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
}

.timeline-details.is-changing {
  opacity: 0;
  transform: translateY(10px);
}

.timeline-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px 28px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.timeline-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

.timeline-card-header h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.timeline-meta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--secondary);
}

.timeline-card p {
  color: var(--secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.timeline-card p strong {
  color: var(--primary);
  font-weight: 700;
}

.flag-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.flag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--primary);
  background: #ffffff;
}

/* Timeline track wrapper */
.timeline-track-wrapper {
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
  padding: 0 20px;
}

/* Timeline track (the horizontal line) */
.timeline-track {
  position: relative;
  height: 2px;
  background: #d1d5db;
  border-radius: 999px;
  margin-top: 90px; /* Space for icons above */
  margin-bottom: 0;
}

/* Timeline stops container */
.timeline-stops {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

/* Remove all default button styling from timeline stops */
.about-timeline .timeline-stop {
  all: unset;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.about-timeline .timeline-stop:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.about-timeline .timeline-stop:active {
  transform: translateY(1px);
}

/* Icon above the dot */
.about-timeline .timeline-icon {
  position: absolute;
  bottom: 30px; /* Position above the bar */
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.about-timeline .timeline-icon svg {
  width: 100%;
  height: 100%;
  color: var(--primary);
}

.about-timeline .timeline-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.about-timeline .timeline-stop.is-active .timeline-icon,
.about-timeline .timeline-stop:hover .timeline-icon {
  opacity: 1;
  transform: translateY(-4px);
}

.about-timeline .timeline-stop.is-active .timeline-icon-img,
.about-timeline .timeline-stop:hover .timeline-icon-img {
  filter: grayscale(0%);
  transform: translateY(-4px);
}

/* The dot on the track */
.about-timeline .timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9ca3af;
  border: 2px solid #ffffff;
  transform: translateY(-6px);
  transition: all 0.2s ease;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.about-timeline .timeline-stop.is-active .timeline-dot,
.about-timeline .timeline-stop:hover .timeline-dot {
  background: var(--primary);
  border-color: #ffffff;
  transform: translateY(-8px) scale(1.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Label below the dot */
.about-timeline .timeline-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  white-space: nowrap;
  margin-top: 8px;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.about-timeline .timeline-stop.is-active .timeline-label {
  color: var(--primary);
  font-weight: 700;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  /* Mobile layout for About timeline */

  .about-timeline {
    margin-top: 32px;
    padding-bottom: 0; /* Let content define height */
  }

  /* Show mobile dropdown, hide timeline stops */
  .timeline-mobile-select {
    display: block;
  }

  .timeline-track-wrapper {
    display: none; /* Hide timeline track and stops on mobile */
  }

  .timeline-details {
    position: static;   /* No absolute positioning on mobile */
    top: auto;
    left: auto;
    right: auto;
    min-height: 0;
    margin-bottom: 20px;  /* Reduced space between card and track */
  }

  /* Timeline Fixes for Mobile */
  .timeline-stops {
    overflow-x: auto;         /* Enables horizontal scrolling */
    padding-bottom: 12px;     /* Reduced space for scrollbar */
    scrollbar-width: none;    /* Hide scrollbar (Firefox) */
    -ms-overflow-style: none; /* Hide scrollbar (IE/Edge) */
    padding-left: 5px;
    padding-right: 5px;
    justify-content: flex-start; /* Ensure items start from left */
    gap: 6px;  /* Smaller gap between stops */
    -webkit-overflow-scrolling: touch;
  }

  /* Hide scrollbar for Chrome/Safari */
  .timeline-stops::-webkit-scrollbar { 
    display: none; 
  }

  .about-timeline .timeline-stop {
    flex: 0 0 auto;  /* Prevents tabs from squishing */
    min-width: 60px; /* Smaller for mobile - ensures clickable area */
  }

  .about-timeline .timeline-label {
    font-size: 0.55rem; /* Smaller font for mobile */
    letter-spacing: 0.06em; /* Slightly tighter spacing */
  }

  .about-timeline .timeline-icon {
    width: 36px;  /* Smaller icons for mobile */
    height: 36px;
    bottom: 20px; /* Closer to track */
  }
   
  .about-timeline .timeline-track {
    margin-top: 30px; /* Reduced spacing - closer to icons */
  }
}

/* Extra-small mobile adjustments - Vertical timeline layout */
@media (max-width: 480px) {
  .about-timeline {
    margin-top: 24px;
  }

  .timeline-card-header h3 {
    font-size: 0.95rem;
  }

  .timeline-meta {
    font-size: 0.7rem;
  }

  .timeline-card-body {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  /* Convert timeline stops to vertical list */
  .timeline-stops {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    overflow-x: visible;
    overflow-y: visible;
  }

  /* Hide the horizontal track line on small screens */
  .timeline-track {
    display: none;
  }

  /* Scale down icons for vertical layout */
  .about-timeline .timeline-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
    position: static;
    bottom: auto;
  }

  /* Adjust labels for readability */
  .about-timeline .timeline-label {
    font-size: 0.75rem;
  }

  /* Adjust timeline stop for vertical layout */
  .about-timeline .timeline-stop {
    gap: 4px;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }
}

/* ============================================================================
   PROJECTS SECTION
   ============================================================================ */
.projects-list {
  max-width: 900px;
  margin: 0 auto;
}

.projects-list h3 {
  font-size: 1.5rem;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

/* Project Filters */
.project-filter-mobile {
  display: none; /* Hidden by default, shown on mobile */
}

.project-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-btn {
  padding: 10px 20px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #eff6ff;
}

.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.filter-count {
  text-align: center;
  font-size: 0.9rem;
  color: var(--secondary);
  margin-bottom: 30px;
  font-style: italic;
}

/* Hide filtered projects */
.project-item.hidden {
  display: none;
}

/* Responsive Grid Layout for Projects - fits 4-5 projects per line */
.academic-projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* Smooth fade-in animation for projects */
.project-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Project thumbnail container */
.proj-img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0.3rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.proj-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.proj-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.proj-content h4 { 
  font-size: 0.95rem; 
  margin-bottom: 6px; 
  line-height: 1.3;
}
.proj-content h4 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.proj-content h4 a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.proj-content p { font-size: 0.95rem; margin-bottom: 10px; }
.tags span {
  font-size: 0.65rem; background: #e0e7ff; color: #4338ca;
  padding: 2px 6px; border-radius: 4px; margin-right: 4px;
  display: inline-block;
}

/* ============================================================================
   CONTACT SECTION
   ============================================================================ */
.form-group {
  margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #eee;
  font-family: inherit;
  border-radius: 4px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: 1px solid var(--accent);
}

.btn-submit {
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px 30px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  font-size: 0.8rem;
}

.btn-submit:hover {
  background: #333;
}

.small-socials {
  justify-content: flex-start;
  margin-top: 30px;
}
.contact-img-wrapper {
  position: relative;
}

.contact-img-crop {
  overflow: hidden;
  border: 8px solid #2c3e50;
  border-radius: 4px;
}

.contact-img-wrapper img { 
  width: 100%;
  height: auto;
  display: block;
  margin-top: -3cm; /* Crop 3cm from top */
}

/* ============================================================================
   FOOTER
   ============================================================================ */
footer {
  padding: 30px;
  text-align: center;
  font-size: 0.8rem;
  background: #ffffff;
}

/* ============================================================================
   RESPONSIVE DESIGN (MOBILE)
   ============================================================================ */
@media (max-width: 768px) {
  /* Navigation */
  .desktop-nav {
    display: none;
  }
  
  .hamburger {
    display: block;
  }
  
  /* Hero section */
  .final-title {
    font-size: 2.5rem; /* At least as large as hero-subtitle */
  }
  
  .hero-subtitle {
    font-size: 2rem; /* Smaller than final-title on mobile */
  }
  
  /* Layout adjustments */
  .two-col-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  /* Project filters - show dropdown on mobile, hide buttons */
  .project-filter-mobile {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px auto;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary);
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
  }
  
  .project-filter-mobile:hover {
    border-color: var(--accent);
  }
  
  .project-filter-mobile:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
  }
  
  .project-filter-mobile option {
    font-size: 1rem;
    padding: 12px;
    font-family: var(--font-body);
    font-weight: 500;
  }
  
  .project-filters {
    display: none; /* Hide buttons on mobile */
  }
  
  /* Responsive Grid Layout for Projects on Mobile */
  .academic-projects-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }

  /* Project Card Styling for Mobile */
  .project-item {
    padding: 10px;
    gap: 8px;
  }

  /* Image container within the card */
  .proj-img {
    height: 100px;    /* Fixed height for uniformity on mobile */
    aspect-ratio: auto;
    padding: 0.2rem;
  }

  /* Typography adjustments for smaller cards */
  .proj-content h4 {
    font-size: 0.85rem;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .tags {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }

  .tags span {
    font-size: 0.55rem;
    padding: 1px 4px;
  }
  
  /* Contact section: form first on mobile */
  #contact .two-col-grid {
    display: flex;
    flex-direction: column-reverse;
  }
  
  /* Make contact image smaller on mobile */
  #contact .contact-img-wrapper {
    max-width: 80%;
    margin: 0 auto;
  }
  
  #contact .contact-img-crop {
    border-width: 6px;
  }
  
  /* Make form fields larger on mobile */
  #contact .form-group input,
  #contact .form-group textarea {
    padding: 18px;
    font-size: 1rem;
  }
  
  #contact .form-group {
    margin-bottom: 24px;
  }
  
  #contact textarea {
    min-height: 120px;
  }
  
  /* Fade transitions: reduced height for mobile */
  #navbar::after {
    height: 90px;
  }
  
  .hero-video-wrapper::before {
    height: 100px;
  }
  
  .hero-video-wrapper::after {
    height: 200px;
  }
}

/* Safe Fallback for Very Small Screens */
@media (max-width: 380px) {
  .academic-projects-container { 
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .project-item {
    padding: 12px;
  }
  
  .proj-content h4 {
    font-size: 0.9rem;
  }
}