/* Responsive Design */

/* Tablet (768px - 1023px) */
@media (max-width: 63.9375rem) { /* 1023px */
  :root {
    --container-padding: 3.125rem;   /* 50px */
    --spacing-4xl: 6.25rem;          /* 100px */
    --spacing-3xl: 4.6875rem;        /* 75px */
  }
  
  .navigation {
    padding: 0 var(--spacing-4xl);
  }
  
  .hero-text-container {
    max-width: 100%;
  }
  
  .project-card {
    flex: 0 0 calc(50% - 0.78125rem); /* 12.5px */
    max-width: calc(50% - 0.78125rem);
  }
  
  .experience-box {
    flex-wrap: wrap;
  }
  
  .experience-description {
    flex: 0 0 100%;
    width: 100%;
  }
  
  .experience-images {
    flex: 0 0 100%;
    width: 100%;
  }
  
  .experience-image {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  
  .side-projects-header {
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-lg);
  }
  
  .side-projects-title {
    max-width: 100%;
    text-align: left;
  }
  
  .footer-content {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .footer-title {
    width: 100%;
    text-align: left;
  }

  /* Project Page Responsive */
  /* .project-header-section .navigation {
    padding: var(--spacing-xl) var(--spacing-4xl) 0;
  }
  
  .project-header-section .project-header {
    padding: 0 var(--spacing-4xl) var(--spacing-4xl);
  } */
  
  .project-details {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .project-details-title {
    width: 100%;
    text-align: left;
  }
  
  .project-detail-card {
    flex: 0 0 calc(50% - 0.78125rem); /* 12.5px */
    max-width: calc(50% - 0.78125rem);
  }

  /* About Page Responsive */
  .about-content {
    gap: 6.25rem; /* 100px */
    padding: 6.25rem var(--container-padding) 6.25rem; /* 100px */
  }
  
  .about-image {
    width: 100%;
    max-width: 29.5625rem; /* 473px */
    height: auto;
    aspect-ratio: 1 / 1;
  }
  
  .about-section {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .about-section-title {
    text-align: left;
    justify-content: flex-start;
  }

  .about-section-content {
    flex: 1;
    max-width: 100%;
  }

  /* Contact Page Responsive */
  .contact-content {
    gap: 100px;
    padding: 100px var(--container-padding) 100px;
  }
  
  .contact-image {
    width: 100%;
    max-width: 29.5625rem; /* 473px */
    height: auto;
    aspect-ratio: 1 / 1;
  }
  
  .contact-section {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .contact-section-title {
    text-align: left;
    justify-content: flex-start;
  }
}

/* Mobile (320px - 767px) */
@media (max-width: 47.9375rem) { /* 767px */
  :root {
    --container-padding: 1.5625rem;  /* 25px */
    --spacing-4xl: 4.6875rem;        /* 75px */
    --spacing-3xl: 3.125rem;         /* 50px */
    --spacing-2xl: 3.125rem;         /* 50px */
    --font-size-large: 1.75rem;      /* 28px */
    --font-size-medium: 1.25rem;     /* 20px */
  }
  
  .main-container {
    padding-top: var(--spacing-lg);
  }
  
  .navigation {
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
  }
  
  .nav-center {
    display: none;
  }
  
  .nav-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    text-align: right;
  }
  
  .content-section {
    padding: 0 var(--container-padding) var(--spacing-3xl);
  }
  
  .hero-content {
    align-items: flex-start;
    gap: var(--spacing-xl);
  }
  
  .projects-grid {
    padding: 0 var(--container-padding);
    gap: var(--spacing-lg);
  }
  
  .project-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .experience-box {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .experience-description {
    min-height: auto;
    gap: var(--spacing-lg);
  }
  
  .experience-row {
    flex-direction: row;
  }
  
  .experience-row .experience-item:last-child {
    text-align: right;
  }
  
  .experience-images {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .experience-image {
    max-width: 100%;
    aspect-ratio: 1 / 1;
  }

  .thesis-title-container {
    flex: 1; 
    max-width: 100%;
  }
  
  .side-projects-header {
    padding: 0 var(--container-padding);
  }
  
  .side-projects-grid {
    padding: 0;
  }
  
  .side-projects-section {
    padding: var(--spacing-3xl) var(--container-padding);
  }

  /* .about-item-position {
    color: var(--background-white);
  } */
  
  .footer {
    padding: var(--spacing-3xl) var(--container-padding);
  }

  .footer-content {
    padding: 0 var(--container-padding);
  }

  /* Project Page Responsive */
  .project-header-section .navigation {
    padding: var(--spacing-lg) var(--spacing-xl) 0;
  }
  
  .project-header-section .project-header {
    padding: 0 var(--spacing-xl) var(--spacing-3xl);
  }
  
  .project-content {
    padding: 0 var(--container-padding);
    gap: var(--spacing-xl);
  }
  
  .project-header {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-xl);
  }
  
  .project-cards-grid {
    gap: var(--spacing-lg);
  }
  
  .project-detail-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* About Page Responsive */
  .about-content {
    gap: var(--spacing-3xl);
    padding: var(--spacing-3xl) var(--container-padding) var(--spacing-3xl);
  }
  
  .about-image {
    width: 100%;
    max-width: 100%;
  }
  
  .about-section {
    gap: var(--spacing-lg);
  }
  
  .about-item {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .about-icon {
    align-self: flex-start;
  }

  /* Contact Page Responsive */
  .contact-content {
    gap: var(--spacing-3xl);
    padding: var(--spacing-3xl) var(--container-padding) var(--spacing-3xl);
  }
  
  .contact-image {
    width: 100%;
    max-width: 100%;
  }
  
  .contact-section {
    gap: var(--spacing-lg);
  }
}

/* Large Desktop (1440px+) */
@media (min-width: 90rem) { /* 1440px */
  .main-container {
    max-width: var(--max-width);
    margin: 0 auto;
  }
}