@font-face {
  font-family: 'Galgo';
  src: url('assets/fonts/galgo.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --bg: #d9d9d9;
  --gap: 14px;
  --radius: 0px;
  --label: #ffffff;
}

html, body { background: var(--bg); color: #111; font-family: 'Galgo', 'Inter', system-ui, sans-serif; }

.site-header {
  text-align: center;
  padding: 48px 16px 28px;
}
.site-header h1 {
  font-family: 'Galgo', sans-serif;
  font-weight: 400;
  font-size: clamp(4rem, 10vw, 7rem);
  letter-spacing: .03em;
  color: #111;
  line-height: 1;
}
.site-header .tagline {
  margin-top: 6px;
  font-family: 'Galgo', sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: .12em;
  color: #333;
  text-transform: lowercase;
}

.grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gap) 40px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 90px;
  grid-template-rows: repeat(11, 90px) 120px repeat(3, 100px);
  gap: var(--gap);
  grid-template-areas:
    "nike    nike    nike    nike    rayban rayban"
    "nike    nike    nike    nike    rayban rayban"
    "nike    nike    nike    nike    rayban rayban"
    "porsche porsche porsche battle  battle battle"
    "porsche porsche porsche battle  battle battle"
    "porsche porsche porsche blikv   blikv  blikv"
    "porsche porsche porsche blikv   blikv  blikv"
    "eindh   eindh   eindh   eindh   film1  film1"
    "eindh   eindh   eindh   eindh   film1  film1"
    "eindh   eindh   eindh   eindh   film1  film1"
    "eindh   eindh   eindh   eindh   film1  film1"
    "about   about   about   about   about  about"
    "blik    blik    blik    blik    film2  film2"
    "blik    blik    blik    blik    film2  film2"
    "blik    blik    blik    blik    film2  film2"
    "blik    blik    blik    blik    film2  film2"
    "storm   storm   gambia  gambia  gambia gambia"
    "storm   storm   gambia  gambia  gambia gambia"
    "storm   storm   gambia  gambia  gambia gambia";
}

.a-nike     { grid-area: rayban; }
.a-rayban   { grid-area: blikv; }
.a-porsche  { grid-area: porsche; }
.a-battle   { grid-area: battle; }
.a-tweek        { grid-area: tweek; }
.a-blikvangers  { grid-area: nike; }
.a-eindhoven{ grid-area: blik; }
.a-film1    { grid-area: film1; }
.a-about    { grid-area: about; }
.a-blik     { grid-area: eindh; }
.a-film2    { grid-area: film2; }
.a-storm    { grid-area: storm; }
.a-gambia   { grid-area: gambia; }

.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #222;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }

.tile .thumb,
.tile video,
.tile .poster-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tile video {
  opacity: 0;
  transition: opacity .3s ease;
}
.tile.is-playing video { opacity: 1; }

.slider-tile { background: #000; overflow: hidden; position: relative; }
.slider-tile .slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.slider-tile .slide.active { opacity: 1; }

.tile.combo-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  cursor: default;
  border-radius: 0;
}
.tile.combo-tile:hover { transform: none; box-shadow: none; }
.tile.combo-tile .combo-slider { flex: 1 1 50%; min-height: 0; }
.tile.combo-tile .combo-text {
  flex: 1 1 50%;
  background: #fff;
  border-top: 2px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  overflow: auto;
}
.tile.combo-tile .combo-text h2 {
  color: #000;
  font-family: 'Galgo', sans-serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: .03em;
  margin: 0;
}
.tile.combo-tile .combo-text .mail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000;
  text-decoration: none;
  font-family: 'Galgo', sans-serif;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  letter-spacing: .02em;
}
.tile.combo-tile .combo-text .mail-link:hover { text-decoration: underline; }

.tile.text-tile {
  background: #fff;
  border: 2px solid #000;
  border-radius: 0;
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
  overflow: auto;
  position: relative;
}
.tile.text-tile:hover { transform: none; box-shadow: none; }
.tile.text-tile p {
  color: #000;
  font-family: 'Galgo', sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: .02em;
  margin: 0;
}
.tile.text-tile p[data-lang] { display: none; }
.tile.text-tile[data-lang="en"] p[data-lang="en"],
.tile.text-tile[data-lang="nl"] p[data-lang="nl"] { display: block; }
.tile.text-tile .lang-toggle {
  position: absolute;
  top: 10px;
  right: 14px;
  display: flex;
  gap: 4px;
  font-family: 'Galgo', sans-serif;
  font-size: 1rem;
  color: #000;
}
.tile.text-tile .lang-toggle button {
  background: none;
  border: none;
  color: #000;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  cursor: pointer;
  opacity: .4;
}
.tile.text-tile .lang-toggle button.active { opacity: 1; text-decoration: underline; }

/* Filmposter-blokken: hele poster zichtbaar (niet croppen) */
.tile.poster { background: #1a1a1a; }
.tile.poster .poster-img { object-fit: contain; }

/* Label rechtsonder — vult de hoek helemaal, klikbaar */
.tile .label {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 4;
  color: #fff;
  font-family: 'Galgo', sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 3.2rem);
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  padding: 14px 20px 6px 20px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .25s ease-out, text-shadow .25s ease-out;
}
.tile .label::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform .25s ease-out;
  z-index: -1;
}
.tile .label:hover {
  color: #111;
  text-shadow: none;
  transition: color .25s ease-out, text-shadow 0s;
}
.tile .label-main { display: block; line-height: 1; }
.tile .label-sub {
  display: block;
  font-family: 'Galgo', sans-serif;
  font-size: 1.15rem;
  letter-spacing: .04em;
  line-height: 1;
  margin-top: -1px;
  opacity: .95;
  text-align: right;
}
.tile .label:hover::before { transform: translateY(0); }
.tile.poster .label { display: none; }

/* Info-paneel: wit met zwarte tekst, titel rechts naast de kleine video */
.tile .info-panel {
  position: absolute;
  inset: 0;
  background: var(--bg);
  color: #111;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease-out;
  z-index: 2;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  font-size: .95rem;
  line-height: 1.45;
  display: grid;
  grid-template-columns: 34% 1fr;
  grid-template-rows: 34% 1fr;
  gap: 12px 22px;
  padding: 18px 22px;
}
.tile .info-panel h3 {
  grid-column: 2; grid-row: 1;
  font-family: 'Galgo', sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: .04em;
  line-height: 1.05;
  color: #111;
  align-self: center;
}
.tile .info-panel p {
  grid-column: 1 / -1; grid-row: 2;
  align-self: start;
}
.tile.is-info .info-panel { opacity: 1; pointer-events: auto; }

/* Video krimpt in info-mode naar linksboven en is klikbaar (weer sluiten) */
.tile .thumb, .tile video { transition: transform .45s cubic-bezier(.65,.05,.36,1), opacity .3s; }
.tile.is-info .thumb,
.tile.is-info video {
  transform: scale(0.32);
  transform-origin: top left;
  z-index: 5;
  cursor: pointer;
  pointer-events: auto;
}
.tile.is-info video { opacity: 1; }
.tile.is-info .label { display: none; }
.tile.is-info .volume { display: none; }

/* Volume-schuif verschijnt bij hover als video speelt */
.tile .volume {
  position: absolute;
  bottom: 12px; left: 14px;
  z-index: 3;
  opacity: 0;
  transition: opacity .2s ease;
  background: rgba(0,0,0,.55);
  border-radius: 999px;
  padding: 4px 10px;
}
.tile.is-playing:hover .volume { opacity: 1; }
.tile .volume input {
  width: 80px;
  accent-color: #fff;
  cursor: pointer;
}

/* Audiospeler in de over-mij-strook */
.about {
  background: var(--bg);
  border: none;
  cursor: default;
  padding: 0 4px;
}
.about:hover { transform: none; box-shadow: none; }
.about .player {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
}
.about .play-btn { margin-left: 14px; }
.about .nav, .about .play-btn {
  background: none; border: 0; padding: 4px;
  color: #111; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.about .nav:hover, .about .play-btn:hover { opacity: .6; }
.about .track-title {
  font-family: 'Galgo', sans-serif;
  font-size: 1.9rem;
  letter-spacing: .04em;
  color: #111;
  padding: 0 4px;
  white-space: nowrap;
}
.about .play-btn { margin-left: 6px; }
.about .play-btn .ic-pause { display: none; }
.about .player.is-playing .ic-play { display: none; }
.about .player.is-playing .ic-pause { display: inline-block; }
.about .waveform {
  width: 100%;
  height: 80px;
  display: block;
  cursor: pointer;
}

/* Extra posterrij onderaan */
.grid-posters {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gap) 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.grid-posters .tile { aspect-ratio: 2 / 3; }

@media (max-width: 640px) {
  .grid-posters { grid-template-columns: repeat(2, 1fr); }
}

/* Losse pagina /zilver — één nummer, speler gecentreerd op lege lichtgrijze pagina */
.zilver-page {
  min-height: 100vh;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px var(--gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.zilver-heading {
  font-family: 'Galgo', sans-serif;
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 8rem);
  letter-spacing: .04em;
  line-height: 1;
  color: #111;
  text-transform: lowercase;
}
.zilver-page .about { width: 100%; background: var(--bg); }
.zilver-page .about .player {
  grid-template-columns: auto auto 1fr;
  height: auto;
}

/* Mobile: 1-koloms met echte 16:9 hoogte voor video's */
@media (max-width: 640px) {
  .grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    max-width: 100%;
  }
  .grid .tile { width: 100%; }
  .grid .tile[data-video] { aspect-ratio: 16 / 9; }
  .grid .tile.poster { aspect-ratio: 2 / 3; }
  .grid .tile.about { aspect-ratio: auto; min-height: 140px; }
}