.slideshow { position: relative; margin-top: 28px; border-radius: 6px; overflow: hidden; background: #1c1c1c; }
.slideshow .slides { position: relative; aspect-ratio: 16 / 9; }
.slideshow .slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.slideshow .slide.is-active { opacity: 1; pointer-events: auto; }
.slideshow .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slideshow figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px; color: #fff; font-size: 15px; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.ss-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.ss-btn:hover, .ss-btn:focus-visible { background: #C9922A; }
.ss-prev { left: 12px; } .ss-next { right: 12px; }
.ss-dots { position: absolute; top: 12px; right: 14px; display: flex; gap: 8px; }
.ss-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.ss-dots button[aria-selected="true"] { background: #C9922A; }
@media (max-width: 600px) { .slideshow .slides { aspect-ratio: 4 / 3; } .ss-btn { width: 36px; height: 36px; font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .slideshow .slide { transition: none; } }