/* nickmaakt.com — basisstijl. Kleuren/fonts/maten komen als CSS-variabelen uit layout.php. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  min-height: 100vh;
}

a { color: inherit; }

img, video { display: block; max-width: 100%; height: auto; }

/* ---------- Preview-banner ---------- */
.preview-banner {
  position: sticky; top: 0; z-index: 99;
  background: var(--c-accent); color: var(--c-on-accent);
  font-family: var(--f-meta); font-size: 12px; letter-spacing: .08em;
  text-align: center; padding: 6px 10px; text-transform: uppercase;
}

/* ---------- Homepage: tegel-grid ---------- */
.home {
  padding: clamp(24px, 6vh, 90px) clamp(16px, 4vw, 64px);
  min-height: 100vh;
}

.tiles {
  position: relative;
  margin: 0 auto;
  max-width: 1500px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--tile-gap);
}

.tiles .col {
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  width: var(--tile-w);
  flex: 0 0 auto;
}

/* No-JS fallback: tegels als kolommenflow */
.tiles.nojs { display: block; columns: 4 var(--tile-w); column-gap: var(--tile-gap); }
.tiles.nojs .tile { margin: 0 0 var(--tile-gap); }

.tile {
  position: relative;
  display: block;
  width: calc(var(--tile-w) * var(--scale, 1));
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transform: translate(var(--nx, 0px), var(--ny, 0px));
  transition: transform .35s ease;
}
a.tile:hover { transform: translate(var(--nx, 0px), var(--ny, 0px)) scale(1.025); }
body.no-hoverzoom a.tile:hover { transform: translate(var(--nx, 0px), var(--ny, 0px)); }

.tile-img, .tile-video { width: 100%; height: auto; border-radius: var(--radius); }

/* Overlay-tekst op media-tegels */
.tile-overlay {
  position: absolute;
  display: flex; flex-direction: column; gap: 2px;
  max-width: 82%;
  font-family: var(--f-display);
  font-size: var(--overlay-fs, 15px); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--c-accent);
  text-shadow: 0 1px 14px rgba(0,0,0,.35);
  pointer-events: none;
}
.corner-tl { top: 12px; left: 14px; }
.corner-tr { top: 12px; right: 14px; text-align: right; align-items: flex-end; }
.corner-bl { bottom: 12px; left: 14px; }
.corner-br { bottom: 12px; right: 14px; text-align: right; align-items: flex-end; }

.tile-brand {
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Tekstkaarten (geel) */
.tile-text {
  background: var(--c-accent);
  color: var(--c-on-accent);
  aspect-ratio: 9 / 16;
}
.tile-text-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .9;
}
.tile-text-bg.blend-multiply { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.05); }
.tile-text-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 18px 20px;
  font-family: var(--f-display);
  font-size: calc(24px * var(--scale, 1) * var(--type-scale, 1));
  line-height: 1.15; letter-spacing: -0.03em;
}
.tile-text-content a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tile-text-content p { margin: 0 0 .5em; }
.tile-text-content p:last-child { margin-bottom: 0; }
.tile-icon {
  position: absolute; right: 16px; bottom: 14px;
  color: var(--c-on-accent); z-index: 2;
}

/* ---------- Projectpagina ---------- */
.project {
  max-width: var(--page-w, 1060px);
  margin: 0 auto;
  padding: clamp(20px, 4vh, 56px) clamp(16px, 4vw, 40px) 120px;
}

.project-nav { margin-bottom: clamp(28px, 6vh, 72px); }
.backlink {
  font-family: var(--f-display);
  font-style: italic;
  font-size: calc(19px * var(--type-scale, 1));
  color: var(--c-accent);
  text-decoration: none;
}
.backlink:hover { text-decoration: underline; text-underline-offset: 3px; }

.blocks { display: flex; flex-direction: column; gap: clamp(22px, 3.5vh, 42px); }
.blocks > .block, .grid-item, .video-wrap {
  transform: translate(var(--nx, 0px), var(--ny, 0px));
}

.block-text {
  font-family: var(--f-display);
  color: var(--c-accent);
  font-size: calc(clamp(22px, 2.6vw, 29px) * var(--type-scale, 1));
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 780px;
}
.block-text p { margin: 0 0 .7em; }
.block-text p:last-child { margin-bottom: 0; }
.block-text a { text-underline-offset: 3px; }

/* Video's */
.block-video .video-wrap { width: 100%; }
.block-video-row {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.block-video-row .video-wrap { flex: 1 1 0; min-width: 0; }

.video-wrap {
  position: relative;
  background: #0a0a0a;
  border-radius: var(--media-radius, 4px);
  overflow: hidden;
}
.video-wrap video { width: 100%; height: 100%; object-fit: cover; }

.video-playbtn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%; border: 0; background: transparent; cursor: pointer;
  color: #fff; opacity: .92; transition: opacity .25s, transform .25s;
}
.video-playbtn:hover { opacity: 1; transform: scale(1.04); }
.video-wrap.playing .video-playbtn { display: none; }

/* Afbeeldingsgrid */
.block-imagegrid {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; align-items: flex-start;
}
.block-imagegrid figure { margin: 0; }
.grid-item { flex-grow: 0; }
.grid-item.w-1-3 { width: calc((100% - 28px) / 3); }
.grid-item.w-1-2 { width: calc((100% - 14px) / 2); }
.grid-item.w-2-3 { width: calc((100% - 14px) * 2 / 3); }
.grid-item.w-full { width: 100%; }
.grid-item img, .grid-item video { width: 100%; border-radius: var(--media-radius, 3px); }

/* Spacers */
.block-spacer.spacer-s { height: 16px; }
.block-spacer.spacer-m { height: 48px; }
.block-spacer.spacer-l { height: 110px; }

/* ---------- 404 ---------- */
.notfound {
  min-height: 70vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  font-family: var(--f-display); color: var(--c-accent);
}
.notfound h1 { font-size: 64px; font-weight: 400; margin: 0; }

/* ---------- Responsief ---------- */
@media (max-width: 1100px) {
  .block-text { font-size: calc(clamp(20px, 3.2vw, 26px) * var(--type-scale, 1)); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .home { padding: 20px 14px 60px; }
  /* fluïde kolommen: vaste tegelbreedte past niet op smalle schermen */
  .tiles { gap: 14px; }
  .tiles .col { flex: 1 1 0; width: auto; min-width: 0; gap: 14px; }
  .tile { width: 100%; }
  .tiles.nojs { columns: 2 auto; column-gap: 14px; }
  .tile-overlay { font-size: 14px; }
  .tile-text-content { font-size: calc(19px * var(--scale, 1) * var(--type-scale, 1)); }
  .block-video-row { flex-direction: column; }
  .grid-item.w-1-3, .grid-item.w-1-2, .grid-item.w-2-3 { width: 100%; }
  .block-spacer.spacer-l { height: 60px; }
}

/* Reduceer beweging als de bezoeker dat wil */
@media (prefers-reduced-motion: reduce) {
  a.tile:hover { transform: translate(var(--nx, 0px), var(--ny, 0px)); }
  .tile, .video-playbtn { transition: none; }
}

/* ---------- Verschijn-animatie (Design -> Beweging) ---------- */
html.js body.anim-fade .reveal {
  opacity: 0;
  transform: translate(var(--nx, 0px), calc(var(--ny, 0px) + 26px));
}
html.js body.anim-fade .reveal.in {
  opacity: 1;
  transform: translate(var(--nx, 0px), var(--ny, 0px));
  transition: opacity 1s cubic-bezier(.22,.7,.3,1), transform 1s cubic-bezier(.22,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  html.js body.anim-fade .reveal { opacity: 1; transform: translate(var(--nx, 0px), var(--ny, 0px)); }
}