@font-face{
  font-family:'hotradiobold';
  src:url('/webfont/hotradio-bold.eot');
  src:url('/webfont/hotradio-bold.eot?#iefix') format('embedded-opentype'),
      url('/webfont/hotradio-bold.woff2') format('woff2'),
      url('/webfont/hotradio-bold.woff') format('woff'),
      url('/webfont/hotradio-bold.ttf') format('truetype'),
      url('/webfont/hotradio-bold.svg#hotradio-bold') format('svg');
  font-weight:bold;
  font-style:normal;
}

:root{
  --font:'Open Sans', sans-serif;
  --hot-font:'hotradiobold','Open Sans', sans-serif;

  --bg:#3c0000;
  --panel:#be202b;
  --panel-strong:#be202bdd;
  --text-color:#ffffff;
  --muted:#9aa5b1;
  --accent:#7aa2ff;

  --radius:0.5rem;
  --gap:2rem;
  --gapmobile:1rem;

  --tile-border:2px solid rgba(0,0,0,.08);
  --tile-hover:rgba(0,0,0,.16);

  --shadow-lg:0 40px 120px rgba(0,0,0,.7);
  --edgeMarginFactor:0.05;

  --spacer-0:0;
  --spacer-1:0.25rem;
  --spacer-2:0.5rem;
  --spacer-3:1rem;
  --spacer-4:1.5rem;
  --spacer-5:3rem;
  --spacer-6:4rem;
}

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

html,body{ height:100%; }

body{
  margin:0;
  width:100%;
  min-height:100vh;

  /* OPTIE A: laat pagina scrollen (cruciaal voor 150% zoom) */
  overflow-x:hidden;
  overflow-y:auto;

  background-color:var(--bg);
  background-image:url('img/bg-body-01.jpg');
  background-size:cover;
  background-position:center center;

  color:var(--text-color);
  font-family:var(--font);
  font-optical-sizing:auto;
  font-weight:400;
  font-style:normal;
  font-variation-settings:"wdth" 100;
  font-size:1rem;
}

.content-padding a{ color:#fff; }

.blockquote{
  padding:20px 30px;
  margin-bottom:40px;
  border-left:1px #fff solid;
}
.blockquote p{
  font-style:italic;
  font-size:1.4rem;
}

/* Headings: stabiel bij zoom (geen clamp op line-height) */
h1,h2,h3,h4{ font-family:var(--font); }

h1,h2{
  font-family:var(--hot-font);
  font-size:clamp(1.9rem, 3.2vw, 3.4rem);
  letter-spacing:0.05rem;
  text-transform:uppercase;
  line-height:1.08;              /* FIX: geen "omgekeerde" clamp */
  margin-bottom:var(--spacer-4);
}

h3.djh{
  font-family:var(--hot-font);
  font-size:clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing:0.05rem;
  text-transform:uppercase;
  line-height:1.12;
}

p{
  font-size:1rem;
  line-height:1.6rem;
  margin-bottom:var(--spacer-3);
}

img{
  width:auto;
  height:100%;
  max-height:160px;
  object-position:left center;
  object-fit:contain;
  display:block;
  margin-bottom:var(--spacer-4);
}

/* tracks */
.tracks{
  gap:var(--spacer-2);
  max-height:300px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.tracks::-webkit-scrollbar{ display:none; }

.track{
  position:relative;
  opacity:0.5;
  background:rgba(0,0,0,0.5);
  border-radius:var(--radius);
  padding:var(--spacer-2) var(--spacer-3);
  margin-bottom:var(--spacer-2);
}
.track.now{ opacity:1; }
.track.now::after{
  content:"NU ON AIR";
  position:absolute;
  bottom:0.75rem;
  right:0.75rem;
  background:#fff;
  color:var(--panel);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:0.25rem 0.5rem;
  border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  pointer-events:none;
}
.tracks .title{
  font-family:var(--hot-font);
  font-size:1.5rem;
  text-transform:uppercase;
}
.tracks .artist{
  font-style:italic;
  font-size:0.9rem;
  opacity:0.7;
}

/* programs/djs */
.programs{ gap:var(--spacer-2); }
.program{
  position:relative;
  background:rgba(0,0,0,0.5);
  border-radius:var(--radius);
  padding:var(--spacer-2) var(--spacer-3);
  margin-bottom:var(--spacer-2);
}
.program.now{ opacity:1; }
.programs .title{
  font-family:var(--hot-font);
  font-size:1.5rem;
  text-transform:uppercase;
}
.programs .time{
  font-style:italic;
  font-size:0.9rem;
}
.programs .subtitle{ font-size:0.8rem; }

.djs{ gap:var(--spacer-2); }
.djs .dj{
  position:relative;
  background:rgba(0,0,0,0.5);
  border-radius:var(--radius);
  padding:var(--spacer-4);
  margin-bottom:var(--spacer-2);
}

/* icons */
.icon{
  background-repeat:no-repeat;
  background-size:40px 40px;
  background-position:left center;
  padding-left:50px;

  /* nieuw: voorkom afsnijden */
  display:flex;
  align-items:center;
  min-height:40px;        /* minstens zo hoog als het icoon */
  padding-top:0.15em;     /* extra ademruimte boven/onder */
  padding-bottom:0.15em;
}


.icon.socials{ background-image:url('img/icon-socials.svg'); }
.icon.webcam{ background-image:url('img/icon-webcam.svg'); }
.icon.microfoon{ background-image:url('img/icon-microfoon.svg'); }
.icon.play{ background-image:url('img/icon-play.svg'); }
.icon.megafoon{ background-image:url('img/icon-megafoon.svg'); }
.icon.potlood{ background-image:url('img/icon-potlood.svg'); }
.icon.locatie{ background-image:url('img/icon-locatie.svg'); }
.icon.kalender{ background-image:url('img/icon-kalender.svg'); }

/* buttons */
.btn{
  margin-top:auto;
  align-self:stretch;

  background-position:left 15px center, center center;
  background-repeat:no-repeat, repeat;
  background-size:32px 32px, 100% 100%;

  border-radius:calc(var(--radius) / 2);
  font-size:clamp(1rem, 2vw, 1.2rem);
  font-weight:bold;
  padding:var(--spacer-3) var(--spacer-4) var(--spacer-3) 55px;

  color:var(--text-color);
  transition:transform .25s ease-in-out, filter .25s ease-in-out;
}
.btn:hover{ transform:scale(1.03); }

.btn.socials{ background-image:url('img/icon-socials.svg'),linear-gradient(180deg,rgba(255,32,43,1),rgba(190,32,43,0.5)); }
.btn.webcam{ background-image:url('img/icon-webcam.svg'),linear-gradient(180deg,rgba(255,32,43,1),rgba(190,32,43,0.5)); }
.btn.microfoon{ background-image:url('img/icon-microfoon.svg'),linear-gradient(180deg,rgba(255,32,43,1),rgba(190,32,43,0.5)); }
.btn.play{ background-image:url('img/icon-play.svg'),linear-gradient(180deg,rgba(255,32,43,1),rgba(190,32,43,0.5)); }
.btn.megafoon{ background-image:url('img/icon-megafoon.svg'),linear-gradient(180deg,rgba(255,32,43,1),rgba(190,32,43,0.5)); }
.btn.potlood{ background-image:url('img/icon-potlood.svg'),linear-gradient(180deg,rgba(255,32,43,1),rgba(190,32,43,0.5)); }
.btn.locatie{ background-image:url('img/icon-locatie.svg'),linear-gradient(180deg,rgba(255,32,43,1),rgba(190,32,43,0.5)); }
.btn.kalender{ background-image:url('img/icon-kalender.svg'),linear-gradient(180deg,rgba(255,32,43,1),rgba(190,32,43,0.5)); }

/* ===== GRID (OPTIE A FIX) ===== */
.grid{
  /* FIX: niet fixed -> reflow bij zoom */
  position:relative;
  inset:auto;

  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));

  /* FIX: geen vaste 1fr-rijhoogtes -> tiles mogen groeien */
  grid-auto-rows:auto;

  gap:var(--gap);
  padding:var(--gap);

  min-height:100vh;
  align-content:start;
}

.grid .tile{
  transition:all .5s ease-in-out;
}

.tile{
  position:relative;
  padding:3rem;

  /* tiles mogen groter worden; voorkom overlap naar buiten */
  overflow:hidden;

  user-select:none;
  cursor:pointer;
  border-radius:var(--radius);

  background-image:linear-gradient(180deg,rgba(190,32,43,1),rgba(165,28,37,0.5), rgba(0,0,0,0.6));

  display:flex;
  flex-direction:column;

  /* voorkomt onnodig kleine tegels */
  min-height:200px;
}

.tile:where(:hover,:focus-visible){
  border-color:var(--tile-hover);
}

.tile.no-zoom{ cursor:default; }
.tile.no-zoom:hover{ transform:none; }
.tile.is-hidden{ opacity:0; visibility:hidden; }

/* logo blocks */
.logo-block{
  width: min(100%, 450px); 
  min-height:240px;
  flex-direction:column;
  user-select:none;
  background-image:url('img/logo-hotradio.svg');
  background-position:center center;
  background-size:80% 80%;
  background-repeat:no-repeat;
  background-color:#ffffff;
  border-radius:var(--radius);
  text-indent:-99999rem;
  margin-bottom:var(--spacer-4);
}
@media (min-width: 75em){
  .grid .tile.logo,
  .grid .logo-block{
    min-height: 220px;              /* of wat jij prettig vindt */
  }
}

.logo{
  background-image:url('img/logo-hotradio.svg');
  background-position:center center;
  background-size:75% 75%;
  background-repeat:no-repeat;
  text-indent:-99999rem;
  background-color:#ffffff;
}
.logo-fixed{
  position:fixed;
  z-index:2000;
  transition:none !important;
}
.tile.placeholder{
  background:transparent;
  border:none;
  box-shadow:none;
  pointer-events:none;
}

/* zoom overlay blijft wél fixed */
.zoom-layer{
  position:fixed;
  left:0; top:0;
  width:0; height:0;
  z-index:500;
  backdrop-filter:blur(8px);
  pointer-events:auto;
  will-change:transform;
  border-radius:var(--radius);
  background-image:linear-gradient(180deg,rgba(190,32,43,0.8),rgba(165,28,37,0.8), rgba(0,0,0,0.9));
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  overflow:clip;
}
.zoom-inner{
  padding:var(--spacer-5);
  width:100%;
  height:100%;
  color:var(--text-color);
  background-image:
    radial-gradient(85% 85% at 30% 20%, rgba(0,0,0,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}
.zoom-close{
  position:absolute;
  top:10px; right:10px;
  width:36px; height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:none;
  border:none;
  color:var(--text-color);
  font-size:2rem;
  line-height:1rem;
  text-decoration:none;
  cursor:pointer;
}
.tile:focus-visible, .zoom-close:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 70%, white);
  outline-offset:3px;
}

/* player */
.nowplaying{ opacity:0.8; margin-bottom:16px; }
.controls{
  display:grid;
  grid-template-columns:75px 1fr;
  align-items:center;
  gap:20px;
}
.play-btn{
  width:75px;
  height:75px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:radial-gradient(circle at top, rgba(190,32,43,1),rgba(190,32,43,0.1));
  box-shadow:0 8px 20px rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.play-btn:hover{
  transform:scale(1.05);
  box-shadow:0 12px 26px rgba(0,0,0,0.6);
}
.play-btn svg{
  width:50px;
  height:50px;
  fill:#ffffff;
}
input[type="range"]{ width:100%; background:transparent; }
.slider{
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
}
.slider::-webkit-slider-runnable-track{
  height:8px;
  background:var(--bg);
  border-radius:999px;
}
.slider::-moz-range-track{
  height:8px;
  background:var(--bg);
  border-radius:999px;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  margin-top:calc((6px - 18px) / 2);
  width:18px;
  height:18px;
  border-radius:50%;
  background:#ef4444;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.slider::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#ef4444;
  border:1px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.slider:focus-visible{ outline:none; }
.slider:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(59,130,246,.35), 0 2px 8px rgba(0,0,0,.15);
}
.slider:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 4px rgba(59,130,246,.35), 0 2px 8px rgba(0,0,0,.15);
}

/* whatsapp */
.wa-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  background-image:url('img/icon-whatsapp.svg');
  background-repeat:no-repeat;
  background-size:32px 32px;
  background-position:center center;
  background-color:#25D366;
  display:grid;
  place-items:center;
  z-index:9999;
  text-decoration:none;
}
.wa-fab:focus{
  outline:3px solid rgba(37,211,102,.35);
  outline-offset:3px;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .grid .tile{ transition:none; }
  .btn{ transition:none; }
}

/* ===== responsive (em zodat zoom ook “meebreekt”) ===== */
@media (max-width: 75em){ /* ~1200px */
  .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:auto;
    gap:var(--gapmobile);
    padding:var(--gapmobile);
    min-height:auto;
  }
}

@media (max-width: 48em){ /* ~768px */
  .grid{
    grid-template-columns:1fr;
    gap:var(--gapmobile);
    padding:var(--gapmobile);
    min-height:auto;
  }
  .tile{ padding:1.25rem; }
  .logo{ min-height:200px; }
  .logo-block{ margin-bottom:var(--spacer-6); }
  :root{ --edgeMarginFactor:0.025; }
  .zoom-inner{ padding:var(--spacer-4); }
  .tracks.max{ max-height:800px; }
}

@media (max-width: 24em){ /* ~384px */
  :root{ --edgeMarginFactor:0.015; }
}
@media (max-width: 48em){
  h1.icon, h2.icon{
    min-height:40px;
    padding-top:0.2em;
    padding-bottom:0.2em;
    line-height:1.15;
  }
}