/* Device frames, examples page (DESIGN.md: Subpages > Examples).
   A flat, front-on drawing: a laptop and a phone in ink, side by side on one baseline.
   Static: no motion, no JS. Each device is a size container, so the bezels, corners,
   camera, pill and notch keep their proportions at any width.
   Colours: --ink (bodies), --night-rule (camera, pill, notch, hinge line: one step up
   from ink), --white (behind the screenshots). No new colours. */

.device-pair {
  display: grid;
  /* The phone is 30% of the laptop's width, which also makes its top line up with the lid's. */
  grid-template-columns: minmax(0, 100fr) minmax(0, 30.13fr);
  align-items: end; /* one shared baseline */
  align-content: start;
  align-self: start;
  gap: var(--space-l);
  max-width: 56rem;
}
.device-laptop,
.device-phone { display: block; container-type: inline-size; }

/* Laptop: lid (bezel, camera, 16:10 screen) on a thin base that is a little wider */
.device-laptop__lid {
  display: block;
  position: relative;
  width: 92cqi;
  margin-inline: auto;
  padding: 3.4cqi 2.4cqi 3cqi;
  border-radius: 2cqi 2cqi 0 0;
  background: var(--ink);
}
.device-laptop__lid::before, /* camera */
.device-phone__body::before, /* pill */
.device-laptop__base::after { /* notch */
  content: "";
  position: absolute;
  left: 50%;
  background: var(--night-rule);
  transform: translateX(-50%);
}
.device-laptop__lid::before {
  top: 1.3cqi;
  width: max(2px, .8cqi);
  aspect-ratio: 1;
  border-radius: 50%;
}
.device-laptop__base {
  display: block;
  position: relative;
  height: max(4px, 2.8cqi);
  border-radius: 0 0 2.4cqi 2.4cqi / 0 0 1.8cqi 1.8cqi;
  background: var(--ink);
  box-shadow: inset 0 1px var(--night-rule); /* the hinge, as a hairline */
}
.device-laptop__base::after {
  top: 0;
  width: 12cqi;
  height: 45%;
  border-radius: 0 0 1cqi 1cqi;
}

/* Phone: rounded body, thin bezel, a pill in the top bezel (it never covers the screenshot) */
.device-phone__body {
  display: block;
  position: relative;
  padding: 7.6cqi 3.8cqi 3.8cqi;
  border-radius: 14cqi;
  background: var(--ink);
}
.device-phone__body::before {
  top: 2cqi;
  width: 22cqi;
  height: 3.6cqi;
  border-radius: 2cqi;
}

/* Screens: the box sets the size (no layout shift); the capture fills it from the top. */
.device-screen {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--white);
}
.device-laptop .device-screen { aspect-ratio: 16 / 10; }
.device-phone .device-screen { aspect-ratio: 780 / 1688; border-radius: 10cqi; }
.device-pair .device-screen picture { display: block; } /* outranks the old phone rule in site.css */
.device-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 0;
  box-shadow: none;
}

/* Phones: still side by side, but the phone comes first and larger so its screen stays readable. */
@media (max-width: 640px) {
  .device-pair { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: var(--space-s); }
  .device-phone { order: -1; }
}