/* Radio Mezza: FM-ontvanger met verlichte schaal, draaiknop en zenderpaneel. */

.radio {
  background:
    radial-gradient(60% 50% at 85% 10%, oklch(0.4 0.12 300 / 0.35), transparent 70%),
    var(--night-900);
}

.receiver {
  display: grid;
  gap: var(--space-m);
}

.receiver__face {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'display controls'
    'dial dial';
  align-items: center;
  gap: var(--space-m) var(--space-l);
  padding: var(--space-l);
  border-radius: var(--radius-l);
  background:
    linear-gradient(180deg, oklch(0.27 0.03 280), oklch(0.17 0.03 280)),
    var(--night-850);
  box-shadow:
    inset 0 1px 0 oklch(0.6 0.04 280 / 0.5),
    inset 0 -2px 0 oklch(0.08 0.02 278),
    0 40px 80px -40px oklch(0.05 0.02 278 / 0.95);
}

/* ---------- Display ---------- */

.receiver__display {
  grid-area: display;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-xs) var(--space-l);
  min-width: 0;
}

.receiver__freq {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
  text-shadow: 0 0 22px var(--amber-glow), 0 0 2px var(--amber);
}

.receiver__freq small {
  font-size: 0.28em;
  font-stretch: 70%;
  letter-spacing: 0.12em;
  color: var(--paper-faint);
  text-shadow: none;
}

.receiver__now {
  min-width: 0;
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--paper-dim);
  text-wrap: balance;
}

.receiver[data-locked] .receiver__now {
  color: var(--paper);
}

.receiver__meter {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
}

.receiver__meter span {
  width: 6px;
  border-radius: 2px;
  background: oklch(0.4 0.04 280);
  transition: background-color var(--duration-fast) linear, box-shadow var(--duration-fast) linear;
}

.receiver__meter span:nth-child(1) { height: 20%; }
.receiver__meter span:nth-child(2) { height: 40%; }
.receiver__meter span:nth-child(3) { height: 60%; }
.receiver__meter span:nth-child(4) { height: 80%; }
.receiver__meter span:nth-child(5) { height: 100%; }

.receiver__meter span.is-on {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber-glow);
}

/* ---------- Schaal ---------- */

.dial {
  grid-area: dial;
  position: relative;
  --dial-pad: 18px;
  height: clamp(96px, 8vw + 40px, 132px);
  border-radius: var(--radius-m);
  background:
    linear-gradient(180deg, oklch(0.85 0.15 78 / 0.1), transparent 40%, oklch(0.85 0.15 78 / 0.06)),
    radial-gradient(80% 140% at 50% 120%, oklch(0.85 0.15 78 / 0.22), transparent 70%),
    oklch(0.11 0.03 278);
  box-shadow:
    inset 0 0 0 1px oklch(0.85 0.15 78 / 0.15),
    inset 0 8px 24px oklch(0.05 0.02 278 / 0.8);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}

.dial:focus-visible {
  outline-offset: 4px;
}

.dial__scale {
  position: absolute;
  inset: auto var(--dial-pad) 10px;
  width: calc(100% - var(--dial-pad) * 2);
  height: 58%;
  overflow: visible;
}

/* 88 tot 108 MHz: eerste getal ligt 0.5/20.5 van de linkerrand, laatste precies rechts */
.dial__labels {
  position: absolute;
  top: 12px;
  left: calc(var(--dial-pad) + (100% - var(--dial-pad) * 2) * 0.02439);
  right: var(--dial-pad);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-stretch: 70%;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: oklch(0.85 0.15 78 / 0.85);
}

.dial__labels span {
  width: 0;
  display: flex;
  justify-content: center;
}

.dial__tick {
  stroke: oklch(0.85 0.15 78 / 0.45);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.dial__tick--major {
  stroke: oklch(0.85 0.15 78 / 0.85);
  stroke-width: 2;
}

.dial__station-glow {
  fill: var(--sunset);
  opacity: 0.35;
  transition: opacity var(--duration-base) var(--ease-out);
}

.dial__station-dot {
  stroke: var(--sunset);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.dial__station.is-active .dial__station-glow {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--sunset));
}

/* Naald: positie via --needle (0..1) die radio.js zet */
.dial__needle {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: var(--dial-pad);
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--sunset-deep);
  box-shadow: 0 0 12px var(--sunset-deep), 0 0 2px oklch(1 0 0 / 0.8);
  transform: translateX(calc(var(--needle, 0.75) * var(--dial-width, 0px)));
  will-change: transform;
  pointer-events: none;
}

.receiver.is-dragging .dial__needle,
.receiver.is-dragging .knob {
  transition: none;
}

/* ---------- Bediening ---------- */

.receiver__controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.knob {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, oklch(0.32 0.02 280) 0 34%, transparent 35%),
    repeating-conic-gradient(oklch(0.45 0.02 280) 0 4deg, oklch(0.3 0.02 280) 4deg 8deg);
  box-shadow:
    0 0 0 3px oklch(0.14 0.03 278),
    0 10px 24px -6px oklch(0.05 0.02 278),
    inset 0 2px 2px oklch(0.8 0.02 280 / 0.35);
  transform: rotate(var(--knob-angle, 0deg));
  cursor: grab;
  touch-action: none;
}

.knob:active {
  cursor: grabbing;
}

.knob__grip {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 4px;
  height: 14px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--sunset);
  box-shadow: 0 0 8px var(--sunset);
}

.receiver__sound .receiver__sound-on,
.receiver__sound[aria-pressed='true'] .receiver__sound-off {
  display: none;
}

.receiver__sound[aria-pressed='true'] .receiver__sound-on {
  display: inline;
}

.receiver__sound[aria-pressed='true'] {
  border-color: var(--amber);
  color: var(--amber);
}

/* ---------- Zenderpaneel ---------- */

.receiver__stations {
  position: relative;
  min-height: 25rem;
}

.station,
.station-static {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}

.station[hidden] {
  display: none;
}

.js-motion .station:not([hidden]) {
  animation: station-in 520ms var(--ease-out);
}

@keyframes station-in {
  from {
    opacity: 0;
    filter: blur(8px) saturate(0);
    transform: translateX(-8px);
  }
}

.station__art {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px oklch(0.05 0.02 278);
}

.station__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, oklch(0.13 0.04 278 / 0.65));
  pointer-events: none;
}

.station__art img {
  width: 100%;
  aspect-ratio: 1024 / 563;
  object-fit: cover;
}

.station__body {
  display: grid;
  gap: var(--space-2xs);
}

.station__freq {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--sunset);
}

.station__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 850;
  font-stretch: 130%;
  font-size: var(--step-3);
  line-height: 1;
}

.station__genre {
  color: var(--paper-dim);
}

.station__subhead {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-stretch: 70%;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.station__mixes {
  display: grid;
  border-top: 1px solid var(--line);
}

.mix {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.mix:hover,
.mix[aria-current='true'] {
  background: oklch(0.31 0.085 282 / 0.4);
}

.mix__play {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--amber);
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.mix__play .icon {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

.mix:hover .mix__play,
.mix[aria-current='true'] .mix__play {
  background: var(--amber);
  color: var(--night-950);
  border-color: var(--amber);
}

.mix__name {
  font-weight: 600;
  line-height: 1.35;
}

.mix__meta {
  font-size: var(--step--1);
  color: var(--paper-faint);
  font-variant-numeric: tabular-nums;
}

.station__offline {
  padding: var(--space-s);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-m);
  color: var(--paper-dim);
}

/* Ruis tussen de zenders */
.station-static {
  display: none;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) linear;
}

.station-static canvas {
  width: 100%;
  aspect-ratio: 1024 / 563;
  border-radius: var(--radius-l);
  background: oklch(0.2 0.02 280);
}

.station-static p {
  align-self: center;
  font-family: var(--font-display);
  font-stretch: 70%;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* Ruis en één zender tegelijk alleen met JavaScript; zonder JS staan alle zenders onder elkaar */
.js .station-static {
  display: grid;
}

.js .receiver:not([data-locked]) .station-static {
  opacity: 1;
}

.receiver__stations {
  display: grid;
  gap: var(--space-xl);
}

.js .receiver__stations {
  display: block;
}

/* ---------- Responsief ---------- */

@media (max-width: 980px) {
  .receiver__face {
    grid-template-columns: 1fr;
    grid-template-areas:
      'display'
      'dial'
      'controls';
    padding: var(--space-m);
  }

  .receiver__controls {
    justify-content: center;
  }

  .station,
  .station-static {
    grid-template-columns: 1fr;
    gap: var(--space-m);
  }

  .station-static p {
    display: none;
  }
}

@media (max-width: 640px) {
  .receiver__display {
    grid-template-columns: 1fr auto;
    gap: var(--space-2xs) var(--space-s);
  }

  .receiver__now {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dial {
    --dial-pad: 12px;
  }

  .dial__labels span:nth-child(even) {
    visibility: hidden;
  }

  .knob {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 420px) {
  .receiver__face {
    padding: var(--space-s);
    border-radius: var(--radius-m);
  }

  .receiver__controls {
    gap: var(--space-xs);
  }

  .mix {
    grid-template-columns: auto 1fr;
  }

  .mix__meta {
    grid-column: 2;
  }
}