/* css/components/Services/ServicesGrid.css */

/* Container rondom de kaarten grid */
.services-page-container {
  width: 100%;
  display: flex;
  justify-content: center;
  /* Padding verhoogd om meer witruimte te geven zoals in React */
  padding: 4rem 1.5rem;
  box-sizing: border-box;
  background-color: var(--koeleman-white); /* Achtergrond zoals in React */
}

/* De flex container voor de kaarten */
.card-container {
  display: flex;
  width: 100%;
  max-width: 1200px;
  gap: 10px; /* Ruimte tussen de kaarten */
  height: 60vh; /* Vaste hoogte zoals in React */
  min-height: 400px; /* Minimale hoogte */
}

/* Hover effecten voor de flex items (de kaarten) */
.card-container:hover > .service-card {
  flex-basis: 10%; /* Krimpt de niet-gehoverde kaarten */
  flex-grow: 0.5; /* Staat lichte groei toe maar minder dan de gehoverde */
}

.card-container > .service-card:hover {
  flex-basis: 40%; /* Vergroot de gehoverde kaart aanzienlijk */
  flex-grow: 5; /* Laat de gehoverde kaart de meeste ruimte innemen */
}

/* Media query voor mobiele weergave */
@media (max-width: 768px) {
  .services-page-container {
    padding-top: 2rem; /* Minder padding op mobiel */
    padding-bottom: 2rem;
  }

  .card-container {
    flex-direction: column; /* Kaarten onder elkaar */
    height: auto; /* Hoogte aanpassen aan inhoud */
    gap: 1rem; /* Ruimte tussen verticale kaarten */
  }

  /* Schakel flex-groei effecten uit op mobiel */
  .card-container:hover > .service-card,
  .card-container > .service-card:hover {
    flex-basis: auto; /* Reset basis */
    flex-grow: 1; /* Geef alle kaarten gelijke ruimte */
  }
}