/* Projects Page - MINIMALISTISCH & STRAKKER DESIGN */

/* Projects Hero Section */
.hero.projects-hero {
  height: 70vh;
  min-height: 500px;
  background-color: var(--deep-black, #0a0a0a);
  background-image: linear-gradient(rgba(10,10,10,0.4),rgba(10,10,10,0.4)), url('../assets/img-8136.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background-image 0.3s ease;
}

.hero.projects-hero .hero-content {
  text-align: center;
  max-width: 800px;
  padding: 0 clamp(1rem, 4vw, 2rem);
  z-index: 2;
  position: relative;
}

.hero.projects-hero h1 {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 300;
  color: var(--ivory-white) !important; /* BEHOUD WIT */
  margin-bottom: 1.5rem;
  line-height: 1.1;
  letter-spacing: -2px;
}

.hero.projects-hero .hero-subtitle {
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--ivory-white) !important; /* BEHOUD WIT */
  margin-bottom: 2rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  font-family: var(--font-secondary);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Projects Section - BEHOUD ORIGINELE LAYOUT */
.projects-section {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  background: var(--ivory-white);
}

.projects-intro {
  text-align: center;
  margin-bottom: clamp(4rem, 8vw, 6rem); /* ORIGINEEL */
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.projects-intro .section-title {
  font-family: var(--font-primary);
  font-size: clamp(2.2rem, 6vw, 3.5rem); /* ORIGINEEL */
  margin-bottom: 1.5rem;
  color: var(--deep-black) !important; /* STRAK ZWART */
  font-weight: 300;
  letter-spacing: -0.5px; /* IETS STRAKKER */
}

.projects-intro .section-subtitle {
  color: var(--deep-black) !important; /* GEWIJZIGD NAAR ZWART */
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  line-height: 1.6; /* STRAKKER DAN 1.7 */
  max-width: 700px;
  margin: 0 auto;
  font-family: var(--font-secondary);
  font-weight: 300;
}

/* PROJECTS GRID - BEHOUD ORIGINELE LAYOUT */
.projects-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 10vw, 8rem); /* ORIGINEEL */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* PROJECT CARDS - GEEN BORDER */
.project-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 4rem); /* ORIGINEEL */
  align-items: center; /* ORIGINEEL */
  opacity: 0;
  transform: translateY(50px);
  animation: slideInUp 0.8s ease forwards;
  position: relative;
}

/* Staggered animation - ORIGINEEL BEHOUDEN */
.project-card:nth-child(1) {
  animation-delay: 0.1s;
}
.project-card:nth-child(2) {
  animation-delay: 0.2s;
}
.project-card:nth-child(3) {
  animation-delay: 0.3s;
}
.project-card:nth-child(4) {
  animation-delay: 0.4s;
}
.project-card:nth-child(5) {
  animation-delay: 0.5s;
}
.project-card:nth-child(6) {
  animation-delay: 0.6s;
}

/* PROJECT SLIDESHOW - GEEN BORDER */
.project-slideshow {
  position: relative;
  overflow: hidden;
  border-radius: 2px; /* MINIMALER DAN 0 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); /* SUBTIELERE SHADOW */
  width: 100%;
  max-width: 730px; /* ORIGINEEL */
  aspect-ratio: 730/337; /* ORIGINEEL */
  background: var(--ivory-white);
  cursor: default;
  transition: all 0.3s ease; /* SNELLER DAN 0.4s */
  margin: 0 auto;
  flex-shrink: 0;
  align-self: center;
}

.project-slideshow:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1); /* SUBTIELERE HOVER */
  transform: translateY(-4px); /* MINDER DAN -8px */
}

.project-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.project-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out; /* IETS SNELLER */
}

.project-slide.active {
  opacity: 1;
}

.project-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: none; /* ORIGINEEL - GEEN ZOOM */
  display: block;
}

/* SLIDESHOW CONTROLS - STRAKKER DESIGN */
.slideshow-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 clamp(1rem, 3vw, 2rem);
  opacity: 0;
  transition: opacity 0.2s ease; /* SNELLER */
  pointer-events: none;
  z-index: 10;
}

.project-slideshow:hover .slideshow-controls {
  opacity: 1;
  pointer-events: auto;
}

.slide-btn {
  background: rgba(255, 255, 255, 0.95);
  color: var(--deep-black);
  border: none; /* GEEN BORDER */
  width: clamp(38px, 8vw, 46px); /* IETS KLEINER */
  height: clamp(38px, 8vw, 46px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.1rem, 3vw, 1.4rem); /* IETS KLEINER */
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s ease; /* SNELLER */
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08); /* SUBTIELE BORDER */
}

.slide-btn:hover {
  background: var(--deep-black); /* ZWART I.P.V. ANTIQUE-GOLD */
  color: var(--ivory-white);
  transform: scale(1.05); /* MINDER DAN 1.1 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* SLIDE INDICATORS - GEEN BORDER */
.slide-indicators {
  position: absolute;
  bottom: clamp(1rem, 3vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(0.3rem, 1.5vw, 0.5rem); /* IETS KLEINER GAP */
  opacity: 0;
  transition: opacity 0.2s ease; /* SNELLER */
  z-index: 10;
}

.project-slideshow:hover .slide-indicators {
  opacity: 1;
}

.indicator {
  width: clamp(6px, 2.5vw, 8px); /* IETS KLEINER */
  height: clamp(6px, 2.5vw, 8px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease; /* SNELLER */
  backdrop-filter: blur(4px);
  border: none; /* GEEN BORDER */
}

.indicator.active,
.indicator:hover {
  background: var(--deep-black); /* ZWART I.P.V. ANTIQUE-GOLD */
  transform: scale(1.2); /* MINDER DAN 1.3 */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

/* PROJECT CONTENT - MEER PADDING ONDER SLIDESHOW */
.project-content {
  padding: clamp(2.5rem, 5vw, 4rem) 0; /* VERHOOGD van 1.5rem naar 2.5rem */
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* ORIGINEEL */
  align-self: center; /* ORIGINEEL */
}

.project-meta {
  display: flex;
  gap: clamp(0.5rem, 2vw, 0.8rem); /* IETS KLEINER GAP */
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
  flex-wrap: wrap;
  justify-content: center;
}

.project-tag {
  background: rgba(0, 0, 0, 0.04); /* STRAK GRIJS */
  color: var(--deep-black) !important; /* ZWART TEKST */
  padding: clamp(0.25rem, 1.5vw, 0.4rem) clamp(0.5rem, 2.5vw, 0.8rem);
  font-size: clamp(0.65rem, 2vw, 0.75rem); /* IETS KLEINER */
  letter-spacing: 0.5px;
  font-weight: 300;
  border-radius: 12px; /* MINDER DAN 15px */
  font-family: var(--font-secondary);
  text-transform: uppercase;
  border: none; /* GEEN BORDER */
  transition: all 0.2s ease; /* SNELLER */
}

.project-tag:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.project-content h3 {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 5vw, 2.2rem); /* ORIGINEEL */
  font-weight: 300;
  color: var(--deep-black) !important; /* STRAK ZWART */
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
  letter-spacing: -0.3px; /* IETS STRAKKER */
  line-height: 1.15; /* STRAKKER DAN 1.2 */
}

.project-content p {
  color: var(--deep-black) !important; /* GEWIJZIGD NAAR ZWART */
  font-size: clamp(0.9rem, 2.8vw, 1.1rem);
  line-height: 1.6; /* STRAKKER DAN 1.7 */
  font-family: var(--font-secondary);
  font-weight: 300;
  max-width: 700px;
  margin: 0 auto;
}

/* HIDE CONTROLS FOR SINGLE-IMAGE PROJECTS - ORIGINEEL */
.project-slideshow.single-image .slideshow-controls,
.project-slideshow.single-image .slide-indicators {
  display: none !important;
}

/* NO LIGHTBOX INDICATORS - ORIGINEEL */
.project-slideshow::after {
  display: none !important;
}

/* RESPONSIVE BREAKPOINTS - BEHOUD ORIGINELE LAYOUT */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  .project-card {
    grid-template-columns: 1fr 1fr; /* ORIGINEEL */
    gap: clamp(4rem, 6vw, 6rem); /* ORIGINEEL */
    text-align: left;
    align-items: center; /* ORIGINEEL */
  }

  .project-card:nth-child(even) {
    direction: rtl; /* ORIGINEEL */
  }

  .project-card:nth-child(even) > * {
    direction: ltr; /* ORIGINEEL */
  }

  .project-content {
    text-align: left;
    padding: clamp(3rem, 5vw, 4.5rem) 0; /* VERHOOGD van 2rem naar 3rem */
    justify-content: center;
  }

  .project-meta {
    justify-content: flex-start;
  }

  .project-slideshow {
    max-width: 810px; /* ORIGINEEL */
    width: 810px; /* ORIGINEEL */
    align-self: center; /* ORIGINEEL */
  }

  .projects-grid {
    gap: clamp(6rem, 10vw, 10rem); /* ORIGINEEL */
  }
}

/* Desktop (1200px - 1399px) */
@media (min-width: 1200px) {
  .project-card {
    grid-template-columns: 1fr 1fr; /* ORIGINEEL */
    gap: clamp(3rem, 5vw, 5rem); /* ORIGINEEL */
    text-align: left;
    align-items: center; /* ORIGINEEL */
  }

  .project-card:nth-child(even) {
    direction: rtl; /* ORIGINEEL */
  }

  .project-card:nth-child(even) > * {
    direction: ltr; /* ORIGINEEL */
  }

  .project-content {
    text-align: left;
    padding: clamp(2.5rem, 4vw, 3.5rem) 0; /* VERHOOGD van 1.5rem naar 2.5rem */
    justify-content: center;
  }

  .project-meta {
    justify-content: flex-start;
  }

  .project-slideshow {
    max-width: 730px; /* ORIGINEEL */
    width: 675px; /* ORIGINEEL */
    align-self: center; /* ORIGINEEL */
  }

  .projects-grid {
    gap: clamp(5rem, 8vw, 8rem); /* ORIGINEEL */
  }
}

/* Large Tablet (1024px - 1199px) */
@media (min-width: 1024px) {
  .project-card {
    grid-template-columns: 1fr 1fr; /* ORIGINEEL */
    gap: clamp(2.5rem, 4vw, 4rem); /* ORIGINEEL */
    text-align: left;
    align-items: center; /* ORIGINEEL */
  }

  .project-content {
    text-align: left;
    padding: clamp(2rem, 4vw, 3rem) 0; /* VERHOOGD van 1.5rem naar 2rem */
    justify-content: center;
  }

  .project-meta {
    justify-content: flex-start;
  }

  .project-slideshow {
    max-width: 610px; /* ORIGINEEL */
    width: 100%;
    align-self: center; /* ORIGINEEL */
  }

  .projects-grid {
    gap: clamp(4rem, 6vw, 6rem); /* ORIGINEEL */
  }
}

/* Tablet Portrait (768px - 1023px) - VERHOOGDE PADDING */
@media (max-width: 1023px) {
  .project-card {
    grid-template-columns: 1fr; /* ORIGINEEL */
    gap: clamp(2.5rem, 5vw, 3.5rem); /* VERHOOGD van 2rem naar 2.5rem */
    text-align: center;
    align-items: stretch; /* ORIGINEEL */
    grid-template-areas:
      "content"
      "slideshow"; /* ORIGINEEL */
  }

  .project-content {
    grid-area: content; /* ORIGINEEL */
    text-align: center;
    padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(2.5rem, 4vw, 3rem) 0; /* VERHOOGD BOVENAAN van 0 naar 1.5rem */
    justify-content: flex-start; /* ORIGINEEL */
  }

  .project-slideshow {
    grid-area: slideshow; /* ORIGINEEL */
    width: 100%;
    max-width: 100%;
    aspect-ratio: 730/337; /* ORIGINEEL */
    align-self: stretch; /* ORIGINEEL */
  }

  .project-card:nth-child(even) {
    direction: ltr; /* ORIGINEEL */
  }

  .project-meta {
    justify-content: center;
  }

  .projects-grid {
    gap: clamp(3rem, 6vw, 5rem); /* ORIGINEEL */
  }

  .projects-section {
    padding: clamp(3rem, 6vw, 5rem) 0; /* ORIGINEEL */
  }

  .hero.projects-hero {
    height: 60vh;
    min-height: 400px;
  }
}

/* Mobile Landscape & Portrait (320px - 767px) - VERHOOGDE PADDING BOVEN CONTENT */
@media (max-width: 767px) {
  .hero.projects-hero {
    height: 60vh;
    min-height: 400px;
  }

  .projects-section {
    padding: clamp(3rem, 6vw, 4rem) 0; /* ORIGINEEL */
  }

  .projects-intro {
    margin-bottom: clamp(2.5rem, 5vw, 4rem); /* ORIGINEEL */
  }

  .projects-grid {
    gap: clamp(2.5rem, 5vw, 4rem); /* ORIGINEEL */
    padding: 0 clamp(0.5rem, 2vw, 1rem); /* ORIGINEEL */
  }

  .project-card {
    gap: clamp(2.5rem, 4vw, 3.5rem); /* VERHOOGD van 1.5rem naar 2.5rem */
    grid-template-areas:
      "content"
      "slideshow"; /* ORIGINEEL */
  }

  .project-content {
    grid-area: content; /* ORIGINEEL */
    text-align: center;
    padding: clamp(2rem, 4vw, 2.5rem) 0 clamp(1rem, 2.5vw, 1.5rem) 0; /* VERHOOGD BOVENAAN van 0 naar 2rem */
  }

  .project-slideshow {
    grid-area: slideshow; /* ORIGINEEL */
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9; /* ORIGINEEL */
  }

  .project-meta {
    flex-direction: row; /* ORIGINEEL */
    align-items: center;
    gap: clamp(0.4rem, 1.5vw, 0.6rem);
    justify-content: center;
    flex-wrap: wrap;
  }

  .project-tag {
    font-size: 0.65rem; /* IETS KLEINER */
    padding: 0.25rem 0.5rem;
  }

  /* Show controls on mobile - ORIGINEEL */
  .slideshow-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .slide-indicators {
    opacity: 1 !important;
  }

  .slide-btn {
    width: 32px; /* IETS KLEINER */
    height: 32px;
    font-size: 1rem;
  }

  .indicator {
    width: 6px; /* IETS KLEINER */
    height: 6px;
  }
}

/* Small Mobile (320px - 479px) - EXTRA PADDING */
@media (max-width: 479px) {
  .hero.projects-hero .hero-content {
    padding: 0 1rem; /* ORIGINEEL */
  }

  .projects-grid {
    padding: 0 0.5rem; /* ORIGINEEL */
    gap: clamp(2rem, 4vw, 3rem); /* ORIGINEEL */
  }

  .project-card {
    gap: clamp(2rem, 4vw, 3rem); /* VERHOOGD voor meer ruimte */
    grid-template-areas:
      "content"
      "slideshow"; /* ORIGINEEL */
  }

  .project-content {
    grid-area: content; /* ORIGINEEL */
    padding: clamp(1.5rem, 4vw, 2rem) 0 1rem 0; /* VERHOOGD BOVENAAN van 0 naar 1.5rem */
  }

  .project-slideshow {
    grid-area: slideshow; /* ORIGINEEL */
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3/2; /* ORIGINEEL */
  }

  .slide-btn {
    width: 30px; /* IETS KLEINER */
    height: 30px;
    font-size: 0.9rem;
  }

  .indicator {
    width: 5px; /* IETS KLEINER */
    height: 5px;
  }

  .slideshow-controls {
    padding: 0 0.8rem; /* ORIGINEEL */
  }

  .slide-indicators {
    bottom: 0.6rem; /* ORIGINEEL */
    gap: 0.3rem; /* ORIGINEEL */
  }
}

/* Force visibility - ORIGINEEL */
@media (max-width: 1023px), (hover: none) {
  .slideshow-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .slide-indicators {
    opacity: 1 !important;
  }
}

/* Button interactions - STRAKKER */
.slide-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none;
}

.indicator {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none;
}

.slide-btn:active,
.slide-btn:focus {
  background: var(--deep-black) !important; /* ZWART I.P.V. ANTIQUE-GOLD */
  color: var(--ivory-white) !important;
  transform: scale(0.95) !important;
}

.indicator:active,
.indicator:focus {
  background: var(--deep-black) !important; /* ZWART I.P.V. ANTIQUE-GOLD */
  transform: scale(1.2) !important;
}

/* Animation - ORIGINEEL */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility - ORIGINEEL */
@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-slideshow,
  .slide-btn,
  .indicator {
    transition: none !important;
    animation: none !important;
  }

  .project-card {
    opacity: 1 !important;
    transform: none !important;
  }

  .project-slideshow:hover {
    transform: none !important;
  }
}

/* Print Styles - ORIGINEEL */
@media print {
  .slideshow-controls,
  .slide-indicators {
    display: none !important;
  }

  .project-slideshow {
    break-inside: avoid;
  }

  .project-slide {
    opacity: 1 !important;
  }

  .project-slide:not(.active) {
    display: none !important;
  }
}

/* Focus States - STRAKKER */
.slide-btn:focus,
.indicator:focus {
  outline: 2px solid var(--deep-black); /* ZWART I.P.V. ANTIQUE-GOLD */
  outline-offset: 2px;
}

/* High Contrast Mode - borders alleen bij accessibility */
@media (prefers-contrast: high) {
  .project-card,
  .project-slideshow,
  .slide-btn,
  .indicator,
  .project-tag {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--deep-black) !important;
  }
}