/* ==========================================================================
   "מה לומדות?" — 6 workshop-poster cards. Scroll-scrub (GSAP ScrollTrigger,
   pinned) opens them from a single stacked card into a gentle, restrained
   arc — center cards slightly higher, subtle rotation only. Once open, the
   layout is STATIC: no drag, no pagination, no further motion. Every card
   sits with a real ~16px gap from its neighbors so each is independently
   clickable and fully readable — never heavily overlapping. Card width is
   CSS-driven (--card-w, a function of viewport width) so the 6-cards+gaps
   math always fits; js/lessons-fan.js only measures it, never sets it.
   Position/rotation/z-index on .lessons-fan-deck and .lesson-card are
   GSAP-owned during the scroll-open tween — this file supplies the pinned
   stage's box, card size/gap, and the static "workshop poster" look.
   Below ~700px (or reduced-motion) the whole arc/pin system is skipped in
   JS and cards render as a plain, readable, static stack instead.
   ========================================================================== */

.lessons-fan{
  background: var(--color-bg);
  overflow: hidden;
  position: relative;
}
.lessons-fan::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(17,17,17,0.025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(25deg, rgba(17,17,17,0.018) 0 1px, transparent 1px 6px);
  pointer-events: none;
}

.lessons-fan .container{ position: relative; z-index: 2; }
.lessons-fan .section-head{
  text-align: center;
  align-items: center;
  margin-bottom: 0;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}
.lessons-fan-sub{
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  color: var(--color-muted);
  max-width: 34ch;
}

/* ---- Pinned stage: GSAP pins this box while the scroll-scrub plays ----
   `perspective` lives on the stage (the ancestor of the 3D-transformed
   cards) so translateZ/rotateX/rotateY on the cards read as real depth,
   not flat CSS rotate(). */
.lessons-fan-stage{
  position: relative;
  width: 100%;
  height: min(78vh, 680px);
  min-height: 560px;
  overflow: hidden;
  perspective: 1400px;
}

.lessons-fan-deck{
  position: absolute;
  left: 50%;
  top: 52%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

/* ---- Cards: workshop posters with real tool photography. --card-w keeps
   6 cards + 5x16px gaps fitting inside ~90% of the viewport at any size —
   the one piece of "visual design" this fix is allowed to touch, since the
   old fixed 300px width is what made the heavy overlap unavoidable. ---- */
.lesson-card{
  --card-w: calc((78vw - 80px) / 6); /* smaller than the 90% target width to leave room for how much rotation inflates each card's real bounding box */
  --card-h: calc(var(--card-w) * 5 / 3);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--card-w);
  height: var(--card-h);
  margin-top: calc(var(--card-h) / -2);
  margin-left: calc(var(--card-w) / -2); /* physical, matching the physical `left:0` above — margin-inline-start
    would resolve to margin-right under this page's dir="rtl" and silently fail to center the card */
  background: var(--color-bg);
  border: 1.5px solid var(--color-black);
  border-radius: 16px; /* rigid printed-card-stock feel — sharp corners were reading as generic web divs */
  /* One soft, quiet shadow — no layered "fake edge" tricks, no ground blob.
     The stacked-deck cascade itself (js/lessons-fan.js) is what has to sell
     the physical depth; the shadow's only job is a gentle lift off the page. */
  box-shadow: 0 10px 22px rgba(17,17,17,0.12);
  transition: box-shadow 0.25s ease;
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  overflow: hidden;
  cursor: pointer;
}
.lesson-card.is-hovered{
  box-shadow: 0 16px 30px rgba(17,17,17,0.16);
}

/* The entire card is clickable — this link fills it and lays out its
   content; .lesson-card itself stays the GSAP-transformed positioned box. */
.lesson-card-link{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1rem 1rem 0;
  color: inherit;
  text-decoration: none;
}

.lesson-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex: 0 0 auto;
}
.lesson-card-num{
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--weight-display-heavy);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--color-black);
}
.lesson-card-num::before{
  content: '';
  position: absolute;
  inset: auto -6px -2px -4px;
  height: 8px;
  background: var(--color-lime);
  opacity: 0.65;
  z-index: -1;
}
.lesson-card:nth-child(2n) .lesson-card-num::before{ transform: rotate(-1.5deg); }
.lesson-card:nth-child(2n+1) .lesson-card-num::before{ transform: rotate(1.2deg); }
/* Hovered card: the number gets circled instead of underlined. */
.lesson-card.is-hovered .lesson-card-num::before{ opacity: 0; }
.lesson-card.is-hovered .lesson-card-num::after{
  content: '';
  position: absolute;
  inset: -10px -14px -8px -12px;
  border: 2.5px solid var(--color-lime);
  border-radius: 52% 48% 47% 53% / 53% 47% 53% 47%;
  transform: rotate(-3deg);
}

.lesson-card-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1.3px solid var(--color-black);
  color: var(--color-black);
}
.lesson-card-arrow svg{ width: 13px; height: 13px; }

.lesson-card-title{
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(0.95rem, 1.6vw, 1.28rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  color: var(--color-black);
  margin: 0.6rem 0 0.3rem;
}
.lesson-card-desc{
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  line-height: 1.4;
  color: var(--color-dark);
  margin: 0 0 0.4rem;
}
.lesson-card-meta{
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.68rem, 0.85vw, 0.78rem);
  letter-spacing: 0.01em;
  color: var(--color-muted);
  margin: 0 0 0.65rem;
}

.lesson-card-photo{
  position: relative;
  flex: 1 1 auto;
  margin: 0 -1rem;
  overflow: hidden;
  background: #EDE6D8;
}
.lesson-card-photo img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
#lessonCard4 .lesson-card-photo img{ object-position: top center; }

.lesson-card-badge{
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  width: 20%;
  aspect-ratio: 1;
  min-width: 46px;
  border-radius: 50%;
  background: var(--color-lime);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.5rem, 0.9vw, 0.72rem);
  line-height: 1.3;
  transform: rotate(-6deg);
  pointer-events: none;
}

/* Vertical measurement-tick strip, alternating side per card. */
.lesson-card::after{
  content: '';
  position: absolute;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 6px;
  background-image: repeating-linear-gradient(to bottom, var(--color-black) 0 1.5px, transparent 1.5px 11px);
  opacity: 0.3;
  pointer-events: none;
}
.lesson-card:nth-child(2n)::after{ left: 0.5rem; }
.lesson-card:nth-child(2n+1)::after{ right: 0.5rem; }

/* ---- Below ~700px (or reduced-motion): plain, static, readable stack —
   the arc/pin/JS system is skipped entirely at this size. ---- */
@media (prefers-reduced-motion: reduce), (max-width: 700px){
  .lessons-fan-stage{ height: auto; overflow: visible; }
  .lessons-fan-deck{
    position: static;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding-block: 2rem;
  }
  .lesson-card{
    position: static;
    margin: 0;
    --card-w: min(88vw, 340px);
  }
}