/* Live-demo screenshot frame (templates/includes/_demo_shot.html).
   Used on the /themes/ hub and the platform home industry cards; both pages
   define --accent, --accent-ink, --rule, --rule-strong, --bg-alt and --fg.
   z-index:2 keeps it clickable above a card's stretched link (hub). */
.demo-shot{position:relative;z-index:2;display:block;margin:4px 0 2px;border:1px solid var(--rule-strong);background:#fff;overflow:hidden;color:var(--fg);text-decoration:none;box-shadow:0 1px 0 rgba(10,18,48,.04);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .25s ease}
.demo-shot:hover,.demo-shot:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(0,0,0,.45);border-color:var(--accent);outline:none}
.demo-shot .bar{display:flex;align-items:center;gap:6px;padding:7px 10px;background:#F7F6F2;border-bottom:1px solid var(--rule)}
.demo-shot .bar i{width:7px;height:7px;border-radius:50%;background:rgba(10,18,48,.18);flex-shrink:0}
.demo-shot .bar .url{flex:1;min-width:0;margin-left:6px;padding:2px 8px;background:#fff;border:1px solid var(--rule);border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.02em;color:rgba(10,18,48,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-shot .img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.demo-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s ease}
.demo-shot:hover img{transform:scale(1.03)}
.demo-shot .cta{position:absolute;right:10px;bottom:10px;padding:6px 10px;background:var(--accent);color:var(--accent-ink);font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease}
.demo-shot:hover .cta,.demo-shot:focus-visible .cta{opacity:1;transform:none}
@media (hover:none){.demo-shot .cta{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.demo-shot,.demo-shot img,.demo-shot .cta{transition:none}.demo-shot:hover,.demo-shot:hover img{transform:none}}