/* Realistic device mockups (phone, tablet, smart display).
   Every measure is in cqw (% of the device's own width), so bezels,
   corner radii and the camera stay true to scale at any size.

   Markup:
   <div class="device device--phone">            (outer: sizing + container)
     <div class="device-body">                   (frame + bezel)
       <span class="device-cam"></span>          (island / camera dot, optional)
       <img ...>                                 (screen)
     </div>
   </div>                                                                      */

.device {
  container-type: inline-size;
  /* reset the old flat frames (.device-phone/.device-tablet/.device-display) */
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.device-body { position: relative; }
.device-body img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }

/* ---------- Phone (modern, titanium frame, Dynamic Island) ---------- */
.device--phone .device-body {
  padding: 3.4cqw;
  border-radius: 16.5cqw;
  background: #0b0b0c;
  /* titanium edge: thin metallic ring + soft outer shadow */
  box-shadow:
    0 0 0 0.9cqw #3d3a36,
    0 0 0 1.25cqw #6f6a63,
    0 0 0 1.45cqw #2a2826,
    0 4cqw 9cqw -2cqw rgba(20, 16, 12, 0.45),
    0 1.2cqw 2.4cqw rgba(20, 16, 12, 0.25);
}
.device--phone .device-screen {
  border-radius: 13.1cqw;
  overflow: hidden;
  background: var(--screen-bg, #f1e7d6);
}
/* iOS-style status bar with the Dynamic Island (the screenshots have none) */
.device--phone .device-status {
  position: relative;
  height: 13cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5cqw 9.5cqw 0;
  font: 600 4.1cqw/1 var(--font-body, "Inter", sans-serif);
  color: var(--screen-fg, #1b1712);
  letter-spacing: -0.01em;
}
.device--phone .device-cam {
  position: absolute;
  top: 3.2cqw;
  left: 50%;
  width: 28cqw;
  height: 8cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #050505;
}
.device--phone .device-battery {
  position: relative;
  width: 7.2cqw;
  height: 3.4cqw;
  border: 0.45cqw solid currentColor;
  border-radius: 1cqw;
  opacity: 0.9;
}
.device--phone .device-battery::before {
  content: "";
  position: absolute;
  inset: 0.45cqw;
  width: 70%;
  border-radius: 0.4cqw;
  background: currentColor;
}
.device--phone .device-battery::after {
  content: "";
  position: absolute;
  right: -1.3cqw;
  top: 50%;
  width: 0.7cqw;
  height: 1.4cqw;
  transform: translateY(-50%);
  border-radius: 0 0.4cqw 0.4cqw 0;
  background: currentColor;
}
/* side buttons */
.device--phone .device-body::before,
.device--phone .device-body::after {
  content: "";
  position: absolute;
  width: 1.1cqw;
  border-radius: 0.6cqw;
  background: linear-gradient(90deg, #5a5650, #8b857c);
}
.device--phone .device-body::before { left: -2.4cqw; top: 22cqw; height: 13cqw; }
.device--phone .device-body::after { right: -2.4cqw; top: 30cqw; height: 20cqw; }

/* ---------- Tablet (thin even bezel, landscape) ---------- */
.device--tablet .device-body {
  padding: 2.4cqw;
  border-radius: 3.6cqw;
  background: #0c0c0d;
  box-shadow:
    0 0 0 0.35cqw #4a4741,
    0 0 0 0.55cqw #75706a,
    0 0 0 0.65cqw #2b2926,
    0 3cqw 6cqw -1.5cqw rgba(20, 16, 12, 0.42),
    0 0.8cqw 1.6cqw rgba(20, 16, 12, 0.22);
}
.device--tablet .device-body img { border-radius: 1.4cqw; }
.device--tablet .device-cam {
  position: absolute;
  z-index: 2;
  top: 0.95cqw;
  left: 50%;
  width: 0.55cqw;
  height: 0.55cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #1f2a33;
  box-shadow: 0 0 0 0.15cqw #2b2b2e;
}

/* ---------- Smart display (Nest Hub style: light bezel, fabric base) ---------- */
.device--display { padding-bottom: 6% !important; } /* % = of the figure width; cqw would resolve against the viewport here */
.device--display .device-body {
  padding: 4.2cqw 4.2cqw 4.6cqw;
  border-radius: 3.2cqw;
  background: linear-gradient(180deg, #f4f2ee, #e7e4de);
  box-shadow:
    0 0 0 0.25cqw #d6d2ca,
    0 2.5cqw 5cqw -1.5cqw rgba(20, 16, 12, 0.35),
    0 0.6cqw 1.2cqw rgba(20, 16, 12, 0.15);
  z-index: 2;
}
.device--display .device-body img { border-radius: 0.8cqw; }
.device--display .device-cam {
  /* ambient light sensor above the screen */
  position: absolute;
  z-index: 2;
  top: 1.9cqw;
  left: 50%;
  width: 0.7cqw;
  height: 0.7cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #bdb8af;
}
/* fabric speaker base behind the lower edge */
.device--display::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56cqw;
  height: 20cqw;
  transform: translateX(-50%);
  border-radius: 3cqw 3cqw 7cqw 7cqw;
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.08) 0.6px, transparent 0.8px) 0 0 / 3px 3px,
    linear-gradient(180deg, #d9d5cd, #c9c4ba);
  box-shadow: 0 2cqw 3.5cqw -1cqw rgba(20, 16, 12, 0.4);
  z-index: 0;
}
.device--display { position: relative; }
.device--display .device-body { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  .zoom .device-body { transition: transform 0.25s ease; }
  .zoom:hover .device-body { transform: translateY(-3px); }
}

/* Enlarged view (lightbox) of a device mockup */
.lightbox-device { display: flex; justify-content: center; }
.lightbox-device[hidden] { display: none; }
.lightbox-device .device { margin: 0 auto; }
.lightbox-device .device img { max-width: none; max-height: none; width: 100%; box-shadow: none; }
.lightbox .lightbox-device + img[hidden] { display: none; }