/* Vertical video previews retain their full frame, including embedded subtitles. */
.showcase-card{border-radius:23px;align-self:stretch}
.showcase-frame{position:relative;display:block;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:13px;background:#f7e9ec;padding:0}
.showcase-frame img,.showcase-frame video{display:block;width:100%;height:100%;object-fit:contain}
.showcase-frame [hidden]{display:none}
.showcase-meta{min-height:66px;padding:12px 3px 0;justify-content:space-between;gap:8px}
.showcase-meta h3{font-size:15px;line-height:1.4}
.showcase-duration{font-size:12px;color:#9a7786;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.showcase-player{background:#20171b}
.showcase-player video{position:absolute;inset:0}
.video-start{position:absolute;inset:0;width:100%;padding:0;color:white;display:grid;place-items:center}
.video-start img{position:absolute;inset:0;transition:filter .25s}
.video-start:hover img{filter:brightness(.9)}
.video-start-icon{position:relative;width:66px;height:66px;border-radius:50%;border:1px solid #fff9;display:grid;place-items:center;background:#492f3b66;backdrop-filter:blur(6px);box-shadow:0 4px 24px #25161b33;transition:transform .25s,background .25s}
.video-start-icon .icon{width:27px;height:27px;fill:currentColor;stroke:none;transform:translateX(-2px)}
.video-start:hover .video-start-icon{transform:scale(1.06);background:#9d4564aa}
.video-start-copy{position:absolute;top:calc(50% + 45px);font-size:12px;padding:5px 12px;border-radius:20px;background:#24151cc4;letter-spacing:.04em}
.video-status{position:absolute;left:12px;right:12px;bottom:70px;padding:9px 12px;background:#24151ce6;color:white;border-radius:10px;font-size:12px;line-height:1.5;text-align:center;pointer-events:none}
.video-fallback{position:absolute;inset:auto 15px 15px;text-align:center;padding:12px;color:white;background:#833653;border-radius:12px}
.showcase .gallery-bottom{justify-content:flex-end}
@media(max-width:760px){
  .showcase-card{flex-basis:min(88%,342px);border-radius:21px}
  .showcase-meta{min-height:66px;padding:10px 2px 0}
  .showcase-meta h3{font-size:13px}
  .video-start-icon{width:59px;height:59px}
  .video-start-copy{top:calc(50% + 41px)}
}
@media(prefers-reduced-motion:reduce){
  .video-start img,.video-start-icon{transition:none}
}