/**
 * Case shell — mobile / full-page only (<1280).
 * Frame flush to device edges; viewport fill = light case interior (--card),
 * NOT frame/accent (--border) and NOT Webflow --base #c1d4e6.
 * Desktop / overlay (≥1280) untouched.
 */
@media (max-width: 1279px) {
  /* Kill site chrome blue around the case */
  html:not(.vdr-in-overlay):has(#vdr-case),
  html:not(.vdr-in-overlay):has(#vdr-case) body.body.portfolio-item,
  html:not(.vdr-in-overlay):has(#vdr-case) .work-collection-wrapper,
  html:not(.vdr-in-overlay):has(#vdr-case) .w-dyn-list,
  html:not(.vdr-in-overlay):has(#vdr-case) .w-dyn-items,
  html:not(.vdr-in-overlay):has(#vdr-case) .w-dyn-item,
  html:not(.vdr-in-overlay):has(#vdr-case) .w-embed {
    background-color: transparent !important;
    background-image: none !important;
  }

  html:not(.vdr-in-overlay) #vdr-case {
    padding: 0 !important;
    /* Light interior behind/around card — Jazz white, LOK warm grey, etc. */
    background: var(--card) !important;
    min-height: 100dvh;
    min-height: 100svh;
    width: 100%;
    max-width: none;
  }

  /* Viewport fill even when #vdr-case is shorter than one screen */
  html:not(.vdr-in-overlay) #vdr-case::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--card);
    pointer-events: none;
  }

  html:not(.vdr-in-overlay) #vdr-case > * {
    position: relative;
    z-index: 1;
  }

  html:not(.vdr-in-overlay) #vdr-case .vdr-card {
    max-width: none !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0;
  }
}