/* ═══════════════════════════════════════════════════════════
   iPhone 15 Pro Device Frame — Canonical Component
   ═══════════════════════════════════════════════════════════
   Global source of truth: /Global_Assets/DeviceFrame/IPhone_15_Pro_Vector.svg
   (Stainless steel gradient bezel, side buttons, Dynamic Island — rendered as vector.)

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

     <div class="iphone15pro iphone15pro--md">
       <img class="iphone15pro__chrome"
            src="[path]/Global_Assets/DeviceFrame/IPhone_15_Pro_Vector.svg"
            alt="" aria-hidden="true">
       <div class="iphone15pro__screen">
         <!-- your screen content here -->
       </div>
       <div class="iphone15pro__island" aria-hidden="true"></div>
     </div>

   SIZE VARIANTS (override --iphone-w to customize):
     .iphone15pro--xs  → 160px
     .iphone15pro--sm  → 200px
     .iphone15pro--md  → 260px   (default)
     .iphone15pro--lg  → 320px
     .iphone15pro--xl  → 380px

   SCREEN AREA INSETS (derived from SVG viewBox):
     Horizontal: 4.37% left/right
     Vertical:   1.97% top/bottom
     Screen corner radius: ~13.1% of width / 6.4% of height
     Dynamic Island: top 3.1%, left 35.6%, w 28.9%, h 4.2%

   RULES:
   - Always use this component for iPhone 15 Pro mockups across the site.
   - Do NOT reproduce the frame in CSS gradients/borders; point to the SVG.
   - Do NOT edit this file to add project-specific overrides — use size modifiers.
   ═══════════════════════════════════════════════════════════ */

.iphone15pro {
  position: relative;
  aspect-ratio: 356 / 730;
  flex-shrink: 0;
  width: var(--iphone-w, 260px);
  user-select: none;
}

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

.iphone15pro__screen {
  position: absolute;
  top: 1.97%;
  left: 4.37%;
  right: 4.37%;
  bottom: 1.97%;
  border-radius: 13.1% / 6.4%;
  overflow: hidden;
  z-index: 2;
  background: #ffffff;
  /* Let children use full height */
  display: flex;
  flex-direction: column;
}

.iphone15pro__island {
  position: absolute;
  top: 3.1%;
  left: 35.6%;
  width: 28.9%;
  height: 4.2%;
  background: #000000;
  border-radius: 1000px;
  z-index: 3;
  pointer-events: none;
}

/* ── SIZE MODIFIERS ── */
.iphone15pro--xs { --iphone-w: 160px; }
.iphone15pro--sm { --iphone-w: 200px; }
.iphone15pro--md { --iphone-w: 260px; }
.iphone15pro--lg { --iphone-w: 320px; }
.iphone15pro--xl { --iphone-w: 380px; }

/* ── MOBILE: prevent overflow on phone-width viewports ──
   At ≤768px, large size variants would clip the surrounding layout.
   Cap to viewport width minus 40px (20px padding each side). */
@media (max-width: 768px) {
  .iphone15pro--lg,
  .iphone15pro--xl { --iphone-w: min(320px, calc(100vw - 40px)); }
  .iphone15pro--md { --iphone-w: min(260px, calc(100vw - 40px)); }
}
@media (max-width: 480px) {
  .iphone15pro--lg,
  .iphone15pro--xl { --iphone-w: calc(100vw - 32px); }
  .iphone15pro--md { --iphone-w: min(240px, calc(100vw - 32px)); }
  .iphone15pro--sm { --iphone-w: min(180px, calc(100vw - 48px)); }
}

/* ── DARK SCREEN (optional, for emergency/night states) ── */
.iphone15pro__screen--dark { background: #0a0a0a; color: #ededed; }

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