/* Showcase index (/<route>/showcase/) and the Trailer block on a tool's info page. */
.tbx-showcase { max-width: 1040px; margin: 0 auto; padding: 40px 20px 80px; }
.tbx-showcase-title { font-family: var(--font-mono); font-size: 24px; font-weight: 600; margin: 0 0 8px; }
.tbx-showcase-sub { font-size: 12px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.tbx-showcase-lede { color: var(--text-secondary); font-size: 14px; line-height: 1.6; max-width: 680px; margin: 0 0 28px; }
.tbx-showcase-lede b { color: var(--text-primary); }
.tbx-showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 18px; }
.tbx-sc-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.tbx-sc-card[data-primary="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.tbx-sc-media { position: relative; display: block; aspect-ratio: 16 / 9; background: #05070d; }
.tbx-sc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbx-sc-play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(5,7,13,.55), transparent 55%); transition: background .2s; }
.tbx-sc-play span { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); display: grid; place-items: center; transition: transform .2s, background .2s; }
.tbx-sc-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.tbx-sc-media:hover .tbx-sc-play span { transform: scale(1.08); background: rgba(255,255,255,.26); }
.tbx-sc-len { position: absolute; right: 10px; bottom: 8px; font-family: var(--font-mono); font-size: 11px; color: #fff; background: rgba(5,7,13,.6); padding: 2px 7px; border-radius: 999px; }
.tbx-sc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.tbx-sc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tbx-sc-name { font-weight: 600; font-size: 15px; margin-right: auto; }
.tbx-sc-chip { font-family: var(--font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-secondary); white-space: nowrap; }
.tbx-sc-chip.primary { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); font-weight: 600; }
.tbx-sc-desc { color: var(--text-secondary); font-size: 13px; line-height: 1.55; margin: 0; }
.tbx-sc-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tbx-sc-links a { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-decoration: none; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-secondary); white-space: nowrap; }
.tbx-sc-links a:hover { color: var(--text-primary); background: var(--panel-raised); }
.tbx-sc-links a.watch { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.tbx-sc-links small { font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.tbx-sc-url { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); word-break: break-all; }
.tbx-showcase-foot { color: var(--text-muted); font-size: 11px; margin-top: 28px; line-height: 1.7; }
.tbx-showcase-foot a { color: var(--text-secondary); }
/* info page block */
.tbx-trailer { display: flex; gap: 14px; align-items: stretch; margin: 0 0 24px; padding: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.tbx-trailer-media { position: relative; flex: 0 0 220px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #05070d; display: block; }
.tbx-trailer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbx-trailer-media .tbx-sc-play span { width: 40px; height: 40px; }
.tbx-trailer-media .tbx-sc-play svg { width: 16px; height: 16px; }
.tbx-trailer-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.tbx-trailer-text b { font-size: 14px; }
.tbx-trailer-text span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.tbx-trailer-text a { font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-decoration: none; }
.tbx-trailer-text a:hover { text-decoration: underline; }
@media (max-width: 520px) { .tbx-trailer { flex-direction: column; } .tbx-trailer-media { flex-basis: auto; width: 100%; } }