/* ═══════════════════════════════════════════════════════════
   iPad Pro 11" Device Frame — Canonical Component
   ═══════════════════════════════════════════════════════════
   CSS-drawn frame (no SVG asset yet). Matches Apple iPad Pro 11" (M4):
   - 834 × 1194 pt native (portrait)
   - Uniform bezel ~15pt on all sides
   - Front TrueDepth camera (pinhole, no notch)
   - Rounded corners ~18pt

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

     <div class="ipad11">
       <div class="ipad11__cam" aria-hidden="true"></div>
       <div class="ipad11__screen">
         <!-- your screen content here -->
       </div>
     </div>

   LANDSCAPE:
     <div class="ipad11 ipad11--landscape"> ... </div>

   SIZE (override via --ipad-w):
     .ipad11--sm → 320px (portrait) / 460px (landscape)
     .ipad11--md → 460px / 660px   (default)
     .ipad11--lg → 600px / 860px
     .ipad11--xl → 720px / 1040px

   RULES:
   - Use this component for all iPad mockups across the site.
   - Do NOT reinvent the frame — extend with modifiers only.
   ═══════════════════════════════════════════════════════════ */

.ipad11 {
  position: relative;
  aspect-ratio: 834 / 1194;
  flex-shrink: 0;
  width: var(--ipad-w, 460px);
  background: linear-gradient(145deg, #2d2d2f, #1a1a1c);
  border-radius: 30px;
  padding: 14px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.08),
    0 12px 32px rgba(0,0,0,0.12),
    0 32px 64px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  user-select: none;
}

/* Power button — top edge right-of-center */
.ipad11::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 72px;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #3a3a3c, #2a2a2c);
  border-radius: 2px 2px 0 0;
}

/* Volume buttons — right edge upper */
.ipad11::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 90px;
  width: 3px;
  height: 60px;
  background: linear-gradient(to bottom, #3a3a3c, #2a2a2c);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 72px 0 #2a2a2c;
}

.ipad11__screen {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Front camera (pinhole, top-center) */
.ipad11__cam {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: #0a0a0a;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  z-index: 3;
}

/* ── LANDSCAPE ── */
.ipad11--landscape {
  aspect-ratio: 1194 / 834;
  width: var(--ipad-w, 660px);
}
.ipad11--landscape::before {
  top: 72px;
  right: -2px;
  width: 3px;
  height: 60px;
  background: linear-gradient(to bottom, #3a3a3c, #2a2a2c);
  border-radius: 0 2px 2px 0;
}
.ipad11--landscape::after {
  top: auto;
  right: auto;
  bottom: -2px;
  left: 90px;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, #3a3a3c, #2a2a2c);
  border-radius: 0 0 2px 2px;
  box-shadow: 72px 0 0 #2a2a2c;
}
.ipad11--landscape .ipad11__cam {
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
}

/* ── SIZES ── */
.ipad11--sm { --ipad-w: 320px; }
.ipad11--md { --ipad-w: 460px; }
.ipad11--lg { --ipad-w: 600px; }
.ipad11--xl { --ipad-w: 720px; }

.ipad11--landscape.ipad11--sm { --ipad-w: 460px; }
.ipad11--landscape.ipad11--md { --ipad-w: 660px; }
.ipad11--landscape.ipad11--lg { --ipad-w: 860px; }
.ipad11--landscape.ipad11--xl { --ipad-w: 1040px; }

/* ── MOBILE: cap iPad frame to viewport ── */
@media (max-width: 768px) {
  .ipad11--md, .ipad11--lg, .ipad11--xl,
  .ipad11--landscape.ipad11--md,
  .ipad11--landscape.ipad11--lg,
  .ipad11--landscape.ipad11--xl {
    --ipad-w: min(460px, calc(100vw - 40px));
  }
}
@media (max-width: 480px) {
  .ipad11--sm, .ipad11--md, .ipad11--lg, .ipad11--xl,
  .ipad11--landscape.ipad11--sm,
  .ipad11--landscape.ipad11--md,
  .ipad11--landscape.ipad11--lg,
  .ipad11--landscape.ipad11--xl {
    --ipad-w: calc(100vw - 32px);
  }
}

/* ── MODIFIERS ── */
.ipad11__screen--dark { background: #0a0a0a; color: #ededed; }
.ipad11--faded { opacity: 0.5; }
.ipad11--faded::before, .ipad11--faded::after { opacity: 0.3; }