/* ==========================================================================
   Kit (shared across templates): slider, snow, loading bar, logo size.
   Only uses --vt-primary and --vt-radius from the template tokens. Prefix is rewritten by tools/port-kit.mjs.
   ========================================================================== */
.vt-logo img { max-height: var(--vt-logo-h, 40px); }
@media (max-width: 640px) { .vt-logo img { max-height: var(--vt-logo-hm, 32px); } }
.vt-loader { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 99999; background: var(--vt-primary, #4f6bed); box-shadow: 0 0 10px var(--vt-primary, #4f6bed); transition: width .25s ease, opacity .4s ease; }
.vt-snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9990; }
.vt-slider { position: relative; overflow: hidden; border-radius: var(--vt-radius, 12px); isolation: isolate; color: #fff; min-height: 380px; background: #0b0f16; }
.vt-slider--short { min-height: 280px; } .vt-slider--tall { min-height: 520px; }
.vt-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; background-size: cover; background-position: center; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.vt-slide.is-on { opacity: 1; visibility: visible; z-index: 1; position: relative; min-height: inherit; }
.vt-slide--g0 { background-image: linear-gradient(135deg, rgba(var(--vt-primary-rgb, 79,107,237), .9), #0b0f16); } .vt-slide--g1 { background-image: linear-gradient(135deg, #1d63a8, #08203a); } .vt-slide--g2 { background-image: linear-gradient(135deg, #a8561d, #3a1a08); } .vt-slide--g3 { background-image: linear-gradient(135deg, #6b2fb0, #1c0a3a); }
.vt-slide:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.15) 65%); }
.vt-slider--shade-light .vt-slide:after { background: linear-gradient(0deg, rgba(0,0,0,.6), transparent 60%); } .vt-slider--shade-strong .vt-slide:after { background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.4) 80%); }
.vt-slide__body { position: relative; z-index: 2; padding: clamp(1.4rem, 4vw, 3rem); max-width: 40rem; display: grid; gap: .8rem; justify-items: start; }
.vt-slide__body h3 { margin: 0; color: #fff !important; font-size: clamp(1.6rem, 4vw, 3rem); text-shadow: 0 3px 20px rgba(0,0,0,.5); } .vt-slide__body p { margin: 0; color: rgba(255,255,255,.85); }
.vt-slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s; } .vt-slider__nav:hover { background: var(--vt-primary, #4f6bed); } .vt-slider__nav.prev { left: 14px; } .vt-slider__nav.next { right: 14px; }
.vt-slider__dots { position: absolute; z-index: 4; right: 1.4rem; bottom: 1.2rem; display: flex; gap: .45rem; } .vt-slider__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .2s, background .2s; } .vt-slider__dot.is-on { width: 26px; background: var(--vt-primary, #fff); }
@media (max-width: 640px) { .vt-slider__nav { display: none; } .vt-slider { min-height: 340px; } }