/* Saraball Media — follows theme tokens when present, sensible fallbacks otherwise */
.sbm{--sbm-turf:var(--turf,#0c8a4f);--sbm-line:var(--line,rgba(127,140,160,.25));--sbm-muted:var(--muted,#5b6577);clear:both}
.sbm:not(.hcard){margin:28px 0;padding:20px;border:1px solid var(--sbm-line);border-radius:22px}
.sbm-h{margin:0 0 14px;font-size:1.15rem;font-weight:700;line-height:1.3}
.sbm-credit{margin:12px 0 0;font-size:.8rem;color:var(--sbm-muted)}
.sbm-credit a{color:inherit;text-decoration:underline}
.sbm-meta{display:block;margin-top:4px;font-size:.8rem;color:var(--sbm-muted)}

.sbm-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:16px;overflow:hidden;
  background:#000;cursor:pointer;color:#fff;text-align:left}
.sbm-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease,opacity .3s}
.sbm-play:hover img{transform:scale(1.03);opacity:.85}
.sbm-play iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sbm-btn{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:var(--sbm-turf);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.sbm-btn::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff}
.sbm-cap{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;font-size:.9rem;font-weight:600;line-height:1.35;
  background:linear-gradient(transparent,rgba(0,0,0,.8));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sbm-clip .sbm-btn{width:76px;height:76px;margin:-38px 0 0 -38px}
.sbm-clip .sbm-btn::after{left:31px;top:24px;border-width:14px 0 14px 23px}

.sbm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.sbm-grid .sbm-cap{font-size:.82rem}
.sbm-grid .sbm-btn{width:48px;height:48px;margin:-24px 0 0 -24px}
.sbm-grid .sbm-btn::after{left:19px;top:14px;border-width:10px 0 10px 16px}

.sbm-list{list-style:none;margin:0;padding:0}
.sbm-list li{padding:12px 0;border-top:1px solid var(--sbm-line)}
.sbm-list li:first-child{border-top:0;padding-top:0}
.sbm-list a{font-weight:600;line-height:1.45;text-decoration:none;color:inherit}
.sbm-list a:hover{color:var(--sbm-turf)}

.sbm-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.sbm-strip>a,.sbm-kit{flex:0 0 auto;scroll-snap-align:start;margin:0}
.sbm-strip img{height:180px;width:auto;border-radius:14px;display:block;object-fit:cover}
.sbm-kit{text-align:center;font-size:.8rem;color:var(--sbm-muted)}
.sbm-kit img{height:150px;background:rgba(127,140,160,.08);padding:8px}

@media (max-width:600px){
  .sbm:not(.hcard){padding:16px;border-radius:18px;margin:20px 0}
  .sbm-grid{grid-template-columns:1fr 1fr;gap:10px}
  .sbm-grid .sbm-cap{font-size:.72rem;padding:20px 8px 8px}
  .sbm-strip img{height:130px}
}
@media (prefers-reduced-motion:reduce){.sbm-play img{transition:none}}
