/* media-embed.css
   Reusable, site-wide styles for attaching images to any card or page section.
   Include once on every page that needs it:
     <link rel="stylesheet" href="media-embed.css">
*/

/* ---------- Card-style image frame (e.g. thumbnail cards) ---------- */
.media-frame{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#101927,#1b2a3e);
  aspect-ratio: var(--media-ratio, 16/9); /* override per-instance: style="--media-ratio:16/8.6" */
}
.media-frame img,
.media-frame svg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- Full-page / full-section hero image ---------- */
.media-page{
  position:relative;
  overflow:hidden;
  min-height: var(--media-min-height, 60vh);
}
.media-page > img.media-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  z-index:0;

}.media-page > .media-page-content{
  position:relative;
  z-index:1;
}

/* Optional dark overlay so text stays legible over a hero image.
   Add class="media-page media-overlay" or attribute data-media-overlay */
.media-page.media-overlay:before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,15,25,.45);
  z-index:0;
}