/* SYS-026 תבניות אתרים (משפחות עיצוב) — docs/BLUEPRINT.md */
/* Design families for site templates (body.vk-fam-<name>) — loaded only on a site that picked a family. Each family changes grid, typography,
   cards, buttons, section transitions and its signature motion (in kit.js). Reduced motion = final state. © 2026 ViralStudio */

/* ---------- shared to all families: precise typography, a softer rhythm, a press that responds instantly ---------- */
.vk-fam .vk-h{letter-spacing:-.025em}
.vk-fam h1.vk-h,.vk-fam .vk-hero-h .vk-h{letter-spacing:-.035em;line-height:.98}
.vk-fam .vk-btn{transition:transform .25s var(--kease),background-color .2s,color .2s,box-shadow .3s var(--kease)}
.vk-fam .vk-btn:active{transform:scale(.97)}
.vk-fam .vk-lead{text-wrap:pretty}

/* ===== 1. bento — tiles like an Apple product page ===== */
.vk-fam-bento .vk-feat{background:none;border:0;gap:clamp(10px,1.3vw,16px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.vk-fam-bento .vk-feat li{background:var(--ksf);border-radius:calc(var(--kr) + 12px);padding:clamp(26px,3vw,40px);min-height:240px;display:flex;flex-direction:column;justify-content:flex-end}
.vk-fam-bento .vk-t-alt .vk-feat li{background:var(--kbg)}
.vk-fam-bento .vk-feat li:nth-child(4n+1){grid-column:span 2;background:var(--kdk);color:#f6f3ee}
.vk-fam-bento .vk-feat li:nth-child(4n+1) p{color:rgba(246,243,238,.72)}
.vk-fam-bento .vk-fn{font-size:clamp(2.2rem,4vw,3.4rem);font-family:var(--kfh);font-weight:800;color:var(--kac);letter-spacing:-.04em}
.vk-fam-bento .vk-pc-m,.vk-fam-bento .vk-card-m,.vk-fam-bento .vk-img,.vk-fam-bento .vk-ph{border-radius:calc(var(--kr) + 10px)}
.vk-fam-bento .vk-card,.vk-fam-bento .vk-plan,.vk-fam-bento .vk-q{border-radius:calc(var(--kr) + 14px)}
.vk-fam-bento .vk-stats{gap:clamp(10px,1.3vw,16px)}
.vk-fam-bento .vk-stats li{background:var(--ksf);border-radius:calc(var(--kr) + 12px);padding:28px}
@media (max-width:700px){.vk-fam-bento .vk-feat li:nth-child(4n+1){grid-column:auto}}

/* ===== 2. editorial — huge serif, rule lines, drop cap, image wipes ===== */
.vk-fam-editorial .vk-s+.vk-s{border-top:1px solid var(--tl)}
.vk-fam-editorial h1.vk-h,.vk-fam-editorial .vk-hero-h .vk-h{font-size:clamp(3rem,7.4vw,7rem);font-weight:500}
.vk-fam-editorial .vk-h{font-weight:500}
.vk-fam-editorial .vk-h em{font-style:italic}
.vk-fam-editorial .vk-kick{letter-spacing:.22em;font-size:.72rem}
.vk-fam-editorial .vk-kick::before{width:46px}
.vk-fam-editorial .vk-feat{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));background:none;border:0;gap:0 clamp(28px,4vw,60px)}
.vk-fam-editorial .vk-feat li{padding:28px 0 32px;border-top:2px solid var(--tx);background:none}
.vk-fam-editorial .vk-fn{font:500 3rem/1 var(--kfh);color:var(--tx);display:block;margin-bottom:14px}
.vk-fam-editorial .vk-prose>p:first-child::first-letter{float:inline-start;font:600 4.6em/.8 var(--kfh);margin-inline-end:.08em;margin-top:.06em;color:var(--kac)}
.vk-fam-editorial .vk-hm2{border-width:0;box-shadow:none;outline:1px solid var(--tl);outline-offset:10px}
.vk-fam-editorial .vk-btn{border-radius:0}
.vk-fam-editorial .vk-lit-t{font-weight:400;font-style:italic}

/* ===== 3. cinematic — full-screen image that shrinks into a card, wide letterbox ===== */
.vk-fam-cinematic .vk-L-hero_full .vk-hfull{clip-path:inset(calc(var(--cs,0) * 5%) calc(var(--cs,0) * 4%) round calc(var(--cs,0) * 34px))}
.vk-fam-cinematic .vk-hfull-in .vk-h{font-size:clamp(3rem,8vw,8rem);max-width:12ch}
.vk-fam-cinematic .vk-hfull-in .vk-lead{max-width:44ch}
.vk-fam-cinematic .vk-hshade{background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.1) 60%,rgba(0,0,0,.4))}
.vk-fam-cinematic .vk-it-m,.vk-fam-cinematic .vk-card-m,.vk-fam-cinematic .vk-hs-m{aspect-ratio:21/10}
.vk-fam-cinematic .vk-hs-m{aspect-ratio:16/10}
.vk-fam-cinematic .vk-hs-c{flex-basis:clamp(300px,46vw,720px)}
.vk-fam-cinematic.vk-dark .vk-s.vk-t-light{--tb:var(--kbg)}
.vk-fam-cinematic .vk-L-stats{--tb:var(--kdk);--tx:#f6f3ee;--tx2:rgba(246,243,238,.66)}

/* ===== 4. pinned — centered headline and a huge image that rises, everything centered and airy ===== */
.vk-fam-pinned .vk-hcenter{padding-top:clamp(30px,6vw,80px)}
.vk-fam-pinned .vk-hc-media{aspect-ratio:16/9;border-radius:calc(var(--kr) + 18px);overflow:hidden;transform:translateY(calc(var(--hr,0) * 40px)) scale(calc(.92 + var(--hr,0) * .08));transform-origin:50% 100%;box-shadow:0 60px 120px -60px rgba(0,0,0,.45)}
.vk-fam-pinned .vk-hc-media .vk-img{border-radius:0}
.vk-fam-pinned .vk-head:not(.vk-hero-h){text-align:center;margin-inline:auto}
.vk-fam-pinned .vk-head:not(.vk-hero-h) .vk-lead{margin-inline:auto}
.vk-fam-pinned .vk-s{padding-block:clamp(80px,11vw,160px)}

/* ===== 5. hgallery — a gallery that moves sideways, fine grid lines, caption labels ===== */
.vk-fam-hgallery .vk-hsplit{border-block:1px solid var(--tl);padding-block:clamp(24px,4vw,48px)}
.vk-fam-hgallery .vk-hm1{inset:0}
.vk-fam-hgallery .vk-hm2{display:none}
.vk-fam-hgallery .vk-hs-t small,.vk-fam-hgallery .vk-tag{font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em}
.vk-fam-hgallery .vk-hs-m{border-radius:4px}
.vk-fam-hgallery .vk-kick::before{display:none}
.vk-fam-hgallery .vk-kick{font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:none}

/* ===== 6. kinetic — giant type in motion, the marquee as display type ===== */
.vk-fam-kinetic .vk-xxl .vk-h,.vk-fam-kinetic .vk-hcenter h1.vk-h{font-size:clamp(3.6rem,13vw,12rem);line-height:.86;letter-spacing:-.05em;translate:calc(var(--kx,0) * 1px) 0;will-change:translate}
.vk-fam-kinetic .vk-hcenter .vk-h em{display:inline-block;color:var(--kac);font-style:normal}
.vk-fam-kinetic .vk-L-marquee{padding-block:clamp(20px,3vw,40px)}
.vk-fam-kinetic .vk-mq-t{font-size:clamp(2.4rem,7vw,6rem);font-weight:800;letter-spacing:-.03em;animation-duration:22s}
.vk-fam-kinetic .vk-mq-t span:nth-child(4n+3){-webkit-text-stroke:1.5px currentColor;color:transparent}
.vk-fam-kinetic .vk-h{text-transform:none;letter-spacing:-.035em}
.vk-fam-kinetic .vk-kick{background:var(--kac);color:var(--kaci);padding:6px 10px;border-radius:999px}
.vk-fam-kinetic .vk-kick::before{display:none}

/* ===== 7. glass — color glow in the background, translucent frosted layers ===== */
.vk-fam-glass{background:radial-gradient(60vw 50vw at 85% 0%,color-mix(in srgb,var(--kac) 26%,transparent),transparent 70%),radial-gradient(50vw 40vw at 0% 40%,color-mix(in srgb,var(--kac) 14%,transparent),transparent 70%),var(--kbg);background-attachment:fixed}
.vk-fam-glass .vk-s:not(.vk-L-hero_full):not(.vk-t-accent):not(.vk-t-dark){background:transparent}
.vk-fam-glass .vk-card,.vk-fam-glass .vk-plan,.vk-fam-glass .vk-q,.vk-fam-glass .vk-stk-in,.vk-fam-glass .vk-feat li,.vk-fam-glass .vk-pk-o,.vk-fam-glass .vk-stats li{
  background:color-mix(in srgb,var(--kbg) 62%,transparent)!important;backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid color-mix(in srgb,#fff 40%,transparent)}
.vk-fam-glass.vk-dark .vk-card,.vk-fam-glass.vk-dark .vk-plan,.vk-fam-glass.vk-dark .vk-q,.vk-fam-glass.vk-dark .vk-stk-in,.vk-fam-glass.vk-dark .vk-feat li{border-color:rgba(255,255,255,.12)}
.vk-fam-glass .vk-feat{background:none;border:0;gap:14px}
.vk-fam-glass .vk-feat li{border-radius:calc(var(--kr) + 12px)}
.vk-fam-glass .vk-hd{background:color-mix(in srgb,var(--kbg) 55%,transparent)}
.vk-fam-glass .vk-btn{box-shadow:0 10px 30px -12px color-mix(in srgb,var(--kac) 70%,transparent)}
@media (prefers-reduced-transparency:reduce){.vk-fam-glass .vk-card,.vk-fam-glass .vk-plan,.vk-fam-glass .vk-q,.vk-fam-glass .vk-stk-in,.vk-fam-glass .vk-feat li{background:var(--ksf)!important;backdrop-filter:none}}

/* ===== 8. brutal — raw grid, thick lines, mono labels, hard shadow ===== */
.vk-fam-brutal{--kr:0px}
.vk-fam-brutal .vk-s+.vk-s{border-top:2px solid var(--tx)}
.vk-fam-brutal .vk-h{text-transform:uppercase;letter-spacing:-.02em;font-weight:900}
.vk-fam-brutal .vk-kick,.vk-fam-brutal .vk-tag,.vk-fam-brutal .vk-meta,.vk-fam-brutal .vk-note{font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:0;text-transform:none}
.vk-fam-brutal .vk-kick::before{content:"[";width:auto;height:auto;background:none}.vk-fam-brutal .vk-kick::after{content:"]"}
.vk-fam-brutal .vk-btn{border:2px solid var(--tx);box-shadow:5px 5px 0 var(--tx);border-radius:0}
.vk-fam-brutal .vk-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--tx)}
.vk-fam-brutal .vk-btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--tx)}
.vk-fam-brutal .vk-card,.vk-fam-brutal .vk-plan,.vk-fam-brutal .vk-q,.vk-fam-brutal .vk-pc-m,.vk-fam-brutal .vk-hs-m,.vk-fam-brutal .vk-hm1{border:2px solid var(--tx)}
.vk-fam-brutal .vk-feat{border:2px solid var(--tx);background:var(--tx);gap:2px}
.vk-fam-brutal .vk-hm2{border:2px solid var(--tx);box-shadow:8px 8px 0 var(--kac)}
.vk-fam-brutal .vk-mq-t{font-family:ui-monospace,"SF Mono",Menlo,monospace;text-transform:uppercase}

/* ===== 9. swiss — exact 12-column grid, numbered sections, thin red lines ===== */
.vk-fam-swiss{--kr:0px;counter-reset:vksec}
.vk-fam-swiss .vk-s:not(.vk-L-marquee){counter-increment:vksec}
.vk-fam-swiss .vk-head:not(.vk-hero-h) .vk-kick::before{content:counter(vksec,decimal-leading-zero);width:auto;height:auto;background:none;font-weight:800;color:var(--tx)}
.vk-fam-swiss .vk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(20px,4vw,60px);max-width:none;align-items:start}
.vk-fam-swiss .vk-head .vk-kick{grid-row:span 2;padding-top:.6em;border-top:3px solid var(--kac)}
.vk-fam-swiss .vk-head .vk-lead{grid-column:2}
.vk-fam-swiss .vk-hero-h{display:block}
.vk-fam-swiss .vk-h{font-weight:800;letter-spacing:-.04em}
.vk-fam-swiss .vk-hm2{display:none}.vk-fam-swiss .vk-hm1{inset:0}
.vk-fam-swiss .vk-feat{background:none;border:0;border-top:1px solid var(--tx);gap:0}
.vk-fam-swiss .vk-feat li{border-inline-start:1px solid var(--tl);background:none}
@media (max-width:760px){.vk-fam-swiss .vk-head{grid-template-columns:1fr}.vk-fam-swiss .vk-head .vk-kick{grid-row:auto}.vk-fam-swiss .vk-head .vk-lead{grid-column:1}}

/* ===== 10. organic — soft images in shapes that breathe, pill buttons ===== */
.vk-fam-organic .vk-btn{border-radius:999px}
.vk-fam-organic .vk-hm1,.vk-fam-organic .vk-it-m .vk-img,.vk-fam-organic .vk-it-m .vk-ph{border-radius:58% 42% 52% 48% / 46% 56% 44% 54%;overflow:hidden}
.vk-fam-organic .vk-hm1{inset:4% 4% 4% 14%}
.vk-fam-organic .vk-hm2{border-radius:50%;aspect-ratio:1;border-width:10px;width:38%}
.vk-fam-organic .vk-card,.vk-fam-organic .vk-plan,.vk-fam-organic .vk-q,.vk-fam-organic .vk-stk-in{border-radius:36px}
.vk-fam-organic .vk-card-m,.vk-fam-organic .vk-pc-m,.vk-fam-organic .vk-hs-m{border-radius:28px}
.vk-fam-organic .vk-feat{background:none;border:0;gap:14px}
.vk-fam-organic .vk-feat li{border-radius:32px;background:var(--ksf)}
.vk-fam-organic .vk-t-alt .vk-feat li{background:var(--kbg)}
.vk-fam-organic .vk-kick{background:color-mix(in srgb,var(--kac) 14%,transparent);padding:7px 14px;border-radius:999px;letter-spacing:.06em}
.vk-fam-organic .vk-kick::before{display:none}
@media (prefers-reduced-motion:no-preference){.vk-fam-organic .vk-hmedia>.vk-hm1{animation:vkBlob 16s ease-in-out infinite alternate}[data-vk-motion=float].vk-fam-organic .vk-hmedia>.vk-hm1{animation:vkBlob 16s ease-in-out infinite alternate,vkFloat 9s ease-in-out infinite alternate}}
@keyframes vkBlob{0%{border-radius:58% 42% 52% 48% / 46% 56% 44% 54%}50%{border-radius:44% 56% 40% 60% / 58% 42% 58% 42%}100%{border-radius:52% 48% 62% 38% / 40% 60% 46% 54%}}

/* ===== 11. luxe — darkness, a single light, gold lines that draw out, slow zoom ===== */
.vk-fam-luxe .vk-h{font-weight:400;letter-spacing:-.01em}
.vk-fam-luxe h1.vk-h,.vk-fam-luxe .vk-hero-h .vk-h{font-weight:400;letter-spacing:-.02em}
.vk-fam-luxe .vk-kick{letter-spacing:.32em;font-size:.7rem;font-weight:500}
.vk-fam-luxe .vk-kick::before{width:0;transition:width 1.4s var(--kease) .2s}
.vk-fam-luxe [data-vk-rv].is-in .vk-kick::before,.vk-fam-luxe .vk-head.is-in .vk-kick::before{width:48px}
.vk-fam-luxe .vk-btn{border-radius:0;background:transparent;color:var(--tx);border:1px solid var(--kac);letter-spacing:.12em;font-weight:500}
.vk-fam-luxe .vk-btn:hover{background:var(--kac);color:var(--kaci)}
.vk-fam-luxe .vk-t-accent .vk-btn{border-color:var(--kaci)}
.vk-fam-luxe .vk-hbg{animation:vkZoom 24s ease-out both}
.vk-fam-luxe .vk-feat{background:none;border:0;gap:0}
.vk-fam-luxe .vk-feat li{background:none;border-top:1px solid color-mix(in srgb,var(--kac) 45%,transparent)}
.vk-fam-luxe .vk-fn{color:var(--kac);font-family:var(--kfh);font-size:1.6rem}
.vk-fam-luxe .vk-s{padding-block:clamp(90px,12vw,180px)}
@keyframes vkZoom{from{scale:1.14}to{scale:1}}
@media (prefers-reduced-motion:reduce){.vk-fam-luxe .vk-hbg{animation:none}.vk-fam-luxe .vk-kick::before{width:48px;transition:none}}

/* ===== 12. picker — app-like: clear prices, sticky order bar, chips ===== */
.vk-fam-picker .vk-btn{border-radius:14px}
.vk-fam-picker .vk-card,.vk-fam-picker .vk-plan,.vk-fam-picker .vk-q{border-radius:20px}
.vk-fam-picker .vk-card-m,.vk-fam-picker .vk-pc-m,.vk-fam-picker .vk-img,.vk-fam-picker .vk-ph{border-radius:16px}
.vk-fam-picker .vk-feat{background:none;border:0;gap:12px}
.vk-fam-picker .vk-feat li{border:1px solid var(--tl);border-radius:20px}
.vk-fam-picker .vk-kick{color:var(--kac);font-weight:700;letter-spacing:.04em;text-transform:none;font-size:.9rem}
.vk-fam-picker .vk-kick::before{width:8px;height:8px;border-radius:50%;background:currentColor}

/* ---------- signature motion of each family: transform/opacity only; reduced motion = nothing ---------- */
@media (prefers-reduced-motion:no-preference){
  .vk-js .vk-fam-bento [data-vk-rv].vk-bn{transform:translateY(30px) scale(.96);opacity:0;transition:transform 1s var(--kease) var(--d,0ms),opacity .8s var(--kease) var(--d,0ms)}
  .vk-js .vk-fam-bento [data-vk-rv].vk-bn.is-in{transform:none;opacity:1}
  .vk-js .vk-fam-editorial .vk-it-m{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--kease)}
  .vk-js .vk-fam-editorial .vk-it-m.is-vis{clip-path:inset(0 0 0 0)}
  .vk-fam-brutal [data-vk-rv]{transition-timing-function:steps(4,end)!important}
  .vk-js .vk-fam-swiss [data-vk-rv]:not(.is-in){transform:translateY(14px)}
}
.vk-fam-cinematic .vk-L-hero_full,.vk-fam-luxe .vk-L-hero_full{background:var(--kdk)}
@media (prefers-reduced-motion:reduce){.vk-fam-cinematic .vk-L-hero_full .vk-hfull{clip-path:none}.vk-fam-kinetic .vk-hcenter h1.vk-h{translate:none}.vk-fam-pinned .vk-hc-media{transform:none}}