/* ═══════════════════════════════════════════════════════════
   MacBook Pro 15" Device Frame — Canonical Component
   ═══════════════════════════════════════════════════════════
   Global source of truth: /Global_Assets/DeviceFrame/AppleMacbookPro15.svg
   (Aluminum bezel, hinge, base with "MacBook Pro" lip — embedded image
   inside an SVG. Aspect 3880×2400 ≈ 1.617:1.)

   USAGE:
     <link rel="stylesheet" href="[path]/assets/css/device-frame-laptop.css">

     <div class="macbookpro macbookpro--md">
       <img class="macbookpro__chrome"
            src="[path]/Global_Assets/DeviceFrame/AppleMacbookPro15.svg"
            alt="" aria-hidden="true">
       <div class="macbookpro__screen">
         <iframe src="..." style="width:100%;height:100%;border:0;"></iframe>
       </div>
     </div>

   SIZE VARIANTS (override --laptop-w to customize):
     .macbookpro--sm  → 480px
     .macbookpro--md  → 640px   (default)
     .macbookpro--lg  → 800px
     .macbookpro--xl  → 960px
     .macbookpro--xxl → 1100px

   SCREEN AREA INSETS (canonical spec — 2026-04-29):
     SVG canvas: 3880 × 2400
     Screen rect: 2880 × 1800 at top-left (500, 300)
     Horizontal inset: 500/3880 = 12.886% left/right
     Vertical inset:   300/2400 = 12.5% top/bottom
     Resulting screen aspect: 2880/1800 = 1.6:1 (16:10)

   RULES:
   - Always use this component for Laptop / MacBook Pro UI mockups.
   - Do NOT reproduce the chrome in CSS gradients/borders; point to the SVG.
   - Do NOT edit this file for project-specific overrides — use size modifiers.
   - The outer page owns the frame; the inner UI screen file is content-only
     when loaded via ?noframe=1 (matches global iPhone/iPad contract).
   ═══════════════════════════════════════════════════════════ */

.macbookpro {
  position: relative;
  aspect-ratio: 3880 / 2400;
  flex-shrink: 0;
  width: var(--laptop-w, 640px);
  max-width: 100%;
  user-select: none;
}

.macbookpro__chrome {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  z-index: 1;
}

.macbookpro__screen {
  position: absolute;
  top: 12.5%;
  left: 12.886%;
  right: 12.886%;
  bottom: 12.5%;
  overflow: hidden;
  z-index: 2;
  background: #ffffff;
  /* Subtle inner shadow to suggest screen depth — barely visible but adds polish */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.04);
  /* Let children use full height */
  display: flex;
  flex-direction: column;
}

.macbookpro__screen iframe,
.macbookpro__screen > * {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── SIZE MODIFIERS ── */
.macbookpro--sm  { --laptop-w: 480px; }
.macbookpro--md  { --laptop-w: 640px; }
.macbookpro--lg  { --laptop-w: 800px; }
.macbookpro--xl  { --laptop-w: 960px; }
.macbookpro--xxl { --laptop-w: 1100px; }

/* ── DARK SCREEN (optional, mirrors iPhone variant) ── */
.macbookpro__screen--dark { background: #0a0a0a; color: #ededed; }

/* ── FADED (for before/after comparisons) ── */
.macbookpro--faded { opacity: 0.5; }
.macbookpro--faded .macbookpro__chrome { filter: grayscale(0.4); }

/* ── Mobile responsive ── */
@media (max-width: 640px) {
  .macbookpro--md,
  .macbookpro--lg,
  .macbookpro--xl,
  .macbookpro--xxl {
    --laptop-w: min(100%, 520px);
  }
}