/* ==========================================================================
   HORIZONTAL SCROLL PROJECTS STYLES
   ========================================================================== */

/* The wrapper that will be pinned by GSAP */
.horizontal-scroll-wrapper {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden; /* Hide the overflow on the x-axis */
  padding-block: 0; 
  /* Full viewport height for a perfect movie-reel takeover */
  min-height: 100vh; 
  display: flex;
  align-items: center;
}

/* Overriding the default .projects-grid layout from layout.css */
.horizontal-scroll-wrapper .projects-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4rem; /* Movie-reel gap */
  width: max-content; 
  /* Mathematically center the first and last cards based on 1050px width */
  padding-left: calc(50vw - min(45vw, 525px));
  padding-right: calc(50vw - min(45vw, 525px));
  /* Remove css grid defaults */
  grid-template-columns: none;
}

/* 
  Size the individual project cards to form a carousel track.
  Assuming the cards are rendered inside .projects-grid
*/
.horizontal-scroll-wrapper .projects-grid > article,
.horizontal-scroll-wrapper .projects-grid > .project-card,
.horizontal-scroll-wrapper .projects-grid > .proj-skeleton {
  flex: 0 0 auto;
  /* Original exact size from design */
  width: min(90vw, 1050px); 
  /* Let flexbox stretch all cards to the height of the tallest card automatically */
  height: auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* -----------------------------------------------------
   RESPONSIVE CARD LAYOUT FOR HORIZONTAL SCROLL 
----------------------------------------------------- */

/* Desktop: Side-by-side layout perfectly fits the wide format without clipping */
@media (min-width: 850px) {
  .horizontal-scroll-wrapper .projects-grid > .project-card--hero {
    flex-direction: row;
    align-items: stretch;
    gap: 3rem;
    padding: 3rem; /* Luxurious inner spacing */
  }
  
  .horizontal-scroll-wrapper .project-card--hero .ph-visual {
    flex: 1 1 45%;
    min-width: 0;
    margin: 0;
    height: auto;
  }
  
  .horizontal-scroll-wrapper .project-card--hero .ph-content {
    flex: 1 1 55%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the text vertically */
  }
}

/* Mobile: Compact the vertical stack so buttons aren't pushed off screen */
@media (max-width: 849px) {
  .horizontal-scroll-wrapper .projects-grid > .project-card {
    padding: 1.25rem; 
    gap: 0;
  }
  
  .horizontal-scroll-wrapper .project-card--hero .ph-visual {
    min-height: 190px; 
    height: 190px; /* Reduced slightly to create breathing space */
    margin-bottom: 1rem;
  }
  
  .horizontal-scroll-wrapper .projects-grid > .project-card .project-card-header {
    margin-bottom: 0.5rem;
  }
  
  .horizontal-scroll-wrapper .projects-grid > .project-card .project-title {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
  }
  
  .horizontal-scroll-wrapper .projects-grid > .project-card .project-desc {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    /* 3 lines gives optimal balance between text visibility and card height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .horizontal-scroll-wrapper .projects-grid > .project-card .project-tags {
    display: none; /* Keep tags hidden to save space */
  }
  
  .horizontal-scroll-wrapper .projects-grid > .project-card .project-card-actions {
    margin-top: auto; /* Push buttons to bottom securely */
    padding-top: 1rem;
  }
}

/* When hidden in matrix view, eliminate min-height so zero blank space is left */
.horizontal-scroll-wrapper[style*="display: none"],
.horizontal-scroll-wrapper.is-hidden {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure matrix view renders cleanly directly below the toolbar */
.projects-matrix-wrap {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 3.5rem;
  position: relative;
  z-index: 5;
}