/* Narto · the examples on the home page (tools/partials/examples.html) and the example sections on /eksempler, and
   the device frames both use. Built 17 October 2026 after LocalBooked.co's home examples; third round the same day:
   every example stands in a frame, so it reads as a preview and not as the page you are on (DESIGN.md, Tredje runde).
   Home: on ink, three cards side by side from 900px, each a laptop with the desktop screenshot; below 900px one card
   at a time (a deck, moved only by the visitor, examples.js), each a phone with the phone screenshot, sized so the
   frame and the firm's name fit on one screen. The whole card is the link. No scores here; they are on /eksempler.
   The old .shots/.shot/.proof-* rules in site.css are no longer used on the home page. */

/* ---------- Device frames (home and /eksempler) ---------- */
/* A flat, front-on drawing in ink: a laptop (bezel, camera, 16:10 screen, a thin base a little wider) and a phone in
   the style of the phone drawings (phones.css .dp: 9:19, rounded, side keys, a camera cut-out and a home indicator).
   Static: no motion, no JS. Each device is a size container, so every part keeps its proportions at any width.
   Colours: --ink (bodies, cut-out), --night-rule (camera, hinge, notch), --white (behind the screenshots). On ink the
   body turns --night-rule and its details ink, so the frame still shows. No new colours. */
.device-laptop,
.device-phone {
  --device-body: var(--ink);
  --device-detail: var(--night-rule);
  display: block;
  container-type: inline-size;
}
.night .device-laptop,
.night .device-phone { --device-body: var(--night-rule); --device-detail: var(--ink); }

/* Laptop */
.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(--device-body);
}
.device-laptop__lid::before, /* camera */
.device-laptop__base::after { /* notch */
  content: "";
  position: absolute;
  left: 50%;
  background: var(--device-detail);
  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(--device-body);
  box-shadow: inset 0 1px var(--device-detail); /* the hinge, as a hairline */
}
.device-laptop__base::after {
  top: 0;
  width: 12cqi;
  height: 45%;
  border-radius: 0 0 1cqi 1cqi;
}

/* Phone: exactly 9:19, the screen placed inside it (inset, never height: 100%, as in phones.css). The top of the
   screen is a plain status strip holding the camera cut-out, so the cut-out never covers the screenshot. */
.device-phone__body {
  display: block;
  position: relative;
  aspect-ratio: 9 / 19;
  border-radius: 14.6cqi;
  background: var(--device-body);
}
.device-phone__body::before, .device-phone__body::after { /* the side keys */
  content: "";
  position: absolute;
  width: max(1px, .7cqi);
  background: var(--device-body);
}
.device-phone__body::before { left: min(-1px, -.7cqi); top: 19%; height: 10%; border-radius: 1px 0 0 1px; }
.device-phone__body::after { right: min(-1px, -.7cqi); top: 24%; height: 13%; border-radius: 0 1px 1px 0; }

/* 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-screen picture { display: block; }
.device-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 0;
  box-shadow: none;
}
.device-laptop .device-screen { aspect-ratio: 16 / 10; }
.device-phone .device-screen {
  position: absolute;
  inset: 2.4cqi;
  border-radius: 12.2cqi;
  clip-path: inset(0 round 12.2cqi);
}
.device-phone .device-screen img { top: 13cqi; height: calc(100% - 13cqi); }
.device-phone .device-screen::before, /* the camera cut-out */
.device-phone .device-screen::after { /* the home indicator */
  content: "";
  position: absolute;
  z-index: 1;
  background: var(--ink);
}
.device-phone .device-screen::before {
  top: 3cqi;
  left: 50%;
  width: 26cqi;
  height: 7.4cqi;
  margin-left: -13cqi;
  border-radius: 4cqi;
}
.device-phone .device-screen::after {
  bottom: 2cqi;
  left: 33%;
  width: 34%;
  height: max(2px, 1.3cqi);
  border-radius: 1cqi;
}

/* /eksempler: the laptop and the phone side by side on one baseline. The phone is 30% of the laptop's width, which
   also makes its top line up with the lid's. On phones the phone comes first and larger, so its screen stays
   readable. */
.device-pair {
  display: grid;
  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;
}
@media (max-width: 640px) {
  .device-pair { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: var(--space-s); }
  .device-pair .device-phone { order: -1; }
}

/* ---------- Home: the section ---------- */
.examples { padding: calc(var(--section-pad) * .75) 0; }
.examples__head { max-width: 40rem; margin-bottom: var(--space-l); }
.examples__head .section__title { margin-bottom: var(--space-s); }
.examples__head .section__lead { margin: 0; }
.examples__end { margin-top: var(--space-xl); }
@media (max-width: 640px) { .examples__end .btn { width: 100%; } } /* phones: the button full width */

/* ---------- The cards ---------- */
.ex-cards { display: grid; gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ex-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex-card { position: relative; display: flex; flex-direction: column; gap: var(--space-s); }
.ex-card__text { display: grid; align-content: start; gap: .25rem; }
/* The name is the link; its ::after stretches over the whole card, so the card is one click target. */
.ex-card__link { color: var(--night-text); text-decoration: none; }
.ex-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.ex-card__link:focus-visible { outline: none; }
.ex-card__link:focus-visible::after { outline: 2px solid var(--night-text); outline-offset: .5rem; }
.ex-card__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  font-weight: 700;
  line-height: 1;
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.ex-card:hover .ex-card__name { text-decoration-color: currentColor; }
.ex-card__meta { margin: 0; color: var(--night-muted); }

/* The frame sits on top of the card: a laptop from 900px, a phone below (only the one shown is loaded, the other is
   display: none and lazy). The phone is as tall as min(55% of the screen, 26rem), so on a 375 x 667 phone the frame,
   the name and its line are all on screen at once. */
.ex-card__media { order: -1; display: block; }
.ex-card .device-phone { display: none; }
@media (max-width: 899px) {
  .ex-card { align-items: center; text-align: center; }
  .ex-card .device-laptop { display: none; }
  .ex-card .device-phone {
    display: block;
    width: calc(min(55vh, 26rem) * 9 / 19);
    width: calc(min(55svh, 26rem) * 9 / 19);
  }
}

/* ---------- The deck (examples.js): one card at a time below 900px ---------- */
/* All cards share one cell (so the height never jumps); only the current one is visible. No fades: the swap is
   instant and the new one slides a short way in. pan-y: a sideways swipe is the deck's, up and down scrolls. */
.is-deck { display: grid; overflow-x: hidden; overflow-x: clip; touch-action: pan-y; }
.is-deck > * { grid-area: 1 / 1; visibility: hidden; }
.is-deck > .is-active { visibility: visible; }
/* The controls: previous, the dots, next. 44px targets, rings in night-muted on ink. */
.deck-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); margin-top: var(--space-m); }
.deck-nav[hidden] { display: none; }
@media (min-width: 900px) { .deck-nav { display: none; } }
.deck-dots { display: flex; justify-content: center; }
.deck-step {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--night-text);
  box-shadow: inset 0 0 0 1.5px var(--night-muted);
  cursor: pointer;
}
.deck-step:active { background: var(--night-text); color: var(--ink); box-shadow: none; }
@media (hover: hover) { .deck-step:hover { background: var(--night-text); color: var(--ink); box-shadow: none; } }
.deck-dot { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.deck-dot::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--night-muted); }
.deck-dot[aria-pressed="true"]::before { background: var(--night-text); box-shadow: none; }
.deck-dot:focus-visible { outline-offset: -6px; }

/* ---------- /eksempler: one section per example (concrete, green, white), as on LocalBooked ---------- */
/* site.css gives .demo its own padding and top rule for the old single list; here each section brings the space. */
.demo-band .demo { padding: 0; border-top: 0; }
.demo-band .demo__list { margin: 0 0 var(--space-l); border-top: 0; } /* .checks (components.css) would zero it */
@media (min-width: 1000px) { .demo-band .demo__list { margin-top: var(--space-l); } }
.demo-band .demo__list li { padding-block: 0; border-bottom: 0; } /* the tick list (.checks) keeps its own left space */
@media (max-width: 640px) { .demo__act .btn { width: 100%; } } /* phones: the button full width */
/* On green: all text in ink (graphite is too weak there), and pointing at the devices turns the ink button white. */
.section--accent .demo__meta,
.section--accent .demo__scores,
.section--accent .proof-note { color: var(--ink); }
.section--accent .demo:has(.demo__shots:hover) .demo__act .btn { background: var(--white); color: var(--ink); }
/* The measured scores sit under the list, quietly; the key closes the last example's section. */
.demo__scores { margin: 0; }
.proof-explain--page .proof-note { margin: 0 0 var(--space-m); }