/* ===== VCP page. Loads AFTER ddp.css (shared base) — overrides tuned to website-vcp/index.html. Scoped to VCP by being enqueued only on this template. ===== */

/* --- spacing overrides na reużytych sekcjach (wartości z projektu VCP) --- */
.ddp-hero{gap:16px;padding:clamp(56px,7vw,80px) 20px}
.ddp-hero .cta{margin-top:32px}
.ddp-intro{padding-top:clamp(72px,10vw,140px);gap:clamp(40px,5vw,64px)}
.ddp-intro .txt{gap:24px}
.ddp-statcard{flex:0 0 351px;gap:32px}
.ddp-plate{margin-top:clamp(56px,8vw,80px);padding:clamp(48px,6vw,80px) clamp(24px,4vw,60px);gap:clamp(40px,5vw,64px)}
.ddp-plate .phead{max-width:900px}
.ddp-fset{padding:clamp(72px,10vw,140px) 0;gap:clamp(48px,6vw,80px)}
.ddp-fset .fhead{max-width:980px}
.ddp-fsrow{grid-template-columns:280px 1fr;gap:24px;padding:40px 0}
.ddp-fsrow .items{gap:32px 48px}
.ddp-dark{margin-top:0}

/* --- shot: terminal zamiast zdjęcia (reuse .ddp-shotpic skew + .ddp-browser) --- */
.ddp-shotpic--term{display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,56px)}
.vcp-term{position:relative;z-index:1;width:min(82%,780px)}
.vcp-term .ddp-code{font-size:14px;line-height:24px}

/* --- specstrip pod shotem (flex + border-bottom, jak projekt) --- */
.vcp-specstrip{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:40px 0;border-bottom:1px solid var(--border)}
.vcp-specstrip .sp{display:flex;flex-direction:column;gap:6px}
.vcp-specstrip .sp b{font-weight:700;font-size:16px;line-height:24px}
.vcp-specstrip .sp span{font-size:14px;line-height:20px;color:var(--g5)}

/* --- who is it for: białe karty z cieniem + ikona-chip (jak projekt) --- */
.vcp-who{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vcp-wcard{background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--peri200);padding:40px;display:flex;flex-direction:column;gap:20px}
.vcp-wcard .ic{width:44px;height:44px;border-radius:12px;background:var(--peri100);color:var(--peri700);display:flex;align-items:center;justify-content:center;flex:none}
.vcp-wcard .ic svg{width:24px;height:24px}
.vcp-wcard h3{font-weight:700;font-size:20px;line-height:1.3}
.vcp-wcard p{font-size:16px;line-height:24px;color:var(--g6)}
.vcp-wcard ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.vcp-wcard li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:24px;color:var(--ink)}
.vcp-wcard li svg{width:20px;height:20px;color:var(--success);flex:none;margin-top:2px}
.vcp-wcard .fn{margin-top:auto;padding-top:8px;font-size:15px;line-height:23px;color:var(--g5);font-style:italic}

/* --- open source: kafel na wash + białe kolumny + mono-tagi (jak projekt) --- */
.vcp-oss{margin-top:clamp(72px,10vw,140px);border-radius:24px;background:var(--wash);padding:clamp(48px,6vw,80px) clamp(24px,4vw,60px);display:flex;flex-direction:column;gap:clamp(40px,5vw,56px)}
.vcp-oss .oh{display:flex;gap:64px;align-items:flex-start;flex-wrap:wrap}
.vcp-oss .oh .t{flex:1;min-width:300px;display:flex;flex-direction:column;gap:16px}
.vcp-oss .oh p{flex:1;min-width:300px;font-size:18px;line-height:28px;color:var(--g6)}
.vcp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vcp-col{background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--peri200);padding:32px;display:flex;flex-direction:column;gap:16px}
.vcp-col h4{font-weight:700;font-size:18px;line-height:1.4}
.vcp-col>div{display:flex;flex-wrap:wrap;gap:8px}
.vcp-tag{font:600 13px/1 var(--mono);color:var(--peri700);background:var(--peri100);border-radius:6px;padding:7px 10px}

/* --- closing CTA band wyśrodkowany --- */
.vcp-ctaband{justify-content:center}
.vcp-ctaband .txt{align-items:center;text-align:center}

@media (max-width:1000px){
  .ddp-fsrow{grid-template-columns:1fr}
}
@media (max-width:900px){
  .vcp-who{grid-template-columns:1fr}
  .vcp-oss .oh{flex-direction:column;gap:16px}
  .vcp-cols{grid-template-columns:1fr}
}
@media (max-width:700px){
  .vcp-specstrip{gap:20px}
  .vcp-specstrip .sp{flex:1 1 40%}
}