/* ============================================================
   SHOT & SOCIALS — klanten/portfolio-pagina
   bouwt voort op ../styles.css (zelfde designsysteem)
   ============================================================ */

/* ---------- pagina-hero ---------- */
.page-hero {
  padding-top: clamp(140px, 22svh, 230px);
  display: flex; flex-direction: column;
  gap: clamp(40px, 7vw, 96px);
}
.page-title { margin-top: 4px; }
.page-sub {
  margin-top: var(--s-4);
  max-width: 52ch;
  color: var(--fg-soft);
}

/* hero-regels direct tonen zodra de pagina geladen is */
html.js body.loaded .page-title .line-inner { transition-duration: 1.1s; }

/* ---------- cases ---------- */
.case {
  border-top: 1px solid var(--hair);
  padding-block: clamp(64px, 9vw, 140px);
}
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.case-flip .case-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.case-flip .case-info { order: 2; }

.case-info { position: sticky; top: 120px; }
.case-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(51, 54, 82, .45);
  margin-bottom: var(--s-2);
}
@supports not (-webkit-text-stroke: 1px black) {
  .case-index { color: rgba(51, 54, 82, .22); }
}
.case-name {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
  max-width: 12ch;
}
.case-tags { margin-top: var(--s-3); }
.case-desc {
  margin-top: var(--s-4);
  color: var(--fg-soft);
  max-width: 44ch;
}

/* media-grid: lead breed, twee ondersteunende beelden eronder */
.case-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 22px);
}
/* galerij-variant: lead + raster van ondersteunende beelden */
.case-media.gallery { grid-template-columns: repeat(3, 1fr); }
.case-media.gallery figure:not(.lead) { aspect-ratio: 4 / 3; }
.case-media figure { overflow: hidden; margin: 0; }
.case-media .lead {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}
.case-media figure:not(.lead) { aspect-ratio: 4 / 3; }
.case-media.two figure:not(.lead) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.case-media img, .case-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform .8s var(--ease);
}
.case-media figure:hover img, .case-media figure:hover video { transform: scale(1); }

/* afsluitende regel */
.cases > .container > .clients-more { padding-block: var(--s-6) clamp(64px, 8vw, 120px); margin-top: 0; }

/* actieve nav-link */
.nav-active > span { border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .case-grid, .case-flip .case-grid { grid-template-columns: 1fr; }
  .case-flip .case-info { order: 0; }
  .case-info { position: static; }
  .case-desc { max-width: 60ch; }
}

@media (max-width: 560px) {
  .case-media { grid-template-columns: 1fr; }
  .case-media.gallery { grid-template-columns: 1fr 1fr; }
  .case-media .lead { aspect-ratio: 4 / 3; }
  .case-media figure:not(.lead) { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .case-media img, .case-media video { transform: none; }
}