/* ====== JiHaa Site Stylesheet - Definitieve Stabiele Versie ====== */
:root { --bg-color: #1b1464; --primary-text-color: #ffffff; --accent-color: #c7b299; --overlay-bg-color: rgba(27, 20, 100, 0.7); --font-primary: 'Work Sans', sans-serif; --font-secondary: 'Quicksand', sans-serif; }
html, body { margin: 0; padding: 0; background-color: var(--bg-color); font-family: var(--font-primary); color: var(--primary-text-color); overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--primary-text-color); text-decoration: none; }
img { max-width: 100%; height: auto; }

/* --- HEADER & NAV --- */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 300; }
.header-container { max-width: 1000px; margin: 0 auto; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }
.logo { height: 120px; }
.menu-toggle { font-family: var(--font-secondary); font-size: 2rem; color: var(--primary-text-color); cursor: pointer; background: transparent; border: none; }
.nav-overlay { position: fixed; top: 0; right: -100%; width: clamp(260px, 80vw, 320px); height: 100vh; background: var(--overlay-bg-color); padding: 60px 30px; font-family: var(--font-secondary); transition: right 0.4s ease; z-index: 9999; }
.nav-overlay.active { right: 0; }
.nav-overlay .close { position: absolute; top: 20px; right: 30px; font-size: 2rem; cursor: pointer; }
.nav-overlay ul { list-style: none; padding: 0; margin: 40px 0 0 0; }
.nav-overlay ul li { margin: 20px 0; font-size: 2rem; }
.nav-overlay-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 9998; display: none; }
.nav-overlay-bg.active { display: block; }

/* --- HOMEPAGE SLIDESHOW --- */
.slideshow { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: hidden; z-index: 1; }
.slideshow a { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.slideshow a.active { display: block; animation: fadeEffect 1.5s; }
@keyframes fadeEffect { from {opacity: .4} to {opacity: 1} }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-mobile { object-fit: contain; object-position: center; }
/* Mobile-first: toon standaard de mobiele slide */
.slideshow a img.slide-desktop { display: none; }
.slideshow a img.slide-mobile { display: block; }
.client-name { position: absolute; bottom: 30px; left: 150px; font-family: var(--font-secondary); z-index: 3; }
.client-name h1 { font-size: 2.5rem; margin-bottom: -1.7rem; }
.client-name p { margin: 0; }
.client-name p img { 
  height: 4.2rem; 
  width: auto; 
  display: inline-block; 
  vertical-align: middle;
}

/* --- CLIENT OVERVIEW PAGINA --- */
.clients-container { max-width: 1000px; margin: 140px auto 60px auto; padding: 0 30px; }
.case-block { display: flex; align-items: flex-start; margin-bottom: 30px; cursor: pointer; }
.case-image { width: 320px; height: 180px; object-fit: cover; flex-shrink: 0; }
.case-copy { padding-left: 30px; padding-top: 10px; flex-grow: 1; }
.case-name { font-family: var(--font-secondary); font-size: 2rem; margin: 0 0 6px 0; }
.case-desc { font-size: 1.2rem; color: var(--accent-color); margin: 5px 0 12px 0; line-height: 1.4; }
.case-view { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; }
.case-view img { width: 20px; height: auto; position: relative; top: 0px; }

/* ... (en alle andere stabiele desktop-stijlen) ... */

/* --- BACK BUTTON STYLING --- */
.return-to-overview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--primary-text-color);
  text-decoration: none;
  position: relative;
  z-index: 10;
}
.return-to-overview .arrow-icon {
  width: 20px;
  height: auto;
  position: relative;
  top: 0px;
}

/* Client case container styling is defined below */

/* === CASEPAGE GENERIC LAYOUT (mobile-first) === */
.client-case-container { max-width: 1000px; margin: 120px auto 60px auto; padding: 0 30px; }
.main-image img { width: 100%; height: auto; display: block; }
.case-details { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
.left-column, .right-column { width: 100%; }

/* About/Proces – desktop layout and typography */
.proces-page .case-details { grid-template-columns: 400px 1fr; gap: 40px; }
.proces-page .left-column > .secondary-slideshow,
.proces-page .left-column > .full-width-video { border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.06); }
.proces-page .full-width-video { width: 100%; height: 400px; object-fit: cover; display: block; }
.proces-page .case-name { font-family: var(--font-secondary); font-size: 2.4rem; margin: 0 0 8px 0; }
.proces-page .case-desc { color: var(--accent-color); margin: 0 0 18px 0; line-height: 1.5; }
.proces-page .case-text h3 { font-family: var(--font-secondary); font-weight: 700; margin: 24px 0 8px 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.2); }
.proces-page .case-text p { line-height: 1.6; }

/* CTA button */
.cta-button { background: var(--accent-color); color: var(--bg-color); border: none; border-radius: 999px; padding: 12px 18px; font-weight: 700; cursor: pointer; }
.cta-button:hover { opacity: 0.92; }
/* Extra spacing to separate from slideshow on about/proces */
.proces-page .cta-button { margin-top: 24px; }

/* Secondary slideshow */
.secondary-slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* DE FIX: Dit geeft de container een standaard hoogte */
  aspect-ratio: 16 / 9; 
}

/* Video styling in secondary slideshow for case pages */
.client-case-container .secondary-slideshow .case-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.secondary-slideshow .case-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 1; /* Inactieve slides liggen onderop */
}

.secondary-slideshow .case-slide.active {
  opacity: 1;
  z-index: 2; /* Actieve slide ligt bovenop */
}

.slide-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3; /* Zorg dat de knoppen altijd de bovenste laag zijn */
}

.slide-control img {
  width: 18px;
  height: auto;
  display: block;
}

.slide-control.prev { left: 8px; }
.slide-control.next { right: 8px; }

/* Proces page slideshow - desktop */
.proces-page .secondary-slideshow {
  width: 100%;
  height: 400px;
  aspect-ratio: 1 / 1;
}

/* Proces page video styling override */
.proces-page .secondary-slideshow .case-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero slideshow on case pages */

.hero-slideshow {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.hero-slideshow .case-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.0s ease-in-out;
  z-index: 1; /* DE FIX: Alle inactieve slides liggen op een lage laag */
}

.hero-slideshow .case-slide.active {
  opacity: 1;
  z-index: 2; /* DE FIX: De actieve slide ligt BOVENOP de andere lagen */
}

/* Image row C */
.image-c-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }

/* Videos */
.case-video { 
  width: 100%; 
  height: auto; 
  display: block; 
  object-fit: cover;
  border-radius: 8px;
}

/* Styling voor de archetype afbeeldingen */
.archetype-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-top: 0; /* Uitlijnen met de titel van het artikel */
  margin-bottom: 20px; /* Ruimte tussen afbeelding en terug knop */
}

/* Styling voor archetype iconen op proces pagina */
.archetype-item .archetype-icon {
  margin-top: 30px; /* Extra margin aan de bovenkant van de iconen */
}

/* Archetype pagina's - meer margin om logo overlap te voorkomen */
.archetype-page .case-details {
  margin-top: 160px; /* Meer margin om logo overlap te voorkomen */
  grid-template-columns: 1fr 2fr; /* 1/3 links, 2/3 rechts */
}

/* ================================================= */
/* ====== MOBIELE STYLES (VOOR SCHERMEN <= 810PX) ====== */
/* ================================================= */
@media (max-width: 810px) {
  .header-container { padding: 10px 15px; }
  .logo { height: 60px; }
  
  /* HOMEPAGE SLIDESHOW OP MOBIEL - FULLSCREEN */
  .slideshow { 
    height: 100vh; 
    height: 100svh; 
    display: block;
  }
  .slideshow a { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: none;
  }
  .slideshow a.active { 
    display: block; 
  }
  .slideshow a img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
  }
  .client-name { 
    position: absolute; 
    bottom: 30px; 
    left: 20px; 
    font-family: var(--font-secondary); 
    z-index: 3;
  }
  .client-name h1 { 
    font-size: 2.5rem; 
    margin-bottom: -1.7rem; 
  }
  .client-name p { 
    margin: 0; 
  }
  .client-name p img { 
    height: 4.2rem; 
    width: auto; 
    display: inline-block; 
    vertical-align: middle;
  }
  
  /* CLIENT OVERVIEW OP MOBIEL */
  .clients-container { margin: 100px 0 30px 0; padding: 0 15px; }
  .case-block { flex-direction: column; align-items: flex-start; }
  .case-image { width: 100%; height: auto; }
  .case-copy { padding-left: 0; padding-top: 15px; }
  .case-name { font-size: 1.8rem; }
  .case-desc { font-size: 1rem; margin: 15px 0 12px 0; }
  .case-view { margin-top: 20px; }
  .case-view img { width: 20px; height: auto; position: relative; top: -2px; }

  /* Back button on mobile */
  .return-to-overview { margin-top: 0; margin-bottom: 20px; }
  .return-to-overview .arrow-icon { width: 20px; height: auto; position: relative; top: -2px; }

  /* About/Proces – mobile layout */
  .proces-page .case-details { grid-template-columns: 1fr; gap: 20px; }
  .proces-page .left-column > .secondary-slideshow,
  .proces-page .left-column > .full-width-video { border-radius: 14px; }
  .proces-page .case-details { 
    margin-top: 40px; /* Aangepaste margin voor proces pagina op mobiel */
  }
  .proces-page .secondary-slideshow { 
    height: auto; 
    aspect-ratio: 1 / 1; /* Vierkant op mobiel */
    margin-top: 40px; /* Extra margin voor slideshow */
  }
  .cta-button { padding: 12px 18px; }

  /* Archetype pagina's - mobiele margin */
  .archetype-page .case-details { 
    margin-top: 80px; 
    grid-template-columns: 1fr; /* 1 kolom op mobiel */
  }

  /* Archetype iconen - extra margin op mobiel */
  .archetype-item .archetype-icon {
    margin-top: 50px; /* Meer margin op mobiel */
  }

  /* Blog view button on mobile */
  .blog-view { margin-top: 20px; }
  .blog-view img { width: 20px; height: auto; position: relative; top: -2px; }

  /* Case page hero image - mobile fullscreen square */
  .client-case-container { margin: 0; padding: 0; max-width: 100%; }
  .main-image { 
    position: relative; 
    width: 100vw; 
    height: 100vw; 
    margin-left: calc(-50vw + 50%); 
    overflow: hidden;
    margin-top: 0; /* Geen extra ruimte - direct onder header */
  }
  .main-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center;
    display: block;
  }
  
  /* Case details positioning after fullscreen hero */
  .case-details { 
    margin-top: 0; 
    padding: 20px 15px; 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto;
  }
}

/* --- BLOG GRID LAYOUT --- */
.blogs-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 30px; 
  margin-top: 40px; 
}

.blog-post { 
  display: block; 
  text-decoration: none; 
  color: inherit; 
  transition: transform 0.3s ease; 
}

.blog-post:hover { 
  transform: translateY(-5px); 
}

.blog-post.coming-soon { 
  cursor: default; 
}

.blog-post.coming-soon:hover { 
  transform: none; 
}

.blog-image { 
  width: 100%; 
  aspect-ratio: 1; 
  background: rgba(255,255,255,0.06); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: 20px; 
  overflow: hidden; 
}

.blog-image img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}


.placeholder-image { 
  width: 80px; 
  height: 80px; 
  background: rgba(255,255,255,0.1); 
  border-radius: 8px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.blog-content { 
  text-align: left; 
}

.blog-title { 
  font-family: var(--font-secondary); 
  font-size: 1.8rem; 
  margin: 0 0 8px 0; 
  color: var(--primary-text-color); 
}

.blog-excerpt { 
  font-size: 1.1rem; 
  color: var(--accent-color); 
  margin: 0 0 12px 0; 
  line-height: 1.4; 
}

.blog-view { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  margin-top: 20px; 
  font-weight: 600; 
  font-size: 0.9rem; 
  text-transform: uppercase; 
}

.blog-view img { 
  width: 20px; 
  height: auto; 
  position: relative; 
  top: 0px; 
}

/* Blog article H3 styling - same as proces-page */
.client-case-container .case-text h3 { 
  font-family: var(--font-secondary); 
  font-weight: 700; 
  font-size: 1.4rem;
  margin: 24px 0 8px 0; 
  padding-top: 18px; 
  border-top: 1px solid rgba(255,255,255,0.2); 
}

/* Highlighted text with 1px line below */
.highlighted-text {
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 18px;
  margin-bottom: 24px;
}

/* White case description text */
.case-desc-white {
  font-size: 1.2rem;
  color: var(--primary-text-color);
  margin: 5px 0 12px 0;
  line-height: 1.4;
}

/* Paragraph font weight and line height */
p {
  font-weight: 400;
  line-height: 1.6;
}

/* ================================================= */
/* ====== DESKTOP STYLES (>= 811PX): wissel naar desktop slide ====== */
/* ================================================= */
@media (min-width: 811px) {
  .slideshow a img.slide-desktop { display: block; }
  .slideshow a img.slide-mobile { display: none; }
  .case-details { grid-template-columns: 1fr 1fr; gap: 36px; }
  .image-c-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  
  /* Blog grid desktop layout */
  .blogs-grid { 
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; 
  }
}

/* SVG images in blog posts should maintain their aspect ratio and be smaller */
.blog-post .blog-image .archetype-svg {
  width: 60% !important;
  height: auto !important;
  object-fit: contain !important;
  max-width: 200px !important;
  min-width: 100px !important;
}