/* =========================================================
   תיק העבודות: אריחי bento מהעבודות האמיתיות של קורן, ומסילת סרטונים אנכיים
   ========================================================= */
.wsec{position:relative;padding-block:clamp(90px,14vh,170px)}
.wsec--ink{background:var(--ink-2)}
.wsec__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px 20px;align-items:end;margin-block-end:clamp(36px,6vh,64px)}
.wsec__head .h2{grid-column:1/8}
.wsec__head .lead{grid-column:8/13}

/* ---------- bento ---------- */
/* גובה השורה מחושב כך שאריח של 3 עמודות על 2 שורות יוצא ריבוע מדויק, כדי שמודעות ריבועיות לא ייחתכו */
.bento{--w:min(var(--max),100vw - 2*var(--gutter));--c:calc((var(--w) - 11*14px)/12);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:calc(var(--c)*1.5 + 7px);grid-auto-flow:dense;gap:14px}
.tile{position:relative;overflow:hidden;border-radius:24px;background:var(--tile);isolation:isolate;grid-column:span 3;grid-row:span 2}
.tile--l{grid-column:span 6;grid-row:span 4}
.tile--w{grid-column:span 6;grid-row:span 2}
.tile--t{grid-column:span 3;grid-row:span 3}
.tile--m{grid-column:span 4;grid-row:span 3}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.tile:hover img{scale:1.04}
.tile figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:1;padding:44px 20px 18px;display:grid;gap:2px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));opacity:0;translate:0 8px;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.tile:hover figcaption,.tile:focus-within figcaption{opacity:1;translate:0 0}
.tile b{font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--on-media)}
.tile span{font-size:14px;color:var(--on-media-2);color:color-mix(in srgb,var(--on-media) 76%,transparent)}
.tile--txt{display:grid;align-content:end;gap:10px;padding:26px 24px;background:var(--tile)}
.tile--txt h3{font-weight:700;font-size:clamp(24px,2.2vw,34px);line-height:1.08;letter-spacing:-.025em}
.tile--txt p{font-size:16px;color:var(--text-2);line-height:1.45}
.tile--txt .tag{margin-block-end:4px}

/* ---------- לוגואים ---------- */
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-block-start:14px}
.logos figure{position:relative;overflow:hidden;border-radius:24px;background:var(--tile);aspect-ratio:1}
.logos img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.logos figure:hover img{scale:1.04}

/* ---------- מסילת סרטונים ---------- */
.vrail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.vrail::-webkit-scrollbar{display:none}
.vrail__track{display:flex;gap:16px;width:max-content;align-items:flex-end}
.vid{position:relative;flex:none;width:clamp(220px,20vw,300px);aspect-ratio:9/16;overflow:hidden;border-radius:26px;background:var(--tile);scroll-snap-align:start}
.vid:nth-child(3n+2){width:clamp(240px,22vw,330px)}
.vid img,.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid video{z-index:1}
.vid button{position:absolute;inset:0;z-index:2;display:grid;align-content:end;justify-items:start;gap:3px;padding:20px;text-align:start;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.78));transition:background-color .4s var(--ease)}
.vid button i{position:absolute;inset-block-start:16px;inset-inline-start:16px;width:46px;height:46px;border-radius:50%;background:var(--on-media);background:color-mix(in srgb,var(--on-media) 92%,transparent);display:grid;place-items:center;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.vid button i::before{content:"";width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--media);margin-inline-start:-3px;transform:scaleX(-1)}
[dir="rtl"] .vid button i::before{transform:none;margin-inline-start:0;margin-inline-end:-3px}
.vid button:hover i{transform:scale(1.08)}
.vid b{font-weight:600;font-size:16px;color:var(--on-media);letter-spacing:-.01em}
.vid span{font-size:13.5px;color:var(--on-media-2);color:color-mix(in srgb,var(--on-media) 76%,transparent)}
.vid.is-playing button{background:none}
.vid.is-playing button i,.vid.is-playing b,.vid.is-playing span{opacity:0}
.vrail__hint{margin-block-start:20px;font-size:14px;color:var(--grey)}

@media (max-width:1000px){
  .wsec__head .h2,.wsec__head .lead{grid-column:1/-1}
  .bento{--c:calc((var(--w) - 5*14px)/6);grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc(var(--c)*1.5 + 7px)}
  .tile{grid-column:span 3}
  .tile--l,.tile--w{grid-column:span 6}
  .tile--l{grid-row:span 3}
  .tile--m,.tile--t{grid-column:span 3;grid-row:span 3}
  .tile figcaption{opacity:1;translate:0 0}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .bento{--c:calc((var(--w) - 5*10px)/6);gap:10px;grid-auto-rows:calc(var(--c)*1.5 + 5px)}
  .tile,.logos figure{border-radius:18px}
  .tile b{font-size:15px}
  .tile span{font-size:13px}
  .vid{width:62vw}
  .vid:nth-child(3n+2){width:62vw}
}
@media (prefers-reduced-motion:reduce){.tile img,.logos img,.tile figcaption{transition:none}}