/* =========================================================
   CK Digital 360, רכיבים משלימים לעמודי השירות:
   חנויות אונליין, קידום בגוגל, ניהול ותחזוקה.
   נטען אחרי service.css דרך הפרונט מטר: css: service,service-a
   כל הצבעים דרך משתנים, עם ערך גיבוי למקרה ששכבת הנושא לא נטענה.
   אין כאן צבע קשיח, ולכן הרכיבים עובדים גם במצב הבהיר.
   ========================================================= */

/* ---------- 1. מסגרת דפדפן עם מסך ראשון סטטי ----------
   לצילום של המסך הראשון בלבד (1200 על 750), שאין לו לאן לגלול.
   שימוש: span.win.win--still, או a.shot.shot--still בראש העמוד. */
.win--still .win__view{height:auto;aspect-ratio:var(--war,8/5);background:var(--media,#0b0b0c)}
.win--still .win__view img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 0);animation:none;will-change:auto;transition:transform 1.2s var(--ease)}
a.tile:hover .win--still .win__view img{transform:scale(1.02)}
.shot--still .shot__view{height:auto;aspect-ratio:var(--war,8/5)}
.shot--still .shot__img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 0);animation:none;will-change:auto}

/* ---------- 2. מסגרת מאמרים בראש העמוד ----------
   רשימת המאמרים האחרונים בבלוג, תאריך וכותרת, בתוך מסגרת דפדפן.
   שימוש: a.shot.postf.svh__work > span.shot__bar + span.postf__view > span.postf__row */
.postf{background:var(--tile,#1d1d1f);box-shadow:0 0 0 1px var(--hair,rgba(245,245,247,.12)),var(--shadow,0 40px 90px -40px rgba(0,0,0,.9))}
.postf .shot__bar{background:var(--tile-3,#2a2a2c)}
.postf .shot__bar em{font-family:inherit;font-size:12.5px;letter-spacing:0;font-weight:500;color:var(--text-2,#a1a1a6)}
.postf__view{display:grid;overflow:hidden;border-radius:0 0 12px 12px;background:var(--tile-2,#161617)}
.postf__row{display:grid;gap:3px;padding:13px 16px 14px}
.postf__row+.postf__row{border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.postf__row small{font-size:12.5px;line-height:1.3;color:var(--grey,#86868b);font-feature-settings:"tnum" 1,"lnum" 1}
.postf__row b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:clamp(14px,1.05vw,16px);line-height:1.36;letter-spacing:-.01em;color:var(--text,#f5f5f7)}
.postf:hover .postf__row:first-child b,.postf:focus-visible .postf__row:first-child b{color:var(--pink-ink,var(--pink))}

/* ---------- 3. כרטיס מאמר בעמודה הדביקה של "מה כלול" ----------
   שימוש: figure.inc__shot.inc__shot--post > div.postc + figcaption */
.inc__shot--post{justify-content:space-between}
.postc{display:block;margin:auto var(--pad);border-radius:var(--rl);overflow:hidden;background:var(--tile-2,#161617);box-shadow:0 0 0 1px var(--hair,rgba(245,245,247,.12))}
.postc img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--media,#0b0b0c)}
.postc__m{padding:18px 22px 0;font-size:13.5px;line-height:1.3;color:var(--grey,#86868b)}
.postc__t{padding:6px 22px 22px;font-weight:700;font-size:clamp(18px,1.55vw,24px);line-height:1.24;letter-spacing:-.02em;color:var(--text,#f5f5f7);text-wrap:balance}

/* ---------- 4. רשימת מאמרים בתוך אריח ----------
   שימוש: article.tile > div.tile__txt + ul.plist > li > a > img + span > small + b */
.plist{list-style:none;margin:auto 0 0;padding:clamp(8px,1.4vh,14px) var(--pad) clamp(10px,1.6vh,18px);display:grid}
.plist li+li{border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.plist a{display:grid;grid-template-columns:clamp(92px,10.5vw,148px) minmax(0,1fr);align-items:center;gap:clamp(14px,1.6vw,24px);padding-block:clamp(14px,2vh,20px)}
.plist img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--rm);background:var(--media,#0b0b0c)}
.plist small{display:block;margin-block-end:5px;font-size:13.5px;line-height:1.3;color:var(--grey,#86868b)}
.plist b{display:block;font-weight:600;font-size:clamp(16px,1.25vw,19px);line-height:1.32;letter-spacing:-.012em;color:var(--text,#f5f5f7);text-wrap:pretty;transition:color .3s var(--ease)}
.plist a:hover b,.plist a:focus-visible b{color:var(--pink-ink,var(--pink))}
.plist a:focus-visible{outline-offset:2px}

/* ---------- 5. רשימת קבצים חיים (GEO) ----------
   שימוש: ul.files > li > a (או span) > b.ltr + span + svg */
.files{list-style:none;margin:auto 0 0;padding:clamp(8px,1.4vh,14px) var(--pad) clamp(10px,1.6vh,18px);display:grid}
.files li+li{border-block-start:1px solid var(--hair,rgba(245,245,247,.12))}
.files__i{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:4px 16px;padding-block:clamp(15px,2.1vh,20px)}
.files__i b{grid-column:1;justify-self:start;font-weight:600;font-size:clamp(16px,1.2vw,18px);line-height:1.3;letter-spacing:-.01em;color:var(--text,#f5f5f7)}
.files__i span{grid-column:1;font-size:15.5px;line-height:1.45;color:var(--text-2,#a1a1a6);max-width:46ch}
.files__i svg{grid-column:2;grid-row:1/3;width:18px;height:18px;color:var(--pink-ink,var(--pink));transition:transform .5s var(--ease)}
a.files__i:hover svg{transform:translate(-3px,-3px)}
a.files__i:hover b,a.files__i:focus-visible b{color:var(--pink-ink,var(--pink))}

/* ---------- 6. אריח ביקורת שאינו ברוחב מלא ---------- */
.bento>li>.tile--rev{justify-content:center}
.rvq--s blockquote{font-size:clamp(20px,1.75vw,27px)}

/* ---------- 7. אריח עם תמונה ריבועית מלאה (פוסט לרשתות) ---------- */
.tile__pic--sq{flex:none;aspect-ratio:1/1;min-height:0;margin-block-start:clamp(20px,3vh,32px)}

/* ---------- 8. מסגרת טלפון ----------
   לצילום של האתר במסך צר (600 על 1298).
   שימוש בתוך אריח: a.tile.tile--phone > div.tile__txt + span.phonef > img
   שימוש בעמודה הדביקה: figure.inc__shot.inc__shot--phone > span.phonef + figcaption */
.phonef{display:block;flex:none;width:min(56%,250px);margin:auto auto 0;border-radius:34px 34px 0 0;overflow:hidden;background:var(--media,#0b0b0c);box-shadow:0 0 0 1px var(--hair-2,rgba(245,245,247,.2)),0 0 0 9px var(--tile-3,#2a2a2c)}
.phonef img{display:block;width:100%;height:auto;aspect-ratio:var(--par,6/7);object-fit:cover;object-position:50% 0;transition:transform 1.2s var(--ease)}
.tile--phone .tile__txt{padding-block-end:clamp(30px,4.4vh,44px)}
a.tile--phone:hover .phonef img{transform:scale(1.02)}
.inc__shot--phone{align-items:center;justify-content:space-between}
.inc__shot--phone .phonef{flex:1 1 0;min-height:0;width:auto;aspect-ratio:600/1298;max-width:calc(100% - 2*var(--pad));margin:calc(var(--pad) + 9px) auto 0;border-radius:34px 34px 0 0}
.inc__shot--phone .phonef img{height:100%;aspect-ratio:auto}
.inc__shot--phone figcaption{align-self:stretch}

/* ---------- 9. אריח מפוצל: טקסט בצד אחד, תמונה ריבועית בצד השני ---------- */
.tile--split{flex-direction:row;align-items:center}
.tile--split .tile__txt{flex:1;min-width:0;padding-block-end:var(--pad);align-content:center}
.tile--split .tile__pic{flex:0 0 min(50%,420px);min-height:0;aspect-ratio:1/1;margin:var(--pad);margin-inline-start:0;border-radius:var(--rl)}

/* ---------- 9א. קישור בתוך תשובה ---------- */
[class*="p-service"] .qa__a a{color:var(--pink-ink,var(--pink));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
[class*="p-service"] .qa__a a:hover{text-decoration-thickness:2px}

/* ---------- 10. טאבלט ומובייל ---------- */
@media (max-width:1000px){
  .inc__shot--post{justify-content:flex-start}
  .postc{margin:var(--pad) 16px auto}
  .postc__t{font-size:18px}
  .plist a{grid-template-columns:clamp(92px,22vw,160px) minmax(0,1fr)}
  .inc__shot--phone{justify-content:flex-start}
  .inc__shot--phone .phonef{flex:none;width:62%;aspect-ratio:auto;margin:calc(var(--pad) + 9px) auto 0}
  .inc__shot--phone .phonef img{height:auto;aspect-ratio:6/7}
  .inc__shot--phone figcaption{margin-block-start:auto}
  .tile--split{flex-direction:column}
  .tile--split .tile__txt{flex:none;padding-block-end:0}
  .tile--split{align-items:stretch}
  .tile--split .tile__pic{flex:none;width:auto;margin:clamp(20px,3vh,32px) 0 0;border-radius:0}
}
@media (max-width:760px){
  .postf__row{padding:11px 13px 12px}
  .postf__row b{font-size:14px}
  .plist a{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .plist b{font-size:16px}
  .files__i span{font-size:15px}
  .phonef{width:min(62%,230px)}
}

/* ---------- 11. תנועה מופחתת ---------- */
@media (prefers-reduced-motion:reduce){
  .win--still .win__view img,.plist b,.files__i svg,.phonef img{transition:none}
}