/* Sarah Aknin · cks-reel: photo reel for sketch 1 ("רגעים מהשטח"), rounded cards in a gentle lens */
.cks-reel { --cks-reel-h: 540px; --n: 1; --cks-reel-r: 22px; position: relative; width: 100%; color: var(--ck-dark, #25201C); }

/* stage: clipped sideways only, so the page never scrolls horizontally and the shadows stay */
.cks-reel__view { position: relative; overflow-x: clip; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; outline: none; }
.cks-reel.is-on .cks-reel__view { cursor: grab; }
.cks-reel.is-on.is-drag .cks-reel__view { cursor: grabbing; }
.cks-reel.is-on:not(.is-start) .cks-reel__view {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* before the script runs (and without it): a plain swipe row */
.cks-reel__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 0 28px; }
.cks-reel__track::-webkit-scrollbar { display: none; }
.cks-reel__card { flex: none; position: relative; height: min(var(--cks-reel-h), 66vh); scroll-snap-align: start; }
.cks-reel.is-on .cks-reel__track { display: block; position: absolute; inset: 0; overflow: visible; padding: 0; scroll-snap-type: none; }
.cks-reel.is-on .cks-reel__card { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }

.cks-reel__pic { position: absolute; inset: 0; overflow: hidden; border-radius: var(--cks-reel-r); background: var(--ck-cream2, #E9E2D6); isolation: isolate; transform: translateZ(0);
  box-shadow: 0 28px 46px -30px rgba(37,32,28,.5), 0 2px 10px rgba(37,32,28,.05); }
.cks-reel__pic::after { content: ""; position: absolute; inset: 0; background: var(--ck-cream, #F1ECE3); opacity: var(--v, 0); pointer-events: none; }
.cks-reel .cks-reel__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; transform: scale(1.14); transition: opacity .8s var(--ck-ease, ease); -webkit-user-drag: none; pointer-events: none; }
.cks-reel .cks-reel__img.is-loading { opacity: 0; }
.cks-reel__view:focus-visible .cks-reel__card.is-active .cks-reel__pic { outline: 2px solid var(--ck-dark, #25201C); outline-offset: 5px; }

/* drag cursor (mouse only, added by the script) */
.cks-reel__cur { position: absolute; left: 0; top: 0; z-index: 6; width: 0; height: 0; pointer-events: none; }
.cks-reel__cur b { position: absolute; left: -45px; top: -45px; width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; background: rgba(37,32,28,.84); color: var(--ck-cream, #F1ECE3); font: 400 14px/1 var(--sa-body, var(--ck-body, inherit)); letter-spacing: .06em; opacity: 0; transform: scale(.3); transition: opacity .35s var(--ck-ease, ease), transform .55s var(--ck-ease, ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cks-reel.is-cur .cks-reel__view { cursor: none; }
.cks-reel.is-cur .cks-reel__cur b { opacity: 1; transform: scale(1); }
.cks-reel.is-cur.is-drag .cks-reel__cur b { transform: scale(.76); }

/* bar: counter, progress line, arrows */
.cks-reel__bar { display: flex; align-items: center; gap: 32px; margin-top: 4px; }
.cks-reel.is-single .cks-reel__bar { display: none; }
.cks-reel__count { flex: none; display: flex; align-items: baseline; gap: 10px; margin: 0; min-width: 96px; line-height: 1; font-variant-numeric: tabular-nums; }
.cks-reel__count b { display: inline-block; font-family: var(--sa-head, var(--ck-head, inherit)); font-weight: 300; font-size: 40px; letter-spacing: .02em; color: var(--ck-dark, #25201C); }
.cks-reel__count b.is-tick { animation: cksReelTick .6s var(--ck-ease, ease) both; }
@keyframes cksReelTick { from { opacity: 0; transform: translateY(45%); } }
.cks-reel__count span { font-family: var(--sa-body, var(--ck-body, inherit)); font-size: 13px; letter-spacing: .14em; color: var(--ck-muted, #857A6F); white-space: nowrap; }
.cks-reel__rail { position: relative; flex: 1 1 auto; height: 3px; overflow: hidden; border-radius: 3px; }
.cks-reel__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px; background: rgba(153,135,116,.38); }
.cks-reel__seg { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: calc(100% / var(--n)); border-radius: 3px; background: rgba(37,32,28,.18); overflow: hidden; will-change: transform; }
.cks-reel__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--ck-dark, #25201C); transform-origin: 100% 50%; }
.cks-reel.is-auto .cks-reel__fill { transform: scaleX(0); }
.cks-reel__nav { flex: none; display: flex; gap: 10px; }
.cks-reel .cks-reel__btn { width: 54px; height: 54px; min-height: 0; margin: 0; padding: 0; display: grid; place-items: center; border: 1px solid rgba(37,32,28,.24); border-radius: 50%; background: transparent; color: var(--ck-dark, #25201C); box-shadow: none; cursor: pointer; transition: background-color .45s var(--ck-ease, ease), border-color .45s, color .45s, transform .45s var(--ck-ease, ease); }
.cks-reel .cks-reel__btn:focus { background-color: transparent; border-color: rgba(37,32,28,.24); color: var(--ck-dark, #25201C); outline: none; }
.cks-reel .cks-reel__btn:hover, .cks-reel .cks-reel__btn:focus-visible { background-color: var(--ck-dark, #25201C); border-color: var(--ck-dark, #25201C); color: var(--ck-cream, #F1ECE3); }
.cks-reel .cks-reel__btn:focus-visible { outline: 2px solid var(--ck-dark, #25201C); outline-offset: 3px; }
.cks-reel .cks-reel__btn:active { transform: scale(.94); }
.cks-reel .cks-reel__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ck-ease, ease); }
.cks-reel .cks-reel__prev:hover svg { transform: translateX(3px); }
.cks-reel .cks-reel__next:hover svg { transform: translateX(-3px); }
[dir="ltr"] .cks-reel .cks-reel__btn svg { scale: -1 1; }
[dir="ltr"] .cks-reel__fill { transform-origin: 0 50%; }

.cks-reel__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 767px) {
  .cks-reel { --cks-reel-r: 20px; }
  .cks-reel__bar { gap: 18px; margin-top: 0; }
  .cks-reel__count { min-width: 0; gap: 7px; }
  .cks-reel__count b { font-size: 30px; }
  .cks-reel .cks-reel__btn { width: 46px; height: 46px; }
  .cks-reel .cks-reel__btn svg { width: 18px; height: 18px; }
}
@media (max-width: 599px) {
  .cks-reel:not(.is-on) .cks-reel__card { height: auto; width: 80%; aspect-ratio: 4 / 5 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cks-reel .cks-reel__btn, .cks-reel .cks-reel__btn svg, .cks-reel__cur b, .cks-reel .cks-reel__img { transition: none; }
  .cks-reel__count b.is-tick { animation: none; }
}