/* ========================================
   DIENSTEN
======================================== */

/* Page centering layout */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 190px);
  width: 100%;
  padding: 2rem;
}

/* Diensten sectie */
.diensten-section { 
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Intro sectie */
.diensten-intro { 
  text-align: center; 
  max-width: 900px; 
  margin: 0 auto 1rem;
  width: 100%;
}

.diensten-intro h1 { 
  font-size: 2.5rem; 
  margin-bottom: 0.5rem; 
  color: var(--primary);
}

.diensten-intro p { 
  font-size: 1rem; 
  color: #555;
}

/* Grid layout - 4 kolommen op desktop, responsive */
.diensten-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 2.5rem; 
  align-items: stretch; 
  width: 100%;
  margin: 0 auto;
}

/* Dienst kaart */
.dienst-card { 
  background: #fff; 
  padding: 1.25rem; 
  border-radius: 12px; 
  box-shadow: 0 8px 25px rgba(0,0,0,0.06); 
  display: flex; 
  flex-direction: column; 
  gap: 0.75rem; 
  transition: transform 0.25s, box-shadow 0.25s; 
}

.dienst-card:hover { 
  transform: translateY(-6px); 
  box-shadow: 0 14px 40px rgba(0,0,0,0.08); 
}

.dienst-icon { 
  width: 64px; 
  height: 64px; 
  border-radius: 10px; 
  background-color: var(--logo); 
  color: var(--primary); 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 28px; 
}

.dienst-title { 
  font-size: 1.25rem; 
  margin: 0; 
  color: var(--primary); 
}

.dienst-desc { 
  color: #555; 
  font-size: 0.98rem; 
  line-height: 1.5; 
  margin-top: auto; 
}

.dienst-preview { 
  width: 100%; 
  height: 140px; 
  object-fit: cover; 
  border-radius: 8px; 
  margin-bottom: 0.75rem; 
}

.dienst-body { 
  display: flex; 
  flex-direction: column; 
  gap: 0.5rem; 
}

.dienst-meer { 
  margin-top: 0.5rem; 
  background: transparent; 
  border: 2px solid var(--logo); 
  color: var(--primary); 
  padding: 0.5rem 0.75rem; 
  border-radius: 8px; 
  cursor: pointer; 
  align-self: start; 
  transition: background 0.2s, color 0.2s; 
}

.dienst-meer:hover { 
  background: var(--logo); 
  color: #fff; 
}

/* Popup overlay */
.dienst-popup-overlay { 
  display: none; 
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,0.6); 
  z-index: 100000; 
  align-items: center; 
  justify-content: center; 
  padding: 2rem; 
}

.dienst-popup { 
  background: #fff; 
  max-width: 900px; 
  width: 100%; 
  border-radius: 12px; 
  padding: 1.25rem 1.5rem; 
  box-shadow: 0 30px 80px rgba(0,0,0,0.25); 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1rem; 
}

.dienst-popup img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  border-radius: 8px; 
}

.dienst-popup .dienst-popup-content h2 { 
  margin-top: 0; 
  font-size: 1.5rem; 
}

.dienst-popup .dienst-popup-close { 
  position: absolute; 
  top: 1rem; 
  right: 1.25rem; 
  background: none; 
  border: none; 
  font-size: 2rem; 
  color: #fff; 
  cursor: pointer; 
}

/* Responsive breakpoints */

/* Large desktop - 4 kolommen, increased spacing */
@media (min-width: 1400px) {
  .diensten-grid {
    gap: 3rem;
  }
  
  .diensten-intro h1 {
    font-size: 3rem;
  }
}

/* Desktop - 4 kolommen */
@media (min-width: 1025px) and (max-width: 1399px) {
  .diensten-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }
}

/* Tablet - 2 kolommen */
@media (max-width: 1024px) {
  .diensten-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .diensten-intro h1 {
    font-size: 2.2rem;
  }
  
  .dienst-preview { 
    height: 120px; 
  }
}

/* Mobiel - 1 kolom */
@media (max-width: 768px) {
  main {
    padding: 1.5rem;
    min-height: calc(100vh - 190px);
  }
  
  .diensten-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .diensten-intro h1 {
    font-size: 1.8rem;
  }
  
  .diensten-intro p {
    font-size: 0.95rem;
  }
  
  .dienst-card {
    padding: 1rem;
  }
  
  .dienst-preview { 
    height: 100px; 
  }
  
  .dienst-title {
    font-size: 1.1rem;
  }
  
  .dienst-desc {
    font-size: 0.9rem;
  }
  
  .dienst-popup { 
    grid-template-columns: 1fr; 
  }
}