/* ==========================================================================
   DreamChaserz — pagina-specifieke blokken
   ========================================================================== */

/* --- sectiekop-hulpjes ---------------------------------------------------- */
.head__aside { display: grid; gap: var(--s-5); align-content: start; }
.chase-after { margin-top: var(--s-5); }

/* De open afsluiter onder een lijst: tekst links, knop rechts. */
.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: var(--hair);
}
.section-foot__title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.section-foot p { max-width: 46ch; margin-top: var(--s-2); }

/* ==========================================================================
   Werkpagina — één project per blok, groot in beeld
   ========================================================================== */
.case {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-top: var(--hair);
  scroll-margin-top: calc(var(--nav-h) + 2rem);
}
.case:first-of-type { border-top: 0; padding-top: 0; }
@media (width >= 60rem) {
  /* Het beeld ís het werk; de tekst mag het smalste van de twee zijn. Bij een
     omgekeerd blok kantelt de verhouding mee, anders zou juist de tekst de
     brede kolom krijgen. */
  .case { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: start; }
  .case--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); }
  .case--flip .case__media { order: 2; }
  .case--flip .case__body { order: 1; }
}
.case__media { display: grid; gap: var(--s-3); }
.case__frame {
  position: relative;
  border: var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  background: #08080a;
}
.case__frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case__frame--tall img { aspect-ratio: 4 / 3; }
.case__strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* Verticale video (shortform, Reel). Het kader kantelt mee naar 9:16 en krijgt
   een maximum: over de volle kolom zou een staande clip een toren worden. */
.case__frame--staand { max-width: 26rem; }
.case__frame--staand img,
.case__frame--staand.case__frame--film video { aspect-ratio: 9 / 16; }

/* Fotoproject: één breed beeld naast de tekst, en daaronder de rest van de
   shoot over de volle breedte — anders worden acht foto's postzegels. De
   foto's staan in hun eigen 3:2 zodat er niets van de compositie af gaat. */
.case__gallery {
  order: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.case__gallery .case__frame img { aspect-ratio: 3 / 2; }
@media (width >= 60rem) {
  .case__gallery { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
}

/* --- hoofdbeeld als stille loop ------------------------------------------
   Dezelfde opbouw als de werkkaart op de home: de foto blijft eronder liggen
   en verzorgt de eerste paint, de video schuift er pas overheen zodra hij
   echt speelt. Zo zie je nooit een zwart vlak wachten.                      */
.case__frame--video video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.case__frame--video.is-playing video { opacity: 1; }

/* Beeld dat langer dan vijf seconden vanzelf beweegt hoort een pauzeknop te
   hebben (WCAG 2.2.2); deze loops duren vijftien seconden. De geluidsknop
   ernaast is er omdat de clips wél een geluidsspoor hebben, maar gedempt
   starten — autoplay mét geluid wordt door elke browser geblokkeerd, en
   terecht.                                                                  */
.vidbtns {
  position: absolute;
  right: var(--s-3); bottom: var(--s-3);
  z-index: 2;
  display: flex;
  gap: var(--s-2);
}
.vidbtn {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: var(--hair);
  border-radius: 50%;
  background: rgb(10 10 11 / 72%);
  backdrop-filter: blur(4px);
  color: var(--gold);
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.vidbtn__ico { grid-area: 1 / 1; width: .75rem; height: .875rem; fill: currentColor; }
.vidbtn--sound .vidbtn__ico { width: 1rem; }
.vidbtn__ico--play,
.vidbtn__ico--sound { display: none; }
.vidbtn[data-paused] .vidbtn__ico--pause { display: none; }
.vidbtn[data-paused] .vidbtn__ico--play { display: block; }
.vidbtn[aria-pressed='true'] .vidbtn__ico--mute { display: none; }
.vidbtn[aria-pressed='true'] .vidbtn__ico--sound { display: block; }
.vidbtn[aria-pressed='true'] { opacity: 1; border-color: var(--gold); }
.vidbtn:hover,
.vidbtn:focus-visible { opacity: 1; border-color: var(--gold); }
.case__frame:hover .vidbtn,
.case__frame:focus-within .vidbtn { opacity: 1; }

/* Zonder JS speelt er niets, dus valt er ook niets te pauzeren. Bij reduced
   motion blijft het bewust een stilstaand beeld.                            */
.no-js .vidbtns { display: none; }
@media (prefers-reduced-motion: reduce) {
  .case__frame--video video,
  .case__frame--video .vidbtns { display: none; }
}

/* --- hele film: pas laden als iemand er om vraagt ------------------------
   Geen loop maar een montage van ruim een halve minuut met spraak. Die zet
   je niet vanzelf aan: poster, één duidelijke knop, en daarna de eigen
   bediening van de browser voor volume en terugspoelen.                     */
.case__frame--film video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #08080a;
}

.playbtn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-4);
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgb(10 10 11 / 10%), rgb(10 10 11 / 55%));
  color: var(--bone);
  cursor: pointer;
  transition: opacity var(--dur-2) var(--ease);
}
.playbtn__disc {
  display: grid;
  place-items: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: var(--gold-btn);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: scale var(--dur-2) var(--ease);
}
.playbtn__disc svg { width: 1.25rem; height: 1.4rem; fill: currentColor; margin-left: .15rem; }
.playbtn__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.playbtn:hover .playbtn__disc,
.playbtn:focus-visible .playbtn__disc { scale: 1.06; }
.case__frame--film.is-playing .playbtn { display: none; }

/* Zonder JS blijft de eigen speler van de browser over: die staat er al,
   met poster en controls, en laadt door preload="none" ook niets vooraf. */
.no-js .playbtn { display: none; }
.case__body { display: grid; gap: var(--s-4); align-content: start; }
.case__title { font-size: clamp(1.5rem, 3.2vw, 2.25rem); }
.case__client { color: var(--gold); }
.case__text { color: var(--mute); }
.case__meta {
  display: grid;
  gap: 0;
  margin-top: var(--s-3);
  border-top: var(--hair);
}
.case__meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: .8rem;
  border-bottom: var(--hair);
}
.case__meta dt { color: var(--mute); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--track-mono); text-transform: uppercase; margin: 0; }
.case__meta dd { margin: 0; text-align: right; }

/* ==========================================================================
   Dienstenpagina
   ========================================================================== */
.dienst {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: var(--hair);
  scroll-margin-top: calc(var(--nav-h) + 2rem);
}
.dienst:first-of-type { border-top: 0; padding-top: clamp(1rem, 3vw, 2rem); }
@media (width >= 60rem) {
  .dienst { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
  .dienst--flip .dienst__media { order: 2; }
}
.dienst__media {
  border: var(--hair);
  border-radius: var(--r);
  overflow: hidden;
}
.dienst__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.dienst__body { display: grid; gap: var(--s-5); align-content: start; }
.dienst__title { font-size: clamp(1.75rem, 4vw, 2.75rem); }

.checklist {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist li {
  display: grid;
  grid-template-columns: 1.3em 1fr;
  gap: .5em;
  color: var(--bone);
}
.checklist li::before {
  content: '→';
  color: var(--gold);
  font-size: .9em;
  line-height: 1.75;
}
.section--light .checklist li { color: rgb(10 10 11 / 82%); }
.section--light .checklist li::before { color: var(--gold-ink); }

/* proces: dit ís een reeks, dus hier zijn nummers informatie */
.steps {
  display: grid;
  gap: 1px;
  background: rgb(237 233 226 / 12%);
  border: var(--hair);
  border-radius: var(--r);
  counter-reset: step;
}
@media (width >= 46rem) { .steps { grid-template-columns: 1fr 1fr; } }
@media (width >= 72rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  counter-increment: step;
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--ink);
}
.step::before {
  content: '0' counter(step);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-mono);
  color: var(--gold);
}
.step h3 { font-size: 1.05rem; }
.step p { color: var(--mute); font-size: var(--t-small); }

/* ==========================================================================
   Over-pagina
   ========================================================================== */
.quote {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: var(--hair);
  border-left: 2px solid var(--gold);
  border-radius: var(--r);
  background: var(--ink-2);
}
.quote p {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: var(--wide-soft);
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.quote footer { margin-top: var(--s-4); color: var(--mute); }

.prose { max-width: 62ch; }
.prose p + p { margin-top: var(--s-4); }
.prose h2,
.prose h3 {
  font-size: var(--t-h3);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}

/* ==========================================================================
   Contactpagina en bedankpagina
   ========================================================================== */
.eyebrow--center { justify-content: center; }

.thanks {
  display: grid;
  gap: var(--s-6);
  place-content: center;
  text-align: center;
  min-height: 70svh;
  padding-top: var(--nav-h);
}
.thanks__mark { width: 64px; margin-inline: auto; }
.thanks .lead { margin-inline: auto; }
.thanks .btn-row { justify-content: center; }

/* ==========================================================================
   404
   ========================================================================== */
.err {
  display: grid;
  gap: var(--s-6);
  align-content: center;
  min-height: 78svh;
  padding-top: var(--nav-h);
}
.err__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: var(--wide);
  font-size: clamp(5rem, 22vw, 14rem);
  line-height: .82;
  letter-spacing: -.04em;
  color: var(--gold);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .err__code {
    background: var(--gold-metal);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ==========================================================================
   Call-to-action band, onderaan de binnenpagina's
   ========================================================================== */
.cta-band {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border: var(--hair);
  border-radius: var(--r);
  background:
    radial-gradient(120% 150% at 100% 0%, rgb(227 188 99 / 10%) 0%, transparent 55%),
    var(--ink-2);
}
@media (width >= 56rem) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-9); }
}
.cta-band__title { font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
.cta-band p { color: var(--mute); margin-top: var(--s-3); max-width: 48ch; }