/* ═══════════════════════════════════════════════════════════
   iPad Kids Device Frame — Canonical Component
   ═══════════════════════════════════════════════════════════
   Global source of truth: /Global_Assets/DeviceFrame/ipad-kids.svg
   (Mint-green grip case, coral inner edge, yellow handle/stand —
   designed for the 9-year-old user, Maya, in the Stern family case.)

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

     <div class="ipad-kids ipad-kids--md">
       <img class="ipad-kids__chrome"
            src="[path]/Global_Assets/DeviceFrame/ipad-kids.svg"
            alt="" aria-hidden="true">
       <div class="ipad-kids__screen">
         <!-- screen content -->
       </div>
     </div>

   SIZE VARIANTS (override --ipadk-w to customize):
     .ipad-kids--sm  → 320px
     .ipad-kids--md  → 480px   (default)
     .ipad-kids--lg  → 640px
     .ipad-kids--xl  → 800px

   SCREEN AREA (derived from SVG viewBox 1877 × 1497):
     Position:  X=211px  Y=194px  → 11.24% / 12.96%
     Size:      W=1456px H=1108px → 77.57% / 74.02%
     Corner radius: 28px on a 1497-tall frame → 1.87% (height-relative)

   RULES:
   - Always use this component for Maya / kid-iPad mockups.
   - Do NOT reproduce frame in CSS gradients — point to the SVG.
   - Outer page owns the frame; inner UI file is content-only via ?noframe=1
     (per Global_Assets/DEVICE_FRAME_STANDARD.md).
   ═══════════════════════════════════════════════════════════ */

.ipad-kids {
  position: relative;
  aspect-ratio: 1877 / 1497;
  flex-shrink: 0;
  width: var(--ipadk-w, 480px);
  user-select: none;
}

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

.ipad-kids__screen {
  position: absolute;
  top: 12.96%;
  left: 11.24%;
  width: 77.57%;
  height: 74.02%;
  border-radius: 1.87%;
  overflow: hidden;
  z-index: 2;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.ipad-kids__screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

/* ── SIZE MODIFIERS ── */
.ipad-kids--sm { --ipadk-w: 320px; }
.ipad-kids--md { --ipadk-w: 480px; }
.ipad-kids--lg { --ipadk-w: 640px; }
.ipad-kids--xl { --ipadk-w: 800px; }

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

/* ── FADED (for before/after / on-shelf states) ── */
.ipad-kids--faded { opacity: 0.55; }
.ipad-kids--faded .ipad-kids__chrome { filter: grayscale(0.4); }

/* ── PAIRED LAYOUT (Maya's iPad + Eli's iPhone side-by-side) ──
   Used when story shows both sibling views simultaneously. */
.kids-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.kids-pair > .ipad-kids { flex: 0 0 auto; }
.kids-pair > .iphone15pro { flex: 0 0 auto; }

@media (max-width: 768px) {
  .kids-pair { flex-direction: column; gap: 20px; }
  .ipad-kids--md { --ipadk-w: 320px; }
  .ipad-kids--lg { --ipadk-w: 420px; }
}