/* ==========================================================================
   Client Stories
   ========================================================================== */

.clients {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ---- Stacked background color layers ----
   Layers retreat into the image area (bottom-right) via clip-path
   to reveal the color beneath. On mouse leave they expand back out.
   --clip-to-image is set by JS based on actual image position. */
.clients__bg {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.clients__bg--pink   { background: var(--pink-200);   z-index: 1; }
.clients__bg--green  { background: var(--green-200);  z-index: 2; }
.clients__bg--yellow { background: var(--yellow-200); z-index: 3; }
.clients__bg--blue   { background: var(--blue-200);   z-index: 4; }

/* Welke laag er wegklapt hangt aan de kleur die het beheer bij de klant
   koos (veld "Achtergrondkleur"), niet aan wie de klant is. Deze regels
   noemden eerst vier klanten bij naam — vattenfall, rijkswaterstaat,
   rotterdam, rijksoverheid — en kenden daarmee alleen de lijst zoals die in
   het ontwerp stond. Een andere klant in het beheer had geen regel meer en
   liet de sectie egaal blauw. Zie kleurLaag() in home.tsx: die zet de keuze
   om in data-kleur op de sectie. Geen of een onbekende kleur = blauw, de
   kleur die hier toch al bovenop ligt. */

/* Geel: blue retreats into image → yellow revealed */
.clients[data-kleur="yellow"] .clients__bg--blue {
  clip-path: var(--clip-to-image);
}

/* Groen: blue + yellow retreat → green revealed */
.clients[data-kleur="green"] .clients__bg--blue,
.clients[data-kleur="green"] .clients__bg--yellow {
  clip-path: var(--clip-to-image);
}

/* Roze: blue + yellow + green retreat → pink revealed */
.clients[data-kleur="pink"] .clients__bg--blue,
.clients[data-kleur="pink"] .clients__bg--yellow,
.clients[data-kleur="pink"] .clients__bg--green {
  clip-path: var(--clip-to-image);
}

/* Blauw: all layers stay — blue is the default */

/* ---- Content (above bg layers) ---- */
.clients__content {
  position: relative;
  padding: 80px 0 80px var(--page-padding-x);
  width: 698px;
  max-width: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 46px;
  align-items: flex-start;
}

/* ---- Client list ---- */
.clients__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.client-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  cursor: pointer;
}

/* Spacing: first gets pb, middle get py, last gets pt */
.client-item:first-child {
  padding-bottom: 20px;
}

.client-item:not(:first-child):not(:last-child) {
  padding: 20px 0;
}

.client-item:last-child {
  padding-top: 20px;
}

/* ---- Logo box ---- */
.client-item__logo-row {
  display: flex;
  align-items: center;
}

.client-item__logo-box {
  display: inline-flex;
  gap: 6.909px;
  align-items: center;
  background: var(--base-200);
  border-radius: var(--radius-small);
  height: 38px;
  padding: 0 6.909px;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: 38px;
}

.client-item__logo {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: cover;
}

.client-item__logo--round {
  border-radius: 99px;
}

/* ---- Client name (inside logo box) ---- */
.client-item__name {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.25rem; /* 20px */
  line-height: 1.2;
  letter-spacing: -0.1px;
  color: var(--green-1200);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.client-item:hover .client-item__name,
.client-item.is-active .client-item__name {
  opacity: 1;
}

/* Vattenfall name uses darker color */
.client-item[data-client="vattenfall"] .client-item__name {
  color: var(--base-1200);
}

/* ---- Quote text ---- */
.client-item__quote {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 2.375rem; /* 38px */
  line-height: 1.2;
  letter-spacing: -0.76px;
  color: var(--green-1200);
}

/* ---- Client image (right side) ---- */
.clients__image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32.25%; /* 458/1420 */
  aspect-ratio: 458 / 624;
  overflow: hidden;
  z-index: 10;
}

.clients__image-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* Show image for the active client.
   Op dezelfde klasse als de rij in de lijst: een selector kan data-for niet
   met data-active vergelijken, dus stond hier een paar per klantnaam en
   bleef het vak leeg zodra het beheer een andere klant koos. */
.clients__image-item.is-active {
  opacity: 1;
}