/*
 * Electro Union — Music Player Module
 *
 * Liten mp3-spelare med 4 tracks, autoplay på första user-interaction,
 * och fixed sound-controls (bottom-left) som visas när man scrollat
 * förbi spelaren.
 *
 * Kräver: ../_shared/fonts.css + ../_shared/tokens.css
 *
 * Källa: golden/electro-union-module.html rader:
 *   730-818   (.eu-player*)
 *   1571-1598 (.eu-sound-controls)
 *   2158-2170 (mobile responsive)
 *
 * OBS: I Golden ligger .eu-player absolut-positionerad ovanpå en
 * statement-bild. Här har vi en enklare standalone-wrapper.
 */

/* ═══ BIG STATEMENT (bakgrund till spelaren) ═══
 * LARGE QUOTE.png med .eu-player absolut-positionerad ovanpå — identiskt
 * med golden rader 686-728. Behåller subtila blur + noise-overlays så
 * citatbilden inte ser platt ut.
 */
.eu-statement{
  background:#fff;
  padding:clamp(60px,10vw,140px) clamp(40px,8vw,80px);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.eu-statement::before{
  content:'';
  position:absolute;
  inset:0;
  backdrop-filter:blur(2px);
  z-index:0;
}
.eu-statement::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size:150px 150px;
  opacity:.4;
  z-index:0;
  pointer-events:none;
}
.eu-statement__wrap{
  position:relative;
  display:inline-block;
  max-width:clamp(400px,80vw,1000px);
}
.eu-statement__img{
  display:block;
  width:100%;
  position:relative;
  z-index:1;
}

/* ═══ MUSIC PLAYER ═══ */
.eu-player{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  background:rgba(255,255,255,0.94);
  padding:clamp(14px,2vw,24px) clamp(18px,2.5vw,32px);
  width:clamp(200px,30vw,340px);
  text-align:center;
}
.eu-player__now{
  font-family:'Times Eighteen',Georgia,serif;
  font-size:clamp(20px,3.5vw,36px);
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink);
  line-height:1;
  margin-bottom:clamp(8px,1.2vw,14px);
}
.eu-player__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2.5vw,24px);
  margin-bottom:clamp(8px,1.2vw,14px);
}
.eu-player__btn{
  font-size:clamp(12px,1.6vw,18px);
  color:var(--ink);
  cursor:var(--eu-cursor);
  user-select:none;
  transition:opacity .1s;
  line-height:1;
}
.eu-player__btn:hover{opacity:.5}
.eu-player__btn--play{
  font-size:clamp(18px,2.8vw,28px);
  width:clamp(32px,4.5vw,44px);
  height:clamp(32px,4.5vw,44px);
  border:1.5px solid var(--ink);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:2px;
}
.eu-player__bar{
  width:100%;
  height:3px;
  background:#ddd;
  margin-bottom:clamp(10px,1.5vw,16px);
  cursor:var(--eu-cursor);
  position:relative;
}
.eu-player__progress{
  height:100%;
  background:var(--ink);
  width:0%;
  transition:width .3s linear;
}
.eu-player__tracklist{
  text-align:left;
}
.eu-player__track{
  font-family:var(--mono);
  font-size:clamp(9px,1.1vw,12px);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#999;
  padding:clamp(3px,.4vw,5px) 0;
  cursor:var(--eu-cursor);
  transition:color .1s;
  border-bottom:1px solid #eee;
}
.eu-player__track:last-child{border-bottom:none}
.eu-player__track:hover{color:var(--ink)}
.eu-player__track.is-active{
  color:var(--ink);
  font-weight:bold;
}
.eu-player__track-num{
  color:#ccc;
  margin-right:clamp(6px,1vw,10px);
}
.eu-player__track.is-active .eu-player__track-num{
  color:var(--blue);
}

/* ═══ FIXED SOUND CONTROLS (standalone only) ═══ */
.eu-sound-controls{
  position:fixed;
  bottom:16px;
  left:16px;
  z-index:99999;
  display:none;
  align-items:center;
  gap:6px;
}
.eu-sound-controls.is-visible{display:flex}
.eu-sound-toggle,.eu-sound-next{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  color:#000;
  opacity:.5;
  transition:opacity .15s;
  padding:0;
}
.eu-sound-toggle:hover,.eu-sound-next:hover{opacity:1}
.eu-sound-toggle svg,.eu-sound-next svg{width:14px;height:14px}

/* Hide sound controls in embed mode */
.is-embed .eu-sound-controls{display:none!important}

/* ═══ MOBILE ═══ */
@media (max-width:700px){
  .eu-statement__wrap{max-width:95vw}
  .eu-player{
    width:clamp(220px,80vw,320px);
    padding:clamp(14px,4vw,20px) clamp(18px,5vw,28px);
  }
  .eu-player__now{font-size:clamp(14px,4vw,22px)}
  .eu-player__btn{font-size:clamp(10px,2.5vw,14px)}
  .eu-player__btn--play{
    font-size:clamp(14px,4vw,20px);
    width:clamp(26px,7vw,34px);
    height:clamp(26px,7vw,34px);
  }
  .eu-player__track{font-size:clamp(7px,2vw,10px)}
}