/*
 * Cases — overzicht (archive-case.php) + detail (single-case.php)
 *
 * Volgorde:
 *   1. Overzicht: hero, filter, featured, grid, leeg, cta
 *   2. Detail:    hero, intro, full-image, aanpak, beelden, resultaten,
 *                 preview, volgende
 *   3. Responsive overrides
 *   4. Hybride mode overrides (.homepage-v2.is-hybrid scope) — onderaan
 *
 * Geen hardcoded kleuren — alles via tokens in tokens.css.
 * BEM naming. Mobile-first.
 *
 * Theme-strategie: cases ondersteunen hybride toggle (light + dark) op
 * zowel archive als single. Single-case hero blijft cinematisch dark
 * (full-bleed beeld met overlay) — alle overige secties krijgen light
 * variant via .homepage-v2.is-hybrid scope.
 */

/* ============================================================
 * 1. OVERZICHT
 * ============================================================ */

/* --- Hero (donker) --- */

.cases-hero {
  padding: 100px 0 80px;
  border-bottom: 1px solid var(--border);
  background: var(--dark);
}

.cases-hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-end;
}

.cases-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 24px;
}

.cases-hero__label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--pink);
}

.cases-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -3px;
  text-transform: uppercase;
  color: var(--text);
}

.cases-hero__title-accent {
  color: var(--pink);
}

.cases-hero__title-outline {
  -webkit-text-stroke: 2px var(--text);
  color: transparent;
}

.cases-hero__right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 32px;
}

.cases-hero__sub {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-faint);
  max-width: 440px;
}

.cases-hero__stats {
  display: flex;
  gap: 48px;
}

.cases-hero__stat-num {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--text);
}

.cases-hero__stat-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-num);
  margin-top: 6px;
}

/* --- Filter (licht, sticky) --- */

.cases-filter {
  background: var(--light-bg);
  border-bottom: 1px solid var(--light-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.cases-filter__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.cases-filter__inner::-webkit-scrollbar {
  display: none;
}

.cases-filter__btn {
  padding: 20px 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--light-text-faint);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s, border-color var(--t-fast);
}

.cases-filter__btn:hover {
  color: var(--light-text);
}

.cases-filter__btn.is-active {
  color: var(--pink);
  border-bottom-color: var(--pink);
}

.cases-filter__count {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: rgba(196, 0, 88, 0.12);
  color: var(--pink);
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Client-side filter: cards die niet matchen worden verborgen.
   Geen transition voor consistent grid-flow (anders flikkert het). */
.case-card.is-hidden,
.case-featured.is-hidden {
  display: none;
}

/* --- Cases sectie wrapper (licht) --- */

.cases-archive {
  background: var(--light-bg);
  padding: 0 0 120px;
}

.cases-archive__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* --- Uitgelichte case (groot) --- */

.case-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--light-border);
  margin-bottom: 2px;
  text-decoration: none;
  color: inherit;
}

.case-featured--reversed .case-featured__img {
  order: 2;
}

.case-featured--reversed .case-featured__info {
  order: 1;
}

.case-featured__img {
  position: relative;
  overflow: hidden;
  background: var(--light-bg2);
  min-height: 360px;
}

/* Img absolute positioned zodat de container meegroeit met de info-kolom
   (grid stretcht beide kolommen tot dezelfde hoogte) en er geen grid-bg
   onder uitsteekt als de info-kolom langer is. */
.case-featured__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  transition: transform 0.6s ease, filter var(--t-slow);
}

.case-featured:hover .case-featured__img img {
  transform: scale(1.04);
  filter: brightness(0.9);
}

.case-featured__badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: var(--pink);
  padding: 10px 18px;
  z-index: 2;
}

.case-featured__badge span {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.case-featured__line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
  z-index: 2;
}

.case-featured:hover .case-featured__line {
  transform: scaleX(1);
}

.case-featured__info {
  background: #fff;
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.case-featured__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.case-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--light-border);
  color: var(--light-text-faint);
  border-radius: 2px;
}

.case-tag--active {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--text);
}

.case-featured__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--light-text);
  margin-bottom: 16px;
}

.case-featured__desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--light-muted);
}

.case-featured__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.case-featured__stats {
  display: flex;
  gap: 32px;
}

.case-featured__stat-num {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--light-text);
  line-height: 1;
}

.case-featured__stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light-text-num);
  margin-top: 4px;
}

.case-featured__arrow {
  flex-shrink: 0;
  color: var(--light-border);
  transition: color 0.2s, transform var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.case-featured:hover .case-featured__arrow {
  color: var(--pink);
  transform: translate(4px, -4px);
}

/* --- Reguliere kaart (3-koloms grid) --- */

.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--light-border);
  margin-bottom: 2px;
}

.case-card {
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-base);
  display: flex;
  flex-direction: column;
}

.case-card:hover {
  background: var(--light-bg);
}

.case-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--light-bg2);
}

.case-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
  transition: transform 0.5s, filter var(--t-slow);
}

.case-card:hover .case-card__img img {
  transform: scale(1.04);
  filter: brightness(0.9);
}

.case-card__badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--pink);
  padding: 6px 12px;
  z-index: 2;
}

.case-card__badge span {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.case-card__line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
  z-index: 2;
}

.case-card:hover .case-card__line {
  transform: scaleX(1);
}

.case-card__info {
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.case-card__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 6px;
}

.case-card__name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--light-text);
  margin-bottom: 4px;
}

.case-card__sub {
  font-size: 13px;
  color: var(--light-text-num);
}

.case-card__arrow {
  color: var(--light-border);
  transition: color var(--t-fast);
  flex-shrink: 0;
  margin-top: 4px;
  display: inline-flex;
}

.case-card:hover .case-card__arrow {
  color: var(--pink);
}

/* --- Leeg state --- */

.cases-leeg {
  padding: 80px 40px;
  text-align: center;
  background: #fff;
}

.cases-leeg__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--light-text);
  margin-bottom: 12px;
}

.cases-leeg__sub {
  font-size: 14px;
  color: var(--light-muted);
  margin-bottom: 24px;
}

/* "Toon alle cases" outline knop in leegstate */

.cases-leeg .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border: 1px solid var(--light-border);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light-text);
  background: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 2px;
  transition: border-color 0.2s, color var(--t-fast);
}

.cases-leeg .btn-outline:hover {
  border-color: var(--pink);
  color: var(--pink);
}


/* ============================================================
 * 2. DETAIL
 * ============================================================ */

/* --- Hero (cinematisch, donker, full-bleed) --- */

.case-hero {
  /* Boven de vouw blijven op alle schermen: tussen 560 en 760px, anders 80vh */
  height: clamp(560px, 80vh, 760px);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--dark);
}

.case-hero__img {
  position: absolute;
  inset: 0;
}

.case-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4);
  transform-origin: center;
}

.case-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--dark) 0%, rgba(10, 10, 10, 0.3) 60%, transparent 100%);
}

.case-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 var(--pad) 80px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: flex-end;
}

.case-hero__main {
  max-width: 700px;
}

.case-hero__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.case-hero__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(240, 237, 232, 0.2);
  color: rgba(240, 237, 232, 0.6);
  border-radius: 2px;
}

.case-hero__tag--pink {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--text);
}

.case-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 20px;
}

.case-hero__title-dot {
  color: var(--pink);
}

.case-hero__sub {
  font-size: 17px;
  color: rgba(240, 237, 232, 0.6);
  line-height: 1.7;
  max-width: 520px;
}

.case-hero__stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.case-hero__stat {
  background: rgba(240, 237, 232, 0.06);
  border: 1px solid rgba(240, 237, 232, 0.1);
  backdrop-filter: blur(8px);
  padding: 20px 28px;
  text-align: center;
  min-width: 160px;
}

.case-hero__stat-num {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text);
}

.case-hero__stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.4);
  margin-top: 6px;
}

/* --- Intro / Uitdaging (licht, 2 kolommen) --- */

.case-intro {
  background: var(--light-bg);
  border-bottom: 1px solid var(--light-border);
  padding: 100px 0;
}

.case-intro__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.case-intro__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
  display: block;
}

.case-intro__titel {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--light-text);
  margin-bottom: 28px;
}

.case-intro__body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--light-muted);
}

.case-intro__body p {
  margin: 0 0 20px;
}

.case-intro__body p:last-child {
  margin-bottom: 0;
}

.case-intro__body strong {
  color: var(--light-text);
  font-weight: 600;
}

.case-intro__details {
  display: flex;
  flex-direction: column;
}

.case-intro__detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--light-border);
}

.case-intro__detail:last-child {
  border-bottom: 1px solid var(--light-border);
}

.case-intro__detail-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--light-text-num);
  flex-shrink: 0;
}

.case-intro__detail-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--light-text);
  text-align: right;
}

.case-intro__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.case-intro__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(196, 0, 88, 0.1);
  color: var(--pink);
  border-radius: 2px;
}

.case-intro__live {
  color: var(--pink);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.case-intro__live:hover {
  text-decoration: underline;
}

.case-intro__live-arrow {
  flex-shrink: 0;
  transition: transform var(--t-fast);
}

.case-intro__live:hover .case-intro__live-arrow {
  transform: translate(2px, -2px);
}

/* --- Full-width image --- */

.case-full-image {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--light-border);
  background: var(--light-bg2);
}

.case-full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
}


/* --- Aanpak (donker, 2 kolommen) --- */

.case-aanpak {
  background: var(--dark);
  border-bottom: 1px solid var(--border);
  padding: var(--section-pad-y) 0;
}

.case-aanpak__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.case-aanpak__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
  display: block;
}

.case-aanpak__titel {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
  margin-bottom: 32px;
}

.case-aanpak__titel-dot {
  color: var(--pink);
}

.case-aanpak__body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-faint);
}

.case-aanpak__body p {
  margin: 0 0 20px;
}

.case-aanpak__body p:last-child {
  margin-bottom: 0;
}

.case-aanpak__tech {
  margin-top: 40px;
}

.case-aanpak__tech-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
  display: block;
}

.case-aanpak__tech-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.case-aanpak__tech-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  border-radius: 2px;
}

.case-aanpak__stappen {
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-aanpak__stap {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}

.case-aanpak__stap:last-child {
  border-bottom: 1px solid var(--border);
}

.case-aanpak__stap-num {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 900;
  color: var(--pink);
  letter-spacing: 1px;
  padding-top: 3px;
}

.case-aanpak__stap-titel {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.case-aanpak__stap-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-faint);
}

/* --- Beelden grid (licht) --- */

.case-beelden {
  background: var(--light-bg);
  border-bottom: 1px solid var(--light-border);
}

.case-beelden__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2px;
  background: var(--light-border);
}

/* Geen aspect-ratio: container stretcht mee met de side-kolom (grid stretch).
   Img absolute positioned zodat geen grid-bg onder de afbeelding uitsteekt. */
.case-beelden__hoofd {
  position: relative;
  overflow: hidden;
  background: var(--light-bg2);
  min-height: 480px;
}

.case-beelden__hoofd img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85);
  transition: transform 0.5s;
}

.case-beelden__hoofd:hover img {
  transform: scale(1.03);
}

.case-beelden__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: var(--light-border);
}

.case-beelden__sub {
  overflow: hidden;
  background: var(--light-bg2);
}

.case-beelden__sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.85);
  transition: transform 0.5s;
}

.case-beelden__sub:hover img {
  transform: scale(1.03);
}

/* --- Resultaten (licht) --- */

.case-resultaten {
  background: var(--light-bg);
  border-bottom: 1px solid var(--light-border);
  padding: var(--section-pad-y) 0;
}

.case-resultaten__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.case-resultaten__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 64px;
}

.case-resultaten__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
  display: block;
}

.case-resultaten__titel {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--light-text);
}

.case-resultaten__titel-dot {
  color: var(--pink);
}

.case-resultaten__meta {
  font-size: 14px;
  color: var(--light-muted);
  max-width: 300px;
  line-height: 1.7;
  text-align: right;
}

.case-resultaten__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--light-border);
  margin-bottom: 64px;
}

.case-resultaten__item {
  background: #fff;
  padding: 40px 32px;
}

.case-resultaten__num {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--light-text);
  margin-bottom: 8px;
}

.case-resultaten__lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--light-text-num);
  margin-bottom: 12px;
}

.case-resultaten__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--light-muted);
}

/* --- Quote blok --- */

.case-quote {
  background: var(--pink);
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  margin: 0;
}

.case-quote__tekst {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

.case-quote__tekst::before {
  content: '\201C';
  font-size: 48px;
  line-height: 0;
  vertical-align: -16px;
  margin-right: 4px;
  opacity: 0.4;
}

.case-quote__author {
  flex-shrink: 0;
  text-align: right;
}

.case-quote__naam {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.case-quote__rol {
  font-size: 12px;
  color: rgba(240, 237, 232, 0.6);
}

.case-quote__sterren {
  color: rgba(240, 237, 232, 0.8);
  font-size: 14px;
  letter-spacing: 2px;
  margin-top: 8px;
}

/* --- Website preview (donker) --- */

.case-preview {
  background: var(--dark);
  border-bottom: 1px solid var(--border);
  padding: 80px 0;
}

.case-preview__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.case-preview__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
  display: block;
}

.case-preview__titel {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 40px;
}

.case-preview__browser {
  background: var(--dark2);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.case-preview__bar {
  background: var(--dark-card);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.case-preview__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}

.case-preview__dot--red    { background: #ff5f57; }
.case-preview__dot--yellow { background: #ffbd2e; }
.case-preview__dot--green  { background: #28c940; }

.case-preview__url {
  flex: 1;
  background: var(--border);
  border-radius: 2px;
  padding: 5px 12px;
  font-size: 11px;
  color: var(--text-num);
  margin: 0 16px;
}

.case-preview__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.case-preview__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* --- Volgende / Vorige (licht) --- */

.case-volgende {
  border-top: 1px solid var(--light-border);
  background: var(--light-bg);
}

.case-volgende__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.case-volgende__col {
  padding: 48px 0;
}

.case-volgende__col--terug {
  border-right: 1px solid var(--light-border);
  padding-right: 80px;
}

.case-volgende__col--next {
  padding-left: 80px;
}

.case-volgende__lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light-text-num);
  margin-bottom: 8px;
  display: block;
}

.case-volgende__col--next .case-volgende__lbl {
  text-align: right;
}

.case-volgende__naam {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--light-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: color var(--t-fast);
}

.case-volgende__naam:hover {
  color: var(--pink);
}

.case-volgende__naam--next {
  justify-content: flex-end;
}

.case-volgende__arrow {
  flex-shrink: 0;
  color: var(--pink);
  transition: transform var(--t-fast);
}

.case-volgende__naam--next:hover .case-volgende__arrow {
  transform: translate(3px, -3px);
}


/* ============================================================
 * 3. RESPONSIVE
 * ============================================================ */

@media (max-width: 1100px) {

  /* Overzicht hero */
  .cases-hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Featured grid wordt 1 kolom */
  .case-featured,
  .case-featured--reversed {
    grid-template-columns: 1fr;
  }
  .case-featured--reversed .case-featured__img,
  .case-featured--reversed .case-featured__info {
    order: initial;
  }
  .case-featured__info {
    padding: 40px 32px;
  }

  /* Case grid wordt 2 kolommen */
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Detail intro / aanpak / hero stats */
  .case-intro__inner,
  .case-aanpak__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .case-hero__content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case-hero__stats {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .case-hero__stat {
    flex: 1;
    min-width: 140px;
  }

  /* Resultaten 2-koloms */
  .case-resultaten__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Quote stack */
  .case-quote {
    grid-template-columns: 1fr;
    padding: 40px 32px;
    gap: 24px;
  }

  .case-quote__author {
    text-align: left;
  }

  /* Beelden naar 1 kolom */
  .case-beelden__grid {
    grid-template-columns: 1fr;
  }

  .case-beelden__side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .case-beelden__sub {
    aspect-ratio: 4 / 3;
  }

  /* Volgende stack */
  .case-volgende__inner {
    grid-template-columns: 1fr;
  }

  .case-volgende__col--terug {
    border-right: none;
    border-bottom: 1px solid var(--light-border);
    padding-right: 0;
  }

  .case-volgende__col--next {
    padding-left: 0;
  }

  .case-volgende__col--next .case-volgende__lbl,
  .case-volgende__naam--next {
    text-align: left;
    justify-content: flex-start;
  }

  /* Resultaten header stack */
  .case-resultaten__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .case-resultaten__meta {
    text-align: left;
  }
}

@media (max-width: 720px) {

  /* Compacte padding op mobiel */
  .cases-hero { padding: 64px 0 48px; }
  .cases-hero__inner,
  .cases-archive__inner,
  .cases-filter__inner,
  .case-intro__inner,
  .case-aanpak__inner,
  .case-resultaten__inner,
  .case-preview__inner,
  .case-volgende__inner,
  .case-hero__content {
    padding-left: 24px;
    padding-right: 24px;
  }

  .case-hero {
    height: auto;
    min-height: 0;
  }

  .case-hero__content {
    position: static;
    /* De afbeelding staat hier in de normale flow en neemt zelf al 320px in.
       Een padding-top van 320px kwam daar bovenop en gaf een leeg zwart vlak. */
    padding-top: 40px;
    padding-bottom: 48px;
  }

  .case-hero__img {
    position: relative;
    height: 320px;
    inset: auto;
    /* De parallax in animations.js zet scale(1.08) + translateY op de
       afbeelding. Op desktop vangt .case-hero dat op, hier is dit blok zelf
       de begrenzing: zonder afsnijden steekt het beeld onder de overlay uit
       en groeit die strook mee tijdens het scrollen. */
    overflow: hidden;
  }

  /* De overlay blijft absoluut gepositioneerd en zou daarmee over de nu
     statische inhoud heen vallen, waardoor de witte titel grijs werd. Hier
     beperken we hem tot de afbeelding, waar hij ook voor bedoeld is. */
  .case-hero__overlay {
    bottom: auto;
    height: 320px;
  }

  /* Lange merknamen ("Hoveniersbedrijf") passen op 48px niet op een
     telefoon. Een niet-afbreekbaar woord rekt bovendien de gridkolom op,
     waardoor ook de statistieken buiten beeld werden geduwd. */
  .case-hero__main {
    min-width: 0;
  }

  .case-hero__title {
    font-size: clamp(26px, 7vw, 48px);
    letter-spacing: -1.5px;
    /* hyphens breekt netjes op lettergrepen (de pagina is lang="nl-NL");
       break-word is het vangnet voor namen zonder bruikbaar breekpunt. */
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* De tegels stonden met drie naast elkaar buiten beeld. Een raster met
     minmax(0, 1fr) kan niet breder worden dan de kolom, ongeacht de inhoud;
     met flex-basis en randen kwam het net over de rand. */
  .case-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  .case-hero__stat {
    min-width: 0;
    padding: 16px 12px;
  }

  .case-intro,
  .case-aanpak,
  .case-resultaten {
    padding: var(--section-pad-y-sm) 0;
  }

  /* Filter horizontaal scrollbaar — geen extra change nodig */

  /* Cards */
  .cases-grid {
    grid-template-columns: 1fr;
  }

  .case-featured__info {
    padding: 32px 24px;
  }

  .case-featured__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* Resultaten naar 1 kolom */
  .case-resultaten__grid {
    grid-template-columns: 1fr;
  }

  .case-resultaten__item {
    padding: 32px 24px;
  }

  .case-quote {
    padding: 32px 24px;
  }

  /* Aanpak stappen iets compacter */
  .case-aanpak__stap {
    grid-template-columns: 36px 1fr;
    gap: 16px;
  }

  /* Beelden naar 1 kolom volledig */
  .case-beelden__side {
    grid-template-columns: 1fr;
  }

  /* Intro details — labels kleiner */
  .case-intro__detail {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ============================================================
 * 4. HYBRIDE MODE OVERRIDES (.homepage-v2.is-hybrid)
 *
 * Drie donkere secties worden light: cases-hero (archive), case-aanpak
 * (single) en case-preview (single browser mockup). De single-case hero
 * (.case-hero — full-bleed cinematisch) blijft BEWUST dark in beide
 * modi, ongeacht toggle-stand.
 * ============================================================ */

/* --- Archive: hero --- */
.homepage-v2.is-hybrid .cases-hero {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .cases-hero__title { color: var(--light-text); }
.homepage-v2.is-hybrid .cases-hero__title-outline {
  -webkit-text-stroke-color: var(--light-text);
}
.homepage-v2.is-hybrid .cases-hero__sub { color: var(--light-muted); }
.homepage-v2.is-hybrid .cases-hero__stat-num { color: var(--light-text); }
.homepage-v2.is-hybrid .cases-hero__stat-lbl { color: var(--light-text-num); }

/* --- Single: aanpak --- */
.homepage-v2.is-hybrid .case-aanpak {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .case-aanpak__titel    { color: var(--light-text); }
.homepage-v2.is-hybrid .case-aanpak__body     { color: var(--light-muted); }
.homepage-v2.is-hybrid .case-aanpak__tech-label { color: var(--light-text-dim); }
.homepage-v2.is-hybrid .case-aanpak__tech-tag {
  color: var(--light-muted);
  border-color: var(--light-border);
}
.homepage-v2.is-hybrid .case-aanpak__stap {
  border-top-color: var(--light-border);
}
.homepage-v2.is-hybrid .case-aanpak__stap:last-child {
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .case-aanpak__stap-titel { color: var(--light-text); }
.homepage-v2.is-hybrid .case-aanpak__stap-desc  { color: var(--light-muted); }

/* --- Single: preview (browser mockup) --- */
.homepage-v2.is-hybrid .case-preview {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .case-preview__titel { color: var(--light-text); }
.homepage-v2.is-hybrid .case-preview__browser {
  background: #fff;
  border-color: var(--light-border);
}
.homepage-v2.is-hybrid .case-preview__bar {
  background: var(--light-bg2);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .case-preview__url {
  background: var(--light-bg3);
  color: var(--light-text-num);
}
/* macOS-window dots (rood/geel/groen) blijven hetzelfde — bewust hardcoded */

/* ============================================================
 * 5. DARK MODE OVERRIDES (body zonder .is-hybrid)
 *
 * Cases.css is historisch geschreven met hardcoded light bg's voor de
 * archive (filter, cards) en single sub-secties (intro, beelden,
 * resultaten, volgende). Bij dark-mode-toggle (.is-hybrid weg) moeten
 * die ook dark worden — anders zit er een wit/cream blok midden in een
 * verder dark page. Scope `body:not(.is-hybrid)` matcht alleen dark.
 * Single-case hero (.case-hero, cinematic full-bleed) blijft dark in
 * beide modi — geen override nodig.
 * ============================================================ */

/* --- Archive: filter (sticky bar) --- */
body:not(.is-hybrid) .cases-filter {
  background: var(--dark);
  border-bottom-color: var(--border);
}
body:not(.is-hybrid) .cases-filter__btn { color: var(--text-num); }
body:not(.is-hybrid) .cases-filter__btn:hover { color: var(--text); }

/* --- Archive: section wrapper --- */
body:not(.is-hybrid) .cases-archive { background: var(--dark); }

/* --- Archive: featured (uitgelicht) cards --- */
body:not(.is-hybrid) .case-featured { background: var(--border); }
body:not(.is-hybrid) .case-featured__img { background: var(--dark2); }
body:not(.is-hybrid) .case-featured__info { background: var(--dark-card); }
body:not(.is-hybrid) .case-featured__title { color: var(--text); }
body:not(.is-hybrid) .case-featured__desc  { color: var(--text-faint); }
body:not(.is-hybrid) .case-featured__stat-num { color: var(--text); }
body:not(.is-hybrid) .case-featured__stat-lbl { color: var(--text-num); }
body:not(.is-hybrid) .case-featured__link    { color: var(--text-num); }
body:not(.is-hybrid) .case-tag {
  border-color: var(--muted2);
  color: var(--text-muted);
}

/* --- Archive: regular grid cards --- */
body:not(.is-hybrid) .cases-grid { background: var(--border); }
body:not(.is-hybrid) .case-card { background: var(--dark-card); }
body:not(.is-hybrid) .case-card:hover { background: var(--dark2); }
body:not(.is-hybrid) .case-card__img  { background: var(--dark2); }
body:not(.is-hybrid) .case-card__name { color: var(--text); }
body:not(.is-hybrid) .case-card__sub  { color: var(--text-num); }
body:not(.is-hybrid) .case-card__arrow { color: var(--muted2); }

/* --- Archive: lege state --- */
body:not(.is-hybrid) .cases-leeg { background: var(--dark-card); }
body:not(.is-hybrid) .cases-leeg__title { color: var(--text); }
body:not(.is-hybrid) .cases-leeg__sub   { color: var(--text-faint); }
body:not(.is-hybrid) .cases-leeg .btn-outline {
  border-color: var(--border);
  color: var(--text);
}

/* --- Single: intro --- */
body:not(.is-hybrid) .case-intro {
  background: var(--dark);
  border-bottom-color: var(--border);
}
body:not(.is-hybrid) .case-intro__titel { color: var(--text); }
body:not(.is-hybrid) .case-intro__body  { color: var(--text-faint); }
body:not(.is-hybrid) .case-intro__body strong { color: var(--text); }
body:not(.is-hybrid) .case-intro__detail { border-top-color: var(--border); }
body:not(.is-hybrid) .case-intro__detail:last-child { border-bottom-color: var(--border); }
body:not(.is-hybrid) .case-intro__detail-lbl { color: var(--text-num); }
body:not(.is-hybrid) .case-intro__detail-val { color: var(--text); }

/* --- Single: full-image en beelden grid --- */
body:not(.is-hybrid) .case-full-image  { background: var(--dark2); }
body:not(.is-hybrid) .case-beelden {
  background: var(--dark);
  border-bottom-color: var(--border);
}
body:not(.is-hybrid) .case-beelden__grid,
body:not(.is-hybrid) .case-beelden__side {
  background: var(--border);
}
body:not(.is-hybrid) .case-beelden__hoofd,
body:not(.is-hybrid) .case-beelden__sub  { background: var(--dark2); }

/* --- Single: resultaten (cijfers grid + quote) --- */
body:not(.is-hybrid) .case-resultaten {
  background: var(--dark);
  border-bottom-color: var(--border);
}
body:not(.is-hybrid) .case-resultaten__titel { color: var(--text); }
body:not(.is-hybrid) .case-resultaten__meta  { color: var(--text-faint); }
body:not(.is-hybrid) .case-resultaten__grid  { background: var(--border); }
body:not(.is-hybrid) .case-resultaten__item  { background: var(--dark-card); }
body:not(.is-hybrid) .case-resultaten__num   { color: var(--text); }
body:not(.is-hybrid) .case-resultaten__lbl   { color: var(--text-num); }
body:not(.is-hybrid) .case-resultaten__desc  { color: var(--text-faint); }
/* Quote blok blijft pink in beide modi — bewust accent */

/* --- Single: vorige/volgende navigatie --- */
body:not(.is-hybrid) .case-volgende {
  background: var(--dark);
  border-top-color: var(--border);
}
body:not(.is-hybrid) .case-volgende__col--terug { border-right-color: var(--border); }
body:not(.is-hybrid) .case-volgende__lbl  { color: var(--text-num); }
body:not(.is-hybrid) .case-volgende__naam { color: var(--text); }