/* Projectenoverzicht: een mozaïek waarin elk project zijn eigen wereld houdt. */
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/projecten/instrument-serif-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/projecten/instrument-serif-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

.ov-intro { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.ov-intro .proj-h1 { flex: 0 1 auto; }
.ov-intro p { margin: 0; flex: 0 1 460px; font-size: 19px; line-height: 1.55; color: var(--ink-muted); }

.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(340px, auto)); gap: 16px; padding-bottom: clamp(56px, 8vw, 112px); }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: clamp(24px, 3vw, 40px); text-decoration: none; min-width: 0; transition: transform .25s ease; }
.tile:hover { transform: translateY(-6px); }
.tile:focus-visible { outline: 3px solid #0b0b0b; outline-offset: 3px; }
.tile-kind { position: relative; z-index: 3; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }
.tile-name { position: relative; z-index: 3; margin: 0; font-family: "Instrument Serif", "Times New Roman", serif; font-weight: 400; letter-spacing: -.03em; line-height: .92; font-size: clamp(44px, 5.4vw, 84px); }
.tile-name em { font-style: italic; }
.tile-line { position: relative; z-index: 3; margin: 0; max-width: 44ch; font-family: "Instrument Serif", "Times New Roman", serif; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; }
.tile-go { position: relative; z-index: 3; font-family: var(--font-mono); font-size: 13px; margin-top: 6px; }
.tile:hover .tile-go { text-decoration: underline; text-underline-offset: .2em; }

/* Kleurenmonster: nachtblauw, groot en het eerste wat je ziet */
.t-kleur { grid-column: span 7; grid-row: span 2; background: #0d0d18; color: #f5f5f5; }
.t-kleur .tile-kind, .t-kleur .tile-go { color: #ffd23f; }
.t-kleur .tile-name { font-size: clamp(48px, 6.6vw, 104px); }
.t-kleur .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42; pointer-events: none; }
.t-kleur .b1 { width: 55%; height: 45%; top: -12%; left: -12%; background: #ff6b9d; }
.t-kleur .b2 { width: 45%; height: 40%; top: 18%; right: -10%; background: #06b6d4; }
.t-kleur .b3 { width: 42%; height: 36%; bottom: -8%; right: 6%; background: #84cc16; }
.t-kleur img { position: relative; z-index: 2; align-self: center; width: min(78%, 500px); height: auto; margin-bottom: auto; filter: drop-shadow(0 24px 48px rgba(0,0,0,.55)); transition: transform .4s ease; }
.t-kleur:hover img { transform: rotate(-3deg) scale(1.03); }

/* Orbis Records: zwart-wit */
.t-orbis { grid-column: span 5; background: #0a0a0a; color: #f5f5f5; }
.t-orbis img { position: absolute; right: -8%; top: -20%; width: 52%; height: auto; filter: invert(1) grayscale(1); mix-blend-mode: lighten; opacity: .9; transition: transform .6s ease; }
.t-orbis:hover img { transform: rotate(24deg); }
.t-orbis .tile-line { color: rgba(245,245,245,.88); }

/* Popinn: warm koraal */
.t-popinn { grid-column: span 5; background: #fff4ec; color: #5b1f0d; border: 1.5px solid #5b1f0d; box-shadow: inset 0 0 90px rgba(232,93,58,.16); }
.t-popinn .tile-kind, .t-popinn .tile-go { color: #b83f1c; }
.t-popinn .tile-name em { color: #e85d3a; }
.t-popinn .klop { position: absolute; top: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); font-family: "Instrument Serif", "Times New Roman", serif; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; line-height: 1; }
.t-popinn .klop em { color: #e85d3a; }

@media (max-width: 860px) {
  .mosaic { grid-template-rows: none; }
  .t-kleur, .t-orbis, .t-popinn { grid-column: 1 / -1; grid-row: auto; }
  .t-orbis, .t-popinn { min-height: 320px; }
  .t-kleur img { width: min(72%, 320px); margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .t-kleur img, .t-orbis img { transition: none; }
  .tile:hover { transform: none; }
}