/* Comedians: radial cards slider, styled with the Bekifft tokens (site.css). */
.comedians-section { background-color: var(--bk-bg); overflow: clip; display: flex; padding-bottom: clamp(0px, calc((100vw - 1400px) * 0.35), 480px); width: 100vw; margin-left: calc(50% - 50vw); } /* full-bleed: breaks out of the centered page column */

.radial-gsap-slider { gap: 5em; flex-flow: column; justify-content: center; align-items: center; width: 100%; padding-top: 3em; display: flex; position: relative; font-size: 16px; }
[data-radial-slider-init] { --slider-rotate: 12deg; --slider-radius: 560%; } /* flatter arc than the demo (18deg / 375%), same card spacing, so wide screens don't drop cards below the section */

.radial-gsap-slider__collection { max-width: 100%; position: relative; }
.radial-gsap-slider__list { -webkit-user-select: none; user-select: none; will-change: transform; touch-action: pan-y; backface-visibility: hidden; justify-content: center; align-items: center; max-width: 100%; display: flex; position: relative; }
[data-radial-slider-list] > :first-child { position: relative; }
.radial-gsap-slider__list { z-index: 2; } /* above the invisible drag proxy so card buttons are clickable (cards are drag triggers themselves) */
.radial-gsap-slider__item { transform-origin: 50% var(--slider-radius); flex: none; position: absolute; width: 17em; } /* width added: card width comes from the item */
[data-radial-slider-drag-status="grab"] { cursor: grab; }
[data-radial-slider-drag-status="grabbing"] { cursor: grabbing; }

@media screen and (max-width: 767px) {
  [data-radial-slider-init] { --slider-rotate: 12deg; --slider-radius: 475%; }
  .radial-gsap-slider__item { width: 13em; }
}

/* Card */
.comedian-card { color: var(--bk-brown-800); text-align: center; background-color: var(--bk-cream-100); border-radius: var(--bk-radius-md); flex-flow: column; align-items: flex-start; width: 100%; padding: .625em .625em 0; display: flex; }
.comedian-card__media { aspect-ratio: 8 / 9; border-radius: var(--bk-radius-sm); width: 100%; position: relative; background: var(--bk-brown-600); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.radial-gsap-slider .cover-image { object-fit: cover; border-radius: inherit; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.comedian-card__initials { font-family: var(--bk-font-display); font-size: 5em; line-height: var(--bk-lh-none); color: var(--bk-orange-300); }
.comedian-card--mystery .comedian-card__media { background: var(--bk-black); }
.comedian-card--sponsor .comedian-card__initials { color: var(--bk-brown-800); }
.comedian-card--mystery .comedian-card__initials { color: var(--bk-accent); }
.comedian-card--sponsor .comedian-card__media { background: var(--bk-orange-100); }
.comedian-card__info { flex-flow: column; justify-content: center; align-items: center; gap: .5em; width: 100%; min-height: 8.5em; padding: .625em; display: flex; }
.comedian-card__h { margin: 0; width: 100%; text-align: center; font-family: var(--bk-font-display); font-size: 1.375em; font-weight: 400; line-height: var(--bk-lh-tight); }
.comedian-card__btn { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: .75em 1.5em; border-radius: var(--bk-radius-pill); background: var(--bk-accent); color: var(--bk-on-accent); font-size: 1.0625em; font-weight: 800; line-height: 1.2; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comedian-card__btn:hover { background: var(--bk-orange-400); color: var(--bk-on-accent); }
.comedian-card__btn:focus-visible { outline: 3px solid var(--bk-brown-800); outline-offset: 2px; }

/* Controls */
.radial-gsap-slider__controls { gap: 1em; justify-content: center; align-items: center; padding: 3em; display: flex; position: relative; }
.radial-gsap-slider__control-btn { z-index: 1; color: var(--bk-cream-100); cursor: pointer; background-color: var(--bk-brown-900); border-radius: var(--bk-radius-pill); height: 3em; padding: 0 1.5em; font: inherit; font-size: 1em; font-weight: 800; position: relative; border: none; }
.radial-gsap-slider__control-btn.is--next { color: var(--bk-on-accent); background-color: var(--bk-accent); }
.radial-gsap-slider__dots { justify-content: center; align-items: center; display: flex; }
.radial-gsap-slider__control-dot { z-index: 1; color: var(--bk-brown-500); cursor: pointer; background-color: currentColor; border: .1875em solid var(--bk-brown-700); border-radius: 50em; width: .875em; height: .875em; padding: 0; font-size: 1em; transition: color .1s ease; position: relative; overflow: hidden; box-shadow: none; }
.radial-gsap-slider__control-dot[data-radial-slider-control-status="active"] { color: var(--bk-orange-500); }
.comedian-card__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; user-select: none; -webkit-user-drag: none; }

.comedian-card__sub { margin: 0; font-size: .875em; color: var(--bk-brown-400); text-align: center; }
.comedians-section__title { margin: 0; font-family: var(--bk-font-display); font-weight: 400; font-size: calc(var(--bk-title-size) * 1.35); line-height: var(--bk-lh-tight); color: var(--bk-cream-100); text-align: center; padding: 0 var(--bk-gutter); }

/* The slider expects box-sizing: border-box. Without it the card and its info row would be 20px wider than the slider item and sit off-centre. */
.radial-gsap-slider, .radial-gsap-slider *, .radial-gsap-slider *::before, .radial-gsap-slider *::after { box-sizing: border-box; }

/* Lever (2026-10-29): a range input styled as a lever between Zurück/Weiter turns the wheel; the cards are no longer dragged. */
.radial-lever { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55em; width: min(380px, 46vw); }
.radial-lever__input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; }
.radial-lever__input:active { cursor: grabbing; }
.radial-lever__input::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55);
  background: linear-gradient(90deg, var(--bk-accent) 0 var(--p, 0%), var(--bk-brown-900) var(--p, 0%) 100%); }
.radial-lever__input::-moz-range-track { height: 12px; border-radius: 999px; background: var(--bk-brown-900); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55); }
.radial-lever__input::-moz-range-progress { height: 12px; border-radius: 999px; background: var(--bk-accent); }
/* the knob: a fat lever handle with grip lines */
.radial-lever__input::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 44px; margin-top: -16px; border-radius: 10px; border: 3px solid var(--bk-brown-800);
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, .28) 7px 9px) center / 16px 60% no-repeat, linear-gradient(180deg, #ffb27a, var(--bk-accent) 55%, #c9471c);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.radial-lever__input::-moz-range-thumb { width: 24px; height: 38px; border-radius: 10px; border: 3px solid var(--bk-brown-800);
  background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, .28) 7px 9px) center / 16px 60% no-repeat, linear-gradient(180deg, #ffb27a, var(--bk-accent) 55%, #c9471c);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
.radial-lever__input:hover::-webkit-slider-thumb, .is--lever-held .radial-lever__input::-webkit-slider-thumb { transform: scale(1.12) rotate(-6deg); }
.radial-lever__input:focus-visible { outline: none; }
.radial-lever__input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--bk-cream-100); outline-offset: 3px; }
.radial-lever__input:focus-visible::-moz-range-thumb { outline: 3px solid var(--bk-cream-100); outline-offset: 3px; }
.radial-lever__hint { color: var(--bk-cream-400); font-size: var(--bk-text-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.radial-gsap-slider, .radial-gsap-slider__list { cursor: auto; }
@media (max-width: 767px) {
  .radial-gsap-slider__controls { flex-wrap: wrap; padding: 2em var(--bk-gutter); row-gap: .6em; }
  .radial-lever { order: -1; width: 100%; max-width: 340px; flex-basis: 100%; }
}