/* =============================================================
   device-frames.css — Shared Device Embed System
   =============================================================
   Usage: iframe embeds of UI screens that have their own device
   frames built-in (Dynamic Island, side buttons, etc.)

   The UI screen files (e.g. ui-screens/p3/p3-01-browse.html)
   contain their own .phone-frame with iPhone 15 Pro styling.

   When embedding them in slides, do NOT wrap in another frame.
   Instead, use .device-embed to size and position the iframe.

   <div class="device-embed device-embed--phone">
     <iframe src="../../ui-screens/p3/p3-01-browse.html"></iframe>
   </div>

   For TV screens:
   <div class="device-embed device-embed--tv">
     <iframe src="../../ui-screens/p3/p3-03-tv-cast.html"></iframe>
   </div>
   ============================================================= */

/* --- Base embed container --- */
.device-embed {
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.device-embed iframe {
  border: none;
  display: block;
}

/* --- iPhone 15 Pro (390×844 native) --- */
/* Default: fits nicely in a slide at ~400px wide */
.device-embed--phone {
  width: 400px;
  height: calc(400px * 844 / 390);
  border-radius: 0;
  overflow: visible;
}
.device-embed--phone iframe {
  width: 390px;
  height: 844px;
  transform-origin: top left;
  transform: scale(calc(400 / 390));
}

/* Large variant for phone-context layout (~50% of slide) */
.device-embed--phone-lg {
  width: 440px;
  height: calc(440px * 844 / 390);
  overflow: visible;
}
.device-embed--phone-lg iframe {
  width: 390px;
  height: 844px;
  transform-origin: top left;
  transform: scale(calc(440 / 390));
}

/* Small variant for side-by-side or secondary display */
.device-embed--phone-sm {
  width: 260px;
  height: calc(260px * 844 / 390);
  overflow: visible;
}
.device-embed--phone-sm iframe {
  width: 390px;
  height: 844px;
  transform-origin: top left;
  transform: scale(calc(260 / 390));
}

/* Faded variant (for before→after comparisons) */
.device-embed--faded {
  opacity: 0.4;
  transform: scale(0.9);
}

/* --- Dual phone: two devices side by side with arrow --- */
.device-dual {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}
.device-dual-arrow {
  font-size: 32px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* --- TV / Large screen (e.g. 1400×700 native) --- */
.device-embed--tv {
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1c;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.3),
    0 0 0 1px rgba(240,236,228,0.06);
  margin: 0 auto;
}
.device-embed--tv iframe {
  width: 1400px;
  height: 700px;
  transform-origin: top left;
  /* Scale to fit container: 1100/1400 ≈ 0.786 */
  transform: scale(0.786);
}


/* =============================================================
   MOBILE RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
  .device-embed--phone {
    width: 280px;
    height: calc(280px * 844 / 390);
  }
  .device-embed--phone iframe {
    transform: scale(calc(280 / 390));
  }

  .device-embed--phone-lg {
    width: 300px;
    height: calc(300px * 844 / 390);
  }
  .device-embed--phone-lg iframe {
    transform: scale(calc(300 / 390));
  }

  .device-embed--phone-sm {
    width: 180px;
    height: calc(180px * 844 / 390);
  }
  .device-embed--phone-sm iframe {
    transform: scale(calc(180 / 390));
  }

  .device-dual {
    gap: 12px;
  }

  .device-embed--tv {
    max-width: 100%;
  }
  .device-embed--tv iframe {
    width: 100%;
    height: 100%;
    transform: none;
  }
}

@media (max-width: 480px) {
  .device-embed--phone {
    width: 220px;
    height: calc(220px * 844 / 390);
  }
  .device-embed--phone iframe {
    transform: scale(calc(220 / 390));
  }

  .device-embed--phone-lg {
    width: 240px;
    height: calc(240px * 844 / 390);
  }
  .device-embed--phone-lg iframe {
    transform: scale(calc(240 / 390));
  }

  .device-embed--phone-sm {
    width: 160px;
    height: calc(160px * 844 / 390);
  }
  .device-embed--phone-sm iframe {
    transform: scale(calc(160 / 390));
  }
}