/* Base grid styles */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  /* First row (work header): 140px
     Rows 2-3 (work projects): 280px
     Row 4 (side projects header): 140px
     Remaining rows (side projects): 280px */
  grid-template-rows: 140px repeat(2, 280px) 140px repeat(7, 280px);
}

/* Section headers for "My Work" and "Side Projects" */
.section-header {
  grid-column: 1 / 5; /* Span all columns */
  padding: 24px;
  display: flex;
  align-items: flex-end;
  background-color: var(--background-section);
  border-radius: 12px;
  gap: 12px;
  /* No fixed height - will take height from grid-template-rows */
}

.section-header h2 {
  font-size: 1.6rem;
  margin: 0;
  line-height: 1.6rem;
}

/* Define exact row positions */
.work-header {
  grid-column: 1 / 5;
  grid-row: 1 / 2; /* First row (140px) */
}

.position-2 {
  /* In-car OS */
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.position-3 {
  /* Aircall */
  grid-column: 3 / 5;
  grid-row: 2 / 4;
}

.side-projects-header {
  grid-column: 1 / 5;
  grid-row: 4 / 5; /* Fourth row (140px) */
}

/* Side Projects Grid Placement (final, matches table) */
.position-physical {
  grid-column: 1 / 3;
  grid-row: 5 / 7;
}
.position-newproject {
  grid-column: 3 / 5;
  grid-row: 5 / 6;
}
.position-enzo {
  grid-column: 3 / 5;
  grid-row: 6 / 8;
}
.position-bookapp {
  grid-column: 1 / 3;
  grid-row: 7 / 8;
}
.position-hikingmap {
  grid-column: 1 / 3;
  grid-row: 8 / 9;
}
.position-carplay {
  grid-column: 3 / 5;
  grid-row: 8 / 9;
}
.position-whitenoise {
  grid-column: 1 / 2;
  grid-row: 9 / 10;
}
.position-cluster {
  grid-column: 2 / 4;
  grid-row: 9 / 10;
}
.position-mr {
  grid-column: 4 / 5;
  grid-row: 9 / 10;
}
.position-cardesign {
  grid-column: 1 / 3;
  grid-row: 10 / 11;
}
.position-wiki {
  grid-column: 3 / 5;
  grid-row: 10 / 12;
}
.position-climate {
  grid-column: 1 / 3;
  grid-row: 11 / 12;
}

/* Default for large cards */
.project-card.large {
  grid-column: span 2;
  grid-row: span 2;
}

/* Large card images height */
.project-card.large .project-card-image {
  height: 560px;
}

/* Make sure project cards have consistent height */
.project-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Ensure images maintain aspect ratio */
.project-card-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-card-image img,
.project-card-hover-media img,
.project-card-image video,
.project-card-hover-media video {
  object-fit: contain;
  max-width: 100%;
}

/* Add loading="lazy" attribute to videos for better performance */
video {
  loading: lazy;
}

/* Critical fix for work-item layout - updated to match regular project cards */
.project-card.project-card-work {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card-work-image {
  flex: 1;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Remove the special grid layout for work items */
.project-card.project-card-work.work-item {
  display: flex !important;
  flex-direction: column !important;
}

.work-text {
  display: none; /* Hide the work text section */
}

/* New project placeholder: next to physical controls */
.position-placeholder {
  grid-column: 3 / 5;
  grid-row: 5 / 7;
}

/* AI book highlights: now large, spans two columns in row 3 of side projects */
.position-5 {
  grid-column: 1 / 3;
  grid-row: 7 / 9;
}

/* Enzo's legacy remains as .position-6 (already large, unchanged) */

/* Hiking map: now large, two columns wide in row 4 of side projects */
.position-7 {
  grid-column: 1 / 3;
  grid-row: 9 / 11;
}

/* CarPlay: now large, two columns wide in row 4 of side projects */
.position-8 {
  grid-column: 3 / 5;
  grid-row: 9 / 11;
}

/* New project placeholder: two columns, one row */
.position-newproject {
  grid-column: 3 / 5;
  grid-row: 5 / 6;
}

/* Mobile layout (under 768px) */
@media only screen and (max-width: 767px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:
      110px /* My Work header */
      220px /* SnappOS + Aircall */
      110px /* Side Projects header */
      220px /* Physical Controls */
      220px /* New Project + AI Book App */
      220px /* Enzo's Legacy */
      220px /* Hiking Map + CarPlay */
      220px /* Digital Cluster */
      220px /* White Noise + MR Prototyping */
      220px /* Wiki Explore */
      220px; /* Car Design History + Climate Controls */
    gap: 8px;
  }
  .work-header {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .position-2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .position-3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  .side-projects-header {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }
  .position-physical {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }
  .position-newproject {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }
  .position-bookapp {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
  }
  .position-enzo {
    grid-column: 1 / 3;
    grid-row: 6 / 7;
  }
  .position-hikingmap {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
  }
  .position-carplay {
    grid-column: 2 / 3;
    grid-row: 7 / 8;
  }
  .position-cluster {
    grid-column: 1 / 3;
    grid-row: 8 / 9;
  }
  .position-whitenoise {
    grid-column: 1 / 2;
    grid-row: 9 / 10;
  }
  .position-mr {
    grid-column: 2 / 3;
    grid-row: 9 / 10;
  }
  .position-wiki {
    grid-column: 1 / 3;
    grid-row: 10 / 11;
  }
  .position-cardesign {
    grid-column: 1 / 2;
    grid-row: 11 / 12;
  }
  .position-climate {
    grid-column: 2 / 3;
    grid-row: 11 / 12;
  }
}

/* Small mobile layout (under 380px) - NEW SECTION */
@media only screen and (max-width: 380px) {
  .projects-grid {
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-rows: 90px repeat(2, 180px) 90px repeat(10, 180px); /* Small mobile row heights */
    gap: 8px;
  }

  /* Section headers */
  .section-header {
    grid-column: 1 / 2;
  }

  /* All projects go full width below each other */
  .work-header {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .position-2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .position-3 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .side-projects-header {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }

  .position-4 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }

  .position-5 {
    grid-column: 1 / 2;
    grid-row: 6 / 7;
  }

  .position-7 {
    grid-column: 1 / 2;
    grid-row: 7 / 8;
  }

  .position-8 {
    grid-column: 1 / 2;
    grid-row: 8 / 9;
  }

  .position-6 {
    grid-column: 1 / 2;
    grid-row: 9 / 10;
  }

  .position-9 {
    grid-column: 1 / 2;
    grid-row: 10 / 11;
  }

  .position-11 {
    grid-column: 1 / 2;
    grid-row: 11 / 12;
  }

  .position-10 {
    grid-column: 1 / 2;
    grid-row: 12 / 13;
  }

  .position-12 {
    grid-column: 1 / 2;
    grid-row: 13 / 14;
  }

  .position-13 {
    grid-column: 1 / 2;
    grid-row: 14 / 15;
  }

  .position-14 {
    grid-column: 1 / 2;
    grid-row: 15 / 16;
  }

  /* Make all project cards take full width */
  .project-card.large {
    grid-column: 1 / 2;
  }
}

/* Extra small devices (phones, less than 480px) */
@media only screen and (max-width: 480px) {
  .section-header {
    padding: 14px;
  }

  .section-header h2 {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .section-arrow {
    font-size: 1.2rem;
    height: 1.2rem;
  }

  /* Adjust text sizing */
  .project-card-title {
    font-size: 0.65rem;
  }

  .project-card-tag {
    font-size: 0.65rem;
  }
}

@media only screen and (max-width: 767px) {
  /* Other mobile styles... */

  /* Updated mobile work project styles */
  .project-card.project-card-work {
    display: flex;
    flex-direction: column;
  }

  .project-card-work-image {
    padding: 20px;
  }

  /* Remove the special grid layout for work items on mobile too */
  .project-card.project-card-work.work-item {
    display: flex !important;
    flex-direction: column !important;
  }
}
.project-card,
.project-card-image {
  height: 100%;
}