/* =========================================================
   CK Digital 360, עמודי שירות, שכבה ב': מיתוג, סושיאל, צילום ווידאו, אוטומציות.
   נטען אחרי service.css (css: service,service-b) ולפני שכבת הנושא.
   מוסיף רק רכיבים שחסרים ב-service.css. השינוי היחיד ברכיב קיים: position:relative ל-.inc__shot,
   כדי שתווית המדיה תשב עליו.
   1. עבודה אמיתית בראש העמוד שאינה אתר: תמונה (.wk), סרטון אנכי (.reel), צילום מסך עומד (.shot--still)
   2. במת הסרטונים (.vst): מסך אנכי גדול ורשימת סרטונים לבחירה
   3. אריחי מיתוג: קולאז' (.bset) וקיר לוגואים (.lgw)
   4. אריחי אוטומציה: רשימת המערכות (.sys) וכריכות הבלוג (.cvr)
   5. תווית על מדיה (.mtag)
   כל הצבעים דרך משתנים, עם ערך גיבוי למקרה ששכבת הנושא לא נטענה.
   אריח שמחזיק תמונה או סרטון משתמש ב- --media ונשאר כהה גם במצב הבהיר.
   ========================================================= */

[class*="p-service"]{
  --md:var(--media,#0b0b0c);--omd:var(--on-media,#f5f5f7);
  --sh:var(--shadow,0 40px 90px -40px rgba(0,0,0,.9));
  --scrim:color-mix(in srgb,var(--md) 66%,transparent);
  --omd-line:color-mix(in srgb,var(--omd) 24%,transparent);
}
@supports not (color:color-mix(in srgb,red,blue)){
  [class*="p-service"]{--scrim:var(--md);--omd-line:var(--hr)}
}
[class*="p-service"] :is(.tile__d,.sys__list p,.vst__hint,.svh__cap){text-wrap:pretty}

/* ---------- 1. ראש העמוד ---------- */
.svh__work.wk,.svh__work.reel{margin:0;border-radius:var(--rl);overflow:hidden;background:var(--md);box-shadow:var(--sh),0 0 0 1px var(--hr)}
.wk img{display:block;width:100%;height:auto;aspect-ratio:var(--war,1/1);object-fit:cover;object-position:var(--op,50% 50%)}
/* צילום מסך עומד: נחתך ביחס קבוע מהקצה העליון, כדי שהחיתוך יהיה זהה בכל רוחב */
.shot--still .shot__view{height:auto;aspect-ratio:var(--war,2.1)}
.shot--still .shot__img{animation:none;width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media (min-width:1001px){
  .svh__work.reel{width:50%;inset-inline-start:-18%;inset-block-end:7%}
}

/* סרטון אנכי: תמיד 9:16, הפוסטר ממלא את האריח עד שהסרטון נטען */
.reel{margin:0;aspect-ratio:9/16;border-radius:var(--rl);overflow:hidden;isolation:isolate;background:var(--md);color:var(--omd)}
.reel:not(.svh__work){position:relative}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--md)}
.reel__ctl{position:absolute;z-index:2;inset-block-end:12px;inset-inline-start:12px;display:flex;gap:8px}
.vb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--omd);background:var(--scrim);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--omd-line);transition:transform .4s var(--ease),background-color .4s var(--ease)}
.vb:hover{transform:scale(1.06)}
.vb:focus-visible{outline:2px solid var(--omd);outline-offset:3px}
.vb svg{width:18px;height:18px}
.vb[hidden]{display:none}
.vb .is-on,.vb[aria-pressed="true"] .is-off{display:none}
.vb[aria-pressed="true"] .is-on{display:block}

/* ---------- 2. במת הסרטונים ---------- */
.vst{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:var(--pad);border-radius:var(--rx);background:var(--t1);color:var(--tx)}
.vst__screen{grid-column:1/6;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:center}
.vst__reel{width:min(100%,430px,calc((100vh - var(--nav-h,64px) - 190px)*.5625));min-width:280px;border-radius:var(--rx);box-shadow:var(--sh)}
.vst__now{display:grid;gap:2px;justify-items:center;text-align:center;min-height:50px}
.vst__now b{font-weight:700;font-size:clamp(19px,1.5vw,23px);letter-spacing:-.02em;color:var(--tx)}
.vst__now span{font-size:15px;color:var(--tx2)}
.vst__side{grid-column:6/13;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.4vh,34px);padding-inline-start:clamp(0px,2vw,30px)}
.vst__grp{min-width:0}
.vst__k{font-size:14.5px;font-weight:600;color:var(--grey);margin-block-end:10px}
.vst__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.vst__i{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;column-gap:14px;width:100%;padding:8px;padding-inline-end:14px;border-radius:var(--rm);text-align:start;color:var(--tx);box-shadow:inset 0 0 0 1px transparent;transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.vst__i:hover{background:var(--t2)}
.vst__i:focus-visible{outline-offset:2px}
.vst__i[aria-pressed="true"]{background:var(--t3);box-shadow:inset 0 0 0 1px var(--hr)}
.vst__i img{width:54px;height:96px;border-radius:9px;object-fit:cover;background:var(--md)}
.vst__i b{display:block;font-weight:600;font-size:16.5px;line-height:1.25;letter-spacing:-.012em}
.vst__i small{display:block;margin-block-start:3px;font-size:14px;line-height:1.35;color:var(--tx2)}
.vst__i[aria-pressed="true"] small{color:var(--tx)}
@media (min-width:1001px){
  /* רשימה קצרה: עמודה אחת, והמסך תופס חצי מהאריח */
  .vst--one .vst__screen{grid-column:1/7}
  .vst--one .vst__side{grid-column:7/13;padding-inline-start:0;max-width:540px}
  .vst--one .vst__list{grid-template-columns:minmax(0,1fr)}
  .vst--one .vst__i{grid-template-columns:64px minmax(0,1fr);column-gap:18px}
  .vst--one .vst__i img{width:64px;height:114px}
}
.vst__hint{grid-column:1/-1;margin-block-start:clamp(18px,3vh,28px);padding-block-start:18px;border-block-start:1px solid var(--hr);font-size:14.5px;line-height:1.45;color:var(--grey);text-align:center}
.sw .adwall+.bento,.sw .vst+.bento{margin-block-start:var(--gap)}

/* ---------- 3. מיתוג ---------- */
.bset{display:grid;gap:10px;margin:auto var(--pad) var(--pad);padding-block-start:clamp(20px,3vh,32px)}
.bset figure,.lgw figure,.cvr figure{position:relative;margin:0;overflow:hidden;border-radius:var(--rm);background:var(--md)}
.bset img,.lgw img,.cvr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transition:transform 1.2s var(--ease)}
.bset figure:hover img,.lgw figure:hover img{transform:scale(1.03)}
.bset--3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2}
.bset--3 figure:first-child{grid-row:1/3}
.bset--1{aspect-ratio:1/1}
.lgw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:auto var(--pad) var(--pad);padding-block-start:clamp(20px,3vh,32px)}
.lgw figure{aspect-ratio:1/1}

/* ---------- 4. אוטומציות ---------- */
.sys{align-items:stretch}
.sys__pic{flex:0 0 40%;position:relative;margin:0;min-height:320px;background:var(--md)}
.sys__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.sys__body{flex:1;min-width:0;display:grid;gap:clamp(18px,3vh,30px);align-content:center;padding:var(--pad)}
.sys__body .tile__d{max-width:52ch}
.sys__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,46px);list-style:none;margin:0;padding:0}
.sys__list li{display:grid;gap:5px;align-content:start;padding-block:clamp(16px,2.4vh,22px);border-block-start:1px solid var(--hr)}
.sys__list h4{font-weight:700;font-size:clamp(18px,1.45vw,21px);line-height:1.2;letter-spacing:-.018em;color:var(--tx)}
.sys__list p{font-size:16px;line-height:1.45;color:var(--tx2)}
.cvr{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:auto var(--pad) var(--pad);padding-block-start:clamp(20px,3vh,32px)}
.cvr figure{aspect-ratio:16/9}
.cvr figure:first-child{grid-column:1/-1}
.tile--site .win--still .win__view{height:auto;aspect-ratio:var(--war,16/10)}
.win--still .win__view img{animation:none;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* ---------- 5. תווית על מדיה ---------- */
.mtag{position:absolute;z-index:2;inset-block-start:14px;inset-inline-start:14px;padding:6px 13px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.3;color:var(--omd);background:var(--scrim);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--omd-line)}
.inc__shot{position:relative}

/* ---------- 6. טאבלט ---------- */
@media (max-width:1000px){
  .svh__work.reel{width:38%;margin-block-start:-48%}
  .vst{display:block}
  .vst__screen{gap:14px}
  .vst__reel{width:min(100%,400px);min-width:0}
  .vst__side{padding:0;margin-block-start:26px;gap:24px}
  .vst__list{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .vst__list::-webkit-scrollbar{display:none}
  .vst__list li{flex:0 0 132px;scroll-snap-align:start}
  .vst__i{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:8px 8px 12px;align-items:start;align-content:start;height:100%}
  .vst__i img{width:100%;height:auto;aspect-ratio:9/16}
  .vst__i b{font-size:15px}
  .vst__i small{font-size:13px}
  .sys{flex-direction:column}
  .sys__pic{flex:none;aspect-ratio:16/9;min-height:0}
}

/* ---------- 7. מובייל ---------- */
@media (max-width:760px){
  .svh__work.reel{width:52%;margin-block-start:-46%}
  .vst{padding:16px 16px 20px}
  .vst__list{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .vst__reel{width:100%}
  .bset,.lgw,.cvr{gap:8px}
  .sys__list{grid-template-columns:minmax(0,1fr)}
  .mtag{inset-block-start:10px;inset-inline-start:10px;font-size:12.5px}
}

/* ---------- 8. תנועה מופחתת ---------- */
@media (prefers-reduced-motion:reduce){
  .bset img,.lgw img,.cvr img,.vb,.vst__i{transition:none}
}