/* ==========================================================================
   Succesverhalen — full case study listing. Filter pills are static for
   now (visual states only) — the actual filtering logic is a follow-up.
   ========================================================================== */

/* .page-hero (shared across every page using it) has no bottom padding
   of its own — pages relying on it add their own top padding for the gap
   below the hero. 96px matches the vuistregels page's identical setup
   and reads comparably spacious to the UXfactor page's hero-to-content
   gap (.hero--compact's own 120px bottom padding + .about-section's 48px
   top padding), even though the two hero components aren't shared. */
.succesverhalen {
  padding-block: 96px;
}

.succesverhalen__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 984px;
}

/* ---- Filter bar ---- */

.cases-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.cases-filter__label {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text-p);
}

.cases-filter__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cases-filter__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px 7px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--color-lavender);
  background: transparent;
  border: 2px solid var(--color-lavender-50);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.cases-filter__button:hover {
  border-color: var(--color-lavender);
}

.cases-filter__button.is-active {
  padding-left: 20px;
  color: var(--color-black);
  background: var(--color-lime);
  border-color: var(--color-lime);
}

.cases-filter__button.is-active:hover {
  background: #f2ff8a;
  border-color: #f2ff8a;
}

.cases-filter__button-icon {
  display: none;
  width: 24px;
  height: 24px;
}

.cases-filter__button.is-active .cases-filter__button-icon {
  display: block;
}

/* ---- Case grid: two hand-built columns (not CSS masonry/columns) so the
   right column can start lower than the left, matching the staggered
   layout in the Figma design — the exact card-per-column split is
   authored to match, not computed. ---- */

.succesverhalen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.succesverhalen-grid__column {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.succesverhalen-grid__column--offset {
  grid-column: 2;
  margin-top: 84px;
}

/* Filtering can empty the first column entirely (e.g. the "Expertise"
   filter, which only matches a card that lives in the offset column) —
   toggled by JS once the first column's cards have actually finished
   fading out, so the lone remaining column reclaims column 1 and drops
   its stagger instead of floating in column 2 with an empty column
   beside it. */
.succesverhalen-grid__column--offset.is-solo {
  grid-column: 1;
  margin-top: 0;
}

.succesverhalen-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

/* Cards without a case page yet — markup is a plain <article>, not an
   <a>, but pointer-events:none also blocks the hover lift below (:hover
   never matches without a receivable pointer event), so no separate
   hover override is needed. */
.succesverhalen-card.is-disabled {
  cursor: default;
  pointer-events: none;
}

/* JS toggles the [hidden] attribute after the fade-out transition above
   finishes, so a filtered-out card actually leaves the grid (no leftover
   gap) instead of just sitting there invisible. Needs its own rule since
   .succesverhalen-card's own display:flex has equal specificity to the
   browser default [hidden] rule and would otherwise win by cascade order. */
.succesverhalen-card[hidden] {
  display: none;
}

.succesverhalen-card:hover {
  transform: translateY(-4px);
}

.succesverhalen-card__image {
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
}

.succesverhalen-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s var(--ease);
}

.succesverhalen-card:hover .succesverhalen-card__image img {
  transform: scale(1.04);
}

.succesverhalen-card__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.succesverhalen-card__label {
  display: flex;
  align-items: center;
  gap: 16px;
}

.succesverhalen-card__label img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.succesverhalen-card__label span {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-lavender);
}

.succesverhalen-card__title {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--color-white);
}

@media (max-width: 900px) {
  .succesverhalen-grid {
    grid-template-columns: 1fr;
  }

  .succesverhalen-grid__column--offset {
    grid-column: 1;
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .succesverhalen {
    padding-block: 56px;
  }

  .succesverhalen__inner {
    gap: 48px;
  }

  .succesverhalen-grid__column {
    gap: 48px;
  }
}