/* Value cards — staggered image-card grid. Heading top-left, cards scattered, body bottom-right. */
.value-cards__inner {
  padding-block: var(--section-pad);
  row-gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
  /* background-color: var(--color-bg-light); */
}
.value-cards__head {
  grid-column: 1 / 6;
  grid-row: 1;
}
.value-cards__heading {
  font-family: var(--font-display);
  font-size: var(--text-h5);
  line-height: var(--lh-snug);
}

.value-cards__card {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.value-cards__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.value-cards__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
/* Coloured hover overlay (per-card via --vc-overlay, set inline in PHP). Above the image,
   below the text + motif. */
.value-cards__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--vc-overlay, var(--color-water));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.value-cards__card:hover::before,
.value-cards__card:focus-within::before {
  opacity: 0.85;
}
/* Label + description, bottom-anchored so the label rises as the description expands on hover. */
.value-cards__content {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  z-index: 2;
  color: var(--color-white);
}
.value-cards__label {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-regular);
}
/* Smooth reveal — same mechanic as .card-expertise: a grid wrapper animates
   grid-template-rows 0fr → 1fr (content height) instead of a guessed max-height,
   so the label rises in step with the description with no easing mismatch. */
.value-cards__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.value-cards__reveal-inner {
  min-height: 0;
  overflow: hidden;
}
.value-cards__card:hover .value-cards__reveal,
.value-cards__card:focus-within .value-cards__reveal {
  grid-template-rows: 1fr;
}
.value-cards__desc {
  margin: 0;
  padding-top: var(--sp-sm); /* label↔desc gap; lives inside the collapsing area so it's 0 at rest */
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  opacity: 0;
  transform: translateY(0.4rem);
  transition:
    opacity 0.35s ease 0.08s,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.value-cards__card:hover .value-cards__desc,
.value-cards__card:focus-within .value-cards__desc {
  opacity: 0.92;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .value-cards__reveal,
  .value-cards__desc,
  .value-cards__motif {
    transition: none;
  }
}
.value-cards__motif {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  z-index: 1;
  --motif-size: 1.4rem;
  color: var(--color-white);
  opacity: 0.85;
  transition: transform 0.4s ease;
}

.value-cards__card:hover .value-cards__motif,
.value-cards__card:focus-within .value-cards__motif {
  transform: rotate(45deg);
}

/* Staggered positions (match Figma): cards 1-2 upper-right, 3-4 lower-left, body bottom-right. */
.value-cards__card--1 {
  grid-column: 7 / 10;
  grid-row: 1;
} /* Initiative */
.value-cards__card--2 {
  grid-column: 10 / 13;
  grid-row: 1;
} /* Personal Approach */
.value-cards__card--3 {
  grid-column: 1 / 4;
  grid-row: 2;
} /* Collaboration */
.value-cards__card--4 {
  grid-column: 4 / 7;
  grid-row: 2;
} /* Technical Excellence */
.value-cards__body {
  grid-column: 9 / -1;
  grid-row: 2;
  align-self: end;
  font-size: var(--text-body-main);
  line-height: var(--lh-body);
}
.value-cards__body p {
  margin: 0 0 1em;
}
.value-cards__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .value-cards__head,
  .value-cards__body {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .value-cards__card {
    grid-column: span 6 !important;
    grid-row: auto !important;
  }
}