/* 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; }
#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; }
#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; }
}
/* hele kaart komt bij hover iets naar voren (licht vergroot, iets omhoog, diepere schaduw) */
.card .card-img-wrap { display: block; overflow: hidden; }
#playlist .card, #hero-card .card { transition: transform .25s ease, box-shadow .25s ease; }
#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) { #playlist .card, #hero-card .card { transition: none; } #playlist .card:hover, #hero-card .card:hover { transform: none; } }
/* titel kleurt mee bij hover */
#playlist .card .card-body h5, #hero-card .card .card-body h5 { transition: color .25s ease; }
#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; }
.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; }
/* 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-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; }