.vectra-slideshow{padding:clamp(20px,3vw,42px);background:linear-gradient(135deg,#8c9fa7,#5a727d);border-radius:12px}
.vectra-slide-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;color:#f3f7f8;font-size:13px}.vectra-slide-heading p{margin:0;line-height:1.5}.vectra-slide-controls{display:flex;align-items:center;gap:20px;white-space:nowrap}.vectra-slide-controls button{border:1px solid #dbe6e68a;background:transparent;color:#fff;font:inherit;border-radius:24px;padding:7px 15px;cursor:pointer}
.vectra-slides{display:block;position:relative;aspect-ratio:888/517;background:#f2f3f4}.vectra-slideshow .vectra-slides>img,.vectra-slideshow .vectra-slides>[data-vectra-frame]{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 650ms ease-in-out}.vectra-slideshow .vectra-slides>img.is-active,.vectra-slideshow .vectra-slides>[data-vectra-frame].is-active{opacity:1}
.vectra-slide-dots{display:flex;gap:9px;justify-content:center;margin-top:18px}.vectra-slide-dots button{padding:8px;border:0;background:transparent;cursor:pointer}.vectra-slide-dots span{display:block;width:7px;height:7px;border:1px solid #d2e0e3;border-radius:50%;background:transparent}.vectra-slide-dots button[aria-pressed=true] span{background:#e0e8b2;border-color:#e0e8b2}.vectra-slide-dots button:focus-visible,.vectra-slide-controls button:focus-visible{outline:2px solid #e0e8b2;outline-offset:2px}
@media(max-width:600px){.vectra-slide-heading{align-items:start;font-size:11px;gap:12px}.vectra-slide-controls{gap:10px}.vectra-slide-controls button{padding:5px 10px}}
@media(prefers-reduced-motion:reduce){.vectra-slideshow .vectra-slides>img,.vectra-slideshow .vectra-slides>[data-vectra-frame]{transition:none}}

/* All live project slideshows use the selected compact expanding-pill pattern. */
.vectra-slideshow:not(.indicator-demo) .vectra-slide-dots{gap:4px;align-items:center}
.vectra-slideshow:not(.indicator-demo) .vectra-slide-dots button{display:grid;place-items:center;width:32px;height:32px;padding:4px;border-radius:16px}
.vectra-slideshow:not(.indicator-demo) .vectra-slide-dots span{transition:width .25s,background .25s,border-color .25s}
.vectra-slideshow:not(.indicator-demo) .vectra-slide-dots button[aria-pressed=true] span{width:25px;border-radius:10px}
.vectra-slideshow:not(.indicator-demo) .vectra-slide-dots button:hover{background:#ffffff14}
@media(prefers-reduced-motion:reduce){.vectra-slideshow:not(.indicator-demo) .vectra-slide-dots span{transition:none}}

/* Slide position is communicated by the shared bottom indicators only. */
.vectra-slideshow .vectra-slide-controls{display:none}

/* Original artwork is fitted first, then clipped to its actual device edge. */
.early-project-slideshow .vectra-slides{background:transparent}
.early-project-slideshow .project-slide-frame{display:flex;align-items:center;justify-content:center;container-type:size}
.early-project-slideshow .project-slide-art{width:min(100cqw,calc(100cqh * var(--art-ratio)));aspect-ratio:var(--art-ratio);flex-shrink:0;overflow:hidden;border-radius:var(--art-radius);isolation:isolate}
.early-project-slideshow .project-slide-art img{display:block;width:100%;height:100%;object-fit:contain}

/* Keep long collections within the mobile frame without shrinking tap targets. */
.vectra-slideshow:not(.indicator-demo) .vectra-slide-dots{flex-wrap:wrap}
.vectra-slideshow:not(.indicator-demo) .vectra-slide-dots button{flex:0 0 32px}