/* ==========================================================================
   Device mockups (src/lib/device.mjs)
   Each device sizes its bezel from its own width (container query units),
   so the same frame works as a small card cover or a full-width figure.
   ========================================================================== */

.device { container-type: inline-size; position: relative; width: 100%; }
.device__screen { position: relative; overflow: hidden; background: #fff; }
.device__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.device__screen img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  transition: object-position 3.2s var(--ease);
}

/* Tall screens scroll to the bottom on hover, and drift on their own on touch screens */
@media (hover: hover) {
  .device--tall:hover .device__screen img { object-position: 50% 100%; transition-duration: 4.5s; }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .device--tall .device__screen img { animation: device-scroll 12s ease-in-out 1.5s infinite; }
}
@keyframes device-scroll {
  0%, 18% { object-position: 50% 0; }
  50%, 68% { object-position: 50% 100%; }
  100% { object-position: 50% 0; }
}

/* Phone */
.device--phone .device__body {
  position: relative; background: #141316; padding: 3.6cqw;
  border-radius: 15cqw;
  box-shadow: 0 0 0 0.6cqw #3a3840 inset, 0 30px 60px -30px rgba(20, 19, 22, 0.55);
}
.device--phone .device__screen { aspect-ratio: 375 / 812; border-radius: 11.5cqw; }
.device--phone .device__button {
  position: absolute; right: -0.9cqw; top: 26%; width: 1cqw; height: 13%;
  background: #2b2a2f; border-radius: 0 1cqw 1cqw 0;
}

/* Laptop */
.device--laptop .device__lid {
  position: relative; margin: 0 7%; padding: 2.4cqw 2.4cqw 3cqw;
  background: #141316; border-radius: 2.6cqw 2.6cqw 0 0;
  box-shadow: 0 0 0 0.25cqw #3a3840 inset;
}
.device--laptop .device__lid::before {
  content: ''; position: absolute; top: 0.95cqw; left: 50%; width: 0.6cqw; height: 0.6cqw;
  translate: -50% 0; border-radius: 50%; background: #34333a;
}
.device--laptop .device__screen { aspect-ratio: 16 / 10; border-radius: 0.4cqw; }
.device--laptop .device__base {
  position: relative; height: 2.6cqw;
  background: linear-gradient(#e4e1db, #b9b5ae 70%, #8f8b85);
  border-radius: 0.4cqw 0.4cqw 2.6cqw 2.6cqw / 0.4cqw 0.4cqw 2cqw 2cqw;
  box-shadow: 0 26px 40px -24px rgba(20, 19, 22, 0.55);
}
.device--laptop .device__base::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 15%; height: 45%;
  translate: -50% 0; background: #a19d97; border-radius: 0 0 1.4cqw 1.4cqw;
}

/* Browser window */
.device--desktop .device__window {
  overflow: hidden; border-radius: 1.6cqw; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -32px rgba(20, 19, 22, 0.45);
}
.device--desktop .device__bar { display: flex; gap: 0.8cqw; padding: 1.3cqw 1.6cqw; background: var(--sunken); }
.device--desktop .device__bar i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #d8d3ca; }
.device--desktop .device__bar i:first-child { background: var(--coral); }
.device--desktop .device__screen { aspect-ratio: 16 / 10; }

/* ---------------------------------------------------------------- Stages */

.device-stage__set { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0.75rem, 2.5vw, 1.75rem); }
.device-stage--single .device--phone { width: min(300px, 70%); }
.device-stage--row .device--phone { flex: 1 1 0; max-width: 240px; }
.device-stage--row .device:not(.device--phone) { flex: 1 1 0; }

/* A laptop or window with a phone tucked in front of it */
.device-stage--combo .device-stage__set { gap: 0; padding-right: 4%; }
.device-stage--combo .device:not(.device--phone) { flex: 0 1 82%; }
.device-stage--combo .device--phone { flex: 0 0 21%; margin-left: -12%; margin-bottom: -3%; z-index: 1; }

/* In a case study body: a soft accent panel the devices sit on */
.prose-devices {
  margin: 2.5rem 0; padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem);
  background: var(--accent-soft); border-radius: var(--radius);
}
@media (min-width: 1000px) { .prose-devices { margin-right: -160px; } }
.prose-devices.device-stage--combo { padding-bottom: clamp(2rem, 6vw, 4rem); }
.device-stage__caption { font-size: var(--step--1); color: var(--ink-2); margin: 1.75rem 0 -0.5rem; text-align: center; }
@media (max-width: 560px) {
  .prose-devices.device-stage--row .device-stage__set { flex-wrap: wrap; }
  .prose-devices.device-stage--row .device--phone { flex: 0 0 calc(50% - 0.5rem); }
}

/* As a cover or hero image */
.media--devices { display: grid; place-items: center; }
.media--devices .device-stage { width: 84%; }
.media--devices .device-stage--combo .device-stage__set { padding-right: 6%; }
.card .media--devices .device { pointer-events: none; }
.card:hover .media--devices .device--laptop { transform: translateY(-2px); }