/* =========================================================
   work.css — תיק העבודות (רצועת הסרטונים) וכפתור "לצפייה בתיק העבודות"
   רק הסרטון שבמרכז המסך מתנגן בלי קול. לחיצה פותחת את הנגן המוגדל עם סאונד.
   ========================================================= */

/* ---- כפתורים בפתיח ---- */
.v2 .hr > .hr-ctas{margin-top:34px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 26px}
.v2 .hr-ctas .pill{margin:0}
.hr-work{display:inline-flex;align-items:center;gap:8px;padding:8px 2px;font:500 15px var(--font-body);color:var(--color-choc);text-decoration:none;border-bottom:1px solid rgba(92,26,38,.35);transition:border-color .3s,color .3s}
.hr-work svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.hr-work:hover{color:var(--color-plum);border-color:currentColor}.hr-work:hover svg{transform:translateY(3px)}}
.hr-work:focus-visible{outline:1px solid var(--color-plum);outline-offset:4px}
.js .hr > .hr-ctas{opacity:0;transform:translateY(18px)}
.loaded .hr > .hr-ctas{animation:up .7s var(--ease) .84s forwards}
@media(prefers-reduced-motion:reduce){.js .hr > .hr-ctas{opacity:1!important;transform:none!important;animation:none!important}}
#work{scroll-margin-top:84px}

/* ---- הרצועה: העיצוב המקורי לא השתנה. רק הסרטון שבמרכז מתנגן (main.js) ---- */

@media(max-width:767px){
  .v2 .hr > .hr-ctas{margin-top:26px;flex-direction:column;gap:12px}
  .hr-work{font-size:14.5px}
}

/* ---- נגן מוגדל: כפתור "הפעלת סאונד" כשהדפדפן חסם סאונד ---- */
.lb-vid{position:relative}
.lb-sound{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:0;border-radius:999px;background:var(--color-choc);color:var(--color-paper);font:600 15px var(--font-body);white-space:nowrap;cursor:pointer;box-shadow:0 10px 26px -10px rgba(46,12,19,.6)}
.lb-sound[hidden]{display:none}
.lb-sound svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
.lb-sound:focus-visible{outline:2px solid var(--color-paper);outline-offset:3px}
@media(hover:hover){.lb-sound:hover{background:var(--color-choc-2)}}

/* ---- מתחת לתמונה: כפתור "לצפייה בתיק עבודות". מעל התמונה: השם ו־50+ ---- */
/* סימטריה: אותו רווח מעל התמונה (עד השם) ומתחתיה (עד הכפתור),
   והקו בין הפתיח לחלק הבהיר עובר בדיוק באמצע התמונה.
   P = 28 (מרווח מהכפתורים) + 23 (השם) + G + חצי גובה התמונה ;  M = -(23 + G + חצי גובה התמונה) */
.v2 .hr{padding-bottom:234px}
.me.me-swap{margin-top:-206px}
.me.me-swap .name{order:-1;margin:0 0 44px}
.me.me-swap .work-all{margin-top:44px}
.work-all .dn{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.work-all:hover .dn{transform:translateY(3px)}}
@media(max-width:767px){.v2 .hr{padding-bottom:199px}.me.me-swap{margin-top:-171px}.me.me-swap .name{margin-bottom:36px}.me.me-swap .work-all{margin-top:36px}}