/* Website, ontwerp & code: J.kiewiet · Interbit.nl — https://interbit.nl */
/* Het livealbum sluit aan op het blauw en goud van de website. */
#media { position: relative; isolation: isolate; padding: clamp(64px, 7vw, 112px) max(24px, 6vw); color: #f4f8fa; background: radial-gradient(ellipse at 90% 10%, #77558c38, transparent 45%), linear-gradient(155deg, #263f51, #122d40 70%, #233f50); border-block: 1px solid #ffda5633; scroll-margin-top: 90px; }
#media .media-binnen { max-width: 1320px; margin: auto; }
#media .media-kop { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 40px; margin-bottom: 42px; }
#media .media-label { margin: 0 0 18px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ffda56; }
#media #media-titel { margin: 0; color: #f4f8fa; font: 700 clamp(42px, 5.5vw, 78px)/1.04 'DM Sans', sans-serif; letter-spacing: -.055em; text-shadow: none; }
#media em { color: #ffda56; font-family: 'Playfair Display', Georgia, serif; }
#media .media-inleiding { max-width: 470px; }
#media .media-inleiding p { color: #d3dfe7; line-height: 1.8; margin: 0 0 14px; }
#media .media-inleiding .media-datum { color: #ffda56; font-size: .9rem; font-weight: 700; }
#media .media-datum span { color: #d3dfe7; font-weight: 400; }
#media .media-inleiding .media-aantal { font-size: .8rem; margin: 20px 0 0; }
#media .media-aantal span { padding: 0 8px; color: #ffda56; }
#media .media-album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
#media figure { margin: 0; min-width: 0; }
#media .media-foto-podium { grid-column: span 2; }
#media .media-foto a { display: block; position: relative; overflow: hidden; border-radius: 6px; background: #0b1c29; border: 1px solid #ffffff26; }
#media .media-foto img { display: block; width: 100%; height: 300px; object-fit: cover; transition: transform .65s cubic-bezier(.2,.6,.3,1), filter .5s; }
#media .media-foto-podium img, #media .media-foto-backstage img { height: clamp(300px, 38vw, 510px); }
#media .media-foto-podium img { object-position: center; object-fit: contain; }
#media .media-foto-draaischijf img { object-position: center 46%; }
#media .media-foto-jonge-fans img { object-position: 50% 45%; }
#media .media-vergroot { position: absolute; right: 14px; bottom: 14px; padding: 9px 13px; border: 1px solid #ffffff55; border-radius: 30px; background: #0c203de0; color: #fff; font: 600 .75rem/1.3 'DM Sans', sans-serif; backdrop-filter: blur(8px); }
#media .media-foto figcaption { display: flex; gap: 14px; padding: 18px 0 0; }
#media .media-foto h4 { font: 700 1.05rem/1.4 'DM Sans', sans-serif; color: #f4f8fa; margin: 0 0 7px; letter-spacing: -.02em; }
#media .media-foto figcaption p { margin: 0; color: #c5d8e4; font-size: .88rem; line-height: 1.7; }
#media .media-video-kop { display: flex; align-items: end; justify-content: space-between; gap: 24px; border-top: 1px solid #ffda5633; margin-top: 58px; padding-top: 44px; margin-bottom: 28px; }
#media .media-video-kop h4 { margin: 0; font: 700 clamp(30px, 3.2vw, 46px)/1.15 'DM Sans', sans-serif; letter-spacing: -.04em; color: #f4f8fa; }
#media .media-video-kop > p { font-size: .9rem; color: #c5d8e4; }
#media .media-videos { display: grid; grid-template-columns: 1.65fr 1fr; gap: 24px; }
#media video { display: block; width: 100%; height: clamp(280px, 33vw, 430px); object-fit: contain; background: #08141e; border: 1px solid #ffffff26; border-radius: 6px; }
#media .media-video figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 16px; align-items: baseline; }
#media .media-video h4 { color: #f4f8fa; font: 700 1rem/1.4 'DM Sans', sans-serif; margin: 0; }
#media .media-video figcaption span { color: #c5d8e4; font-size: .8rem; }
#media .media-slot { margin: 46px 0 0; text-align: center; font: italic 700 clamp(20px, 2.4vw, 29px)/1.5 'Playfair Display', Georgia, serif; color: #ffda56; }
#media .media-slot span { white-space: nowrap; }
#media > .scroll-markering { display: none; }
#media a:focus-visible, #media video:focus-visible, .media-venster button:focus-visible { outline: 3px solid #ffda56; outline-offset: 5px; }
.media-venster { width: min(1200px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 16px; border: 1px solid #ffda5666; border-radius: 8px; color: #f4f8fa; background: #102838; box-shadow: 0 30px 100px #0009; }
.media-venster::backdrop { background: #020b15eb; backdrop-filter: blur(12px); }
.media-venster-kop, .media-venster-voet { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.media-venster-kop { padding-bottom: 12px; }
.media-venster h2 { margin: 0; color: #ffda56; font: 600 .9rem/1.4 'DM Sans', sans-serif; }
.media-venster button { min-width: 44px; min-height: 44px; flex-shrink: 0; padding: 8px 14px; border: 1px solid #ffffff40; border-radius: 4px; color: #fff; background: #25485e; cursor: pointer; font: 600 .9rem 'DM Sans', sans-serif; }
.media-venster button:hover { background: #ffda56; color: #102838; }
.media-groot { display: block; width: 100%; height: min(68dvh, 800px); object-fit: contain; }
.media-bijschrift { margin: 14px 0 0; text-align: center; color: #d3dfe7; font: 400 .9rem/1.55 'DM Sans', sans-serif; }
html.media-open { overflow: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #media .media-foto a:hover img { transform: scale(1.035); filter: brightness(1.08); }
  #media .media-foto a:hover .media-vergroot { background: #ffda56; color: #102838; }
}
@media (max-width: 1000px) {
  #media .media-album { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #media .media-foto img { height: auto; aspect-ratio: 4 / 3; }
  #media .media-foto-backstage img, #media .media-foto-draaischijf img { aspect-ratio: 3 / 4; }
  #media .media-foto-podium img { aspect-ratio: 3 / 2; }
  #media .media-kop { gap: 24px; }
}
@media (max-width: 650px) {
  #media .media-kop, #media .media-album, #media .media-videos { grid-template-columns: 1fr; }
  #media .media-foto-podium { grid-column: auto; }
  #media .media-kop { margin-bottom: 28px; }
  #media .media-video-kop { display: block; }
  #media .media-videos { gap: 32px; }
  #media video { height: auto; aspect-ratio: 920 / 506; }
  #media .media-video-staand video { aspect-ratio: 9 / 16; max-height: 70dvh; }
  .media-venster { padding: 12px; }
  .media-venster-kop, .media-venster-voet { gap: 8px; }
  .media-groot { height: 56dvh; }
  .media-bijschrift { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { #media .media-foto img { transition: none; } }