/* carousel.css — shared crossfade carousel used on home + about */

.kp-carousel{position:relative;overflow:hidden;border-radius:var(--radius-card);background:#F5F5F5}
.kp-slides{position:relative;width:100%;height:100%}
.kp-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:block}
.kp-slide.active{opacity:1;position:relative}
.kp-slide img{width:100%;height:100%;object-fit:cover;display:block}

.kp-prev,.kp-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border:none;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.kp-prev{left:14px}.kp-next{right:14px}
.kp-prev:hover,.kp-next:hover{background:rgba(0,0,0,.6)}

.kp-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.kp-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.3s}
.kp-dot.active{background:#fff;width:24px;border-radius:5px}

.kp-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.65));z-index:2}
.kp-cap h3{font-size:21px;margin:0 0 4px;color:#fff}
.kp-cap p{font-size:14px;margin:0;opacity:.92;color:#fff}

/* factory carousels inside the About page figures fill their container */
.about .fig .kp-carousel,.story .fig .kp-carousel{height:100%;border-radius:0}