/* Lemma Docs — media frames (Pro): Screen-Studio-style backdrops behind
   image, video, and audio blocks. Loaded on docs routes and in the editor. */

.hx-frame{display:block;border-radius:18px;overflow:hidden;padding:var(--hx-frame-pad,36px)}
figure.hx-frame{margin-left:0;margin-right:0}
.hx-frame-pad--sm{--hx-frame-pad:18px}
.hx-frame-pad--md{--hx-frame-pad:36px}
.hx-frame-pad--lg{--hx-frame-pad:56px}

.hx-frame--aurora{background:linear-gradient(135deg,#8b7dff,#5b8cff)}
.hx-frame--sunset{background:linear-gradient(135deg,#fbbf24,#fb7185)}
.hx-frame--meadow{background:linear-gradient(135deg,#34d399,#38bdf8)}
.hx-frame--dusk{background:linear-gradient(135deg,#171a2e,#232048 55%,#3b2a5e)}
.hx-frame--brand{background:linear-gradient(135deg,var(--hx-primary,#6d5efc),var(--hx-primary-2,#8b7dff))}
.hx-frame--custom{background:var(--hx-frame-c,#0a2540)}

.hx-frame img,
.hx-frame video{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 12px 36px rgba(10,14,30,.35)}
.hx-frame img{cursor:zoom-in}
.hx-frame audio{display:block;width:100%}

.hx-frame figcaption{color:rgba(255,255,255,.88);text-align:center;font-size:13px;margin:12px 0 0;text-shadow:0 1px 2px rgba(10,14,30,.35)}

@media (max-width:640px){
  .hx-frame-pad--md{--hx-frame-pad:22px}
  .hx-frame-pad--lg{--hx-frame-pad:30px}
}
@media print{
  .hx-frame{background:none !important;padding:0}
  .hx-frame img,.hx-frame video{box-shadow:none}
  .hx-frame figcaption{color:inherit;text-shadow:none}
}