/* Website, ontwerp & code: J.kiewiet · Interbit.nl — https://interbit.nl */
/* Eén hoes, twee nieuwe opnamen en vier rechtstreekse luisterlinks. */
.intro-scherm.draaitafel-onthulling {
  min-height: max(790px, var(--sectie-hoogte));
}
.intro-scherm .release-presentatie {
  position: absolute;
  z-index: 13;
  inset: 26px 4% 76px 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  text-align: center;
  scroll-margin-top: calc(var(--kop-hoogte-compact) + 24px);
}
.intro-scherm .release-presentatie::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 15% -4% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, #f6d57b14, transparent 68%);
  pointer-events: none;
}
.intro-scherm .release-merk {
  flex-shrink: 0;
  margin: 0 0 25px;
  padding: 8px 12px;
  max-width: 100%;
  color: #ffde67;
  font-size: clamp(104px, 9.2vw, 132px);
  transform: rotate(-5deg);
  text-shadow: 0 2px 0 #b68e423d, 0 9px 25px #112b3b40;
}
.release-presentatie .release-bovenregel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 31px;
  color: #ffdf83;
  font: 700 10px/1.5 'DM Sans', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.release-bovenregel > span {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ffda56;
  box-shadow: 0 0 0 4px #ffda5615;
}
.release-uitgave {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.12fr);
  grid-template-areas: 'hoes nummers' 'vinyl klassiekers';
  align-items: center;
  gap: 20px clamp(26px, 3vw, 43px);
  width: min(100%, 710px);
}
.release-artwork {
  grid-area: hoes;
  width: 100%;
  max-width: 295px;
  margin: 0;
  justify-self: center;
  transform: rotate(-3deg);
}
.release-cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #fff0c43d;
  border-radius: 7px;
  box-shadow: 0 22px 45px #071b3b60;
}
.release-nummers { grid-area: nummers; min-width: 0; text-align: left; }
.release-nummer + .release-nummer {
  margin-top: 24px;
  padding-top: 23px;
  border-top: 1px solid #f7dea344;
}
.release-nummer-kop { display: flex; align-items: baseline; gap: 13px; }
.release-nummer-index {
  color: #f2d782;
  font: 500 11px/1 'DM Sans', sans-serif;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.intro-scherm .release-nummer h2 {
  margin: 0;
  color: #fff5da;
  font: italic 700 clamp(30px, 2.95vw, 43px)/1.2 'Playfair Display', Georgia, serif;
  letter-spacing: -.045em;
  text-shadow: 0 3px 15px #0b233526;
}
.release-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}
.release-platform-link {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 47px;
  padding: 11px 13px;
  border: 1px solid #e4d5a84d;
  border-radius: 7px;
  background: #15374bd9;
  color: #fff7e6;
  font: 700 13px/1.5 'DM Sans', sans-serif;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.release-platform-link > svg { flex-shrink: 0; }
.release-platform-link.release-spotify {
  border-color: #1ed760;
  background: #1ed760;
  color: #082816;
  box-shadow: 0 5px 18px #08281620;
}
.release-link-pijl { margin-left: auto; font-size: 17px; font-weight: 400; }
.intro-scherm .release-klassiekers {
  position: static;
  grid-area: klassiekers;
  justify-self: end;
  margin: 0;
  padding: 10px 3px;
  min-height: 44px;
  max-width: 100%;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #dce8ed;
  box-shadow: none;
  font: 400 12px/1.5 'DM Sans', sans-serif;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: #e6eef14d;
}
.release-klassiekers > span { color: #ffdf75; }
/* Een verborgen draaitafel neemt ook op kleine laptops geen ruimte in. */
.intro-scherm.draaitafel-onthulling:not(.draaitafel-geopend) .intro-beeld { display: none; }
.intro-scherm.draaitafel-geopend .release-presentatie { visibility: hidden; pointer-events: none; }
.release-platform-link:focus-visible, .uitgave-release:focus-visible, .uitgave-platform-link:focus-visible {
  outline: 3px solid #ffdf75;
  outline-offset: 5px;
}
@media (hover: hover) {
  .release-platform-link:hover { transform: translateY(-2px); background: #23495d; box-shadow: 0 10px 24px #0b233540; }
  .release-platform-link.release-spotify:hover { background: #41e27a; }
  .intro-scherm .release-klassiekers:hover { color: #ffdf75; transform: none; box-shadow: none; }
}
/* De uitgebrachte single in het muziekoverzicht. */
.vinyl-teaser-uit .uitgave-release { margin: 0; display: block; color: #fff7e6; text-decoration: none; }
.vinyl-teaser-uit .uitgave-release > img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 12px 30px #0003; }
.uitgave-release-info { display: flex; flex-direction: column; gap: 5px; padding: 15px 0; }
.uitgave-release-info small { color: #ffda56; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.uitgave-release-info strong { font-size: 23px; }
.uitgave-release-info > span { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
/* Rechtstreekse luisterknoppen onder de albumhoes. */
.uitgave-release-info > .uitgave-platformen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; text-decoration: none; }
.uitgave-platform-link { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 13px; border: 1px solid #e4d5a854; border-radius: 7px; background: #17394c; color: #fff7e6; font: 600 13px/1.5 'DM Sans', sans-serif; text-decoration: none; }
.uitgave-platform-link > svg { flex-shrink: 0; }
.uitgave-platform-link > span { margin-left: 3px; color: #ffdf75; }
.uitgave-platform-spotify { border-color: #1ed76066; }
.uitgave-platform-link:hover { background: #244d63; border-color: #ffdf75; }


@media (max-width: 1100px) and (min-width: 801px) {
  .intro-scherm .release-presentatie { left: 38%; right: 3%; }
  .intro-scherm .release-merk { font-size: 112px; }
  .release-uitgave { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 24px; }
  .release-nummer-kop { gap: 10px; }
  .intro-scherm .release-nummer h2 { font-size: 30px; }
  .release-platform-link { padding: 10px 9px; gap: 7px; font-size: 12px; }
  .release-platform-link > svg { width: 18px; height: 18px; }
  .release-links { gap: 8px; }
}
@media (max-width: 800px), (max-width: 1100px) and (hover: none) and (pointer: coarse) {
  .intro-scherm.draaitafel-onthulling { grid-template-rows: var(--mobiel-portret-hoogte) auto auto; min-height: 0; }
  .intro-scherm .release-presentatie { position: relative; inset: auto; grid-row: 2; width: 100%; padding: 38px 28px 24px; background: radial-gradient(ellipse at 22% 40%, #5b77812e, transparent 65%), linear-gradient(150deg, #2d5368, #112e40); }
  .intro-scherm .release-merk { font-size: clamp(108px, 19vw, 132px); margin-bottom: 24px; }
  .release-uitgave { max-width: 650px; column-gap: 30px; }
  .intro-scherm .release-nummer h2 { font-size: clamp(29px, 4.5vw, 38px); }
  .intro-scherm .intro-beeld { grid-row: 2; }
  .intro-scherm > .lichtkrant { grid-row: 3; }
  .intro-scherm.draaitafel-geopend .release-presentatie { display: none; }
}
@media (max-width: 680px) {
  .release-uitgave { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'hoes' 'vinyl' 'nummers' 'klassiekers'; row-gap: 24px; max-width: 390px; }
  .release-artwork { max-width: 255px; }
  .release-nummer-kop { gap: 13px; }
  .intro-scherm .release-nummer h2 { font-size: clamp(30px, 8.3vw, 38px); }
  .release-links { gap: 10px; margin-top: 15px; }
  .release-platform-link { min-height: 48px; padding-inline: 14px; font-size: 13px; }
  .release-nummer + .release-nummer { margin-top: 25px; padding-top: 23px; }
  .intro-scherm .release-klassiekers { margin: 0; }
}
@media (max-width: 360px) {
  .intro-scherm .release-presentatie { padding-inline: 20px; }
  .release-platform-link { padding-inline: 10px; gap: 7px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .release-platform-link { transition: none; }
}

/* Vinylnieuws onder de hoes; de klassiekers staan in de rechterkolom. */
.release-presentatie .home-vinyl {
  container-type: inline-size;
  grid-area: vinyl;
  width: 100%;
  max-width: 295px;
  justify-self: center;
  min-width: 0;
  text-align: left;
}
.home-vinyl-link {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border: 0;
  background: none;
  box-shadow: none;
  color: #f5f8fa;
  text-decoration: none;
}
.home-vinyl-artwork {
  position: relative;
  display: block;
  width: 108px;
  aspect-ratio: 1.15;
}
.home-vinyl-plaat {
  position: absolute;
  top: 3%;
  right: 0;
  width: 68%;
  aspect-ratio: 1;
  border: 1px solid #5e666a;
  border-radius: 50%;
  background: radial-gradient(circle, #0b1720 0 1px, #56788e 1px 2px, #2c5068 2px 10px, transparent 10px), url('assets/vinyl-groeven.svg') center / cover, conic-gradient(from 25deg, #0a0b0c, #41494e 15%, #0a0b0c 31%, #11171b 55%, #41494e 67%, #0a0b0c 83%);
  box-shadow: 4px 6px 12px #0005;
}
.home-vinyl-artwork img {
  position: absolute;
  top: 7%;
  left: 2%;
  display: block;
  width: 68%;
  height: auto;
  border: 1px solid #ffffff30;
  border-radius: 2px;
  box-shadow: 3px 6px 14px #0006;
  transform: rotate(-7deg);
}
.home-vinyl-tekst { min-width: 0; }
.home-vinyl-label {
  margin: 0 0 7px;
  color: #ffffff;
  font: 700 12px/1.4 'DM Sans', Arial, sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.intro-scherm #home-vinyl-titel {
  margin: 0 0 7px;
  color: #f5f8fa;
  font: 700 21px/1.15 'DM Sans', Arial, sans-serif;
  letter-spacing: -.035em;
  text-shadow: none;
}
.intro-scherm #home-vinyl-titel em {
  display: block;
  color: #ffda56;
  font-family: 'Playfair Display', Georgia, serif;
}
.home-vinyl-voet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.home-vinyl-info {
  color: #c5d8e4;
  font: 400 10px/1.6 'DM Sans', Arial, sans-serif;
}
.home-vinyl-verder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffda56;
  font: 700 11px/1.6 'DM Sans', Arial, sans-serif;
  white-space: nowrap;
}
.home-vinyl-verder > span { font-size: 16px; font-weight: 400; }
.home-vinyl-link:focus-visible {
  outline: 3px solid #ffda56;
  outline-offset: 4px;
}
@media (hover: hover) {
  .home-vinyl-link:hover .home-vinyl-verder { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 680px) {
  .release-presentatie .home-vinyl { max-width: 295px; }
  .intro-scherm #home-vinyl-titel { font-size: 21px; }
  .home-vinyl-info { font-size: 11px; }
  .home-vinyl-verder { font-size: 12px; }
}
@container (max-width: 245px) {
  .home-vinyl-link { grid-template-columns: 1fr; gap: 6px; text-align: center; }
  .home-vinyl-artwork { justify-self: center; width: 90px; }
  .home-vinyl-voet { align-items: center; }
  .intro-scherm #home-vinyl-titel { font-size: 19px; }
  .intro-scherm #home-vinyl-titel em { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .home-vinyl-link { transition: none; }
}