/* Shared mockup shell (image + optional gradient layers) — see media-gradient-elements.css */

.media-frame {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: min(800px, 85vh);
  max-height: 800px;
  margin-inline: auto;
  --media-frame-outer-radius: var(--radius-dropdown-panel);
  /* Inset for bottom/side glass cards; override per section when positioning differs */
  --media-frame-dynamic-inset: clamp(14px, 2.2vw, 28px);
  /*
   * Concentric inner arc: outer − inset, plus a breakpoint offset so the corner
   * “road” stays even (wider viewports need a rounder inner radius than raw math).
   */
  --media-frame-dynamic-radius-extra: 8px;
  --media-frame-dynamic-radius: clamp(
    16px,
    calc(
      var(--media-frame-outer-radius) - var(--media-frame-dynamic-inset) +
        var(--media-frame-dynamic-radius-extra)
    ),
    30px
  );
  border-radius: var(--media-frame-outer-radius);
  overflow: hidden;
  background: var(--color-light-grey);
}

.media-frame__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.media-frame__surface > .asset-skeleton-wrap {
  position: absolute;
  inset: 0;
}

.media-frame__img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1100px) {
  .media-frame {
    height: auto;
    aspect-ratio: 600 / 800;
    max-height: min(75vh, 800px);
  }
}

@media (max-width: 768px) {
  .media-frame {
    --media-frame-dynamic-radius-extra: 4px;
    --media-frame-dynamic-radius: clamp(
      12px,
      calc(
        var(--media-frame-outer-radius) - var(--media-frame-dynamic-inset) +
          var(--media-frame-dynamic-radius-extra)
      ),
      30px
    );
  }
}

/* Glass cards at the bottom of mockups — concentric corners with the frame */
.media-frame__surface > .sw-monthly-preview,
.media-frame__surface > .sw-install-preview {
  border-radius: var(--media-frame-dynamic-radius);
}