/* jimreeves.eu — afleveringen-slider/grid, teller, schakelaar, naar-boven-knop (zie js/episodes.js) */
/* Afleveringen-slider (slick) */
.episodes-slider { position: relative; padding: 0 44px; }
.episodes-slider .slick-track { display: flex; }
.episodes-slider .slick-slide { height: auto; display: flex; padding: 0 8px; }
.episodes-slider .slick-slide > div { display: flex; width: 100%; }
.episodes-slider .card { width: 100%; }
.episodes-slider .card-img-top { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #ece9e2; }
.episodes-slider .episodes-arrow { position: absolute; top: 40%; z-index: 5; width: 40px !important; height: 40px !important; border: 0; border-radius: 50%;
  background: #3687ef !important; color: #fff !important; font-size: 1.1rem !important; line-height: 40px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); opacity: 1; }
.episodes-slider .episodes-arrow:hover, .episodes-slider .episodes-arrow:focus { background: #1f6fd6 !important; outline: 0; }
.episodes-slider .episodes-arrow.slick-disabled { opacity: .25; cursor: default; }
.episodes-slider .episodes-arrow.slick-prev { left: 0; }
.episodes-slider .episodes-arrow.slick-next { right: 0; }
.episodes-slider .episodes-arrow:before { content: none !important; }
.episodes-slider .episodes-arrow i { color: #fff; font-size: 1.1rem; }
.js-episodes-counter { color: #6c757d; font-size: .95rem; }
.episodes-tools { margin-top: .75rem; display: flex; justify-content: center; align-items: center; gap: 1rem; }
.view-toggle button { border: 1px solid #ccc; background: #fff; color: #555; width: 36px; height: 32px; cursor: pointer; font-size: .95rem; }
.view-toggle button:first-child { border-radius: 6px 0 0 6px; }
.view-toggle button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.view-toggle button.active { background: #3687ef; border-color: #3687ef; color: #fff; }
.js-playlist.episodes-grid .card-img-top { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #ece9e2; }
#to-top { position: fixed; right: 18px; bottom: 18px; z-index: 9000; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: #3687ef; color: #fff; font-size: 1.1rem; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .25s; }
#to-top.show { opacity: 1; pointer-events: auto; }
#to-top:hover { background: #1f6fd6; }

/* slider-weergave voorlopig uit: schakelaar verbergen */
.view-toggle { display: none; }

/* zoekveld boven het grid */
.episodes-search { display: flex; align-items: center; gap: .5rem; max-width: 520px; margin: 0 auto .6rem; background: #fff; border: 1px solid #ccc; border-radius: 999px; padding: .35rem .6rem .35rem 1rem; }
.episodes-search i { color: #888; }
.episodes-search input { flex: 1 1 auto; border: 0; outline: 0; font: inherit; font-size: 1rem; background: transparent; min-width: 0; }
.episodes-search input::-webkit-search-cancel-button { display: none; }
.episodes-search button { border: 0; background: #eee; color: #555; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; line-height: 1; visibility: hidden; }
.episodes-search.has-text button { visibility: visible; }
.episodes-search button:hover { background: #ff5500; color: #fff; }
.episodes-empty { text-align: center; color: #777; padding: 2rem 0; }

/* sorteerkeuze onder het zoekveld */
.episodes-sort { text-align: center; margin: 0 0 1.25rem; color: #666; font-size: .95rem; }
.episodes-sort label { margin-right: .4rem; }
.episodes-sort select { font: inherit; padding: .3rem .5rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #222; }
/* 'Show my pinned' naast de sorteerkeuze */
.episodes-sort .pins-filter { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 0 1.25rem; cursor: pointer; white-space: nowrap; }
.episodes-sort .pins-filter input { margin: 0; accent-color: #ff5500; width: 16px; height: 16px; cursor: pointer; }
/* alleen zichtbaar voor wie in het logboek is ingelogd (js/nav.js zet hem erbij) */
.episodes-sort .upload-show { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 0 1.25rem;
  padding: .32rem .85rem; border-radius: 999px; background: #ff5500; color: #fff; font-weight: 700;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  vertical-align: middle; white-space: nowrap; }
.episodes-sort .upload-show:hover { background: #e04b00; color: #fff; text-decoration: none; }
@media (max-width: 575px) {
  .episodes-sort .upload-show { display: flex; width: max-content; margin: .75rem auto 0; justify-content: center; }
  /* Op een telefoon staat er een kaart per rij; dan mogen ze wat meer lucht om zich heen. */
  .js-playlist > div[class*="col-"] { padding-left: 1rem; padding-right: 1rem; margin-bottom: 1.4rem !important; }
  .js-playlist .card { border-radius: 10px; }
}
/* hele kaart komt bij hover iets naar voren (licht vergroot, iets omhoog, diepere schaduw) */
.card .card-img-wrap { display: block; overflow: hidden; }
.js-playlist .card, #hero-card .card { transition: transform .25s ease, box-shadow .25s ease; }
.js-playlist .card:hover, #hero-card .card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.22) !important; z-index: 5; }
@media (prefers-reduced-motion: reduce) { .js-playlist .card, #hero-card .card { transition: none; } .js-playlist .card:hover, #hero-card .card:hover { transform: none; } }
/* titel kleurt mee bij hover */
.js-playlist .card .card-body h5, #hero-card .card .card-body h5 { transition: color .25s ease; }
.js-playlist .card:hover .card-body h5, #hero-card .card:hover .card-body h5 { color: #3687ef; }
/* pin-knop rechtsboven op de hoes (linksboven staat het 'now playing'-label): alleen zichtbaar bij hover of als de aflevering gepind is */
.card .ep-pin { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: .95rem; cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; display: flex; align-items: center; justify-content: center; padding: 0; }
.card .ep-pin i { transform: rotate(35deg); }
.card:hover .ep-pin, .card .ep-pin:focus-visible, .card .ep-pin.pinned { opacity: 1; }
.card .ep-pin:hover { background: #333; }
.card .ep-pin.pinned { background: #ff5500; }
.card .ep-pin.pinned i { transform: none; }
.card .ep-pin.pinned:hover { background: #d94800; }
@media (hover: none) { .card .ep-pin { opacity: .75; } }

/* potloodje links boven: alleen zichtbaar voor wie in het logboek is ingelogd (js/nav.js) */
.card .ep-edit { display: none; position: absolute; top: 8px; left: 8px; z-index: 3; width: 34px; height: 34px; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; padding: 0; font-size: .85rem; }
body.ingelogd .card .ep-edit { display: flex; }
.card:hover .ep-edit, .card .ep-edit:focus-visible { opacity: 1; }
.card .ep-edit:hover { background: #2a6cc4; }
@media (hover: none) { body.ingelogd .card .ep-edit { opacity: .75; } }
/* startpagina: precies één rij kaarten (er worden er vier geladen; smallere schermen tonen er minder).
   De kaarten hebben bootstrap's .d-flex met !important, dus hier ook !important gebruiken. */
.episodes-oneline > div:nth-child(n+2) { display: none !important; }
@media (min-width: 768px) { .episodes-oneline > div:nth-child(-n+3) { display: flex !important; } }
@media (min-width: 1200px) { .episodes-oneline > div:nth-child(-n+4) { display: flex !important; } }
.episodes-all { margin: 1.25rem 0 0; }
.episodes-all .btn i { margin-right: .5rem; }

/* knop 'Load more' onder het overzicht */
.episodes-more { text-align: center; margin: .5rem 0 1.5rem; }
.episodes-more button { border: 1px solid #ccc; background: #fff; color: #333; font: inherit; padding: .6rem 1.4rem;
  border-radius: 6px; cursor: pointer; }
.episodes-more button:hover { border-color: #ff5500; color: #ff5500; }

/* likes en afspeelaantal op de kaart */
.card .ep-stats { color: #999; }
.card .ep-stats i { margin: 0 .2rem 0 .6rem; }

/* twee kaarten zonder hoes: de lege vrijdag en de uitzending die eraan komt.
   Ze krijgen een vierkant bovenvlak op de plek van de hoes, zodat ze in het raster
   precies even groot zijn als de gewone kaarten — ook op een telefoon. */
.episode-vlak { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 1rem; overflow: hidden; }

/* vrijdagen waarvan de opname (nog) ontbreekt */
.episode-missing { background: #fbfbfb; border: 1px dashed #d6d2c8; box-shadow: none !important; }
.episode-missing .episode-vlak { background: repeating-linear-gradient(45deg, #f7f6f3, #f7f6f3 10px, #f0eeea 10px, #f0eeea 20px); }
.episode-missing h5 { color: #8b8b8b; font-size: 1.05rem; margin: 0 0 .35rem; }
.episode-missing p { color: #a2a2a2; }
.episode-missing-icon { font-size: 2.6rem; color: #d8d3c8; }

/* kaart voor de uitzending die eraan komt */
.episode-next { border: 1px solid #ffd08a; }
.episode-next .episode-vlak { background: linear-gradient(160deg, #fff3d9 0%, #ffe6b8 100%); color: #8a5a00; }
.episode-next-icon { font-size: 2.6rem; color: #e39a1c; margin-bottom: .6rem; }
.episode-next-nr { font-size: 1.5rem; font-weight: 700; color: #a06400; line-height: 1.2; }
.episode-next-sub { font-size: .95rem; color: #9b7434; }
.episode-next-klok { font-size: 1.35rem; font-weight: 700; color: #ff5500; font-variant-numeric: tabular-nums;
  margin: 0 0 .25rem; letter-spacing: .5px; }
.episode-next-klok.on-air { color: #fff; background: #d33; border-radius: 6px; padding: .2rem .5rem; }
/* het woordje boven de teller; klein en rustig, de cijfers moeten opvallen */
.promo-klok-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8a8579; margin-bottom: -.15rem; }
.promo-klok-label[hidden] { display: none; }
/* De teller in de hero klopt mee met de seconden: even iets groter bij elke tik. */
#hero-card .promo-klok-left { display: inline-block; }
#hero-card .promo-klok-left.tik { animation: tel-klop .9s ease-out; }
@keyframes tel-klop {
  0%   { transform: scale(1); }
  10%  { transform: scale(1.07); }
  45%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { #hero-card .promo-klok-left.tik { animation: none; } }
.episode-next-wanneer { color: #9a8b74; margin: 0 0 .6rem; }
.episode-next-link { color: #ff5500; font-weight: 600; }

/* live meeluisteren met Extra Gold Radio op de kaart van de eerstvolgende uitzending (js/live.js) */
.live { margin-top: auto; }
.live-knop { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: .55rem .9rem; border: 0; border-radius: 999px; background: #ff5500; color: #fff;
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .15s, transform .12s; }
.live-knop:hover { background: #e04b00; }
.live-knop:active { transform: scale(.98); }
.live-knop.aan { background: #1c1c1c; }
.live-knop.aan:hover { background: #333; }
.live-bij { margin-top: .5rem !important; }
.episode-next-feest .live-knop { background: #b97e00; }
.episode-next-feest .live-knop:hover { background: #9a6900; }
.episode-next-feest .live-knop.aan { background: #4a3000; }
.live-nu { color: #6c757d; font-size: .82rem; margin-top: .45rem !important; overflow-wrap: anywhere; }
.live-nu:empty { display: none; }
.live-nu i { margin-right: .3rem; opacity: .65; }
/* de promo bij een mijlpaal: dezelfde vorm als de live-knop, in het goud van het jubileum */
.promo-luister { margin-top: auto; }
.promo-knop { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: .55rem .9rem; border: 0; border-radius: 999px; background: #b97e00; color: #fff;
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .15s, transform .12s; }
.promo-knop:hover { background: #9a6900; }
.promo-knop:active { transform: scale(.98); }
.promo-bij { color: #6c757d; font-size: .82rem; margin-top: .5rem !important; }
/* na de uitzending, zolang de opname er nog niet op staat */
.episode-next-klaar { margin: auto 0; padding: .8rem .6rem; color: #8a6212; font-weight: 700;
  font-size: 1.05rem; line-height: 1.4; }
/* tien minuten voor de uitzending: dezelfde vorm, maar oranje en met een kloppend stipje */
.live-500 { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: .55rem .9rem; border: 0; border-radius: 999px; background: #ff5500; color: #fff;
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .15s, transform .12s;
  box-shadow: 0 0 0 0 rgba(255,85,0,.55); animation: live500-klop 2s ease-out infinite; }
.live-500:hover { background: #e04b00; }
.live-500:active { transform: scale(.98); }
@keyframes live500-klop {
  0% { box-shadow: 0 0 0 0 rgba(255,85,0,.55); }
  70% { box-shadow: 0 0 0 .7rem rgba(255,85,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,85,0,0); }
}
@media (prefers-reduced-motion: reduce) { .live-500 { animation: none; } }

/* losse knop boven de lijst, op de shows zonder kaart voor de volgende uitzending */
.live-los { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin: 0 0 1.1rem; }
.live-los .live-knop { width: auto; padding: .5rem 1.4rem; }
.live-los .live-nu { margin-top: 0 !important; }

/* het ronde getal vieren */
.episode-next-feest { border-color: #e9b949; box-shadow: 0 6px 18px rgba(233,185,73,.35) !important; }
.episode-next-feest .episode-vlak { background: linear-gradient(160deg, #ffeeb6 0%, #ffd978 55%, #ffe9ae 100%); }
.episode-next-feest .episode-next-icon { color: #b97e00; margin-top: .8rem; }
.episode-next-feest .episode-next-nr { color: #7d4f00; font-size: 1.75rem; }
.episode-vlak-hoes { padding: 0; overflow: hidden; }
/* het lint boven de hoes: gewoon een band, niet over het plaatje heen */
.episode-next-lint.boven { position: static; display: block; border-radius: 0; }
.episode-hoes { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.episode-next-lint { position: absolute; top: 0; left: 0; right: 0; padding: .45rem .5rem;
  background: linear-gradient(90deg, #d99a00, #f0c14b, #d99a00); color: #fff; font-size: .78rem;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: center; }
.episode-next-lint i { margin: 0 .45rem; opacity: .85; }

/* --- filteren op artiest (The Crooners) ---------------------------------------------------
   De knop staat in de rij met Sort; het venster komt over de pagina heen. */
.artiest-knop { display: inline-flex; align-items: center; gap: .45rem; margin-right: .9rem;
  padding: .3rem .85rem; border: 1px solid #cfcabb; border-radius: 999px; background: #fff;
  color: #333; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.artiest-knop:hover { border-color: #a9a293; }
.artiest-knop.aan { border-color: #2a6cc4; background: #eaf1fb; color: #1b4c8f; }
.artiest-knop .artiest-aantal { color: #8a8579; font-weight: 400; font-size: .88em; }
.artiest-knop .artiest-weg { margin-left: .15rem; padding: 0 .25rem; border-radius: 50%;
  color: #1b4c8f; font-weight: 700; }
.artiest-knop .artiest-weg:hover { background: rgba(27,76,143,.15); }

.artiestvenster { position: fixed; inset: 0; z-index: 400; background: rgba(20,19,17,.6);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem 2rem; }
.artiestvenster[hidden] { display: none; }
.artiestbak { background: #fff; border-radius: 12px; width: 100%; max-width: 34rem;
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.artiestkop { display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem; background: #2a6cc4; color: #fff; font-size: 1.05rem; }
.artiestkop button { border: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 1.2rem;
  line-height: 1; border-radius: 6px; padding: .15rem .6rem .3rem; cursor: pointer; }
.artiestkop button:hover { background: rgba(255,255,255,.34); }
.artiestzoekbalk { display: flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem;
  border-bottom: 1px solid #e9e6de; color: #8a8579; }
.artiestzoekbalk input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 1rem;
  color: #222; background: transparent; }
.artiestlijst { overflow-y: auto; padding: .4rem 0; }
.artiest-naam { display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .5rem 1.1rem; border: 0; background: none; font: inherit; text-align: left;
  color: #222; cursor: pointer; }
.artiest-naam:hover { background: #f4f2ec; }
.artiest-naam.aan { background: #eaf1fb; color: #1b4c8f; font-weight: 600; }
.artiest-naam .hoeveel { color: #8a8579; font-size: .88em; }
.artiest-leeg { padding: 1rem 1.1rem; color: #777; margin: 0; }
.artiestvoet { padding: .7rem 1.1rem; border-top: 1px solid #e9e6de; }
.artiestvoet button { border: 0; border-radius: 6px; background: #e6e3dc; color: #333;
  font: inherit; font-weight: 600; padding: .45rem 1rem; cursor: pointer; }
.artiestvoet button:hover { background: #dcd8cd; }
@media (max-width: 575px) {
  .artiest-knop { margin: 0 0 .5rem; }
  .artiestvenster { padding: 3vh .7rem 1rem; }
}

/* Blok boven de zoekbalk dat laat zien dat je op artiest kunt filteren */
.artiestbalk { max-width: 52rem; margin: 0 auto 1.1rem; padding: .9rem 1.1rem 1rem;
  background: #fff; border: 1px solid #e6e2d8; border-radius: 12px; }
.artiestbalk-kop { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .7rem; }
.artiestbalk-kop strong { font-size: 1.05rem; }
.artiestbalk-kop span { color: #8a8579; font-size: .9rem; }
.artiestbalk-namen { display: flex; flex-wrap: wrap; gap: .4rem; }
.artiest-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem;
  border: 1px solid #ddd8cc; border-radius: 999px; background: #faf9f6; color: #333;
  font: inherit; font-size: .92rem; cursor: pointer; }
.artiest-chip:hover { border-color: #b9b2a0; background: #fff; }
.artiest-chip .hoeveel { color: #a29b8c; font-size: .85em; }
.artiest-chip.aan { border-color: #2a6cc4; background: #2a6cc4; color: #fff; }
.artiest-chip.aan .hoeveel { color: rgba(255,255,255,.75); }
.artiest-chip.meer { border-style: dashed; color: #2a6cc4; font-weight: 600; background: #fff; }
.artiest-chip.meer:hover { border-color: #2a6cc4; background: #eaf1fb; }
@media (max-width: 575px) {
  .artiestbalk { margin-left: .2rem; margin-right: .2rem; padding: .75rem .85rem .85rem; }
  .artiestbalk-namen { gap: .35rem; }
  .artiest-chip { font-size: .88rem; padding: .28rem .65rem; }
}

/* --- lichtkrant onder de banner -------------------------------------------------------------
   Jaren-zestig lichtkrant: oranje lampjes op zwart. Het fijne raster over de balk maakt van de
   letters losse lampjes; de gloed eromheen doet de rest. Stilzetten door hem aan te wijzen. */
.lichtkrant { position: relative; overflow: hidden; background: #0b0907;
  border-top: 3px solid #241c12; border-bottom: 3px solid #241c12;
  box-shadow: inset 0 0 40px rgba(0,0,0,.9);
  /* 🔴 De breedte moet hier vastgezet worden, anders groeit de balk mee met de rij namen.
     `overflow: hidden` snijdt alleen af wat búiten het element valt; is het element zélf te breed,
     dan helpt het niets. In Elementor staat de lichtkrant in een flex-container, en daar wordt
     `width: auto` gelezen als max-content: op countrystarmeeting.com (2052 namen) werd de balk
     456412px breed en kon de hele pagina op een telefoon naar rechts schuiven. In een
     flex-container is `min-width: 0` daarbij onmisbaar — zonder dat blijft de kleinste maat
     max-content. Gemeten 22-10-2026: 456412px -> 390px, en de namen lopen nog gewoon. */
  width: 100%; max-width: 100%; min-width: 0; }
.lichtkrant-spoor { display: flex; align-items: center; gap: .9rem; width: max-content;
  padding: .55rem 0; animation: lichtkrant-loop 90s linear 3.5s infinite; }
/* Stilzetten gebeurt op .krant-vlak: dat is precies zo hoog als de rij. Zat het op de balk zelf,
   dan stopte hij ook al als de muis in de ruimte eronder stond. */
.krant-vlak:hover .lichtkrant-spoor, .krant-vlak:focus-within .lichtkrant-spoor,
.krant-vlak:hover .makers-spoor,     .krant-vlak:focus-within .makers-spoor { animation-play-state: paused; }
/* Hij staat eerst een paar tellen stil en loopt daarna meteen op snelheid. Er zat een trage
   aanloop in over de eerste 8 procent van de ronde, maar dat percentage rekent over de hele
   lijst: bij Country Star Meeting (duizend artiesten) duurde dat ruim drie minuten op halve
   snelheid. Aan het eind van de rij zit een gat, zodat te zien is dat hij opnieuw begint.
   (Rolf 24-9-2026: "het start traag op, dat is het probleem".) */
@keyframes lichtkrant-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Het teken aan het eind van de rij: hieraan zie je dat de lijst opnieuw begint. Feller en
   wijder uit elkaar dan de sterretjes tussen de namen, zodat het als scheiding leest. */
.krant-eind { flex: 0 0 auto; padding: 0 .8rem; letter-spacing: .4em; white-space: nowrap; }
.lichtkrant .krant-eind { color: #ffd089; font-size: .95rem;
  text-shadow: 0 0 8px rgba(255,170,40,.9), 0 0 20px rgba(255,120,0,.6); }
/* Twee omhulsels om de rij heen. .krant-vlak staat stil en is precies zo hoog als de rij: dat is
   wat de muis voelt. .krant-schuif schuift bij aanwijzen een stukje op, zodat de naam die links
   half wegvalt alsnog te lezen is (js/krantsnap.js). */
.krant-vlak { overflow: hidden; width: 100%; max-width: 100%; min-width: 0; }
.krant-schuif { transform: translateX(var(--snap, 0px)); transition: transform .45s cubic-bezier(.2,.7,.3,1); }

.lichtkrant-naam { border: 0; background: none; padding: 0 .15rem; cursor: pointer;
  font-family: "Courier New", Consolas, monospace; font-weight: 700; font-size: 1.05rem;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: #ffa62b; text-shadow: 0 0 6px rgba(255,150,20,.85), 0 0 18px rgba(255,110,0,.45); }
.lichtkrant-naam:hover, .lichtkrant-naam:focus-visible {
  color: #fff0c8; text-shadow: 0 0 8px #ffbe45, 0 0 22px rgba(255,150,20,.8); outline: 0; }
.lichtkrant-ster { color: #b4641a; font-size: .8rem; text-shadow: 0 0 6px rgba(255,120,0,.5); }

/* het lampjesraster en de donkere randen links en rechts */
.lichtkrant::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.55) 0 1px, transparent 1px 3px); }
.lichtkrant::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(90deg, #0b0907 0, rgba(11,9,7,0) 7%, rgba(11,9,7,0) 93%, #0b0907 100%); }

@media (prefers-reduced-motion: reduce) {
  .lichtkrant { overflow-x: auto; }
  .lichtkrant-spoor { animation: none; }
}
@media (max-width: 575px) {
  .lichtkrant-naam { font-size: .92rem; letter-spacing: .1em; }
}

/* --- eigen playlists ---------------------------------------------------------------------------
   Country Star Meeting heeft (nog) geen opnamen op SoundCloud, maar de liedjes van 435 uitzendingen
   staan wel in site/playlists/. Elke kaart krijgt daarom een knop naar zijn eigen playlist, en de
   index boven de kaarten kan op artiest én op liedje. (Rolf 24-9-2026, ticket 48.) */
.ep-songs { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 .55rem; padding: .18rem .65rem .22rem; border: 1px solid #e0dcd2; border-radius: 999px;
  background: #f7f6f3; color: #2a6cc4; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.ep-songs:hover { border-color: #2a6cc4; background: #eaf1fb; }
.ep-songs i { font-size: .78em; }
.episode-missing .ep-songs { align-self: center; }
.ep-geenlijst { color: #a2a2a2; font-style: italic; }
/* een uitzending zonder opname maar mét een vaste hoes ziet eruit als een gewone kaart */
.episode-missing.episode-hoesje { background: #fff; border: 1px solid #ece9e2; }
.episode-missing.episode-hoesje h5 { color: #333; }

.venstertabs { display: inline-flex; gap: .2rem; padding: .15rem; border-radius: 8px;
  background: rgba(255,255,255,.18); }
.venstertabs button { border: 0; border-radius: 6px; background: transparent; color: #fff;
  font: inherit; font-size: .95rem; font-weight: 600; padding: .25rem .9rem .3rem; cursor: pointer; }
.venstertabs button:hover { background: rgba(255,255,255,.22); }
.venstertabs button.aan, .venstertabs button.aan:hover { background: #fff; color: #1b4c8f; }
.lied-naam .wie { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.lied-naam .wie b { font-weight: 600; }
.lied-naam .wie em { font-style: normal; color: #8a8579; font-size: .88em; }

.liedvenster .artiestbak { max-width: 38rem; }
.showlijst { overflow-y: auto; padding: .5rem 0 .9rem; }
.lied-rubriek { margin: 1rem 0 .35rem; padding: 0 1.1rem; color: #b33d00; font-size: .8rem;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lied-rubriek:first-child { margin-top: .3rem; }
.lied-regel { display: flex; align-items: baseline; gap: .75rem; padding: .3rem 1.1rem; }
.lied-nr { flex: 0 0 1.6rem; text-align: right; color: #b0aa9c; font-size: .85rem;
  font-variant-numeric: tabular-nums; }
.lied-wat { flex: 1; min-width: 0; }
.lied-wat b { display: block; font-weight: 600; color: #222; }
.lied-wat em { display: block; font-style: normal; color: #8a8579; font-size: .9em; }
.lied-notering { flex: 0 0 auto; color: #b33d00; font-size: .8rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* Wat er in een aflevering te horen is (ingevuld bij het uploaden). Twee regels, daarna afgekapt,
   zodat alle kaarten even hoog blijven. (Fred, ticket 22 — hij zag zijn tekst nergens terug.) */
.episode-tekst { margin: -.2rem 0 .6rem; color: #6c757d; font-size: .86rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.elvis-dark .episode-tekst { color: #b9b4ab; }

/* --- de kaart van de laatste uitzending over de band ------------------------------------------
   Elke showpagina heeft bovenaan een band met de banner. Daarover kan de kaart van de nieuwste
   uitzending staan, links of rechts, of helemaal niet. Welke het is staat in data-kaart op de
   band zelf; het beheer zet dat om (Websites -> de banner). js/episodes.js vult #hero-card.
   (Rolf 26-9-2026.) */
/* De wrapper is precies zo breed als de banner zelf; die maat staat per pagina, want elke show
   heeft een andere bannerverhouding. Zonder dat zou de kaart naast de banner kunnen landen. */
.show-band .band-binnen { position: relative; max-width: 100%; margin: 0 auto; }
.show-band .band-binnen > .show-banner { display: block; width: 100%; height: auto; }
.show-band[data-kaart="niet"] #hero-card { display: none; }
.show-band[data-kaart="links"] #hero-card,
.show-band[data-kaart="rechts"] #hero-card {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26%; min-width: 170px; max-width: 290px; z-index: 2; }
.show-band[data-kaart="links"]  #hero-card { left: 3.5%; }
.show-band[data-kaart="rechts"] #hero-card { right: 3.5%; }
.show-band #hero-card .card-img-top { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #ece9e2; }
/* De kaart leunt tegen de band aan: een paar graden scheef met de slagschaduw dezelfde kant op.
   Bij het laden wordt hij neergezet. !important moet hier, want zolang er nog geen opname is
   draagt de kaart .episode-missing en die zet box-shadow op none !important. */
.show-band[data-kaart="links"] #hero-card .card,
.show-band[data-kaart="rechts"] #hero-card .card {
  transform: rotate(-3deg);
  box-shadow: 14px 22px 34px rgba(0,0,0,.62), 0 2px 6px rgba(0,0,0,.4) !important;
  transition: transform .35s cubic-bezier(.22,.9,.3,1.1), box-shadow .35s ease;
  animation: hero-kaart-neer 1s cubic-bezier(.22,.9,.3,1.15) both; }
@keyframes hero-kaart-neer {
  0%   { opacity: 0; transform: translateY(-34px) rotate(0deg) scale(.97); }
  62%  { opacity: 1; transform: translateY(6px) rotate(-4.6deg) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }
}
.show-band[data-kaart="links"] #hero-card .card:hover,
.show-band[data-kaart="rechts"] #hero-card .card:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow: 10px 26px 40px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.4) !important; }
/* Op een telefoon is er naast de band geen plek: dan zakt de kaart eronder. */
@media (max-width: 767px) {
  .show-band[data-kaart="links"] #hero-card,
  .show-band[data-kaart="rechts"] #hero-card {
    position: static; transform: none; width: 100%; max-width: 320px; margin: 1.1rem auto 0; }
  .show-band[data-kaart="links"], .show-band[data-kaart="rechts"] { padding-bottom: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .show-band #hero-card .card { animation: none; transition: none; }
}

/* Het hartje op de kaart is een knop geworden: liken kan alleen op SoundCloud zelf, en het venster
   erachter legt dat uit. Het ziet eruit als de tekst eromheen, tot je het aanwijst.
   (Rolf 28-9-2026, ticket 18.) */
.card .ep-stats .ep-like { border: 0; background: none; padding: 0; margin: 0; font: inherit;
  color: inherit; line-height: inherit; cursor: pointer; }
.card .ep-stats .ep-like:hover, .card .ep-stats .ep-like:focus-visible { color: #ff5500; outline: 0; }

.likevenster .artiestbak { max-width: 26rem; }
.likevenster .artiestkop { background: #ff5500; }
/* twee klassen diep, anders kleurt .elvis-dark p de tekst in dit witte venster lichtgrijs */
.likevenster .likebody { padding: 1rem 1.1rem .2rem; }
.likevenster .likebody p { margin: 0 0 .85rem; line-height: 1.55; color: #333; font-size: .95rem; }
.likevenster .likevoet { display: flex; align-items: center; gap: .6rem; }
.likevenster .likeknop { display: inline-flex; align-items: center; gap: .45rem; border-radius: 6px;
  background: #ff5500; color: #fff; font-weight: 600; padding: .45rem 1rem; text-decoration: none; }
.likevenster .likeknop:hover, .likevenster .likeknop:focus-visible { filter: brightness(1.1);
  color: #fff; text-decoration: none; }

/* Het shownummer onder de afbeelding van de aankomende uitzending: vult een eigen beeld het vak,
   dan is daar geen plek meer voor "Show N" en komt die regel in de kaart zelf. (Ticket 112.) */
.episode-next-nr.onder { display: block; font-size: 1.25rem; margin: .1rem 0 .4rem; }

/* ===========================================================================
   De band met uitzendingen op de volle breedte van het scherm (Rolf 22-10-2026:
   "kun je op alle websites de uitzendingen grid full width maken … Wel gewoon 4
   per rij, maar in een full width container").

   Elementor zet onze widget in een `e-con-boxed`-container; die houdt de inhoud
   op 1140px. Gemeten op 22-10-2026, venster 1920px: grid 1170px, kaart 293px.
   Hierna: grid 1902px, kaart 476px, nog steeds 4 per rij (col-xl-3 rekent in
   percentages, dus het aantal per rij verandert niet).

   Waarom hier en niet in Elementor: op The Velvet Voice en Country Star Meeting
   staan in dezelfde container ook andere blokken. Die container op "full width"
   zetten zou die buren meeslepen; zo blijven ze op 1140px staan.

   🔴 `scrollbar-gutter: stable` hoort bij deze truc. 100vw is de breedte van het
   venster *inclusief* een klassieke schuifbalk (Windows: ~15px). Zonder die regel
   wordt de band dus 15px te breed en krijgt de pagina een horizontale schuifbalk.
   Met de gutter is er altijd ruimte voor de balk gereserveerd en klopt 100vw.
   Op de Mac zijn schuifbalken zwevend (0px) en valt het verschil niet op.
   =========================================================================== */
html { scrollbar-gutter: stable; }

/* De ruimte links en rechts is het dubbele van de ruimte tussen de hoesjes (Rolf
   22-10-2026, bericht 3136: "Kun je de spacing die nu tussen de hoesjes zit dubbel
   toepassen aan de linker en rechter kant?"). Gemeten tussen twee hoesjes: 30px —
   de gutter van het raster, 15px per kolom. Dubbel is dus 60px.

   🔴 Er staat 67px en niet 60px, en dat is met opzet. De band is 100vw breed, maar
   de pagina is door `scrollbar-gutter: stable` 15px smaller (gemeten: pagina 1905px
   in een venster van 1920px). De band steekt dus 7,5px aan elke kant buiten de
   pagina, en die 7,5px moet er bovenop om op 60px uit te komen. Nagemeten met de
   paginarand als maatstaf: links 60px, rechts 59px. Op een Mac, waar schuifbalken
   zweven en de gutter 0 is, wordt het 67px — zeven pixels ruimer, niet te zien. */
.jr-band.js-episodes {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 67px;
  padding-right: 67px;
}

/* Op een tablet staan er drie hoesjes per rij (col-md-4) en is 60px aan weerskanten
   te veel van de breedte; daar blijft het bij de helft. */
@media (max-width: 991px) {
  .jr-band.js-episodes { padding-left: 32px; padding-right: 32px; }
}

/* Op een telefoon staat er één hoesje per rij, dus is er geen ruimte tússen de
   hoesjes om te verdubbelen. Daar alleen genoeg marge om niet tegen de rand te kleven. */
@media (max-width: 575px) {
  .jr-band.js-episodes { padding-left: 14px; padding-right: 14px; }
}