.sts-showcase { --sts-bg:#111111; --sts-gold:#c9a86a; --sts-text:#ffffff; --sts-muted:rgba(255,255,255,.72); position:relative; padding:clamp(42px,6vw,86px) 0; overflow:hidden; font-family:inherit; }
.sts-showcase:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%, rgba(201,168,106,.20), transparent 32%), radial-gradient(circle at 85% 55%, rgba(255,255,255,.09), transparent 30%), linear-gradient(135deg, #090909, #1c1a16 45%, #0d0d0d); z-index:0; }
.sts-showcase * { box-sizing:border-box; }
.sts-head { position:relative; z-index:1; max-width:850px; margin:0 auto 30px; text-align:center; padding:0 20px; color:var(--sts-text); }
.sts-kicker { display:inline-flex; color:var(--sts-gold); border:1px solid rgba(201,168,106,.42); border-radius:999px; padding:7px 14px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:13px; }
.sts-head h2 { color:var(--sts-text); font-size:clamp(30px,4vw,54px); line-height:1.05; margin:0 0 12px; }
.sts-head p { color:var(--sts-muted); font-size:clamp(15px,1.5vw,18px); margin:0 auto; max-width:680px; }
.sts-rail-wrap { position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:0 52px; }
.sts-rail { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:12px 6px 26px; scrollbar-width:thin; }
.sts-card { flex:0 0 clamp(210px,22vw,300px); aspect-ratio:9/16; border-radius:28px; overflow:hidden; position:relative; background:#222; scroll-snap-align:center; cursor:pointer; box-shadow:0 24px 70px rgba(0,0,0,.38); transform:translateY(0); transition:transform .3s ease, box-shadow .3s ease; border:1px solid rgba(255,255,255,.12); }
.sts-card:hover { transform:translateY(-8px); box-shadow:0 30px 85px rgba(0,0,0,.48); }
.sts-media, .sts-media img, .sts-media video { width:100%; height:100%; display:block; }
.sts-media img, .sts-media video { object-fit:cover; }
.sts-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.18) 48%, rgba(0,0,0,.06)); }
.sts-content { position:absolute; left:0; right:0; bottom:0; padding:22px; color:#fff; }
.sts-content p { margin:0 0 14px; color:#fff; font-size:15px; line-height:1.45; }
.sts-meta strong { display:block; font-size:16px; color:#fff; }
.sts-meta span { display:block; margin-top:3px; color:rgba(255,255,255,.72); font-size:13px; }
.sts-play { position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.88); color:#111; display:flex; align-items:center; justify-content:center; font-size:16px; padding-left:3px; box-shadow:0 12px 34px rgba(0,0,0,.22); }
.sts-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.11); color:#fff; font-size:34px; line-height:1; cursor:pointer; backdrop-filter:blur(12px); transition:background .2s ease, transform .2s ease; }
.sts-nav:hover { background:rgba(201,168,106,.38); transform:translateY(-50%) scale(1.06); }
.sts-prev { left:6px; }
.sts-next { right:6px; }
.sts-lightbox { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.86); display:none; align-items:center; justify-content:center; padding:24px; }
.sts-lightbox.is-open { display:flex; }
.sts-lightbox-media { width:min(92vw,420px); aspect-ratio:9/16; border-radius:28px; overflow:hidden; background:#111; box-shadow:0 25px 90px rgba(0,0,0,.55); }
.sts-lightbox-media img, .sts-lightbox-media video { width:100%; height:100%; object-fit:cover; display:block; }
.sts-close { position:fixed; top:22px; right:22px; width:46px; height:46px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12); color:#fff; font-size:34px; line-height:1; cursor:pointer; }
@media (max-width: 767px) { .sts-showcase { padding:46px 0; } .sts-rail-wrap { padding:0 14px; } .sts-rail { gap:14px; padding-bottom:18px; } .sts-card { flex-basis:78vw; max-width:310px; } .sts-nav { display:none; } .sts-content { padding:18px; } }
