/* =====================================================================
   MEBRIC · iPhone Mockup Component
   ---------------------------------------------------------------------
   - Pure CSS iPhone 16 Pro style frame (no external assets needed)
   - Video/image fills the screen area
   - Respects --mebric-* tokens defined in site.css
   - Autoplays muted loop for accessibility-safe background motion
   - Gracefully degrades: <video> falls back to <img> poster if blocked
   ===================================================================== */

.mebric-iphone {
  /* Sizing: scale based on container width, keep 9:18.5 ratio */
  --iphone-w: 280px;            /* default size; override inline or via modifier */
  --iphone-radius: calc(var(--iphone-w) * 0.17);
  --iphone-bezel: calc(var(--iphone-w) * 0.035);
  --screen-radius: calc(var(--iphone-radius) - var(--iphone-bezel));

  position: relative;
  width: var(--iphone-w);
  aspect-ratio: 576 / 1110;      /* matches cropped video */
  background: linear-gradient(145deg, #1a1a1c 0%, #0a0a0b 50%, #1a1a1c 100%);
  border-radius: var(--iphone-radius);
  padding: var(--iphone-bezel);
  /* subtle inner highlight on the bezel edge + soft outer shadow */
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.06),
    inset 0 0 0 3px rgba(0,0,0,0.6),
    0 30px 60px -20px rgba(15,27,45,0.35),
    0 12px 24px -8px rgba(15,27,45,0.18);
  isolation: isolate;
}

/* Screen area */
.mebric-iphone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--screen-radius);
  overflow: hidden;
  background: #000;
}

.mebric-iphone__screen video,
.mebric-iphone__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Dynamic Island — overlaps top-center, covers the recording indicator */
.mebric-iphone::before {
  content: "";
  position: absolute;
  top: calc(var(--iphone-bezel) + var(--iphone-w) * 0.035);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--iphone-w) * 0.32);
  height: calc(var(--iphone-w) * 0.09);
  background: #000;
  border-radius: 999px;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Side buttons — subtle notches on the bezel (decorative) */
.mebric-iphone::after {
  content: "";
  position: absolute;
  left: calc(var(--iphone-bezel) * -0.7);
  top: 22%;
  width: calc(var(--iphone-bezel) * 0.8);
  height: 8%;
  background: linear-gradient(90deg, #0a0a0b, #1a1a1c);
  border-radius: 2px 0 0 2px;
  box-shadow:
    0 calc(var(--iphone-w) * 0.08) 0 #0a0a0b,
    0 calc(var(--iphone-w) * 0.17) 0 #0a0a0b;
}

/* Size modifiers */
.mebric-iphone--sm { --iphone-w: 220px; }
.mebric-iphone--md { --iphone-w: 280px; }
.mebric-iphone--lg { --iphone-w: 340px; }
.mebric-iphone--xl { --iphone-w: 400px; }

/* Respond to viewport: shrink on mobile */
@media (max-width: 640px) {
  .mebric-iphone--lg,
  .mebric-iphone--xl { --iphone-w: 260px; }
}

/* Respect reduced-motion preference — pause autoplay */
@media (prefers-reduced-motion: reduce) {
  .mebric-iphone video {
    /* The video element's own controls still work; we hide the moving frames
       by showing the poster instead. */
    display: none;
  }
  .mebric-iphone__screen::after {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--iphone-poster);
    background-size: cover;
    background-position: top center;
  }
}

/* =====================================================================
   Section layout (product row with iPhone mockup + copy)
   ===================================================================== */

.mebric-product-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mebric-product-demo__media {
  display: flex;
  justify-content: center;
}
.mebric-product-demo__copy h2 { margin-bottom: 16px; }
.mebric-product-demo__copy p  { margin-bottom: 12px; }

/* Reverse on even rows */
.mebric-product-demo--reverse .mebric-product-demo__media { order: 2; }

@media (max-width: 880px) {
  .mebric-product-demo {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .mebric-product-demo--reverse .mebric-product-demo__media { order: 0; }
  .mebric-product-demo__copy .mebric-lead { margin-left: auto; margin-right: auto; }
}

/* =====================================================================
   Desktop placeholder — Sidepocket 대기 상태 (Option C 2026-04-17)
   ===================================================================== */
.mebric-desktop-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.mebric-desktop-placeholder__frame {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 10;
  background: #1a1a1c;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 30px 60px -20px rgba(15, 27, 45, 0.35);
  display: flex;
  flex-direction: column;
}
.mebric-desktop-placeholder__bar {
  display: flex;
  gap: 6px;
  padding: 4px 6px 10px;
}
.mebric-desktop-placeholder__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a3a3c;
}
.mebric-desktop-placeholder__screen {
  flex: 1;
  background: linear-gradient(135deg, #2a2a2c 0%, #1a1a1c 100%);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px;
}
.mebric-desktop-placeholder__label {
  color: rgba(249, 246, 240, 0.72);
  font-family: var(--mebric-font-en, 'Space Grotesk', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.7;
}
.mebric-desktop-placeholder__label em {
  font-style: normal;
  opacity: 0.55;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}